Skip to content

refactor: reuse FullingBrand across landing and login headers #188

Description

@Che-Zhu

Problem

The brand lockup in the top-left header is visually inconsistent between the landing page (/) and the login page (/login).

The two pages render the same logo asset at the same visible mark size (24px), but use different wordmark typography:

Surface Implementation Wordmark styles
/ Duplicated markup in app/(landing)/_components/landing-client.tsx + landing.module.css 22px / 24px, letter-spacing -0.5px
/login Shared components/fulling-brand.tsx 20px (text-xl) / line-height 1, default letter-spacing

The dashboard header already uses the same shared FullingBrand component as the login page.

Both implementations were introduced together in #182, so this is a component-boundary omission rather than a compatibility requirement.

Why this should be shared

docs/design.md defines the Brand Logo Mark as the reusable top-left identity anchor and applies the design system to both public and authentication pages. Maintaining two copies allows brand dimensions and accessibility behavior to drift.

Proposed change

  • Use FullingBrand in the landing header instead of duplicating its Link, Image, mark crop, and wordmark markup.
  • Make the canonical logo/wordmark sizing, line-height, tracking, color, and accessible label live in the shared component.
  • Preserve only layout-specific positioning in the landing page stylesheet.
  • Remove the obsolete .brand, .brandMark, and .brandMark img rules after migration.

Acceptance criteria

  • /, /login, and the dashboard render the shared FullingBrand component.
  • The visible logo mark and “Fulling” wordmark have identical dimensions and typography across those headers.
  • Header layout remains correct on desktop and compact/mobile breakpoints.
  • The brand link still points to the intended destination and retains the accessible Fulling home label.
  • A regression check covers the shared rendering or computed brand styles.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions