Facelift: align compound MenuItem hover default, extend hover step map, simplify Spend selected bg

Author: shawnborton

src/components/MenuItem/layout/MenuItemRoot.tsx

@@ -7,6 +7,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import {useSurfaceBackgroundColor} from '@components/SurfaceBackgroundColorContext';
 
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import getButtonState from '@libs/getButtonState';
@@ -41,6 +42,7 @@ type MenuItemRootProps = PropsWithChildren &
 function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, accessibilityLabel}: MenuItemRootProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const theme = useTheme();
     const surfaceBackgroundColor = useSurfaceBackgroundColor();
     const pressableRef = useRef<View>(null);
     const isCompactPopover = useIsCompactPopover();
@@ -81,10 +83,7 @@ function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, acces
                                 isCompactPopover && styles.compactPopoverMenuItemBase,
                                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(isHovered, pressed, false, isDisabled, isInteractive), true),
                                 isDisabled && styles.buttonOpacityDisabled,
-                                isHovered &&
-                                    isInteractive &&
-                                    !pressed &&
-                                    (surfaceBackgroundColor ? StyleUtils.getRowHoverBackgroundColorStyle(surfaceBackgroundColor) : styles.hoveredComponentBG),
+                                isHovered && isInteractive && !pressed && StyleUtils.getRowHoverBackgroundColorStyle(surfaceBackgroundColor ?? theme.appBG),
                             ] as StyleProp<ViewStyle>
                         }
                         disabled={isDisabled}

src/pages/Search/SearchTypeMenuItem.tsx

@@ -86,7 +86,7 @@ function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}:
                 styles.flexRow,
                 styles.sectionMenuItem(shouldUseNarrowLayout),
                 styles.searchTypeMenuItemPadding,
-                StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || hovered, false, false, false, true), true),
+                focused ? StyleUtils.getBackgroundColorStyle(theme.activeComponentBG) : undefined,
                 hovered && !focused && !pressed && StyleUtils.getRowHoverBackgroundColorStyle(theme.appBG),
                 // Keep the resting background on press and only dim via opacity, matching the Inbox LHN rows
                 pressed ? {opacity: variables.pressDimValue} : undefined,

src/styles/utils/index.ts

@@ -540,9 +540,11 @@ const ROW_HOVER_BACKGROUND_STEP: Record<string, string> = {
     [colors.productDark100]: colors.productDark200,
     [colors.productDark200]: colors.productDark300,
     [colors.productDark300]: colors.productDark400,
+    [colors.productDark400]: colors.productDark500,
     [colors.productLight100]: colors.productLight200,
     [colors.productLight200]: colors.productLight300,
     [colors.productLight300]: colors.productLight400,
+    [colors.productLight400]: colors.productLight500,
 };
 
 function getRowHoverBackgroundColor(backgroundColor: string): string {