Skip to content

feat(webui): brand logo and favicon#40

Merged
aniongithub merged 1 commit into
mainfrom
feat/logo-favicon
May 18, 2026
Merged

feat(webui): brand logo and favicon#40
aniongithub merged 1 commit into
mainfrom
feat/logo-favicon

Conversation

@aniongithub
Copy link
Copy Markdown
Owner

Gives the webui a real visual identity — a brand-blue chip-glyph that appears as the favicon, as a muted decoration in every page header, and front-and-center in the empty "select a page" state.

What's in the box

  • webui/src/assets/favicon.svg — the chip glyph, baked with the brand accent color (#0078d4), tightened viewBox so it fills the favicon cell. Wired into index.html via HtmlWebpackPlugin's favicon option.
  • webui/src/Logo.tsx — the same artwork as a Preact component with fill="currentColor", so wherever the logo is rendered it inherits the surrounding text color and works in both light and dark themes without per-theme assets.
  • App.tsx + styles.css:
    • .page-header-logo — absolutely positioned, 72-px, var(--fg-dim) at opacity: 0.6, pointer-events: none. Sits in the top-right corner of every page header as a quiet brand mark.
    • .empty (no-page selected) — flex-column layout placing a 96-px logo above the "select a page" text, both inheriting var(--fg-dim) at opacity: 0.6 to match the page-header treatment.

Notes

  • All three placements (favicon, page-header decoration, empty-state) draw the same paths from the same source; the favicon hardcodes the brand blue, the JSX uses currentColor so light/dark just works.
  • pointer-events: none on the page-header logo so it never intercepts clicks on the header.
  • The earlier iteration's full-detail original artwork (4 paths, fine dots, white stroke) didn't shrink to 16×16 cleanly — this simplified two-path chip block reads at any size and keeps the lineage with the larger placements.

  - webui/src/assets/favicon.svg: standalone icon with the brand
    accent color baked in, wired into index.html via the
    HtmlWebpackPlugin favicon option.
  - webui/src/Logo.tsx: same artwork as a Preact component that uses
    fill=currentColor so it inherits the surrounding color and works
    in both light and dark themes without per-theme assets.
  - App.tsx + styles.css: render <Logo size={72} /> as an absolutely-
    positioned, muted (opacity 0.45 over var(--fg-dim)) decoration in
    the top-right corner of the page header. pointer-events: none so
    it never intercepts clicks.
@aniongithub aniongithub merged commit 90a31d5 into main May 18, 2026
1 check passed
@aniongithub aniongithub deleted the feat/logo-favicon branch May 18, 2026 04:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant