cleanup for GSD layout

src/components/Avatar.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import React, {PureComponent} from 'react';
 import {Image} from 'react-native';
 import PropTypes from 'prop-types';
@@ -30,10 +29,10 @@ class Avatar extends PureComponent {
         return (
             <Image
                 source={{uri: this.props.source}}
-                style={_.union([
+                style={[
                     this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
-                    this.props.style,
-                ])}
+                    ...this.props.style,
+                ]}
             />
         );
     }

src/components/MultipleAvatars.js

@@ -1,55 +1,36 @@
 import React, {memo} from 'react';
 import PropTypes from 'prop-types';
 import {Image, Text, View} from 'react-native';
-import globalStyles from '../styles/styles';
+import styles from '../styles/styles';
 import Avatar from './Avatar';
 
 const propTypes = {
     // Array of avatar URL
     avatarImageURLs: PropTypes.arrayOf(PropTypes.string),
 
-    // 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 Second Avatar
+    // eslint-disable-next-line react/forbid-prop-types
+    secondAvatarStyle: PropTypes.arrayOf(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: {},
+    secondAvatarStyle: [styles.secondAvatarHovered],
 };
 
 const MultipleAvatars = ({
-    avatarImageURLs, optionIsFocused, size, styles,
+    avatarImageURLs, size, secondAvatarStyle,
 }) => {
-    const avatarContainerStyles = [
-        size === 'small' ? globalStyles.emptyAvatarSmall : globalStyles.emptyAvatar, styles.emptyAvatar,
-    ];
-    const singleAvatarStyles = [
-        size === 'small' ? globalStyles.singleAvatarSmall : globalStyles.singleAvatar, styles.singleAvatar,
-    ];
+    const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar;
+    const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar;
     const secondAvatarStyles = [
-        size === 'small' ? globalStyles.secondAvatarSmall : globalStyles.secondAvatar,
-        optionIsFocused ? globalStyles.focusedAvatar : globalStyles.avatar,
-        styles.secondAvatar,
+        size === 'small' ? styles.secondAvatarSmall : styles.secondAvatar,
+        ...secondAvatarStyle,
     ];
 
     if (!avatarImageURLs.length) {
@@ -86,8 +67,8 @@ const MultipleAvatars = ({
                             style={singleAvatarStyles}
                         >
                             <Text style={size === 'small'
-                                ? globalStyles.avatarInnerTextSmall
-                                : globalStyles.avatarInnerText}
+                                ? styles.avatarInnerTextSmall
+                                : styles.avatarInnerText}
                             >
                                 {`+${avatarImageURLs.length - 1}`}
                             </Text>

src/components/OptionsList.js

@@ -8,6 +8,9 @@ import optionPropTypes from './optionPropTypes';
 import SectionList from './SectionList';
 
 const propTypes = {
+    // option Background Color
+    optionBackgroundColor: PropTypes.string,
+
     // Style for hovered state
     // eslint-disable-next-line react/forbid-prop-types
     optionHoveredStyle: PropTypes.object,
@@ -71,6 +74,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    optionBackgroundColor: undefined,
     optionHoveredStyle: undefined,
     contentContainerStyles: [],
     sections: [],
@@ -153,6 +157,7 @@ class OptionsList extends Component {
                 option={item}
                 mode={this.props.optionMode}
                 showTitleTooltip={this.props.showTitleTooltip}
+                backgroundColor={this.props.optionBackgroundColor}
                 hoverStyle={this.props.optionHoveredStyle}
                 optionIsFocused={!this.props.disableFocusOptions
                         && this.props.focusedIndex === (index + section.indexOffset)}

src/pages/home/HeaderView.js

@@ -86,7 +86,10 @@ const HeaderView = (props) => {
                             }}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
                         >
-                            <MultipleAvatars avatarImageURLs={props.report.icons} />
+                            <MultipleAvatars
+                                avatarImageURLs={props.report.icons}
+                                secondAvatarStyle={[styles.secondAvatarHovered]}
+                            />
                             <View style={[styles.flex1, styles.flexRow]}>
                                 <OptionRowTitle
                                     option={reportOption}

src/pages/home/sidebar/OptionRow.js

@@ -7,7 +7,7 @@ import {
     View,
     StyleSheet,
 } from 'react-native';
-import styles from '../../../styles/styles';
+import styles, {getSecondAvatarStyle} from '../../../styles/styles';
 import {optionPropTypes} from './optionPropTypes';
 import Icon from '../../../components/Icon';
 import {Pencil, PinCircle, Checkmark} from '../../../components/Icon/Expensicons';
@@ -16,8 +16,12 @@ import themeColors from '../../../styles/themes/default';
 import Hoverable from '../../../components/Hoverable';
 import OptionRowTitle from './OptionRowTitle';
 import IOUBadge from '../../../components/IOUBadge';
+import colors from '../../../styles/colors';
 
 const propTypes = {
+    // Background Color of the Option Row
+    backgroundColor: PropTypes.string,
+
     // Style for hovered state
     // eslint-disable-next-line react/forbid-prop-types
     hoverStyle: PropTypes.object,
@@ -51,6 +55,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    backgroundColor: colors.white,
     hoverStyle: styles.sidebarLinkHover,
     hideAdditionalOptionStates: false,
     showSelectedState: false,
@@ -61,6 +66,7 @@ const defaultProps = {
 };
 
 const OptionRow = ({
+    backgroundColor,
     hoverStyle,
     option,
     optionIsFocused,
@@ -99,7 +105,10 @@ const OptionRow = ({
         styles.sidebarInnerRow,
         styles.justifyContentCenter,
     ]);
-
+    const hoveredBackgroundColor = hoverStyle && hoverStyle.backgroundColor
+        ? hoverStyle.backgroundColor
+        : backgroundColor;
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     return (
         <Hoverable>
             {hovered => (
@@ -112,6 +121,7 @@ const OptionRow = ({
                         styles.justifyContentBetween,
                         styles.sidebarLink,
                         styles.sidebarLinkInner,
+                        {backgroundColor},
                         optionIsFocused ? styles.sidebarLinkActive : null,
                         hovered && !optionIsFocused ? hoverStyle : null,
                     ]}
@@ -128,14 +138,12 @@ const OptionRow = ({
                                 && (
                                     <MultipleAvatars
                                         avatarImageURLs={option.icons}
-                                        optionIsFocused={optionIsFocused}
                                         size={mode === 'compact' ? 'small' : 'default'}
-                                        styles={(hovered && !optionIsFocused) ? {
-                                            secondAvatar: {
-                                                backgroundColor: themeColors.sidebarHover,
-                                                borderColor: themeColors.sidebarHover,
-                                            },
-                                        } : undefined}
+                                        secondAvatarStyle={[
+                                            getSecondAvatarStyle(backgroundColor),
+                                            optionIsFocused && getSecondAvatarStyle(focusedBackgroundColor),
+                                            hovered && !optionIsFocused && getSecondAvatarStyle(hoveredBackgroundColor),
+                                        ]}
                                     />
                                 )
                             }

src/pages/home/sidebar/SidebarLinks.js

@@ -19,6 +19,7 @@ import {getDefaultAvatar} from '../../../libs/actions/PersonalDetails';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
 import CONST from '../../../CONST';
 import {participantPropTypes} from './optionPropTypes';
+import themeColors from '../../../styles/themes/default';
 
 const propTypes = {
     // Toggles the navigation menu open and closed
@@ -145,6 +146,7 @@ class SidebarLinks extends React.Component {
                         Navigation.navigate(ROUTES.getReportRoute(option.reportID));
                         this.props.onLinkClick();
                     }}
+                    optionBackgroundColor={themeColors.sidebar}
                     hideSectionHeaders
                     showTitleTooltip
                     disableFocusOptions={this.props.isSmallScreenWidth}

src/styles/styles.js

@@ -864,6 +864,11 @@ const styles = {
         borderColor: 'transparent',
     },
 
+    secondAvatarHovered: {
+        backgroundColor: themeColors.sidebarHover,
+        borderColor: themeColors.sidebarHover,
+    },
+
     secondAvatarSmall: {
         position: 'absolute',
         right: -13,
@@ -914,8 +919,8 @@ const styles = {
     },
 
     focusedAvatar: {
-        backgroundColor: themeColors.pillBG,
-        borderColor: themeColors.pillBG,
+        backgroundColor: themeColors.border,
+        borderColor: themeColors.border,
     },
 
     emptyAvatar: {
@@ -1404,6 +1409,12 @@ function getZoomSizingStyle(isZoomed) {
     };
 }
 
+function getSecondAvatarStyle(parentBGColor) {
+    return {
+        backgroundColor: parentBGColor,
+        borderColor: parentBGColor,
+    };
+}
 export default styles;
 export {
     getSafeAreaPadding,
@@ -1414,4 +1425,5 @@ export {
     getNavigationModalCardStyle,
     getZoomCursorStyle,
     getZoomSizingStyle,
+    getSecondAvatarStyle,
 };