From ad115be45c06258c15892929f9e484cf8435667f Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Mar 2024 13:29:30 +0000
Subject: [PATCH] Add new styles

---
 src/components/AvatarWithImagePicker.tsx | 6 +++++-
 src/styles/index.ts                      | 9 ++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
index 5755c69641c8..8bcda759d26c 100644
--- 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
index 67d2466578c2..c7860f0e20a6 100644
--- 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,