Add new styles

Expensify · Mar 13, 2024 · ad115be · ad115be
1 parent a2283c7
commit ad115be
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
@@ -54,6 +54,9 @@ type AvatarWithImagePickerProps = {
     /** Additional style props for disabled picker */
     disabledStyle?: StyleProp<ViewStyle>;
 
+    /** Additional style props for the edit icon */
+    editIconStyle?: StyleProp<ViewStyle>;
+
     /** Executed once an image has been selected */
     onImageSelected?: (file: File | CustomRNImageManipulatorResult) => void;
 
@@ -120,6 +123,7 @@ function AvatarWithImagePicker({
     DefaultAvatar = () => null,
     style,
     disabledStyle,
+    editIconStyle,
     pendingAction,
     errors,
     errorRowStyles,
@@ -323,7 +327,7 @@ function AvatarWithImagePicker({
                                 )}
                             </View>
                             {!disabled && (
-                                <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
+                                <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
                                     <Icon
                                         src={Expensicons.Pencil}
                                         width={variables.iconSizeSmall}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3098,7 +3098,6 @@ const styles = (theme: ThemeColors) =>
         smallEditIcon: {
             alignItems: 'center',
             backgroundColor: theme.buttonDefaultBG,
-            borderColor: theme.cardBG,
             borderRadius: 20,
             borderWidth: 3,
             color: theme.textReversed,
@@ -3107,6 +3106,14 @@ const styles = (theme: ThemeColors) =>
             justifyContent: 'center',
         },
 
+        smallEditIconWorkspace: {
+            borderColor: theme.cardBG,
+        },
+
+        smallEditIconAccount: {
+            borderColor: theme.appBG,
+        },
+
         smallAvatarEditIcon: {
             position: 'absolute',
             right: -8,