Clean up logo component

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<LogoProps>(({ 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)]",
+      containerHeight: "h-[41px] sm:h-[calc(40px*1.37)] lg:h-[calc(40px*2.05)]",
-      gap: "gap-[calc(8px*1.37)]",
+      gap: "gap-[8.28px] sm:gap-[calc(8px*1.37)] lg:gap-[calc(8px*2.05)]",
-      textSize: "text-[calc(21.97px*1.37)]",
+      textSize: "text-[21.97px] sm:text-[calc(21.97px*1.37)] lg:text-[calc(21.97px*2.05)]",
-      lineHeight: "leading-[calc(27.05px*1.37)]",
+      lineHeight: "leading-[27.05px] sm:leading-[calc(27.05px*1.37)] lg:leading-[calc(27.05px*2.05)]",
-      iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]",
+      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)]",
-    },
-    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)]",
     },
     createFlow: {
       containerHeight: "h-[30px] md:h-[41px]",
@@ -122,34 +44,23 @@ const Logo = memo<LogoProps>(({ 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 =
+  const config = sizes[size || "default"] || sizes.default;
-    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;
 
   return (
     <Link href="/" className="block" aria-label="CommunityRule Logo">
@@ -158,25 +69,27 @@ const Logo = memo<LogoProps>(({ 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 */}
+        {/* Logo Text - responsive visibility for topNav sizes */}
-        {showText && (
+        <div
-          <div
+          className={`font-bricolage-grotesque ${
-            className={`font-bricolage-grotesque ${
+            size === "topNavFolderTop"
-              size === "homeHeaderXsmall" ||
+              ? "text-[var(--color-content-inverse-primary)]"
-              size === "homeHeaderSm" ||
+              : "text-[var(--color-content-default-primary)]"
-              size === "homeHeaderMd" ||
+          } ${config.textSize} ${
-              size === "homeHeaderLg" ||
+            config.lineHeight
-              size === "homeHeaderXl"
+          } font-normal tracking-[0px] transition-colors duration-200 ${
-                ? "text-[var(--color-content-inverse-primary)]"
+            size === "topNavFolderTop" || size === "topNavHeader"
-                : "text-[var(--color-content-default-primary)]"
+              ? showText
-            } ${config.textSize} ${
+                ? "hidden sm:block"
-              config.lineHeight
+                : "hidden"
-            } font-normal tracking-[0px] transition-colors duration-200`}
+              : showText
-            aria-label="CommunityRule"
+                ? ""
-          >
+                : "hidden"
-            CommunityRule
+          }`}
-          </div>
+          aria-label="CommunityRule"
-        )}
+        >
+          CommunityRule
+        </div>
 
         {/* Vector Icon */}
         {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -188,13 +101,7 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
           className={`flex-shrink-0 ${
             config.iconSize
           } transition-all duration-200 ${
-            size === "homeHeaderXsmall" ||
+            size === "topNavFolderTop" ? "filter brightness-0" : ""
-            size === "homeHeaderSm" ||
-            size === "homeHeaderMd" ||
-            size === "homeHeaderLg" ||
-            size === "homeHeaderXl"
-              ? "filter brightness-0"
-              : ""
           }`}
           aria-hidden="true"
         />

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 */}
-          <div className="block sm:hidden">
+          <Logo size="footer" />
-            <Logo />
-          </div>
-          <div className="hidden sm:block lg:hidden">
-            <Logo size="footer" />
-          </div>
-          <div className="hidden lg:block">
-            <Logo size="footerLg" />
-          </div>
 
           {/* Content section */}
           <div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">

app/components/navigation/TopNav/TopNav.container.tsx

@@ -42,54 +42,8 @@ const TopNavContainer = memo<TopNavProps>(
       },
     };
 
-    // Logo configuration based on folderTop prop
+    // Logo size based on folderTop prop
-    const logoConfig = folderTop
+    const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";
-      ? [
-          {
-            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 },
-        ];
 
     // Navigation items with translations
     const navigationItems = [
@@ -214,25 +168,6 @@ const TopNavContainer = memo<TopNavProps>(
       );
     };
 
-    const renderLogo = (
-      size:
-        | "default"
-        | "homeHeaderXsmall"
-        | "homeHeaderSm"
-        | "homeHeaderMd"
-        | "homeHeaderLg"
-        | "homeHeaderXl"
-        | "header"
-        | "headerMd"
-        | "headerLg"
-        | "headerXl"
-        | "footer"
-        | "footerLg",
-      showText: boolean,
-    ) => {
-      return <Logo size={size} showText={showText} />;
-    };
-
     return (
       <TopNavView
         folderTop={folderTop}
@@ -240,11 +175,10 @@ const TopNavContainer = memo<TopNavProps>(
         profile={profile}
         logIn={logIn}
         schemaData={schemaData}
-        logoConfig={logoConfig}
+        logoSize={logoSize}
         renderNavigationItems={renderNavigationItems}
         renderLoginButton={renderLoginButton}
         renderCreateRuleButton={renderCreateRuleButton}
-        renderLogo={renderLogo}
       />
     );
   },

app/components/navigation/TopNav/TopNav.types.ts

@@ -38,23 +38,7 @@ export interface TopNavViewProps {
       "query-input": string;
     };
   };
-  logoConfig: Array<{
+  logoSize: "topNavFolderTop" | "topNavHeader";
-    breakpoint: string;
-    size:
-      | "default"
-      | "homeHeaderXsmall"
-      | "homeHeaderSm"
-      | "homeHeaderMd"
-      | "homeHeaderLg"
-      | "homeHeaderXl"
-      | "header"
-      | "headerMd"
-      | "headerLg"
-      | "headerXl"
-      | "footer"
-      | "footerLg";
-    showText: boolean;
-  }>;
   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;
 }

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 */}
             <div className="HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] sm:rounded-t-[var(--radius-measures-radius-xlarge)] md:rounded-t-[var(--radius-measures-radius-xlarge)] lg:rounded-t-[var(--radius-measures-radius-xlarge)] xl:rounded-t-[var(--radius-measures-radius-xlarge)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-048)] h-[var(--spacing-scale-040)] sm:pl-[var(--spacing-scale-012)] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] flex-1 min-w-0 min-w-[197px] sm:min-w-0 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)] flex items-center self-end">
               {/* Logo - Consistent left positioning within HeaderTab */}
-              <div>
+              <Logo size={logoSize} showText={true} />
-                {logoConfig.map((config, index) => (
-                  <div key={index} className={config.breakpoint}>
-                    {renderLogo(config.size, config.showText)}
-                  </div>
-                ))}
-              </div>
 
               {/* XSmall menu bar - positioned next to logo */}
               <div className="block sm:hidden -me-[2px]">
@@ -163,17 +158,7 @@ function TopNavView({
           aria-label={t("ariaLabels.mainNavigation")}
         >
           {/* Logo - Consistent left positioning across all breakpoints */}
-          <div className="flex items-center">
+          <Logo size={logoSize} showText={true} />
-            {logoConfig.map((config, index) => (
-              <div
-                key={index}
-                className={config.breakpoint}
-                data-testid="logo-wrapper"
-              >
-                {renderLogo(config.size, config.showText)}
-              </div>
-            ))}
-          </div>
 
           {/* Navigation Links - Consistent center positioning */}
           <div className="flex items-center flex-1 justify-end sm:flex-none sm:justify-center">