Facelift: set activeComponentBG to product300 and route menu-item/tab selected through it

Author: shawnborton

src/components/LHNOptionsList/OptionRowLHN/OptionRow/Pressable.tsx

@@ -167,7 +167,7 @@ function Pressable({optionItem, isOptionFocused, onSelectRow, onLayout, onHoverI
                         styles.sidebarLink,
                         styles.sidebarLinkInnerLHN,
                         StyleUtils.getBackgroundColorStyle(theme.sidebar),
-                        isOptionFocused ? StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG) : null,
+                        isOptionFocused ? styles.sidebarLinkActive : null,
                         (hovered || isContextMenuActive) && !isOptionFocused ? styles.sidebarLinkHover : null,
                     ]}
                     role={CONST.ROLE.BUTTON}

src/components/LHNOptionsList/OptionRowLHN/useOptionRowChrome.ts

@@ -45,7 +45,7 @@ function useOptionRowChrome({isOptionFocused, viewMode}: UseOptionRowChromeParam
     const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
 
     const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-    const focusedBackgroundColor = theme.navItemSelectedBG;
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     let avatarBackgroundColor: ColorValue = theme.sidebar;
     if (isOptionFocused) {

src/components/MenuItem/MenuItem.tsx

@@ -888,8 +888,6 @@ function MenuItem({
                                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
                                         isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG,
-                                        // Nav rows (role=tab) use product300 for the selected state
-                                        role === CONST.ROLE.TAB && focused && !pressed && !shouldRemoveBackground && StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG),
                                     ] as StyleProp<ViewStyle>
                                 }
                                 disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}

src/components/TabSelector/getBackground.ts

@@ -11,15 +11,15 @@ function getBackgroundColor({routesLength, tabIndex, affectedTabs, theme, positi
             return position.interpolate({
                 inputRange,
                 outputRange: inputRange.map((i) => {
-                    return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.navItemSelectedBG : theme.appBG;
+                    return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.activeComponentBG : theme.appBG;
                 }),
             }) as unknown as Animated.AnimatedInterpolation<string>;
         }
 
-        return affectedTabs.includes(tabIndex) && isActive ? theme.navItemSelectedBG : theme.appBG;
+        return affectedTabs.includes(tabIndex) && isActive ? theme.activeComponentBG : theme.appBG;
     }
 
-    return theme.navItemSelectedBG;
+    return theme.activeComponentBG;
 }
 
 export default getBackgroundColor;

src/pages/Search/SearchTypeMenuItem.tsx

@@ -8,7 +8,6 @@ import TooltipSense from '@components/Tooltip/TooltipSense';
 
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import getButtonState from '@libs/getButtonState';
@@ -50,7 +49,6 @@ const COLLAPSED_BADGE_EXIT_DURATION_MS = 90;
 function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}: SearchTypeMenuItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isVisuallyCollapsed} = useSearchSidebarCollapse();
     const labelAnimatedStyle = useSearchSidebarCollapseFadeStyle();
@@ -88,7 +86,6 @@ function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}:
                 styles.searchTypeMenuItemPadding,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, false, false, true), true),
                 hovered && !focused && !pressed && styles.hoveredComponentBG,
-                focused && !pressed ? StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG) : undefined,
             ]}
         >
             {({hovered, pressed}) => (

src/pages/domain/DomainInitialPage.tsx

@@ -164,7 +164,6 @@ function DomainInitialPage({route}: DomainInitialPageProps) {
                                 highlighted={!!item?.highlighted}
                                 focused={!!(item.screenName && activeRoute?.startsWith(item.screenName))}
                                 badgeText={item.badgeText}
-                                role={CONST.ROLE.TAB}
                                 shouldIconUseAutoWidthStyle
                             />
                         ))}

src/styles/theme/themes/dark.ts

@@ -54,8 +54,7 @@ const darkTheme = {
     componentBG: colors.productDark100,
     hoverComponentBG: colors.productDark300,
     messageHighlightBG: colors.messageHighlightDark,
-    activeComponentBG: colors.productDark400,
-    navItemSelectedBG: colors.productDark300,
+    activeComponentBG: colors.productDark300,
     signInSidebar: colors.green800,
     sidebar: colors.productDark100,
     sidebarHover: colors.productDark300,

src/styles/theme/themes/light.ts

@@ -54,8 +54,7 @@ const lightTheme = {
     componentBG: colors.productLight100,
     messageHighlightBG: colors.yellow100,
     hoverComponentBG: colors.productLight300,
-    activeComponentBG: colors.productLight400,
-    navItemSelectedBG: colors.productLight300,
+    activeComponentBG: colors.productLight300,
     signInSidebar: colors.green800,
     sidebar: colors.productLight100,
     sidebarHover: colors.productLight300,

src/styles/theme/types.ts

@@ -63,8 +63,6 @@ type ThemeColors = {
     componentBG: Color;
     hoverComponentBG: Color;
     activeComponentBG: Color;
-    /** Background color for a selected/active left-hand-nav row or horizontal tab */
-    navItemSelectedBG: Color;
     signInSidebar: Color;
     sidebar: Color;
     sidebarHover: Color;

src/styles/utils/index.ts

@@ -1658,7 +1658,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             case CONST.BUTTON_STATES.PRESSED:
                 return isMenuItem ? {backgroundColor: theme.buttonHoveredBG} : {backgroundColor: theme.buttonPressedBG};
             case CONST.BUTTON_STATES.ACTIVE:
-                return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG};
+                return isMenuItem ? {backgroundColor: theme.activeComponentBG} : {backgroundColor: theme.buttonHoveredBG};
             case CONST.BUTTON_STATES.DISABLED:
             case CONST.BUTTON_STATES.DEFAULT:
             default: