From bc731e243128fab55d47b902fbea8f7f8186f418 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 6 Aug 2025 11:28:13 -0600 Subject: [PATCH] Small home header --- app/components/Button.js | 2 +- app/components/HeaderTab.js | 11 ++++++++--- app/components/HomeHeader.js | 14 +++++++++----- app/components/Logo.js | 15 +++++++++++++-- app/components/MenuBarItem.js | 23 ++++++++++++++++++++--- public/assets/Union_sm_md_lg.svg | 3 +++ public/assets/Union_xsm.svg | 3 +++ 7 files changed, 57 insertions(+), 14 deletions(-) create mode 100644 public/assets/Union_sm_md_lg.svg create mode 100644 public/assets/Union_xsm.svg diff --git a/app/components/Button.js b/app/components/Button.js index 99f562e..2460489 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -38,7 +38,7 @@ export default function Button({ default: "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", secondary: - "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", + "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", }; const hoverOutlineStyles = { diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 6d13923..ad97bf5 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -1,14 +1,19 @@ export default function HeaderTab({ children, className = "", ...props }) { return (
{children} Union + Union
); diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js index 7ae15cb..e919e4a 100644 --- a/app/components/HomeHeader.js +++ b/app/components/HomeHeader.js @@ -25,7 +25,11 @@ export default function HomeHeader() { size: "homeHeaderXsmall", showText: false, }, - { breakpoint: "hidden sm:block md:hidden", size: "header", showText: true }, + { + breakpoint: "hidden sm:block md:hidden", + size: "homeHeaderSm", + showText: true, + }, { breakpoint: "hidden md:block lg:hidden", size: "headerMd", @@ -99,8 +103,8 @@ export default function HomeHeader() { }; return ( -
-
+
+
{logoConfig.map((config, index) => ( @@ -118,8 +122,8 @@ export default function HomeHeader() {
-
- +
+ {renderNavigationItems("xsmall")} {renderLoginButton("xsmall")} diff --git a/app/components/Logo.js b/app/components/Logo.js index 7f77f63..b4f989f 100644 --- a/app/components/Logo.js +++ b/app/components/Logo.js @@ -15,6 +15,13 @@ export default function Logo({ size = "default", showText = true }) { 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]", + }, header: { containerHeight: "h-[20.85px]", gap: "gap-[4.21px]", @@ -62,6 +69,8 @@ export default function Logo({ size = "default", showText = true }) { const config = size === "homeHeaderXsmall" ? sizes.homeHeaderXsmall + : size === "homeHeaderSm" + ? sizes.homeHeaderSm : size === "header" ? sizes.header : size === "headerMd" @@ -86,7 +95,7 @@ export default function Logo({ size = "default", showText = true }) { {showText && (
diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js index 7b8d715..9709e6f 100644 --- a/app/components/MenuBarItem.js +++ b/app/components/MenuBarItem.js @@ -10,12 +10,12 @@ export default function MenuBarItem({ const variantStyles = { 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)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", - home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", + home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", }; const activeOutlineStyles = { xsmall: - "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1", + "active:outline-1 active:outline-[var(--color-content-default-primary)] active:outline-offset-1", default: "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1", large: @@ -24,6 +24,19 @@ export default function MenuBarItem({ "active:outline-2 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1", }; + const homeOutlineStyles = { + xsmall: + "active:outline-1 active:outline-[var(--color-content-default-primary)]", + xsmallUseCases: + "active:outline-1 active:outline-[var(--color-content-default-primary)]", + default: + "active:outline-1 active:outline-[var(--color-content-default-primary)]", + large: + "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", + xlarge: + "active:outline-2 active:outline-[var(--color-content-default-primary)]", + }; + const sizeStyles = { default: "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]", @@ -59,7 +72,11 @@ export default function MenuBarItem({ finalVariant = "default"; } - const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${activeOutlineStyles[size]} ${className}`; + const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${ + finalVariant === "home" + ? homeOutlineStyles[size] + : activeOutlineStyles[size] + } ${className}`; if (disabled) { return ( diff --git a/public/assets/Union_sm_md_lg.svg b/public/assets/Union_sm_md_lg.svg new file mode 100644 index 0000000..44bd233 --- /dev/null +++ b/public/assets/Union_sm_md_lg.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Union_xsm.svg b/public/assets/Union_xsm.svg new file mode 100644 index 0000000..8583c9c --- /dev/null +++ b/public/assets/Union_xsm.svg @@ -0,0 +1,3 @@ + + +