From 1aff84461ea9b8111e00ef2b8c90db2a9105ef85 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 23 Mar 2021 22:58:43 +0530
Subject: [PATCH 1/7] new: GSD Compact Mdde added

---
 src/components/Avatar.js               | 13 +++++--
 src/components/MultipleAvatars.js      | 26 +++++++------
 src/components/OptionsList.js          |  5 +++
 src/pages/home/sidebar/OptionRow.js    | 27 +++++++++++--
 src/pages/home/sidebar/SidebarLinks.js |  1 +
 src/styles/styles.js                   | 54 +++++++++++++++++++++++---
 src/styles/variables.js                |  2 +
 7 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 15923a5289ba..8def4f64508c 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {PureComponent} from 'react';
 import {Image} from 'react-native';
 import PropTypes from 'prop-types';
@@ -9,11 +10,15 @@ const propTypes = {
 
     // Extra styles to pass
     style: PropTypes.arrayOf(PropTypes.any),
+
+    // Set the size of Avatar
+    size: PropTypes.oneOf(['default', 'small']),
 };
 
 const defaultProps = {
     source: '',
     style: [],
+    size: 'default',
 };
 
 class Avatar extends PureComponent {
@@ -26,10 +31,10 @@ class Avatar extends PureComponent {
             <Image
                 ref={el => this.image = el}
                 source={{uri: this.props.source}}
-                style={[
-                    styles.avatarNormal,
-                    ...this.props.style,
-                ]}
+                style={_.union([
+                    this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
+                    this.props.style,
+                ])}
             />
         );
     }
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 6c1b636f1819..77bd736db0b6 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -10,56 +10,60 @@ const propTypes = {
 
     // Whether this option is currently in focus so we can modify its style
     optionIsFocused: PropTypes.bool,
+
+    // Set the sie of avatars
+    size: PropTypes.oneOf(['default', 'small']),
 };
 
 const defaultProps = {
     avatarImageURLs: [],
     optionIsFocused: false,
+    size: 'default',
 };
 
-const MultipleAvatars = ({avatarImageURLs, optionIsFocused}) => {
+const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => {
     if (!avatarImageURLs.length) {
         return null;
     }
 
     if (avatarImageURLs.length === 1) {
         return (
-            <View style={styles.emptyAvatar}>
-                <Avatar source={avatarImageURLs[0]} />
+            <View style={size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar}>
+                <Avatar source={avatarImageURLs[0]} size={size} />
             </View>
         );
     }
 
     return (
-        <View style={styles.emptyAvatar}>
+        <View style={size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar}>
             <View
-                style={styles.singleAvatar}
+                style={size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar}
             >
                 <Image
                     source={{uri: avatarImageURLs[0]}}
-                    style={styles.singleAvatar}
+                    style={size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar}
                 />
                 <View
                     style={[
-                        styles.singleAvatar,
+                        size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
                         optionIsFocused ? styles.focusedAvatar : styles.avatar,
-                        styles.secondAvatar,
+                        size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar,
                     ]}
                 >
                     {avatarImageURLs.length === 2 ? (
                         <Image
                             source={{uri: avatarImageURLs[1]}}
                             style={[
-                                styles.singleAvatar,
+                                size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
                             ]}
                         />
                     ) : (
                         <View
                             style={[
-                                styles.avatarText,
+                                size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
                             ]}
                         >
-                            <Text style={styles.avatarInnerText}>
+                            <Text style={size === 'small' ? styles.avatarInnerTextSmall : styles.avatarInnerText}>
                                 +
                                 {avatarImageURLs.length - 1}
                             </Text>
diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index b783cca19866..5add5fa4c95a 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -64,6 +64,9 @@ const propTypes = {
 
     // Whether to show the title tooltip
     showTitleTooltip: PropTypes.bool,
+
+    // Toggle between compact and default view of the option
+    optionMode: PropTypes.oneOf(['compact', 'default']),
 };
 
 const defaultProps = {
@@ -81,6 +84,7 @@ const defaultProps = {
     headerMessage: '',
     innerRef: null,
     showTitleTooltip: false,
+    optionMode: undefined,
 };
 
 class OptionsList extends Component {
@@ -146,6 +150,7 @@ class OptionsList extends Component {
         return (
             <OptionRow
                 option={item}
+                mode={this.props.optionMode}
                 showTitleTooltip={this.props.showTitleTooltip}
                 hoverStyle={this.props.optionHoveredStyle}
                 optionIsFocused={!this.props.disableFocusOptions
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index c31d128f5d8d..88a060d16dc6 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -44,6 +44,9 @@ const propTypes = {
 
     // Whether to show the title tooltip
     showTitleTooltip: PropTypes.bool,
+
+    // Toggle between compact and default view
+    mode: PropTypes.oneOf(['compact', 'default']),
 };
 
 const defaultProps = {
@@ -53,6 +56,7 @@ const defaultProps = {
     isSelected: false,
     forceTextUnreadStyle: false,
     showTitleTooltip: false,
+    mode: 'default',
 };
 
 const OptionRow = ({
@@ -65,12 +69,23 @@ const OptionRow = ({
     isSelected,
     forceTextUnreadStyle,
     showTitleTooltip,
+    mode,
 }) => {
     const textStyle = optionIsFocused
         ? styles.sidebarLinkActiveText
         : styles.sidebarLinkText;
     const textUnreadStyle = (option.isUnread || forceTextUnreadStyle)
         ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
+    const displayNameStyle = mode === 'compact'
+        ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr3]
+        : [styles.optionDisplayName, textUnreadStyle];
+    const alternateTextStyle = mode === 'compact'
+        ? [textStyle, styles.optionAlternateText, styles.optionAlternateTextCompact]
+        : [textStyle, styles.optionAlternateText, styles.mt1];
+    const contentContainerStyles = mode === 'compact'
+        ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
+        : [styles.flex1];
+
     return (
         <Hoverable>
             {hovered => (
@@ -93,6 +108,7 @@ const OptionRow = ({
                             styles.flexGrow1,
                             styles.optionItemAvatarNameWrapper,
                             styles.sidebarInnerRow,
+                            styles.justifyContentCenter,
                         ])}
                     >
                         <View
@@ -107,20 +123,21 @@ const OptionRow = ({
                                     <MultipleAvatars
                                         avatarImageURLs={option.icons}
                                         optionIsFocused={optionIsFocused}
+                                        size={mode === 'compact' ? 'small' : 'default'}
                                     />
                                 )
                             }
-                            <View style={[styles.flex1]}>
+                            <View style={contentContainerStyles}>
                                 <OptionRowTitle
                                     option={option}
                                     tooltipEnabled={showTitleTooltip}
                                     numberOfLines={1}
-                                    style={[styles.optionDisplayName, textUnreadStyle]}
+                                    style={displayNameStyle}
                                 />
 
                                 {option.alternateText ? (
                                     <Text
-                                        style={[textStyle, styles.optionAlternateText, styles.mt1]}
+                                        style={alternateTextStyle}
                                         numberOfLines={1}
                                     >
                                         {option.alternateText}
@@ -170,6 +187,10 @@ export default memo(OptionRow, (prevProps, nextProps) => {
         return false;
     }
 
+    if (prevProps.mode !== nextProps.mode) {
+        return false;
+    }
+
     if (prevProps.option.isUnread !== nextProps.option.isUnread) {
         return false;
     }
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 0a9a0d9fdac3..593af80cc973 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -148,6 +148,7 @@ class SidebarLinks extends React.Component {
                     hideSectionHeaders
                     showTitleTooltip
                     disableFocusOptions={this.props.isSmallScreenWidth}
+                    optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
                 />
                 <KeyboardSpacer />
             </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2f2d808aca7c..bf2dbc4f2c2d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -584,6 +584,13 @@ const styles = {
         ...whiteSpace.noWrap,
     },
 
+    optionDisplayNameCompact: {
+        minWidth: 'auto',
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+    },
+
     optionDisplayNameTooltipWrapper: {
         position: 'relative',
     },
@@ -603,6 +610,12 @@ const styles = {
         lineHeight: 16,
     },
 
+    optionAlternateTextCompact: {
+        flexShrink: 1,
+        flexGrow: 1,
+        flexBasis: 'auto',
+    },
+
     // App Content Wrapper styles
     appContentWrapper: {
         backgroundColor: themeColors.appBG,
@@ -827,6 +840,13 @@ const styles = {
         borderRadius: 24,
     },
 
+    singleAvatarSmall: {
+        height: 20,
+        width: 20,
+        backgroundColor: themeColors.icon,
+        borderRadius: 20,
+    },
+
     secondAvatar: {
         position: 'absolute',
         right: -13,
@@ -835,6 +855,14 @@ const styles = {
         borderWidth: 2,
     },
 
+    secondAvatarSmall: {
+        position: 'absolute',
+        right: -8,
+        bottom: -9,
+        borderColor: 'transparent',
+        borderWidth: 2,
+    },
+
     avatarNormal: {
         height: variables.componentSizeNormal,
         width: variables.componentSizeNormal,
@@ -842,11 +870,11 @@ const styles = {
         borderRadius: variables.componentSizeNormal,
     },
 
-    avatarText: {
+    avatarSmall: {
+        height: variables.avatarSizeSmall,
+        width: variables.avatarSizeSmall,
         backgroundColor: themeColors.icon,
-        borderRadius: 24,
-        height: 24,
-        width: 24,
+        borderRadius: variables.avatarSizeSmall,
     },
 
     avatarInnerText: {
@@ -857,6 +885,14 @@ const styles = {
         textAlign: 'center',
     },
 
+    avatarInnerTextSmall: {
+        color: themeColors.textReversed,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: 20,
+        marginLeft: -2,
+        textAlign: 'center',
+    },
+
     avatarSpace: {
         top: 3,
         left: 3,
@@ -872,8 +908,14 @@ const styles = {
 
     emptyAvatar: {
         marginRight: variables.componentSizeNormal - 24,
-        height: 40,
-        width: 40,
+        height: variables.avatarSizeNormal,
+        width: variables.avatarSizeNormal,
+    },
+
+    emptyAvatarSmall: {
+        marginRight: variables.componentSizeNormal - 24,
+        height: variables.avatarSizeSmall,
+        width: variables.avatarSizeSmall,
     },
 
     modalViewContainer: {
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 6463935aa836..d586c58ef3a2 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -5,6 +5,8 @@ export default {
     componentSizeLarge: 52,
     componentBorderRadiusSmall: 4,
     componentBorderRadiusNormal: 8,
+    avatarSizeNormal: 40,
+    avatarSizeSmall: 32,
     fontSizeSmall: 11,
     fontSizeLabel: 13,
     fontSizeNormal: 15,

From 25df51195815b908671df82822629f3f84bf667f Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 23 Mar 2021 23:10:20 +0530
Subject: [PATCH 2/7] new: Row height in GSD Mode

---
 src/pages/home/sidebar/OptionRow.js | 23 ++++++++++++++---------
 src/styles/styles.js                |  8 ++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 88a060d16dc6..d53ff6d7068d 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -85,6 +85,19 @@ const OptionRow = ({
     const contentContainerStyles = mode === 'compact'
         ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
         : [styles.flex1];
+    const sidebarInnerRowStyle = StyleSheet.flatten(mode === 'compact' ? [
+        styles.chatLinkRowPressable,
+        styles.flexGrow1,
+        styles.optionItemAvatarNameWrapper,
+        styles.sidebarInnerRowSmall,
+        styles.justifyContentCenter,
+    ] : [
+        styles.chatLinkRowPressable,
+        styles.flexGrow1,
+        styles.optionItemAvatarNameWrapper,
+        styles.sidebarInnerRow,
+        styles.justifyContentCenter,
+    ]);
 
     return (
         <Hoverable>
@@ -102,15 +115,7 @@ const OptionRow = ({
                         hovered && !optionIsFocused ? hoverStyle : null,
                     ]}
                 >
-                    <View
-                        style={StyleSheet.flatten([
-                            styles.chatLinkRowPressable,
-                            styles.flexGrow1,
-                            styles.optionItemAvatarNameWrapper,
-                            styles.sidebarInnerRow,
-                            styles.justifyContentCenter,
-                        ])}
-                    >
+                    <View style={sidebarInnerRowStyle}>
                         <View
                             style={[
                                 styles.flexRow,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index bf2dbc4f2c2d..3b721b04ce77 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -544,6 +544,14 @@ const styles = {
         paddingLeft: 20,
     },
 
+    sidebarInnerRowSmall: {
+        height: 56,
+        paddingTop: 12,
+        paddingRight: 20,
+        paddingBottom: 12,
+        paddingLeft: 20,
+    },
+
     sidebarLinkText: {
         color: themeColors.text,
         fontSize: variables.fontSizeNormal,

From d2b98b2a7842f99f034c87a2e3217a701b2cc44a Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 24 Mar 2021 00:24:58 +0530
Subject: [PATCH 3/7] chg: adjusted the design of GSD  LHN layout

---
 src/components/MultipleAvatars.js   |  3 +--
 src/pages/home/sidebar/OptionRow.js |  2 +-
 src/styles/styles.js                | 14 +++++++-------
 src/styles/variables.js             |  3 ++-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 77bd736db0b6..d8a472281d2c 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -64,8 +64,7 @@ const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => {
                             ]}
                         >
                             <Text style={size === 'small' ? styles.avatarInnerTextSmall : styles.avatarInnerText}>
-                                +
-                                {avatarImageURLs.length - 1}
+                                {`+${avatarImageURLs.length - 1}`}
                             </Text>
                         </View>
                     )}
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index d53ff6d7068d..a58406f3d61c 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -77,7 +77,7 @@ const OptionRow = ({
     const textUnreadStyle = (option.isUnread || forceTextUnreadStyle)
         ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
     const displayNameStyle = mode === 'compact'
-        ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr3]
+        ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2]
         : [styles.optionDisplayName, textUnreadStyle];
     const alternateTextStyle = mode === 'compact'
         ? [textStyle, styles.optionAlternateText, styles.optionAlternateTextCompact]
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 3b721b04ce77..b3ed309c4ca0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -545,7 +545,7 @@ const styles = {
     },
 
     sidebarInnerRowSmall: {
-        height: 56,
+        height: 52,
         paddingTop: 12,
         paddingRight: 20,
         paddingBottom: 12,
@@ -849,10 +849,10 @@ const styles = {
     },
 
     singleAvatarSmall: {
-        height: 20,
-        width: 20,
+        height: 18,
+        width: 18,
         backgroundColor: themeColors.icon,
-        borderRadius: 20,
+        borderRadius: 18,
     },
 
     secondAvatar: {
@@ -895,8 +895,8 @@ const styles = {
 
     avatarInnerTextSmall: {
         color: themeColors.textReversed,
-        fontSize: variables.fontSizeSmall,
-        lineHeight: 20,
+        fontSize: variables.fontSizeExtraSmall,
+        lineHeight: 18,
         marginLeft: -2,
         textAlign: 'center',
     },
@@ -921,7 +921,7 @@ const styles = {
     },
 
     emptyAvatarSmall: {
-        marginRight: variables.componentSizeNormal - 24,
+        marginRight: variables.componentSizeNormal - 28,
         height: variables.avatarSizeSmall,
         width: variables.avatarSizeSmall,
     },
diff --git a/src/styles/variables.js b/src/styles/variables.js
index d586c58ef3a2..2bd1de1681a9 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -6,8 +6,9 @@ export default {
     componentBorderRadiusSmall: 4,
     componentBorderRadiusNormal: 8,
     avatarSizeNormal: 40,
-    avatarSizeSmall: 32,
+    avatarSizeSmall: 28,
     fontSizeSmall: 11,
+    fontSizeExtraSmall: 9,
     fontSizeLabel: 13,
     fontSizeNormal: 15,
     fontSizeLarge: 17,

From 4c0ec7e946a04920898f6b4c979b604bfb2c89d3 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 24 Mar 2021 17:54:13 +0530
Subject: [PATCH 4/7] fix: outline for MultipleAvatars

---
 src/components/MultipleAvatars.js |  3 +--
 src/styles/styles.js              | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index d8a472281d2c..a7899103f083 100644
--- 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
index b3ed309c4ca0..cfbb7f7451dd 100644
--- 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: {

From fd2bdf241f286ff0791cda22ca816f2c3bf5038b Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:56:08 +0530
Subject: [PATCH 5/7] chg: Update the option row styles.

---
 src/styles/styles.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index cfbb7f7451dd..e320a53b262a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -539,7 +539,6 @@ const styles = {
     sidebarInnerRow: {
         height: 64,
         paddingTop: 12,
-        paddingRight: 20,
         paddingBottom: 12,
         paddingLeft: 20,
     },
@@ -547,7 +546,6 @@ const styles = {
     sidebarInnerRowSmall: {
         height: 52,
         paddingTop: 12,
-        paddingRight: 20,
         paddingBottom: 12,
         paddingLeft: 20,
     },

From b6a00ed6e827a0638465135b59da7cb3899cc1ef Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:59:47 +0530
Subject: [PATCH 6/7] fix: border styles for the MultipleAvatar on OptionRow
 Hover

---
 src/components/MultipleAvatars.js   | 61 +++++++++++++++++++++--------
 src/pages/home/sidebar/OptionRow.js |  6 +++
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index a7899103f083..5dce158ab600 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -1,7 +1,7 @@
 import React, {memo} from 'react';
 import PropTypes from 'prop-types';
 import {Image, Text, View} from 'react-native';
-import styles from '../styles/styles';
+import globalStyles from '../styles/styles';
 import Avatar from './Avatar';
 
 const propTypes = {
@@ -13,56 +13,83 @@ const propTypes = {
 
     // Set the sie of avatars
     size: PropTypes.oneOf(['default', 'small']),
+
+    // Styles to override the basic component styles
+    styles: PropTypes.shape({
+        // Style for First Avatar on Multiple Avatars
+        // eslint-disable-next-line react/forbid-prop-types
+        singleAvatar: PropTypes.object,
+
+        // Style for Second Avatar on Multiple Avatars
+        // eslint-disable-next-line react/forbid-prop-types
+        secondAvatar: PropTypes.object,
+
+        // Style for avatar Container
+        // eslint-disable-next-line react/forbid-prop-types
+        emptyAvatar: PropTypes.object,
+    }),
 };
 
 const defaultProps = {
     avatarImageURLs: [],
     optionIsFocused: false,
     size: 'default',
+    styles: {},
 };
 
-const MultipleAvatars = ({avatarImageURLs, optionIsFocused, size}) => {
+const MultipleAvatars = ({
+    avatarImageURLs, optionIsFocused, size, styles,
+}) => {
+    const avatarContainerStyles = [
+        size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar,
+    ];
+    const singleAvatarStyles = [
+        size === 'small' ? globalStyles.singleAvatarSmall : globalStyles.singleAvatar, styles.singleAvatar,
+    ];
+    const secondAvatarStyles = [
+        size === 'small' ? globalStyles.secondAvatarSmall : globalStyles.secondAvatar,
+        optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar,
+        styles.secondAvatar,
+    ];
+    console.debug(styles, secondAvatarStyles);
+
     if (!avatarImageURLs.length) {
         return null;
     }
 
     if (avatarImageURLs.length === 1) {
         return (
-            <View style={size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar}>
+            <View style={avatarContainerStyles}>
                 <Avatar source={avatarImageURLs[0]} size={size} />
             </View>
         );
     }
 
     return (
-        <View style={size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar}>
+        <View style={avatarContainerStyles}>
             <View
-                style={size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar}
+                style={singleAvatarStyles}
             >
                 <Image
                     source={{uri: avatarImageURLs[0]}}
-                    style={size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar}
+                    style={singleAvatarStyles}
                 />
                 <View
-                    style={[
-                        size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar,
-                        optionIsFocused ? styles.focusedAvatar : styles.avatar,
-                    ]}
+                    style={secondAvatarStyles}
                 >
                     {avatarImageURLs.length === 2 ? (
                         <Image
                             source={{uri: avatarImageURLs[1]}}
-                            style={[
-                                size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
-                            ]}
+                            style={singleAvatarStyles}
                         />
                     ) : (
                         <View
-                            style={[
-                                size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar,
-                            ]}
+                            style={singleAvatarStyles}
                         >
-                            <Text style={size === 'small' ? styles.avatarInnerTextSmall : styles.avatarInnerText}>
+                            <Text style={size === 'small'
+                                ? globalStyles.avatarInnerTextSmall
+                                : globalStyles.avatarInnerText}
+                            >
                                 {`+${avatarImageURLs.length - 1}`}
                             </Text>
                         </View>
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index a58406f3d61c..1f330a86443e 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -129,6 +129,12 @@ const OptionRow = ({
                                         avatarImageURLs={option.icons}
                                         optionIsFocused={optionIsFocused}
                                         size={mode === 'compact' ? 'small' : 'default'}
+                                        styles={hovered && {
+                                            secondAvatar: {
+                                                backgroundColor: themeColors.sidebarHover,
+                                                borderColor: themeColors.sidebarHover,
+                                            },
+                                        }}
                                     />
                                 )
                             }

From 22dc5e25285fe4d4f334f5fd2fe61ad0487ab5c0 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 24 Mar 2021 22:21:39 +0530
Subject: [PATCH 7/7] fix: take care of optionFocused state fro MultipleAvatars

---
 src/components/MultipleAvatars.js   | 1 -
 src/pages/home/sidebar/OptionRow.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 5dce158ab600..b446942563ae 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -51,7 +51,6 @@ const MultipleAvatars = ({
         optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar,
         styles.secondAvatar,
     ];
-    console.debug(styles, secondAvatarStyles);
 
     if (!avatarImageURLs.length) {
         return null;
diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
index 1f330a86443e..f9dfcc8f4727 100644
--- a/src/pages/home/sidebar/OptionRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -129,7 +129,7 @@ const OptionRow = ({
                                         avatarImageURLs={option.icons}
                                         optionIsFocused={optionIsFocused}
                                         size={mode === 'compact' ? 'small' : 'default'}
-                                        styles={hovered && {
+                                        styles={hovered && !optionIsFocused && {
                                             secondAvatar: {
                                                 backgroundColor: themeColors.sidebarHover,
                                                 borderColor: themeColors.sidebarHover,
