CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up logo component

Browse Source
This commit is contained in:
adilallo
2026-02-07 22:51:27 -07:00
parent e6c1002dbb
commit 37555b2725
5 changed files with 56 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/icons/Logo.tsx
+45 -138
View File
@@ -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)]",
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<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 =
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 (
<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 */}
{showText && (
<div
className={`font-bricolage-grotesque ${
size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd" ||
size === "homeHeaderLg" ||
size === "homeHeaderXl"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${
config.lineHeight
} font-normal tracking-[0px] transition-colors duration-200`}
aria-label="CommunityRule"
>
CommunityRule
</div>
)}
{/* Logo Text - responsive visibility for topNav sizes */}
<div
className={`font-bricolage-grotesque ${
size === "topNavFolderTop"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${
config.lineHeight
} font-normal tracking-[0px] transition-colors duration-200 ${
size === "topNavFolderTop" || size === "topNavHeader"
? showText
? "hidden sm:block"
: "hidden"
: showText
? ""
: "hidden"
}`}
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 === "homeHeaderSm" ||
size === "homeHeaderMd" ||
size === "homeHeaderLg" ||
size === "homeHeaderXl"
? "filter brightness-0"
: ""
size === "topNavFolderTop" ? "filter brightness-0" : ""
}`}
aria-hidden="true"
/>
app/components/navigation/Footer.tsx
+2 -10
View File
@@ -39,16 +39,8 @@ const Footer = memo(() => {
lg:py-[var(--spacing-measures-spacing-096,96px)]
lg:gap-[var(--spacing-measures-spacing-060,60px)]"
>
{/* Logo*/}
<div className="block sm:hidden">
<Logo />
</div>
<div className="hidden sm:block lg:hidden">
<Logo size="footer" />
</div>
<div className="hidden lg:block">
<Logo size="footerLg" />
</div>
{/* Logo */}
<Logo size="footer" />
{/* 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
+3 -69
View File
@@ -42,54 +42,8 @@ const TopNavContainer = memo<TopNavProps>(
},
};
// 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<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
+1 -33
View File
@@ -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;
}
app/components/navigation/TopNav/TopNav.view.tsx
+5 -20
View File
@@ -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>
{logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}>
{renderLogo(config.size, config.showText)}
</div>
))}
</div>
<Logo size={logoSize} showText={true} />
{/* 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">
{logoConfig.map((config, index) => (
<div
key={index}
className={config.breakpoint}
data-testid="logo-wrapper"
>
{renderLogo(config.size, config.showText)}
</div>
))}
</div>
<Logo size={logoSize} showText={true} />
{/* Navigation Links - Consistent center positioning */}
<div className="flex items-center flex-1 justify-end sm:flex-none sm:justify-center">