Repository navigation
Restyle the connect and setup pages in the Shelf look - #124
Merged
Merged
Conversation
The connect page (/, /connect), the first-run setup wizard (/setup) and the 'console not built' page still wore the pre-redesign look (violet, Roboto, dark only). They now use the console's Shelf tokens, its sign-in layout and its fonts (self-hosted Figtree + Bricolage Grotesque variable, replacing Roboto), with light and dark themes. theme-init.js reads the console's stored theme, so a choice made in /admin carries over. Markup ids, i18n attributes and scripts are unchanged; the strict CSP holds (no inline style or script).
…st assets - Draw the mark from favicon.svg as a CSS mask instead of inlining its path. - Links styled as buttons use the button classes; drop unused tokens/rules. - Tests fail when theme-init.js or the copied Shelf tokens drift from admin-ui. - The service worker fetches the pages' unhashed /assets/*.css|js network-first (a stale style.css would pair with the new markup once after an upgrade), and VERSION is bumped so clients drop the cached Roboto files.
Square QR at any width, wrapping full-width buttons, 16px fields on phones (no iOS zoom), role=alert on the error lines, a setup page asset test, and a token parser that fails instead of panicking on a malformed block.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The server's own HTML pages still wore the pre-redesign look: violet
#7c3aed, Roboto, the "AUDIO"/"SILO" wordmark, dark only. This restyles all of them in the console's Shelf look. ADMIN-CONSOLE-PLAN.md lists this as a Phase 6 item.Pages restyled. These are the only server-rendered pages outside the console and the player:
/and/connect, the connect page with the auth code, QR and links./setup, the first-run wizard./adminwhen the console isn't built (the dev-only 503 page).What changed
internal/web/assets/style.cssadmin-ui/src/styles/globals.css.favicon.svgused as a CSS mask, so its path isn't duplicated.theme-init.js/admincarries over; with none stored, the pages follow the system theme.shelf_sync_test.gofails iftheme-init.jsor the copied colour tokens drift from admin-ui./, so it sees these pages once an admin has opened the console)./assets/*.css|jsare now network-first, like the console'stheme-init.js. A cached oldstyle.csswould otherwise render the new markup broken once after the upgrade.VERSIONis bumped so cached Roboto files are dropped.admin-ui/src/test/sw.test.ts.data-i18n*attributes and script tags are the same, soconnect.js,setup.jsand the i18n engine are untouched. No inline style or script; the strict CSP holds.Verified in a real browser (Chromium via Playwright, scratch data dirs)
#code=(fragment stripped; QR, uses note, the three links).Not changed / follow-ups
favicon.svg, the PWA icons and the manifest still use the old violet mark. Changing the brand icon is a separate decision.Docs: KodeStar/audiosilo-docs (regenerated
server/connect-page.pngandserver/setup-wizard.png), PR linked below once open.