fix: outline for MultipleAvatars

Expensify · Mar 24, 2021 · 4c0ec7e · 4c0ec7e
1 parent d2b98b2
commit 4c0ec7e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -45,9 +45,8 @@ const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => {
                 />
                 <View
                     style={[
-                        size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
-                        optionIsFocused ? styles.focusedAvatar : styles.avatar,
                         size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar,
+                        optionIsFocused ? styles.focusedAvatar : styles.avatar,
                     ]}
                 >
                     {avatarImageURLs.length === 2 ? (

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -857,18 +857,20 @@ const styles = {
 
     secondAvatar: {
         position: 'absolute',
-        right: -13,
-        bottom: -14,
+        right: -18,
+        bottom: -18,
+        borderWidth: 3,
+        borderRadius: 30,
         borderColor: 'transparent',
-        borderWidth: 2,
     },
 
     secondAvatarSmall: {
         position: 'absolute',
-        right: -8,
-        bottom: -9,
+        right: -13,
+        bottom: -13,
+        borderWidth: 3,
+        borderRadius: 18,
         borderColor: 'transparent',
-        borderWidth: 2,
     },
 
     avatarNormal: {
@@ -908,10 +910,12 @@ const styles = {
 
     avatar: {
         backgroundColor: themeColors.sidebar,
+        borderColor: themeColors.sidebar,
     },
 
     focusedAvatar: {
-        backgroundColor: themeColors.border,
+        backgroundColor: themeColors.pillBG,
+        borderColor: themeColors.pillBG,
     },
 
     emptyAvatar: {