Site-wide polish: fix invisible Discord button, one heading tier + less prose, shared day+hour formatter #97

New issue

Closed

opened 2026-07-07 06:11:12 +00:00 by coilysiren · 2 comments

coilysiren commented

2026-07-07 06:11:12 +00:00

Owner

Discord button contrast (bug)

On /info the "Join the Discord" button renders light green text on a light green fill, so the label is invisible. The button is className="button button-primary" in frontend/src/pages/Info.tsx, styled by .button-primary in index.css (around line 832). Give it a foreground that reads against its fill (the MCP Jinja theme uses Discord blurple #5865f2 with white text for .cta.discord in templates/eco.css as a reference). Fix the contrast so the label is clearly legible in both light and dark.

One heading tier, less prose (site-wide)

Kai: "a lot of pages have up to 3 tiers of headings / intros and I want to compress to just one. For example 'Trade & store logistics' and 'What to buy, sell, and ship' and 'The whole market on one always-on page...' - I only want the 1st section. Less prose in general, across the whole site. Some pages are missing the 'Trade & store logistics' style heading though."

Each page keeps exactly one top heading + at most one short intro line. Cut the second and third stacked intro/subtitle blocks.
Where a page is missing the single top heading (the "Trade & store logistics" style anchor), add one so every page has exactly one.
Trim verbose intro paragraphs to a tight line across the pages this ticket owns. The sibling tickets (items, users, jobs, trade) trim their own pages, so coordinate on shared components (Layout, Hero) additively to avoid clobbering them.

Shared day+hour / relative-time formatter

Kai: "every place that mentions a day should also mention an hour." Author one helper in frontend/src/lib/format.ts (e.g. formatDayHour(timeSeconds) and formatRelative(timeSeconds, nowSeconds)) computing against the world clock (the /info snapshot's TimeSinceStart). The item and user tickets consume it. This ticket owns authoring it and applying it to any day rendering on the pages it owns.

Done when

The Discord label is legible, every page carries exactly one heading + at most one intro line with trimmed prose, the shared day+hour/relative formatter exists and is used on this ticket's pages, and no page is left without a top heading. ward exec test + lint gates green. Update docs/FEATURES.md only if a page's structure materially changed.

Site-wide polish sweep: fix the invisible Discord button, collapse the heading/intro stack to one tier, cut prose, and author the shared day+hour formatter. Filed from a batch of eco-app feedback Kai handed the director surface. Touches `frontend/src/index.css`, `frontend/src/lib/format.ts`, and the pages not restructured by the sibling tickets (Home, Info, Crafting, Civics, Map, and the shared Layout/Hero). ## Discord button contrast (bug) On `/info` the "Join the Discord" button renders light green text on a light green fill, so the label is invisible. The button is `className="button button-primary"` in `frontend/src/pages/Info.tsx`, styled by `.button-primary` in `index.css` (around line 832). Give it a foreground that reads against its fill (the MCP Jinja theme uses Discord blurple `#5865f2` with white text for `.cta.discord` in `templates/eco.css` as a reference). Fix the contrast so the label is clearly legible in both light and dark. ## One heading tier, less prose (site-wide) Kai: "a lot of pages have up to 3 tiers of headings / intros and I want to compress to just one. For example 'Trade & store logistics' and 'What to buy, sell, and ship' and 'The whole market on one always-on page...' - I only want the 1st section. Less prose in general, across the whole site. Some pages are missing the 'Trade & store logistics' style heading though." - Each page keeps exactly one top heading + at most one short intro line. Cut the second and third stacked intro/subtitle blocks. - Where a page is missing the single top heading (the "Trade & store logistics" style anchor), add one so every page has exactly one. - Trim verbose intro paragraphs to a tight line across the pages this ticket owns. The sibling tickets (items, users, jobs, trade) trim their own pages, so coordinate on shared components (Layout, Hero) additively to avoid clobbering them. ## Shared day+hour / relative-time formatter Kai: "every place that mentions a day should also mention an hour." Author one helper in `frontend/src/lib/format.ts` (e.g. `formatDayHour(timeSeconds)` and `formatRelative(timeSeconds, nowSeconds)`) computing against the world clock (the `/info` snapshot's `TimeSinceStart`). The item and user tickets consume it. This ticket owns authoring it and applying it to any day rendering on the pages it owns. ## Done when The Discord label is legible, every page carries exactly one heading + at most one intro line with trimmed prose, the shared day+hour/relative formatter exists and is used on this ticket's pages, and no page is left without a top heading. `ward exec` test + lint gates green. Update `docs/FEATURES.md` only if a page's structure materially changed.

coilysiren added the

headless

labels

2026-07-07 06:12:47 +00:00

coilyco-ops commented

2026-07-07 06:15:33 +00:00

Member

🔒 Reserved by ward agent --driver claude — container engineer-claude-eco-app-97 on host KAI-DESKTOP-TOWER is carrying this issue (reserved 2026-07-07T06:15:27Z). Concurrent ward agent runs are blocked until it finishes or the reservation goes stale (2h0m0s TTL); --force overrides.

Do not comment on or edit this issue to steer the run while it is reserved. The engineer seeded the body once at launch and never re-reads it, so a comment or edit reaches only human readers, never the running engineer. A correction goes to a new issue, dispatched fresh — that is the only channel that reaches a run in flight. Where the forge supports it, ward locks this conversation to make that a road-block rather than a convention (ward#494).

run seed context — what this run is carrying (ward#609)

Resolved: coilyco-gaming/eco-app#97 · branch issue-97 · driver claude · workflow direct-main
Run: engineer-claude-eco-app-97 · ward v0.419.0 · dispatched 2026-07-07T06:15:27Z
Comment thread: 0 included in the pre-flight read, 0 stripped (ward's own automated comments).

Issue body as seeded:

Site-wide polish sweep: fix the invisible Discord button, collapse the heading/intro stack to one tier, cut prose, and author the shared day+hour formatter. Filed from a batch of eco-app feedback Kai handed the director surface. Touches `frontend/src/index.css`, `frontend/src/lib/format.ts`, and the pages not restructured by the sibling tickets (Home, Info, Crafting, Civics, Map, and the shared Layout/Hero).

## Discord button contrast (bug)

On `/info` the "Join the Discord" button renders light green text on a light green fill, so the label is invisible. The button is `className="button button-primary"` in `frontend/src/pages/Info.tsx`, styled by `.button-primary` in `index.css` (around line 832). Give it a foreground that reads against its fill (the MCP Jinja theme uses Discord blurple `#5865f2` with white text for `.cta.discord` in `templates/eco.css` as a reference). Fix the contrast so the label is clearly legible in both light and dark.

## One heading tier, less prose (site-wide)

Kai: "a lot of pages have up to 3 tiers of headings / intros and I want to compress to just one. For example 'Trade &amp; store logistics' and 'What to buy, sell, and ship' and 'The whole market on one always-on page...' - I only want the 1st section. Less prose in general, across the whole site. Some pages are missing the 'Trade &amp; store logistics' style heading though."

- Each page keeps exactly one top heading + at most one short intro line. Cut the second and third stacked intro/subtitle blocks.
- Where a page is missing the single top heading (the "Trade &amp; store logistics" style anchor), add one so every page has exactly one.
- Trim verbose intro paragraphs to a tight line across the pages this ticket owns. The sibling tickets (items, users, jobs, trade) trim their own pages, so coordinate on shared components (Layout, Hero) additively to avoid clobbering them.

## Shared day+hour / relative-time formatter

Kai: "every place that mentions a day should also mention an h

… (truncated to 2000 chars; full body is on this issue)

Static container doctrine and seed boilerplate are identical every run and omitted here (they ride ward v0.419.0).

— Claude (she/her), via ward agent

🔒 Reserved by `ward agent --driver claude` — container `engineer-claude-eco-app-97` on host `KAI-DESKTOP-TOWER` is carrying this issue (reserved 2026-07-07T06:15:27Z). Concurrent `ward agent` runs are blocked until it finishes or the reservation goes stale (2h0m0s TTL); `--force` overrides. **Do not comment on or edit this issue to steer the run while it is reserved.** The engineer seeded the body once at launch and never re-reads it, so a comment or edit reaches only human readers, never the running engineer. A correction goes to a **new issue, dispatched fresh** — that is the only channel that reaches a run in flight. Where the forge supports it, ward locks this conversation to make that a road-block rather than a convention (ward#494). <details><summary>run seed context — what this run is carrying (ward#609)</summary> - **Resolved:** `coilyco-gaming/eco-app#97` · branch `issue-97` · driver `claude` · workflow `direct-main` - **Run:** `engineer-claude-eco-app-97` · ward `v0.419.0` · dispatched `2026-07-07T06:15:27Z` - **Comment thread:** 0 included in the pre-flight read, 0 stripped (ward's own automated comments). **Issue body as seeded:** ``` Site-wide polish sweep: fix the invisible Discord button, collapse the heading/intro stack to one tier, cut prose, and author the shared day+hour formatter. Filed from a batch of eco-app feedback Kai handed the director surface. Touches `frontend/src/index.css`, `frontend/src/lib/format.ts`, and the pages not restructured by the sibling tickets (Home, Info, Crafting, Civics, Map, and the shared Layout/Hero). ## Discord button contrast (bug) On `/info` the "Join the Discord" button renders light green text on a light green fill, so the label is invisible. The button is `className="button button-primary"` in `frontend/src/pages/Info.tsx`, styled by `.button-primary` in `index.css` (around line 832). Give it a foreground that reads against its fill (the MCP Jinja theme uses Discord blurple `#5865f2` with white text for `.cta.discord` in `templates/eco.css` as a reference). Fix the contrast so the label is clearly legible in both light and dark. ## One heading tier, less prose (site-wide) Kai: "a lot of pages have up to 3 tiers of headings / intros and I want to compress to just one. For example 'Trade & store logistics' and 'What to buy, sell, and ship' and 'The whole market on one always-on page...' - I only want the 1st section. Less prose in general, across the whole site. Some pages are missing the 'Trade & store logistics' style heading though." - Each page keeps exactly one top heading + at most one short intro line. Cut the second and third stacked intro/subtitle blocks. - Where a page is missing the single top heading (the "Trade & store logistics" style anchor), add one so every page has exactly one. - Trim verbose intro paragraphs to a tight line across the pages this ticket owns. The sibling tickets (items, users, jobs, trade) trim their own pages, so coordinate on shared components (Layout, Hero) additively to avoid clobbering them. ## Shared day+hour / relative-time formatter Kai: "every place that mentions a day should also mention an h ``` … (truncated to 2000 chars; full body is on this issue) Static container doctrine and seed boilerplate are identical every run and omitted here (they ride ward v0.419.0). </details>  — Claude (she/her), via `ward agent`

coilysiren referenced this issue from a commit

2026-07-07 06:31:02 +00:00

fix(ui): site-wide polish — legible Discord button, one heading tier, shared day+hour formatter (#97)

coilysiren closed this issue

2026-07-07 06:31:02 +00:00

coilysiren commented

2026-07-07 06:31:50 +00:00

Author

Owner

WARD-OUTCOME: done - legible blurple Discord button, one-heading heros across Home/Info/Crafting/Civics/Map, and a shared world-clock day+hour formatter, landed on main.

Retrospective: this one was mostly a reading exercise. The Discord "bug" was the fun part — the label was not mis-coloured, it was a:visited { color: var(--leaf) } quietly out-specifying .button-primary, so only visited buttons went green-on-green. Diagnosing that mattered more than the fix; a naive "just set a foreground" would have left the visited state broken. Went blurple + explicit :visited to match the MCP card.

The heading collapse was low-risk once I confirmed the sibling tickets only touch their own pages and that Hero is Info-only. The judgment call was which tier survives — Kai's example keeps the plain "Trade & store logistics" label over the poetic subtitle, so I promoted the descriptive kicker to the sole h1 everywhere. For Info I let the live server description be the heading, which also kept an existing test honest.

The formatter fought back a little: this ticket's own pages render pre-folded day integers, not raw seconds, so there was genuinely nothing to convert. To make "used on this ticket's pages" real rather than nominal, I exposed timeSinceStartS on the /info cycle payload and drove the meteor banner caption through formatDayHour. Worth flagging the two time bases in play — the world clock is 3600s/day while the social feed folds at 86400s/day; I documented both and kept formatRelative on real-elapsed units so "3 hours ago" stays honest. If items/users feed social-feed seconds into formatDayHour expecting 86400, that will read wrong — worth a shared note when those tickets wire up.

Confidence high: all gates green (492 pytest, 91 vitest, ruff/mypy/eslint, build) pre- and post-merge. Only rough edge is the cross-exporter day-scale ambiguity above.

WARD-OUTCOME: done - legible blurple Discord button, one-heading heros across Home/Info/Crafting/Civics/Map, and a shared world-clock day+hour formatter, landed on main. Retrospective: this one was mostly a reading exercise. The Discord "bug" was the fun part — the label was not mis-coloured, it was `a:visited { color: var(--leaf) }` quietly out-specifying `.button-primary`, so only *visited* buttons went green-on-green. Diagnosing that mattered more than the fix; a naive "just set a foreground" would have left the visited state broken. Went blurple + explicit `:visited` to match the MCP card. The heading collapse was low-risk once I confirmed the sibling tickets only touch their own pages and that Hero is Info-only. The judgment call was *which* tier survives — Kai's example keeps the plain "Trade & store logistics" label over the poetic subtitle, so I promoted the descriptive kicker to the sole h1 everywhere. For Info I let the live server description be the heading, which also kept an existing test honest. The formatter fought back a little: this ticket's own pages render pre-folded *day integers*, not raw seconds, so there was genuinely nothing to convert. To make "used on this ticket's pages" real rather than nominal, I exposed `timeSinceStartS` on the /info cycle payload and drove the meteor banner caption through `formatDayHour`. Worth flagging the two time bases in play — the world clock is 3600s/day while the social feed folds at 86400s/day; I documented both and kept `formatRelative` on real-elapsed units so "3 hours ago" stays honest. If items/users feed social-feed seconds into `formatDayHour` expecting 86400, that will read wrong — worth a shared note when those tickets wire up. Confidence high: all gates green (492 pytest, 91 vitest, ruff/mypy/eslint, build) pre- and post-merge. Only rough edge is the cross-exporter day-scale ambiguity above.

coilysiren referenced this issue

2026-07-07 06:37:27 +00:00

Practical-usefulness slice: /uses hub + demand-side use-case pages (what's in demand, buy/sell, arbitrage, shop-check) - follow-up F from #98 #99