Add square mask for workspace image upload

src/components/AvatarCropModal/AvatarCropModal.js

@@ -50,6 +50,9 @@ const propTypes = {
     /** Modal visibility */
     isVisible: PropTypes.bool.isRequired,
 
+    /** Image crop vector mask */
+    maskImage: PropTypes.func,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -60,6 +63,7 @@ const defaultProps = {
     imageType: '',
     onClose: () => {},
     onSave: () => {},
+    maskImage: undefined,
 };
 
 // This component can't be written using class since reanimated API uses hooks.
@@ -339,6 +343,7 @@ const AvatarCropModal = (props) => {
                                 translateY={translateY}
                                 translateX={translateX}
                                 rotation={rotation}
+                                maskImage={props.maskImage}
                             />
                             <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
                                 <Icon src={Expensicons.Zoom} fill={themeColors.icons} />

src/components/AvatarCropModal/ImageCropView.js

@@ -37,12 +37,16 @@ const propTypes = {
 
     /** React-native-reanimated lib handler which executes when the user is panning image */
     panGestureEventHandler: gestureHandlerPropTypes,
+
+    /** Image crop vector mask */
+    maskImage: PropTypes.func,
 };
 
 const defaultProps = {
     imageUri: '',
     containerSize: 0,
     panGestureEventHandler: () => {},
+    maskImage: Expensicons.CircleCropMask,
 };
 
 const ImageCropView = (props) => {
@@ -71,7 +75,7 @@ const ImageCropView = (props) => {
             <Animated.View ref={ControlSelection.blockElement} style={[containerStyle, styles.imageCropContainer]}>
                 <Animated.Image style={[imageStyle, styles.h100, styles.w100]} source={{uri: props.imageUri}} resizeMode="contain" />
                 <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
-                    <Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />
+                    <Icon src={props.maskImage} width={props.containerSize} height={props.containerSize} />
                 </View>
             </Animated.View>
         </PanGestureHandler>

src/components/AvatarWithImagePicker.js

@@ -60,6 +60,9 @@ const propTypes = {
     /** Denotes whether it is an avatar or a workspace avatar */
     type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]),
 
+    /** Image crop vector mask */
+    editorMaskImage: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -74,6 +77,7 @@ const defaultProps = {
     size: CONST.AVATAR_SIZE.DEFAULT,
     fallbackIcon: Expensicons.FallbackAvatar,
     type: CONST.ICON_TYPE_AVATAR,
+    editorMaskImage: undefined,
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -309,6 +313,7 @@ class AvatarWithImagePicker extends React.Component {
                     imageUri={this.state.imageUri}
                     imageName={this.state.imageName}
                     imageType={this.state.imageType}
+                    maskImage={this.props.editorMaskImage}
                 />
             </View>
         );

src/components/Icon/Expensicons.js

@@ -46,7 +46,8 @@ import Globe from '../../../assets/images/globe.svg';
 import Hashtag from '../../../assets/images/hashtag.svg';
 import History from '../../../assets/images/history.svg';
 import Hourglass from '../../../assets/images/hourglass.svg';
-import ImageCropMask from '../../../assets/images/image-crop-mask.svg';
+import CircleCropMask from '../../../assets/images/image-crop-circle-mask.svg';
+import ImageCropSquareMask from '../../../assets/images/image-crop-square-mask.svg';
 import Info from '../../../assets/images/info.svg';
 import Invoice from '../../../assets/images/invoice.svg';
 import Key from '../../../assets/images/key.svg';
@@ -163,7 +164,8 @@ export {
     Hashtag,
     History,
     Hourglass,
-    ImageCropMask,
+    CircleCropMask,
+    ImageCropSquareMask,
     Info,
     Invoice,
     Key,

src/pages/workspace/WorkspaceSettingsPage.js

@@ -116,6 +116,7 @@ class WorkspaceSettingsPage extends React.Component {
                                 isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
                                 onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
                                 onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
+                                editorMaskImage={Expensicons.ImageCropSquareMask}
                             />
                         </OfflineWithFeedback>
                         <OfflineWithFeedback

src/styles/styles.js

@@ -2813,7 +2813,6 @@ const styles = {
     },
 
     imageCropContainer: {
-        borderRadius: variables.componentBorderRadiusCard,
         overflow: 'hidden',
         alignItems: 'center',
         justifyContent: 'center',