Repository navigation
Match setup page to the lobby theme - #399
Conversation
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| #status { margin-top: 1rem; white-space: pre-wrap; } | ||
| #status.error { color: #b00020; } | ||
| #status.ok { color: #0a7a2f; } | ||
| :root { |
There was a problem hiding this comment.
These tokens are a hand copy of the lobby's .practice-page light block and dark override in web/styles.css (the @media not all and (prefers-color-scheme: dark) rule and the one after it). They match today, but nothing ties them together: the next palette change to the lobby leaves this page on the old violet with every test still green, because setup-page.test.js pins the same literals this block holds. Have the test read web/styles.css and compare each custom property here with the lobby's value, so drift fails the gate; naming --tint and --tint-edge as the lobby does (--practice-tint, --practice-tint-edge) turns that comparison into a direct lookup.
jserv
left a comment
jserv
left a comment
There was a problem hiding this comment.
Check CONTRIBUTING.md carefully.
Improve git commit messages per https://cbea.ms/git-commit/ :
- Separate subject from body with a blank line
- Limit the subject line to 50 characters
- Capitalize the subject line
- Do not end the subject line with a period
- Use the imperative mood in the subject line
- Wrap the body at 72 characters
- Use the body to explain what and why vs. how
Improve git commit messages, addressing what/why/how.
The first-run form no longer matched the lobby, and its required LiveKit fields were hard to distinguish from the optional Google AI key. Align the layout and colors with the lobby while preserving credential handling. Keep the two palettes in sync as the theme evolves and make status updates available to screen readers. Align the CLI check with the revised optional-key guidance.
881729f to
1461507
Compare
|
Thank @explosion3975 for contributing! |
The first-run setup page now uses the lobby's current violet palette, typography, spacing, card surface, and primary button styles. LiveKit credentials are grouped and marked required; the Google AI key is separate and marked optional. Existing validation and submission behavior remain intact.
Screenshots
Before: setup page
After: setup page
Current lobby
Closes #147
Summary by cubic
The first-run setup page now matches the lobby's violet palette, typography, spacing, card surface, and primary button styles. LiveKit credentials are grouped and marked Required; the Google AI key sits in a separate group marked Optional. Validation and submission behavior is unchanged, and the status region is now announced to screen readers via
aria-live.Adds browser tests covering the two credential groups, required/optional markers, light and dark theme colors against the lobby palette, no overflow at 320px, and submission retry after a server error. Updates the CLI test to expect the revised optional-key wording.
Closes #147.
Written for commit 1461507. Summary will update on new commits.