From a2283c7f111438b679689fd5bf2ab379005518c1 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Mar 2024 13:06:12 +0000
Subject: [PATCH 1/3] Revert the edit icon border color change

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3cfb38ef4bab..67d2466578c2 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3098,7 +3098,7 @@ const styles = (theme: ThemeColors) =>
         smallEditIcon: {
             alignItems: 'center',
             backgroundColor: theme.buttonDefaultBG,
-            borderColor: theme.appBG,
+            borderColor: theme.cardBG,
             borderRadius: 20,
             borderWidth: 3,
             color: theme.textReversed,

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 2/3] 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,

From acd2b9ea66d3917c0040af107c7496962b92b395 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Wed, 13 Mar 2024 13:34:05 +0000
Subject: [PATCH 3/3] Add the correct icon styles for the avatars based on
 where they are used

---
 src/pages/settings/InitialSettingsPage.tsx   | 1 +
 src/pages/workspace/WorkspaceProfilePage.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index a57f308b5623..811ce38bdd1a 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -415,6 +415,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
                             originalFileName={currentUserDetails.originalFileName}
                             headerTitle={translate('profilePage.profileAvatar')}
                             fallbackIcon={currentUserDetails?.fallbackIcon}
+                            editIconStyle={styles.smallEditIconAccount}
                         />
                     </OfflineWithFeedback>
                     <Text
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index ddebc9d4b368..9fa5e0700091 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -127,6 +127,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                     styles.alignItemsStart,
                                     styles.sectionMenuItemTopDescription,
                                 ]}
+                                editIconStyle={styles.smallEditIconWorkspace}
                                 isUsingDefaultAvatar={!policy?.avatar ?? null}
                                 onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
                                 onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}