Facelift: use product300 for selected nav item; revert all row hover changes

Author: shawnborton

src/components/LHNOptionsList/OptionRowLHN/useOptionRowChrome.ts

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

src/components/MenuItem/MenuItem.tsx

@@ -884,23 +884,12 @@ function MenuItem({
                                         isCompact && styles.optionRowCompact,
                                         isCompactPopoverItem && (description ? styles.compactPopoverMenuItemBase : styles.compactPopoverMenuItem),
                                         !shouldRemoveBackground &&
-                                            // Nav rows (role=tab) skip the pressed background so a press keeps the hover/selected color and only dims via opacity
-                                            StyleUtils.getButtonBackgroundColorStyle(
-                                                getButtonState(focused || isHovered, role === CONST.ROLE.TAB ? false : pressed, success, disabled, interactive),
-                                                true,
-                                            ),
+                                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
                                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                                        // Nav rows (role=tab) hold the hover color through a press (dimmed via opacity); other rows drop it on press
-                                        isHovered &&
-                                            interactive &&
-                                            !focused &&
-                                            !shouldRemoveBackground &&
-                                            !shouldRemoveHoverBackground &&
-                                            (role === CONST.ROLE.TAB || !pressed) &&
-                                            styles.hoveredComponentBG,
-                                        // Nav rows (role=tab) use the product300 selected color, held through a press
-                                        role === CONST.ROLE.TAB && focused && !shouldRemoveBackground && StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG),
+                                        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

@@ -4,25 +4,22 @@ import type {Animated} from 'react-native';
 import type {BackgroundColor, GetBackgroundColorConfig} from './types';
 
 function getBackgroundColor({routesLength, tabIndex, affectedTabs, theme, position, isActive}: GetBackgroundColorConfig): BackgroundColor {
-    // High contrast keeps the stronger prior active-tab color (theme.border resolves to product500 there) instead of the lighter product300
-    const activeBackgroundColor = theme.isHighContrast ? theme.border : theme.navItemSelectedBG;
-
     if (routesLength > 1) {
         const inputRange = Array.from({length: routesLength}, (_, i) => i);
 
         if (position) {
             return position.interpolate({
                 inputRange,
                 outputRange: inputRange.map((i) => {
-                    return affectedTabs.includes(tabIndex) && i === tabIndex ? activeBackgroundColor : theme.appBG;
+                    return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.navItemSelectedBG : theme.appBG;
                 }),
             }) as unknown as Animated.AnimatedInterpolation<string>;
         }
 
-        return affectedTabs.includes(tabIndex) && isActive ? activeBackgroundColor : theme.appBG;
+        return affectedTabs.includes(tabIndex) && isActive ? theme.navItemSelectedBG : theme.appBG;
     }
 
-    return activeBackgroundColor;
+    return theme.navItemSelectedBG;
 }
 
 export default getBackgroundColor;

src/pages/Search/SearchTypeMenuItem.tsx

@@ -82,14 +82,13 @@ function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}:
             accessibilityState={{selected: focused}}
             role={CONST.ROLE.TAB}
             sentryLabel={CONST.SENTRY_LABEL.SEARCH.TYPE_MENU_ITEM}
-            // A press keeps the hover/selected color and only dims via opacity, matching the Inbox LHN rows
             style={({hovered, pressed}) => [
                 styles.flexRow,
                 styles.sectionMenuItem(shouldUseNarrowLayout),
                 styles.searchTypeMenuItemPadding,
-                focused ? StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG) : undefined,
-                hovered && !focused ? styles.hoveredComponentBG : undefined,
-                pressed ? {opacity: variables.pressDimValue} : undefined,
+                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/styles/index.ts

@@ -6862,7 +6862,7 @@ const dynamicStyles = (theme: ThemeColors) =>
             }
 
             return {
-                backgroundColor: hovered && !isFocused ? theme.hoverComponentBG : (background as string),
+                backgroundColor: hovered && !isFocused ? theme.highlightBG : (background as string),
             };
         },
 

src/styles/theme/themes/dark-contrast.ts

@@ -5,8 +5,6 @@ import darkTheme from './dark';
 
 const darkContrastTheme = {
     ...darkTheme,
-    // Keep nav rows/tabs at the stronger prior selected value so the state stays legible under high contrast
-    navItemSelectedBG: colors.productDark400,
     border: colors.productDark500,
     icon: colors.productDark700,
     textSupporting: colors.productDark800,

src/styles/theme/themes/dark.ts

@@ -52,13 +52,13 @@ const darkTheme = {
     inverse: colors.productDark900,
     shadow: '0px 4px 12px 0px rgba(2,18,4,0.24)',
     componentBG: colors.productDark100,
-    hoverComponentBG: 'rgba(10, 46, 37, 0.6)',
+    hoverComponentBG: colors.productDark300,
     messageHighlightBG: colors.messageHighlightDark,
     activeComponentBG: colors.productDark400,
     navItemSelectedBG: colors.productDark300,
     signInSidebar: colors.green800,
     sidebar: colors.productDark100,
-    sidebarHover: 'rgba(10, 46, 37, 0.6)',
+    sidebarHover: colors.productDark300,
     heading: colors.productDark900,
     textLight: colors.productDark900,
     textDark: colors.productDark100,

src/styles/theme/themes/light-contrast.ts

@@ -5,8 +5,6 @@ import lightTheme from './light';
 
 const lightContrastTheme = {
     ...lightTheme,
-    // Keep nav rows/tabs at the stronger prior selected value so the state stays legible under high contrast
-    navItemSelectedBG: colors.productLight400,
     border: colors.productLight500,
     icon: colors.productLight800,
     textSupporting: '#53645C',

src/styles/theme/themes/light.ts

@@ -53,12 +53,12 @@ const lightTheme = {
     shadow: '0px 4px 12px 0px rgba(2,18,4,0.06)',
     componentBG: colors.productLight100,
     messageHighlightBG: colors.yellow100,
-    hoverComponentBG: 'rgba(242, 237, 231, 0.6)',
+    hoverComponentBG: colors.productLight300,
     activeComponentBG: colors.productLight400,
     navItemSelectedBG: colors.productLight300,
     signInSidebar: colors.green800,
     sidebar: colors.productLight100,
-    sidebarHover: 'rgba(242, 237, 231, 0.6)',
+    sidebarHover: colors.productLight300,
     heading: colors.productLight900,
     textLight: colors.white,
     textDark: colors.productLight900,