From 37555b2725ebabeeb33b5444426e98be9410a95a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sat, 7 Feb 2026 22:51:27 -0700 Subject: [PATCH] Clean up logo component --- app/components/icons/Logo.tsx | 183 +++++------------- app/components/navigation/Footer.tsx | 12 +- .../navigation/TopNav/TopNav.container.tsx | 72 +------ .../navigation/TopNav/TopNav.types.ts | 34 +--- .../navigation/TopNav/TopNav.view.tsx | 25 +-- 5 files changed, 56 insertions(+), 270 deletions(-) diff --git a/app/components/icons/Logo.tsx b/app/components/icons/Logo.tsx index 1f4219f..e932010 100644 --- a/app/components/icons/Logo.tsx +++ b/app/components/icons/Logo.tsx @@ -5,18 +5,10 @@ import { getAssetPath, ASSETS } from "../../../lib/assetUtils"; interface LogoProps { size?: | "default" - | "homeHeaderXsmall" - | "homeHeaderSm" - | "homeHeaderMd" - | "homeHeaderLg" - | "homeHeaderXl" - | "header" - | "headerMd" - | "headerLg" - | "headerXl" | "footer" - | "footerLg" - | "createFlow"; + | "createFlow" + | "topNavFolderTop" + | "topNavHeader"; showText?: boolean; } @@ -38,82 +30,12 @@ const Logo = memo(({ size = "default", showText = true }) => { lineHeight: "leading-[27.05px]", iconSize: "w-[27.05px] h-[27.05px]", }, - homeHeaderXsmall: { - containerHeight: "h-[14.11px]", - gap: "gap-[4.21px]", - textSize: "text-[11.57px]", - lineHeight: "leading-[14.24px]", - iconSize: "w-[14.11px] h-[14.11px]", - }, - homeHeaderSm: { - containerHeight: "h-[21.06px]", - gap: "gap-[3.19px]", - textSize: "text-[11.69px]", - lineHeight: "leading-[14.39px]", - iconSize: "w-[14.39px] h-[14.39px]", - }, - homeHeaderMd: { - containerHeight: "h-[32.24px]", - gap: "gap-[4.89px]", - textSize: "text-[17.89px]", - lineHeight: "leading-[22.02px]", - iconSize: "w-[22.02px] h-[22.02px]", - }, - homeHeaderLg: { - containerHeight: "h-[28px]", - gap: "gap-[6.55px]", - textSize: "text-[21.97px]", - lineHeight: "leading-[27.05px]", - iconSize: "w-[27.05px] h-[27.05px]", - }, - homeHeaderXl: { - containerHeight: "h-[36px]", - gap: "gap-[8.64px]", - textSize: "text-[29.01px]", - lineHeight: "leading-[35.7px]", - iconSize: "w-[35.7px] h-[35.7px]", - }, - header: { - containerHeight: "h-[20.85px]", - gap: "gap-[4.21px]", - textSize: "text-[11.57px]", - lineHeight: "leading-[14.24px]", - iconSize: "w-[14.24px] h-[14.24px]", - }, - headerMd: { - containerHeight: "h-[17.91px]", - gap: "gap-[6.51px]", - textSize: "text-[17.89px]", - lineHeight: "leading-[22.02px]", - iconSize: "w-[22.02px] h-[22.02px]", - }, - headerLg: { - containerHeight: "h-[28px]", - gap: "gap-[6.55px]", - textSize: "text-[21.97px]", - lineHeight: "leading-[27.05px]", - iconSize: "w-[27.05px] h-[27.05px]", - }, - headerXl: { - containerHeight: "h-[34px]", - gap: "gap-[8.19px]", - textSize: "text-[27.47px]", - lineHeight: "leading-[33.81px]", - iconSize: "w-[33.81px] h-[33.81px]", - }, footer: { - containerHeight: "h-[calc(40px*1.37)]", - gap: "gap-[calc(8px*1.37)]", - textSize: "text-[calc(21.97px*1.37)]", - lineHeight: "leading-[calc(27.05px*1.37)]", - iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]", - }, - footerLg: { - containerHeight: "h-[calc(40px*2.05)]", - gap: "gap-[calc(8px*2.05)]", - textSize: "text-[calc(21.97px*2.05)]", - lineHeight: "leading-[calc(27.05px*2.05)]", - iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]", + containerHeight: "h-[41px] sm:h-[calc(40px*1.37)] lg:h-[calc(40px*2.05)]", + gap: "gap-[8.28px] sm:gap-[calc(8px*1.37)] lg:gap-[calc(8px*2.05)]", + textSize: "text-[21.97px] sm:text-[calc(21.97px*1.37)] lg:text-[calc(21.97px*2.05)]", + lineHeight: "leading-[27.05px] sm:leading-[calc(27.05px*1.37)] lg:leading-[calc(27.05px*2.05)]", + iconSize: "w-[27.05px] h-[27.05px] sm:w-[calc(27.05px*1.37)] sm:h-[calc(27.05px*1.37)] lg:w-[calc(27.05px*2.05)] lg:h-[calc(27.05px*2.05)]", }, createFlow: { containerHeight: "h-[30px] md:h-[41px]", @@ -122,34 +44,23 @@ const Logo = memo(({ size = "default", showText = true }) => { lineHeight: "leading-[20.28px] md:leading-[27.05px]", iconSize: "w-[20.28px] h-[20.28px] md:w-[27.05px] md:h-[27.05px]", }, + topNavFolderTop: { + containerHeight: "h-[14.11px] sm:h-[21.06px] md:h-[32.24px] lg:h-[28px] xl:h-[36px]", + gap: "gap-0 sm:gap-[3.19px] md:gap-[4.89px] lg:gap-[6.55px] xl:gap-[8.64px]", + textSize: "text-[11.57px] sm:text-[11.69px] md:text-[17.89px] lg:text-[21.97px] xl:text-[29.01px]", + lineHeight: "leading-[14.24px] sm:leading-[14.39px] md:leading-[22.02px] lg:leading-[27.05px] xl:leading-[35.7px]", + iconSize: "w-[14.11px] h-[14.11px] sm:w-[14.39px] sm:h-[14.39px] md:w-[22.02px] md:h-[22.02px] lg:w-[27.05px] lg:h-[27.05px] xl:w-[35.7px] xl:h-[35.7px]", + }, + topNavHeader: { + containerHeight: "h-[20.85px] sm:h-[20.85px] md:h-[17.91px] lg:h-[28px] xl:h-[34px]", + gap: "gap-0 sm:gap-[4.21px] md:gap-[6.51px] lg:gap-[6.55px] xl:gap-[8.19px]", + textSize: "text-[11.57px] sm:text-[11.57px] md:text-[17.89px] lg:text-[21.97px] xl:text-[27.47px]", + lineHeight: "leading-[14.24px] sm:leading-[14.24px] md:leading-[22.02px] lg:leading-[27.05px] xl:leading-[33.81px]", + iconSize: "w-[14.24px] h-[14.24px] sm:w-[14.24px] sm:h-[14.24px] md:w-[22.02px] md:h-[22.02px] lg:w-[27.05px] lg:h-[27.05px] xl:w-[33.81px] xl:h-[33.81px]", + }, }; - const config = - size === "homeHeaderXsmall" - ? sizes.homeHeaderXsmall - : size === "homeHeaderSm" - ? sizes.homeHeaderSm - : size === "homeHeaderMd" - ? sizes.homeHeaderMd - : size === "homeHeaderLg" - ? sizes.homeHeaderLg - : size === "homeHeaderXl" - ? sizes.homeHeaderXl - : size === "header" - ? sizes.header - : size === "headerMd" - ? sizes.headerMd - : size === "headerLg" - ? sizes.headerLg - : size === "headerXl" - ? sizes.headerXl - : size === "footer" - ? sizes.footer - : size === "footerLg" - ? sizes.footerLg - : size === "createFlow" - ? sizes.createFlow - : sizes.default; + const config = sizes[size || "default"] || sizes.default; return ( @@ -158,25 +69,27 @@ const Logo = memo(({ size = "default", showText = true }) => { showText ? config.gap : "" } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`} > - {/* Logo Text - only show if showText is true */} - {showText && ( -
- CommunityRule -
- )} + {/* Logo Text - responsive visibility for topNav sizes */} +
+ CommunityRule +
{/* Vector Icon */} {/* eslint-disable-next-line @next/next/no-img-element */} @@ -188,13 +101,7 @@ const Logo = memo(({ size = "default", showText = true }) => { className={`flex-shrink-0 ${ config.iconSize } transition-all duration-200 ${ - size === "homeHeaderXsmall" || - size === "homeHeaderSm" || - size === "homeHeaderMd" || - size === "homeHeaderLg" || - size === "homeHeaderXl" - ? "filter brightness-0" - : "" + size === "topNavFolderTop" ? "filter brightness-0" : "" }`} aria-hidden="true" /> diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx index 79ae7b9..fd7eb24 100644 --- a/app/components/navigation/Footer.tsx +++ b/app/components/navigation/Footer.tsx @@ -39,16 +39,8 @@ const Footer = memo(() => { lg:py-[var(--spacing-measures-spacing-096,96px)] lg:gap-[var(--spacing-measures-spacing-060,60px)]" > - {/* Logo*/} -
- -
-
- -
-
- -
+ {/* Logo */} + {/* Content section */}
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx index c6e9731..1036fe3 100644 --- a/app/components/navigation/TopNav/TopNav.container.tsx +++ b/app/components/navigation/TopNav/TopNav.container.tsx @@ -42,54 +42,8 @@ const TopNavContainer = memo( }, }; - // Logo configuration based on folderTop prop - const logoConfig = folderTop - ? [ - { - breakpoint: "block sm:hidden", - size: "homeHeaderXsmall" as const, - showText: false, - }, - { - breakpoint: "hidden sm:block md:hidden", - size: "homeHeaderSm" as const, - showText: true, - }, - { - breakpoint: "hidden md:block lg:hidden", - size: "homeHeaderMd" as const, - showText: true, - }, - { - breakpoint: "hidden lg:block xl:hidden", - size: "homeHeaderLg" as const, - showText: true, - }, - { - breakpoint: "hidden xl:block", - size: "homeHeaderXl" as const, - showText: true, - }, - ] - : [ - { breakpoint: "block sm:hidden", size: "header" as const, showText: false }, - { - breakpoint: "hidden sm:block md:hidden", - size: "header" as const, - showText: true, - }, - { - breakpoint: "hidden md:block lg:hidden", - size: "headerMd" as const, - showText: true, - }, - { - breakpoint: "hidden lg:block xl:hidden", - size: "headerLg" as const, - showText: true, - }, - { breakpoint: "hidden xl:block", size: "headerXl" as const, showText: true }, - ]; + // Logo size based on folderTop prop + const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader"; // Navigation items with translations const navigationItems = [ @@ -214,25 +168,6 @@ const TopNavContainer = memo( ); }; - const renderLogo = ( - size: - | "default" - | "homeHeaderXsmall" - | "homeHeaderSm" - | "homeHeaderMd" - | "homeHeaderLg" - | "homeHeaderXl" - | "header" - | "headerMd" - | "headerLg" - | "headerXl" - | "footer" - | "footerLg", - showText: boolean, - ) => { - return ; - }; - return ( ( profile={profile} logIn={logIn} schemaData={schemaData} - logoConfig={logoConfig} + logoSize={logoSize} renderNavigationItems={renderNavigationItems} renderLoginButton={renderLoginButton} renderCreateRuleButton={renderCreateRuleButton} - renderLogo={renderLogo} /> ); }, diff --git a/app/components/navigation/TopNav/TopNav.types.ts b/app/components/navigation/TopNav/TopNav.types.ts index 1acdb32..e786e20 100644 --- a/app/components/navigation/TopNav/TopNav.types.ts +++ b/app/components/navigation/TopNav/TopNav.types.ts @@ -38,23 +38,7 @@ export interface TopNavViewProps { "query-input": string; }; }; - logoConfig: Array<{ - breakpoint: string; - size: - | "default" - | "homeHeaderXsmall" - | "homeHeaderSm" - | "homeHeaderMd" - | "homeHeaderLg" - | "homeHeaderXl" - | "header" - | "headerMd" - | "headerLg" - | "headerXl" - | "footer" - | "footerLg"; - showText: boolean; - }>; + logoSize: "topNavFolderTop" | "topNavHeader"; renderNavigationItems: (_size: NavSize) => React.ReactNode; renderLoginButton: (_size: NavSize) => React.ReactNode; renderCreateRuleButton: ( @@ -62,20 +46,4 @@ export interface TopNavViewProps { _containerSize: "small" | "medium" | "large" | "xlarge", _avatarSize: "small" | "medium" | "large" | "xlarge", ) => React.ReactNode; - renderLogo: ( - _size: - | "default" - | "homeHeaderXsmall" - | "homeHeaderSm" - | "homeHeaderMd" - | "homeHeaderLg" - | "homeHeaderXl" - | "header" - | "headerMd" - | "headerLg" - | "headerXl" - | "footer" - | "footerLg", - _showText: boolean, - ) => React.ReactNode; } diff --git a/app/components/navigation/TopNav/TopNav.view.tsx b/app/components/navigation/TopNav/TopNav.view.tsx index 67a53f7..2c39212 100644 --- a/app/components/navigation/TopNav/TopNav.view.tsx +++ b/app/components/navigation/TopNav/TopNav.view.tsx @@ -7,17 +7,18 @@ import { getAssetPath } from "../../../../lib/assetUtils"; import MenuBar from "../MenuBar"; import type { TopNavViewProps } from "./TopNav.types"; +import Logo from "../../icons/Logo"; + function TopNavView({ folderTop, loggedIn: _loggedIn, profile: _profile, logIn, schemaData, - logoConfig, + logoSize, renderNavigationItems, renderLoginButton, renderCreateRuleButton, - renderLogo, }: TopNavViewProps) { const t = useTranslation(folderTop ? "homeHeader" : "header"); @@ -43,13 +44,7 @@ function TopNavView({ {/* Header Tab - Yellow tab container with decorative Union images */}
{/* Logo - Consistent left positioning within HeaderTab */} -
- {logoConfig.map((config, index) => ( -
- {renderLogo(config.size, config.showText)} -
- ))} -
+ {/* XSmall menu bar - positioned next to logo */}
@@ -163,17 +158,7 @@ function TopNavView({ aria-label={t("ariaLabels.mainNavigation")} > {/* Logo - Consistent left positioning across all breakpoints */} -
- {logoConfig.map((config, index) => ( -
- {renderLogo(config.size, config.showText)} -
- ))} -
+ {/* Navigation Links - Consistent center positioning */}