Aller au contenu
login
arrow_backRetour aux issues
Wayfare-labs/wayfare #52

Style pass on the single-file UI: typography, spacing, colour for three finding states

ecoDébutant help wanted area:ui difficulty:easy

descriptionDescription

> Written to the standard set by #33 — read that issue first for the expected level of detail. ## What A visual polish pass on the existing single-file UI (`server/index.html`): improve typography, spacing, and colour use for the three finding states (pass/fail/undetermined) — building on what already exists, not a redesign. The UI currently works and displays all three states, but the visual hierarchy could be clearer. A first-time visitor should be able to scan the page and immediately distinguish a passing check from a failing one from an undetermined one, without reading the text. ## Why it matters The project's value is honest reporting. If the three states look visually similar, a reader could misread an undetermined result as a pass or a fail — which is the exact category error the three-valued result exists to prevent. Visual clarity is not cosmetic here; it is part of the measurement contract. ## Which layer **Layer 4 — UI presentation.** No business logic, no new data, no new endpoints. ## Exactly where the code goes - **Modified file:** `server/index.html` — the inline CSS and the `render()` function - The existing three states are already rendered; this is about making them visually distinct - Consider: distinct background colours, borders, or icons for each state - Consider: typography hierarchy (finding title vs details vs evidence) ## Where the data comes from No new data. The three states are already in the wire format from `route/` and rendered in the UI. ## What "unmeasurable" means here Nothing is measured. This is a visual polish task. ## Acceptance criteria - [ ] The three finding states (pass, fail, undetermined) are visually distinct at a glance - [ ] Typography is consistent and readable (font sizes, weights, spacing) - [ ] The page works on a standard desktop viewport (1280px+) - [ ] No JavaScript logic changes — CSS and HTML structure only - [ ] No new dependencies (no CSS frameworks, no icon libraries) - [ ] The existing verdict legend (#45) is visually integrated with the new styling ## Out of scope Do not change: - `server/api.go` — the wire shape stays as it is - Any Go code - Mobile responsiveness (that is #16) - Loading/cold-start state (that is a separate issue) ## How to verify locally ```bash make build && ./wayfare -addr :8080 -schedule=0 -history-first # Open http://localhost:8080 in a browser and visually inspect ``` Or read `server/index.html` and confirm the CSS changes are present.
codeOuvre sur GitHub