diff --git a/app/components/buttons/Button.tsx b/app/components/buttons/Button.tsx index 42aece7..d9894fd 100644 --- a/app/components/buttons/Button.tsx +++ b/app/components/buttons/Button.tsx @@ -46,7 +46,7 @@ const Button = memo( const size = normalizeSize(sizeProp); const sizeStyles: Record = { xsmall: - "p-[var(--spacing-scale-006)] gap-[var(--spacing-scale-002)]", + "p-[var(--spacing-scale-004)] gap-[var(--spacing-scale-002)]", small: "p-[var(--spacing-scale-008)] gap-[var(--spacing-scale-002)]", medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]", @@ -102,7 +102,7 @@ const Button = memo( ? "" : hoverOutlineStyles[size]; - const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-500 ease-in-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`; + const baseStyles = `inline-flex items-center justify-start box-border whitespace-nowrap shrink-0 ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-500 ease-in-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`; const combinedStyles = `${baseStyles} ${className}`; const sharedA11y = { diff --git a/app/components/icons/Avatar.tsx b/app/components/icons/Avatar.tsx index 8a59e8c..a1d55ec 100644 --- a/app/components/icons/Avatar.tsx +++ b/app/components/icons/Avatar.tsx @@ -19,13 +19,13 @@ const Avatar = memo( // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) const size = normalizeSize(sizeProp, "small"); const sizeStyles: Record = { - small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]", - medium: "w-[18px] h-[18px]", + small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)] border-[1.5px] border-[#FFFFFF4D] border-solid", + medium: "w-[var(--spacing-scale-018)] h-[var(--spacing-scale-018)]", large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]", xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]", }; - const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`; + const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover box-border ${sizeStyles[size]} ${className}`; return {alt}; }, diff --git a/app/components/navigation/HeaderTab.tsx b/app/components/navigation/HeaderTab.tsx deleted file mode 100644 index 1809ef0..0000000 --- a/app/components/navigation/HeaderTab.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { memo } from "react"; -import { getAssetPath } from "../../../lib/assetUtils"; - -interface HeaderTabProps extends React.HTMLAttributes { - children?: React.ReactNode; - className?: string; - stretch?: boolean; -} - -const HeaderTab = memo( - ({ children, className = "", stretch = false, ...props }) => { - const stretchClasses = stretch - ? "flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]" - : ""; - - return ( -
- {children} - - - -
- ); - }, -); - -HeaderTab.displayName = "HeaderTab"; - -export default HeaderTab; diff --git a/app/components/navigation/MenuBar.tsx b/app/components/navigation/MenuBar.tsx index 4e4f7cb..0335472 100644 --- a/app/components/navigation/MenuBar.tsx +++ b/app/components/navigation/MenuBar.tsx @@ -5,39 +5,42 @@ import { useTranslation } from "../../contexts/MessagesContext"; import { normalizeMenuBarSize } from "../../../lib/propNormalization"; export type MenuBarSizeValue = - | "xsmall" - | "default" - | "medium" - | "large" - | "XSmall" - | "Default" + | "X Small" + | "Small" | "Medium" - | "Large"; + | "Large" + | "X Large"; interface MenuBarProps extends React.HTMLAttributes { children?: React.ReactNode; className?: string; /** - * Menu bar size. Accepts both lowercase and PascalCase (case-insensitive). - * Figma uses PascalCase, codebase uses lowercase - both are supported. + * Menu bar size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large". + * @default "X Small" */ size?: MenuBarSizeValue; } const MenuBar = memo( - ({ children, className = "", size: sizeProp = "default", ...props }) => { - // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) + ({ children, className = "", size: sizeProp = "X Small", ...props }) => { const size = normalizeMenuBarSize(sizeProp); const t = useTranslation("menuBar"); - const sizeStyles: Record = { - xsmall: - "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]", - default: - "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", - medium: - "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]", - large: - "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]", + + // Size styles based on Figma specifications + const sizeStyles: Record< + "X Small" | "Small" | "Medium" | "Large" | "X Large", + string + > = { + "X Small": + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[var(--spacing-scale-004)]", + Small: + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)] rounded-[var(--spacing-scale-004)]", + Medium: + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)] rounded-[var(--spacing-scale-004)]", + Large: + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)] rounded-[var(--spacing-scale-004)]", + "X Large": + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)] rounded-[var(--spacing-scale-004)]", }; const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`; diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx index f437d7d..17d5feb 100644 --- a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx +++ b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx @@ -3,152 +3,108 @@ import { memo } from "react"; import MenuBarItemView from "./MenuBarItem.view"; import type { MenuBarItemProps } from "./MenuBarItem.types"; -import { normalizeMenuBarItemVariant } from "../../../../lib/propNormalization"; +import { + normalizeMenuBarItemState, + normalizeMenuBarItemMode, + normalizeMenuBarItemSize, +} from "../../../../lib/propNormalization"; const MenuBarItemContainer = memo( ({ href = "#", children, - variant: variantProp = "default", - size: sizeProp = "default", + state: stateProp, + mode: modeProp, + icon: _icon = false, + size: sizeProp = "X Small", className = "", disabled = false, - isActive = false, + reducedPadding = false, ariaLabel, ...props }) => { - // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) - const variant = normalizeMenuBarItemVariant(variantProp); - // Size has many values, normalize by lowercasing - const size = (sizeProp?.toLowerCase() || "default") as typeof sizeProp; - const variantStyles: Record = { + const state = normalizeMenuBarItemState(stateProp, "default"); + const mode = normalizeMenuBarItemMode(modeProp, "default"); + const size = normalizeMenuBarItemSize(sizeProp, "X Small"); + + // Size styles based on Figma specifications + const sizeStyles: Record< + "X Small" | "Small" | "Medium" | "Large" | "X Large", + string + > = { + "X Small": reducedPadding ? "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]" : "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]", + Small: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]", + Medium: reducedPadding ? "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] h-[32px]" : "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] h-[32px]", + Large: "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]", + "X Large": "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]", + }; + + // Text styles based on Figma specifications + const textStyles: Record< + "X Small" | "Small" | "Medium" | "Large" | "X Large", + string + > = { + "X Small": + "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]", + Small: + "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", + Medium: + "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]", + Large: + "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]", + "X Large": + "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]", + }; + + // State styles for Default mode (yellow text on dark background) + const defaultModeStyles: Record< + "default" | "hover" | "selected", + string + > = { default: - "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100", - home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100", + "bg-transparent text-[var(--color-content-default-brand-primary,#fefcc9)] hover:bg-[var(--color-gray-800)] hover:text-[var(--color-content-default-brand-primary,#fefcc9)]", + hover: + "bg-[var(--color-gray-800)] text-[var(--color-content-default-brand-primary,#fefcc9)]", + selected: + "border border-[var(--color-border-default-brand-primary,#fdfaa8)] text-[var(--color-content-default-brand-primary,#fefcc9)] bg-transparent hover:bg-[var(--color-gray-800)]", }; - const activeOutlineStyles: Record = { - xsmall: - "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]", - xsmallUseCases: - "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]", + // State styles for Inverse mode (black text on yellow background) + const inverseModeStyles: Record< + "default" | "hover" | "selected", + string + > = { default: - "active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]", - homeMd: - "active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]", - homeUseCases: - "active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]", - large: - "active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]", - largeUseCases: - "active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]", - homeXlarge: - "active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-brand-primary)]", - xlarge: - "active:outline-2 active:outline-[var(--color-content-default-brand-primary)] focus:outline-2 focus:outline-[var(--color-content-default-brand-primary)]", + "bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-brand-accent,#4d4a00)] hover:text-[var(--color-content-inverse-primary,black)]", + hover: + "bg-[var(--color-surface-brand-accent,#4d4a00)] text-[var(--color-content-inverse-primary,black)]", + selected: + "border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-brand-accent,#4d4a00)]", }; - const homeOutlineStyles: Record = { - xsmall: - "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]", - xsmallUseCases: - "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]", - default: - "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]", - homeMd: - "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]", - homeUseCases: - "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]", - largeUseCases: - "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]", - large: - "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]", - homeXlarge: - "active:outline-[2px] active:outline-[var(--color-content-default-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-primary)]", - xlarge: - "active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]", - }; + // Get state styles based on mode + const stateStyles = + mode === "inverse" ? inverseModeStyles : defaultModeStyles; - const activeStateStyles: Record = { - xsmall: - "!outline-1 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-1 focus:!outline-[var(--color-content-default-brand-primary)]", - xsmallUseCases: - "!outline-1 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-1 focus:!outline-[var(--color-content-default-brand-primary)]", - default: - "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]", - homeMd: - "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]", - homeUseCases: - "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]", - large: - "!outline-[1.75px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.75px] focus:!outline-[var(--color-content-default-brand-primary)]", - largeUseCases: - "!outline-[1.75px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.75px] focus:!outline-[var(--color-content-default-brand-primary)]", - homeXlarge: - "!outline-[2px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[2px] focus:!outline-[var(--color-content-default-brand-primary)]", - xlarge: - "!outline-2 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-2 focus:!outline-[var(--color-content-default-brand-primary)]", - }; + // Base styles + const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-measures-radius-full)] transition-all duration-200 ease-in-out cursor-pointer`; - const sizeStyles: Record = { - default: - "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]", - xsmall: - "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]", - xsmallUseCases: - "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]", - homeMd: - "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]", - homeUseCases: - "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]", - large: - "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]", - largeUseCases: - "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]", - homeXlarge: - "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]", - xlarge: - "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)] h-[44px]", - }; + // Interactive styles + const interactiveStyles = + "hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100"; - const smallTextStyle = - "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]"; - const mediumTextStyle = - "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]"; - const largeTextStyle = - "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]"; - const xlargeTextStyle = - "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]"; + // Disabled styles + const disabledStyles = disabled + ? "bg-[var(--color-surface-default-tertiary)] text-[var(--color-content-default-tertiary)]" + : ""; - const textStyles: Record = { - default: smallTextStyle, - xsmall: smallTextStyle, - xsmallUseCases: smallTextStyle, - home: smallTextStyle, - homeMd: mediumTextStyle, - homeUseCases: mediumTextStyle, - large: largeTextStyle, - largeUseCases: largeTextStyle, - homeXlarge: xlargeTextStyle, - xlarge: xlargeTextStyle, - }; - - const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 ease-in-out cursor-pointer focus:scale-[1.02]`; - - let finalVariant = variant; - if (disabled) { - finalVariant = "default"; - } - - const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${ - finalVariant === "home" - ? homeOutlineStyles[size] - : activeOutlineStyles[size] - } ${isActive ? activeStateStyles[size] : ""} ${className}`; + // Combine all styles + const combinedStyles = `${baseStyles} ${stateStyles[state]} ${interactiveStyles} ${disabledStyles} ${className}`; const accessibilityProps = { ...(ariaLabel && { "aria-label": ariaLabel }), ...(disabled && { "aria-disabled": true }), + ...(state === "selected" && { "aria-current": "page" as const }), role: "menuitem" as const, tabIndex: disabled ? -1 : 0, ...props, diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.types.ts b/app/components/navigation/MenuBarItem/MenuBarItem.types.ts index 3878a49..cd26b9e 100644 --- a/app/components/navigation/MenuBarItem/MenuBarItem.types.ts +++ b/app/components/navigation/MenuBarItem/MenuBarItem.types.ts @@ -1,43 +1,50 @@ export type MenuBarItemSizeValue = - | "default" - | "xsmall" - | "xsmallUseCases" - | "home" - | "homeMd" - | "homeUseCases" - | "large" - | "largeUseCases" - | "homeXlarge" - | "xlarge" - | "Default" - | "XSmall" - | "XSmallUseCases" - | "Home" - | "HomeMd" - | "HomeUseCases" + | "X Small" + | "Small" + | "Medium" | "Large" - | "LargeUseCases" - | "HomeXlarge" - | "XLarge"; + | "X Large"; -export type MenuBarItemVariantValue = "default" | "home" | "Default" | "Home"; +export type MenuBarItemStateValue = + | "default" + | "hover" + | "selected"; + +export type MenuBarItemModeValue = + | "default" + | "inverse"; export interface MenuBarItemProps extends React.AnchorHTMLAttributes { href?: string; children?: React.ReactNode; /** - * Menu bar item variant. Accepts both lowercase and PascalCase (case-insensitive). - * Figma uses PascalCase, codebase uses lowercase - both are supported. + * Menu bar item state: "default", "hover", or "selected". + * @default "default" */ - variant?: MenuBarItemVariantValue; + state?: MenuBarItemStateValue; /** - * Menu bar item size. Accepts both lowercase and PascalCase (case-insensitive). - * Figma uses PascalCase, codebase uses lowercase - both are supported. + * Menu bar item mode. Default mode has yellow text on dark background. + * Inverse mode has black text on yellow background (for folderTop variant). + * @default "default" + */ + mode?: MenuBarItemModeValue; + /** + * Whether to show an icon (for future icon support). + * @default false + */ + icon?: boolean; + /** + * Menu bar item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large". + * @default "X Small" */ size?: MenuBarItemSizeValue; className?: string; disabled?: boolean; - isActive?: boolean; + /** + * Whether to use reduced padding (for "use cases" button). + * @default false + */ + reducedPadding?: boolean; ariaLabel?: string; } diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx index 79758e9..f827990 100644 --- a/app/components/navigation/TopNav/TopNav.container.tsx +++ b/app/components/navigation/TopNav/TopNav.container.tsx @@ -99,54 +99,38 @@ const TopNavContainer = memo( ]; const renderNavigationItems = (size: NavSize) => { - return navigationItems.map((item, index) => { - // Determine size based on folderTop and item properties - let itemSize: NavSize = size; - if (item.extraPadding) { - if (folderTop) { - if ( - size === "xsmall" || - size === "default" || - size === "home" || - size === "homeMd" || - size === "large" || - size === "homeXlarge" - ) { - itemSize = - size === "home" || size === "homeMd" - ? "homeMd" - : size === "large" - ? "large" - : size === "homeXlarge" - ? "homeXlarge" - : "xsmallUseCases"; - } - } else { - if (size === "xsmall") { - itemSize = "xsmallUseCases"; - } - } - } + // Map NavSize to Figma MenuBarItem sizes + const sizeMap: Record = { + default: "Small", + xsmall: "X Small", + xsmallUseCases: "X Small", + home: "X Small", + homeMd: "Medium", + homeUseCases: "Small", + large: "Large", + largeUseCases: "Large", + homeXlarge: "X Large", + xlarge: "X Large", + }; - // Determine variant based on folderTop - const variant = folderTop - ? size === "xsmall" || - size === "default" || - size === "home" || - size === "homeMd" || - size === "large" || - size === "homeXlarge" - ? "home" - : "default" - : "default"; + // Determine mode based on folderTop + const mode = folderTop ? "inverse" : "default"; + + return navigationItems.map((item, index) => { + // Map size to Figma size + let itemSize = sizeMap[size] || "Small"; + + // Pass reducedPadding for "use cases" button (item with extraPadding: true) + const isUseCases = item.extraPadding === true; return ( {item.text} @@ -174,18 +158,32 @@ const TopNavContainer = memo( }; const renderLoginButton = (size: NavSize) => { - // Determine variant based on folderTop - const variant = folderTop - ? size === "xsmall" || size === "default" - ? "home" - : "default" - : "default"; + // Map NavSize to Figma MenuBarItem sizes + const sizeMap: Record = { + default: "Small", + xsmall: "X Small", + xsmallUseCases: "X Small", + home: "X Small", + homeMd: "Medium", + homeUseCases: "Small", + large: "Large", + largeUseCases: "Large", + homeXlarge: "X Large", + xlarge: "X Large", + }; + + // Determine mode based on folderTop and breakpoint size + // folderTop: inverse mode (black text) for smallest breakpoints (xsmall/home) + // folderTop: default mode (yellow text) for 640px+ breakpoints (homeMd/large/homeXlarge/xlarge) + // false folderTop: always default mode (yellow text on dark background) + const isSmallBreakpoint = size === "xsmall" || size === "home"; + const mode = folderTop && isSmallBreakpoint ? "inverse" : "default"; return ( {t("buttons.logIn")} diff --git a/app/components/navigation/TopNav/TopNav.view.tsx b/app/components/navigation/TopNav/TopNav.view.tsx index 0522d80..67a53f7 100644 --- a/app/components/navigation/TopNav/TopNav.view.tsx +++ b/app/components/navigation/TopNav/TopNav.view.tsx @@ -3,7 +3,7 @@ import { memo } from "react"; import Script from "next/script"; import { useTranslation } from "../../../contexts/MessagesContext"; -import HeaderTab from "../HeaderTab"; +import { getAssetPath } from "../../../../lib/assetUtils"; import MenuBar from "../MenuBar"; import type { TopNavViewProps } from "./TopNav.types"; @@ -36,11 +36,12 @@ function TopNavView({ aria-label={t("ariaLabels.homePageNavigationHeader")} >