From 67c7d7e9c2ecf0e7c1e36be134bcdbcd43fa01ae Mon Sep 17 00:00:00 2001 From: Jules <78474837+JulesFiliot@users.noreply.github.com> Date: Thu, 28 May 2026 19:25:16 +0900 Subject: [PATCH] fix(ui): add button hover effects and fix arrow icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ui): add LogosWordmark icon SVG wordmark for the "Logos" brand name, using fill-current so color is driven by surrounding text color -- matching the pattern of LogosMark. * fix(web): align navbar brand lockup with Figma - Shrink lambda mark from 14px to 11px (Figma: 8x11px vector) - Tighten brand lockup gap from 6px to 4px - Replace text label with LogosWordmark SVG; keep sr-only span for a11y - Fix mobile brand link typography (was font-serif 18px, now text-eyebrow) - Nudge wordmark down 1px to optically align with the lambda mark * fix(ui): align overlay navbar brand lockup and typography with Figma - Replace text logoLabel fallback with LogosMark + LogosWordmark SVGs - Move logo top from md:top-1.5 to top-3.5 to align with panel tabs - Remove tracking-[0.08em] and add font-semibold on panel tab buttons - Increase CTA vertical padding from py-2 to py-2.5 * fix(web): align closed navbar brand lockup, typography, and layout with Figma - Remove BrandLockup wrapper; inline LogosMark + LogosWordmark directly - Remove tracking-[0.08em] and add font-semibold on nav link buttons - Increase desktop CTA vertical padding from min-h-7 to py-2.5 - Restructure desktop bar to absolute positioning (relative container) so logo, nav, and CTA positions mirror the overlay header exactly - Mobile bar: add relative positioning; logo now uses absolute top-3.5 left-3 * fix(ui): vertically center overlay header elements - Logo and close button: top-3.5/top-[14px] → top-1/2 -translate-y-1/2 (elements live inside the 42px OverlayHeader, so 50% resolves correctly) - Nav tabs and CTA: top-3.5/top-1.5 → top-[22.5px]/top-[22px] -translate-y-1/2 (elements live in the outer 700px container, so a fixed value matching the header mid-point is used instead of 50%) - Nav tabs: items-start → items-center to match the centered position * fix(web): vertically center navbar and fix mobile menu gap - Mobile bar: replace 3-col grid with flat relative container; remove dead-code nav/CTA shell that was never visible at mobile widths - Mobile logo: top-3.5 → top-1/2 -translate-y-1/2 (true vertical center) - Mobile hamburger: repositioned from grid col-2 (50% center) to left-[62.5%] -translate-x-1/2 (matches overlay close button and Figma spec), adding gap between logo and menu; add font-semibold - Desktop logo, nav tabs, CTA: top-3.5/top-1.5 → top-1/2 -translate-y-1/2 * fix(ui): update arrow icon and add hover effects to button variants - Replace ButtonArrowIcon SVG with filled 10x10 arrow, increase gap to 1.5 - Primary: hover:bg-accent-steel-teal (#5F797C) - Secondary: hover:bg-gray-02 (#B8BDB8) with border cleared on hover * fix(web): update download icon style * fix(web): fit status CTA button to content width * fix(ui): make button arrow inherit variant colour Use currentColor for the arrow icon so the primary button renders a white arrow while other variants keep their text-aligned icon colour. --- .../technology-stack/tech-overview-hero.tsx | 2 +- apps/web/public/icons/download.svg | 2 +- packages/ui/src/primitives/button/button.tsx | 23 ++++++++----------- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/apps/web/components/sections/technology-stack/tech-overview-hero.tsx b/apps/web/components/sections/technology-stack/tech-overview-hero.tsx index 9e209a8646..55db5325a3 100644 --- a/apps/web/components/sections/technology-stack/tech-overview-hero.tsx +++ b/apps/web/components/sections/technology-stack/tech-overview-hero.tsx @@ -51,7 +51,7 @@ function StatusCard({ href={status.cta.href} variant={status.cta.variant ?? 'secondary'} icon={getButtonIcon(status.cta.iconOverride)} - className="w-[326px] cursor-pointer justify-between" + className="cursor-pointer" > {status.cta.label} diff --git a/apps/web/public/icons/download.svg b/apps/web/public/icons/download.svg index 4b4c399310..dd9b99d1e8 100644 --- a/apps/web/public/icons/download.svg +++ b/apps/web/public/icons/download.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/ui/src/primitives/button/button.tsx b/packages/ui/src/primitives/button/button.tsx index 7bfd7f6b29..8b14d8cef3 100644 --- a/packages/ui/src/primitives/button/button.tsx +++ b/packages/ui/src/primitives/button/button.tsx @@ -60,23 +60,20 @@ type ButtonElementProps = CommonProps & export type ButtonProps = AnchorProps | ButtonElementProps -export function ButtonArrowIcon({ - className, - ...props -}: SVGAttributes) { +export function ButtonArrowIcon(props: SVGAttributes) { return ( ) @@ -84,9 +81,9 @@ export function ButtonArrowIcon({ const containerByVariant: Record = { primary: - 'inline-flex items-center justify-center rounded-xl bg-brand-dark-green px-3 py-2 text-brand-off-white backdrop-blur-[5px]', + 'inline-flex items-center justify-center rounded-xl bg-brand-dark-green px-3 py-2 text-brand-off-white backdrop-blur-[5px] transition-colors hover:bg-accent-steel-teal', secondary: - 'inline-flex items-center justify-center rounded-[4px] border border-brand-dark-green/50 px-3 py-2 text-brand-dark-green', + 'inline-flex items-center justify-center border border-brand-dark-green/50 px-3 py-2 text-brand-dark-green transition-colors hover:bg-gray-02 hover:border-transparent', tertiary: 'inline-flex items-center justify-center rounded-[4px] text-brand-dark-green', link: 'inline-flex items-center justify-center text-brand-dark-green', @@ -108,7 +105,7 @@ export function Button(props: ButtonProps) { }` const content = ( - + {children} {resolvedIcon}