From 93c04d0bfe09d58f3e2a73c35bd24ecb494a503e Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 6 Aug 2025 22:39:19 -0600 Subject: [PATCH] Large home header --- app/components/Avatar.js | 1 + app/components/AvatarContainer.js | 1 + app/components/HeaderTab.js | 4 ++-- app/components/HomeHeader.js | 27 ++++++++++++--------------- app/components/Logo.js | 15 +++++++++++++-- app/components/MenuBarItem.js | 2 ++ 6 files changed, 31 insertions(+), 19 deletions(-) diff --git a/app/components/Avatar.js b/app/components/Avatar.js index f3d8f9c..2abbefe 100644 --- a/app/components/Avatar.js +++ b/app/components/Avatar.js @@ -8,6 +8,7 @@ export default function Avatar({ const sizeStyles = { small: "w-[16px] h-[16px]", medium: "w-[18px] h-[18px]", + large: "w-[24px] h-[24px]", xlarge: "w-[32px] h-[32px]", }; diff --git a/app/components/AvatarContainer.js b/app/components/AvatarContainer.js index 311687f..55ecfff 100644 --- a/app/components/AvatarContainer.js +++ b/app/components/AvatarContainer.js @@ -7,6 +7,7 @@ export default function AvatarContainer({ const sizeStyles = { small: "flex -space-x-2", medium: "flex -space-x-[9px]", + large: "flex -space-x-[10px]", xlarge: "flex -space-x-[13px]", }; diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 40f51f3..7d8c54a 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -1,7 +1,7 @@ export default function HeaderTab({ children, className = "", ...props }) { return (
{children} @@ -13,7 +13,7 @@ export default function HeaderTab({ children, className = "", ...props }) { Union
); diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js index c730a6c..9e0d882 100644 --- a/app/components/HomeHeader.js +++ b/app/components/HomeHeader.js @@ -37,7 +37,7 @@ export default function HomeHeader() { }, { breakpoint: "hidden lg:block xl:hidden", - size: "headerLg", + size: "homeHeaderLg", showText: true, }, { breakpoint: "hidden xl:block", size: "headerXl", showText: true }, @@ -53,9 +53,12 @@ export default function HomeHeader() { (size === "xsmall" || size === "default" || size === "home" || - size === "homeMd") + size === "homeMd" || + size === "large") ? size === "home" || size === "homeMd" ? "homeMd" + : size === "large" + ? "large" : "xsmallUseCases" : size } @@ -63,7 +66,8 @@ export default function HomeHeader() { size === "xsmall" || size === "default" || size === "home" || - size === "homeMd" + size === "homeMd" || + size === "large" ? "home" : "default" } @@ -121,8 +125,8 @@ export default function HomeHeader() { return (
-
- +
+
{logoConfig.map((config, index) => (
@@ -150,21 +154,13 @@ export default function HomeHeader() { {renderNavigationItems("homeMd")}
-
+
{renderNavigationItems("large")}
{renderNavigationItems("xlarge")}
- -
- {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")} -
- -
- {renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")} -
@@ -179,7 +175,8 @@ export default function HomeHeader() {
- {renderCreateRuleButton("large", "xlarge", "xlarge")} + {renderLoginButton("large", "mr-[var(--spacing-scale-004)]")} + {renderCreateRuleButton("large", "large", "large")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")} diff --git a/app/components/Logo.js b/app/components/Logo.js index 69fadd0..2f828dc 100644 --- a/app/components/Logo.js +++ b/app/components/Logo.js @@ -29,6 +29,13 @@ export default function Logo({ size = "default", showText = true }) { 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]", + }, header: { containerHeight: "h-[20.85px]", gap: "gap-[4.21px]", @@ -80,6 +87,8 @@ export default function Logo({ size = "default", showText = true }) { ? sizes.homeHeaderSm : size === "homeHeaderMd" ? sizes.homeHeaderMd + : size === "homeHeaderLg" + ? sizes.homeHeaderLg : size === "header" ? sizes.header : size === "headerMd" @@ -106,7 +115,8 @@ export default function Logo({ size = "default", showText = true }) { className={`font-['Bricolage_Grotesque'] ${ size === "homeHeaderXsmall" || size === "homeHeaderSm" || - size === "homeHeaderMd" + size === "homeHeaderMd" || + size === "homeHeaderLg" ? "text-[var(--color-content-inverse-primary)]" : "text-[var(--color-content-default-primary)]" } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`} @@ -124,7 +134,8 @@ export default function Logo({ size = "default", showText = true }) { className={`flex-shrink-0 ${config.iconSize} ${ size === "homeHeaderXsmall" || size === "homeHeaderSm" || - size === "homeHeaderMd" + size === "homeHeaderMd" || + size === "homeHeaderLg" ? "filter brightness-0" : "" }`} diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js index 4d54fc1..77a788c 100644 --- a/app/components/MenuBarItem.js +++ b/app/components/MenuBarItem.js @@ -37,6 +37,8 @@ export default function MenuBarItem({ "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", homeUseCases: "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", + largeUseCases: + "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", large: "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", xlarge: