Fix avatar hover issue in the case of multiple avatars

tienifr · Aug 15, 2023 · 8ff1d2f · 8ff1d2f
1 parent 301ad35
commit 8ff1d2f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
@@ -37,6 +37,7 @@ function RoomHeaderAvatars(props) {
             >
                 {({show}) => (
                     <PressableWithoutFocus
+                        style={[styles.noOutline]}
                         onPress={show}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                         accessibilityLabel={props.icons[0].name}
@@ -80,6 +81,7 @@ function RoomHeaderAvatars(props) {
                         >
                             {({show}) => (
                                 <PressableWithoutFocus
+                                    style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
                                     onPress={show}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                     accessibilityLabel={icon.name}
@@ -101,6 +103,7 @@ function RoomHeaderAvatars(props) {
                                     style={[
                                         styles.roomHeaderAvatarSize,
                                         styles.roomHeaderAvatar,
+                                        styles.mln4,
                                         ...iconStyle,
                                         StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
                                         styles.roomHeaderAvatarOverlay,

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2358,7 +2358,6 @@ const styles = {
 
     roomHeaderAvatar: {
         backgroundColor: themeColors.appBG,
-        marginLeft: -16,
         borderRadius: 100,
         borderColor: themeColors.componentBG,
         borderWidth: 4,

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -133,6 +133,10 @@ export default {
         marginLeft: 16,
     },
 
+    mln4: {
+        marginLeft: -16,
+    },
+
     ml5: {
         marginLeft: 20,
     },