feat(explorer): typography reskin + light mode + header/search refresh by achalvs · Pull Request #876 · tempoxyz/tempo-apps

achalvs · 2026-04-24T00:34:40Z

Summary

Two-pass reskin of the explorer, covering typography, light mode, header/search density, breadcrumbs, and small QoL animations.

Typography

Pilat for sans and headings (--font-heading, --font-display, --font-sans).
Geist Mono for monospace (--font-mono), with slashed zeros disabled via font-feature-settings: "zero" off on mono contexts.
HB Set is bundled as a self-hosted fallback but no longer wired into any token; switching it on is a one-line change in styles.css.
Heading weights normalized across NotFound, ErrorBoundary, and block countdown so Pilat does not synthesize bold.

Light mode

Fills in a real light palette for tokens that were dark-on-both-sides previously (--color-background-primary, --color-content-primary, --color-border-*, --color-card*, --color-base-*, etc.).
html now uses color-scheme: light dark with html[data-theme="light|dark"] overrides so the user preference wins over system.
Pre-hydration bootstrap script in __root.tsx reads the persisted preference from localStorage and applies data-theme / style.colorScheme before first paint (no FOUC). suppressHydrationWarning on <html> is safe here since the attribute is intentionally mutated before hydration.
useTheme hook + ThemeToggle button mounted in the Header and Footer.
Footer text-ui-meta now resolves to var(--color-content-primary) so links are visible on a white background.
Sphere swaps to a lighter landing-orb-light.svg on light mode.
Input-like surfaces (--color-background-alt, --color-base-alt, --color-base-plane-interactive, --color-solid-gray-3) nudged from #f5f5f5 → #fafafa so fields don't read as gray blobs on white.

Header

Tempo wordmark shrunk 25% (h-6 → h-[18px]).
Top padding tightened (mobile 36→16, desktop 48→24). Mid-width inline-search strip 88→60.
Network badge smaller and tokenized: text-[14px] h-[28px] → text-[12px] h-[24px], hardcoded #2C2C2F/#1A1A1A replaced with border-base-border bg-surface.
Block number in the top-right is now muted (text-tertiary) and animates on every tick with a cascading slot-machine roll-in (right-most digit first, 30 ms stagger).

Search

Placeholder changed to Search by address, hash, or block....
New ExploreInput size="compact" variant (h-[34px], 14 px text, tighter padding, 24 px submit button) wired into all three header ExploreInput instances so the placeholder no longer clips.
Landing page keeps size="large".

Breadcrumbs

Split into two segments: entity group + identifier. Examples:
- Home > Transaction > 0x… (Tx spelled out, mono id)
- Home > Receipt > 0x…
- Home > Address > 0x…
- Home > Token > 0x…
- Home > Block > 14314259
Identifiers render in font-mono tabular-nums for vertical alignment.

Lists / Tables

List pages (Blocks, Tokens, Validators, Fee AMM): one-line muted description under the page title; duplicate section title in the table header removed so the header shows only the item count.
Sections.title is now optional.
DataGrid headers get min-w-0 overflow-hidden and the inner label gets truncate to stop responsive column labels from overflowing / overlapping on narrow widths.
Validators table: Hide inactive checkbox moved into the Sections contextual slot as a Show inactive switch with inverted semantics; check/X icons replaced with a pulsing green / static red dot; validator names rendered plain-sans (badge removed); muted # index column; Midcut min={6} so Address and Public Key truncate to the same visible length.

Detail views

Trim gap above breadcrumbs on every detail route (pt-20 → pt-8 on blocks list, block detail, tx, receipt, address, token, validators, tokens, fee-amm, countdown, demo/empty-state).
BlockCard hash renders at 13 px / 33 ch max-width so it fits in two lines instead of three.
BlockCard.BlockNumber non-zero digits animate in lotto-style on mount (leading zeros stay static gray).
TxTransactionCard "Relative" pill replaced with a muted "· Relative" suffix; click-to-cycle behaviour preserved.

Files and assets

