Updated LHN layout in GSD Priority Mode

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,
+                ])}
             />
         );
     }

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 = {
@@ -10,58 +10,86 @@ 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']),
+
+    // 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}) => {
+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,
+    ];
+
     if (!avatarImageURLs.length) {
         return null;
     }
 
     if (avatarImageURLs.length === 1) {
         return (
-            <View style={styles.emptyAvatar}>
-                <Avatar source={avatarImageURLs[0]} />
+            <View style={avatarContainerStyles}>
+                <Avatar source={avatarImageURLs[0]} size={size} />
             </View>
         );
     }
 
     return (
-        <View style={styles.emptyAvatar}>
+        <View style={avatarContainerStyles}>
             <View
-                style={styles.singleAvatar}
+                style={singleAvatarStyles}
             >
                 <Image
                     source={{uri: avatarImageURLs[0]}}
-                    style={styles.singleAvatar}
+                    style={singleAvatarStyles}
                 />
                 <View
-                    style={[
-                        styles.singleAvatar,
-                        optionIsFocused ? styles.focusedAvatar : styles.avatar,
-                        styles.secondAvatar,
-                    ]}
+                    style={secondAvatarStyles}
                 >
                     {avatarImageURLs.length === 2 ? (
                         <Image
                             source={{uri: avatarImageURLs[1]}}
-                            style={[
-                                styles.singleAvatar,
-                            ]}
+                            style={singleAvatarStyles}
                         />
                     ) : (
                         <View
-                            style={[
-                                styles.avatarText,
-                            ]}
+                            style={singleAvatarStyles}
                         >
-                            <Text style={styles.avatarInnerText}>
-                                +
-                                {avatarImageURLs.length - 1}
+                            <Text style={size === 'small'
+                                ? globalStyles.avatarInnerTextSmall
+                                : globalStyles.avatarInnerText}
+                            >
+                                {`+${avatarImageURLs.length - 1}`}
                             </Text>
                         </View>
                     )}

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

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,36 @@ 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.mr2]
+        : [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];
+    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>
             {hovered => (
@@ -87,14 +115,7 @@ const OptionRow = ({
                         hovered && !optionIsFocused ? hoverStyle : null,
                     ]}
                 >
-                    <View
-                        style={StyleSheet.flatten([
-                            styles.chatLinkRowPressable,
-                            styles.flexGrow1,
-                            styles.optionItemAvatarNameWrapper,
-                            styles.sidebarInnerRow,
-                        ])}
-                    >
+                    <View style={sidebarInnerRowStyle}>
                         <View
                             style={[
                                 styles.flexRow,
@@ -107,20 +128,27 @@ const OptionRow = ({
                                     <MultipleAvatars
                                         avatarImageURLs={option.icons}
                                         optionIsFocused={optionIsFocused}
+                                        size={mode === 'compact' ? 'small' : 'default'}
+                                        styles={hovered && !optionIsFocused && {
+                                            secondAvatar: {
+                                                backgroundColor: themeColors.sidebarHover,
+                                                borderColor: themeColors.sidebarHover,
+                                            },
+                                        }}
                                     />
                                 )
                             }
-                            <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 +198,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;
     }

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>