apps/explorer/public/fonts/pilat/* (8 weights).
apps/explorer/public/fonts/hb-set/* (3 weights + italics, not currently wired in).
apps/explorer/public/landing-orb-light.svg for light-mode sphere.

Dev-only caveat

Transaction history on an address page returns 401 locally without TIDX_BASIC_AUTH in apps/explorer/.env. Not a code regression.

Test plan

Pre-existing unrelated failures outside this branch's scope:

apps/contract-verification has 3 type errors against its generated Env type.
apps/explorer vitest tooling has a pnpm-pool-workers / tanstack resolver issue.

Made with Cursor

Light mode screenshots

Captured on testnet at 1440 viewport. Each top-level route shown rendering with real testnet data in light mode.

Landing	Blocks

Tokens	Token detail (PathUSD)

Block detail	Transaction detail

Address detail	Receipt

github-actions · 2026-04-24T00:35:43Z

Bundle Size Report

Metric	Size	Δ Change
Total	4.6 MB	+418.7 KB (+9.7%)
Gzip	1.3 MB	+125.2 KB (+10.0%)
Brotli	1.2 MB	+109.4 KB (+10.1%)

Chunk changes (>1KB)

Chunk	Change
assets/chains.js (removed)	-360.7 KB
assets/export-rate-limit.js (removed)	-177.3 KB
assets/wagmi.config.js	-29.5 KB
assets/AbiItem.js (removed)	-27.1 KB
assets/env.js	-9.6 KB
assets/validators.js (removed)	-5.1 KB
assets/router.js	+1.0 KB
assets/call.js	+1.2 KB
assets/_address.js	+1.4 KB
assets/Breadcrumbs.js	+1.5 KB
assets/parseAbiItem.js (new)	+1.6 KB
assets/known-event-totals.js (new)	+2.0 KB
assets/tempo-queries.js	+2.4 KB
assets/.js	+2.8 KB
assets/_layout.js	+7.6 KB
assets/Addresses.js (new)	+9.1 KB
assets/schemas.js	+22.7 KB
assets/structs.js (new)	+23.9 KB
assets/queries.js	+26.4 KB
assets/Connectors.js (new)	+55.5 KB
...and 4 more

Compared against main branch (baseline from 4/27/2026, 4:02:54 PM)

github-actions · 2026-04-24T00:37:20Z

Cloudflare Deployments

App	Environment	Status	Preview
explorer	devnet	[OK] Deployed	View Preview
explorer	mainnet	[OK] Deployed	View Preview
explorer	testnet	[OK] Deployed	View Preview
fee-payer	devnet	[>>] Skipped	No changes
fee-payer	moderato	[>>] Skipped	No changes
fee-payer	privy	[>>] Skipped	No changes
og	-	[>>] Skipped	No changes
perf	-	[>>] Skipped	No changes
tokenlist	-	[>>] Skipped	No changes

@font-face

Apply a typography and UI reskin across the explorer. Introduce HB Set for headings, Pilat for sans-serif, Geist Mono for monospace, alongside polish to top-level list pages and the validators table. - Fonts: add Pilat (8 weights) and HB Set (Light/Regular/Medium) woff2 assets, declare @font-face rules, update --font-heading / --font-display / --font-sans / --font-mono tokens, and preload the primary faces from __root.tsx. HB Set weight kept at Regular (400) so Tailwind font-normal uses the real face rather than synthesizing bold. - Header: shrink Tempo wordmark by 25%, update search placeholder to "Search by address, hash, or block...", simplify address breadcrumb label (drop "Addr" prefix). - Homepage: replace landing-circles.png with an inline SVG (Sphere.tsx) so stroke width, color, and dark-mode inheritance are controllable. - Top-level list pages (Blocks, Tokens, Validators, Fee AMM): add an HB Set page title with a one-line muted Pilat description, indented with ml-2, and drop the duplicated section title so the Sections header shows only the count. - Sections: make `title` optional and render just the count when omitted. - Validators table polish: - Move the "Hide inactive" checkbox into the Sections contextual slot as a rounded switch labeled "Show inactive" with inverted default (inactive hidden). - Replace Check/X icons with a pulsing green / static red dot plus muted Pilat text. - Drop the badge styling on validator names; render as plain sans. - Muted index column with a monospace `#` header for vertical alignment against the tabular numeric cells. - Unify Address and Public Key truncation via Midcut min=6 and fixed column widths so both render at similar character lengths. - Lighten heading weights across NotFound, ErrorBoundary, and the block countdown page so HB Set no longer synthesizes bold. Made-with: Cursor

…, compact search - light mode: real light palette for previously dark-only tokens, html[data-theme] overrides, pre-hydration bootstrap script, ThemeToggle wired into Header + Footer - breadcrumbs: split into entity group + mono id ("Transaction" instead of "Tx"), mono + tabular-nums for ids - gap trim: pt-20 → pt-8 across all list/detail routes - BlockCard hash: 13px / 33ch max-width so the hash renders in 2 lines instead of 3 - BlockCard number: per-digit slot-machine roll on mount - Header block number: muted by default + cascading lotto on every tick - Header: top padding 36→16 (48→24 desktop), mid-width height 88→60 - Network badge: smaller (14→12px), tighter padding - ExploreInput: new size=compact (34px, 14px text) used in all three Header variants so the placeholder stops clipping - Fonts: drop HB Set, use Pilat everywhere (--font-heading now points at Pilat) - Mono: disable OpenType `zero` feature on mono contexts so Geist Mono loses slashed zeros - Footer: text-ui-meta now uses --color-content-primary so links are visible in light mode - Light mode field polish: --color-background-alt / --color-base-alt / --color-base-plane-interactive / --color-solid-gray-3 bumped to #fafafa - DataGrid: min-w-0 + overflow-hidden on header cells so responsive column labels don't visually overlap - Transaction card: "Relative" pill replaced with muted "· Relative" label, cycle-on-click preserved Made-with: Cursor

Use theme-aware orb SVGs (landing-orb-light.svg, landing-orb-dark.svg) and reduce container opacity to 20% so the background artwork recedes behind foreground content. Made-with: Cursor

o-az · 2026-04-30T19:38:52Z

@achalvs I updated the PR since preview preview deployments work again. Looking fire so far!

goksu

The animation added to the top-right block counter and when navigated to the block page is very jittery and off. Might want to either make it smoother or remove it. For blocks they are updating already every second so not sure what the value of animating each increment is.

Separately: was there a specific ask to add the theme selector / changer? We removed this from the top-right of Explorer while back in the spirit of simplifying things. I rather not add it if there are no specific asks. If we are going to add it: bottom nav of links is not a place to put this action.

Co-authored-by: Cursor <cursoragent@cursor.com>

achalvs · 2026-05-06T00:22:34Z

Updated for merge: pulled latest main (commits up through #913, #914) into reskin cleanly — no content conflicts, only a cosmetic biome formatting fix folded into the merge commit. PR #915 (landing bento + video hero) layered on top of this branch and also merged with the latest main; both are ready to review with up-to-date histories.

Co-authored-by: Cursor <cursoragent@cursor.com>

achalvs changed the title ~~feat(explorer): reskin with HB Set + Pilat + Geist Mono~~ feat(explorer): typography reskin + light mode + header/search refresh Apr 24, 2026

achalvs added 3 commits April 30, 2026 12:37

feat(explorer): add dark mode sphere artwork, dim orb to 20%

f4ce6e0

Use theme-aware orb SVGs (landing-orb-light.svg, landing-orb-dark.svg) and reduce container opacity to 20% so the background artwork recedes behind foreground content. Made-with: Cursor

o-az force-pushed the reskin branch from 1267ac7 to f4ce6e0 Compare April 30, 2026 19:38

goksu requested changes May 5, 2026

View reviewed changes

achalvs mentioned this pull request May 6, 2026

feat(explorer): landing bento — live network stats grid #915

Open

7 tasks

Merge remote-tracking branch 'origin/main' into reskin

fcc4fca

Co-authored-by: Cursor <cursoragent@cursor.com>

docs(explorer): add light-mode screenshots for top-level views

a2e2c75

Co-authored-by: Cursor <cursoragent@cursor.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(explorer): typography reskin + light mode + header/search refresh#876

feat(explorer): typography reskin + light mode + header/search refresh#876
achalvs wants to merge 5 commits intomainfrom
reskin

achalvs commented Apr 24, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 24, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 24, 2026 •

edited

Loading

Uh oh!

o-az commented Apr 30, 2026

Uh oh!

goksu left a comment

Uh oh!

achalvs commented May 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

achalvs commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Typography

Light mode

Header

Search

Breadcrumbs

Lists / Tables

Detail views

Files and assets

Dev-only caveat

Test plan

Light mode screenshots

Uh oh!

github-actions Bot commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

github-actions Bot commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Cloudflare Deployments

Uh oh!

o-az commented Apr 30, 2026

Uh oh!

goksu left a comment

Choose a reason for hiding this comment

Uh oh!

achalvs commented May 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

achalvs commented Apr 24, 2026 •

edited

Loading

github-actions Bot commented Apr 24, 2026 •

edited

Loading

github-actions Bot commented Apr 24, 2026 •

edited

Loading