Refresh sign-in / register / forgot-password pages with dark theme by FadhlanR · Pull Request #5343 · cardstack/boxel

FadhlanR · 2026-06-26T07:38:07Z

Summary

Drop the white auth-container "platter"; apply shadcn-style theme aliases (--background, --foreground, --border, --muted-foreground, --ring) on the wrapper so BoxelInput and the secondary-dark Button kind re-theme automatically across login, register, and forgot-password — no per-component dark styling.
Login page: switch both secondary CTAs to @kind='secondary-dark', add a multi-color Google G prefix on the Sign-in-with-Google button, remove the or divider, fix the forgot-password link color.
Register and forgot-password pages: same treatment across every substate (or-dividers removed, secondary CTAs to secondary-dark, dark-friendly text colors on titles / paragraphs / bullet lists / inline links).
Move the Boxel logo to the upper-left of the viewport (out of the form).
New GoogleColor icon (multi-color SVG) in @cardstack/boxel-ui/icons.
Restructure sign-in around the Google CTA: subtitle copy, Google button + "OR USE YOUR EMAIL" hairline divider above the email form, and a centered "Don't have an account? Create a new Boxel account" footer link replacing the secondary button.
Centered full-screen loading layouts for "Signing you in with Google" and "Email validation complete".
Register form: input placeholders + green-check positive validation hints (name available / password is valid / passwords match).
Invite-code screen: heading split from the field label, copy refers to Boxel rather than "this site", input gains a placeholder.
Explicit auth-page palette — #191624 page bg, #00ffba/#000 primary CTA, #444051/#817c93 disabled primary, #191624/#525252/#fff secondary CTA, #7f7c8c muted helper text; auth wrapper fills the viewport so the form stays vertically + horizontally centered.

Refs: CS-11712

Preview note

Google sign-in is not enabled in staging or production, so the "Continue with Google" button, the "OR USE YOUR EMAIL" divider, and the Google-specific subtitle copy above the email form will not render in the preview. To exercise those states locally, run the host against a Synapse that advertises the oidc-google IDP with GOOGLE_AUTH_ENABLED=true. Here's the screenshot:

Out of scope

The SSO flow (m.login.sso detection, doGoogleSso, consumeSsoLoginToken), the GOOGLE_AUTH_ENABLED gate, and the password login task — untouched.
Boxel-ui-wide light/dark parity / new BoxelInput variants / new theme tokens beyond what's already in variables.css.

Test plan

Login: default / credentials-entered / hover / focus-on-field render per the comps; the Google CTA + divider show only when SSO is available locally; teal --boxel-highlight focus ring; "Forgot password?" and "Don't have an account?" copy render in #7f7c8c; the Sign In CTA renders disabled #444051/#817c93 and enabled #00ffba/#000; secondary CTAs render #191624 bg with #525252 border and #fff text.
Register: walk registration-form → token-form → awaiting-validation → account-creation; placeholders visible on every input; the three positive validation hints (name available / password is valid / passwords match) appear with a green check once each field is valid; the invite-code page shows the new two-line heading; the awaiting-validation page heading has no trailing period and Resend Email spans the column.
Forgot password: walk initial → wait-for-validation → reset (use ?sid=&clientSecret= URL params) → success; secondary CTAs match the palette above; the reset-error inline link is legible.
"Signing you in with Google" and "Email validation complete" render as centered full-width blocks with a green LoadingIndicator underneath.
The form stays vertically + horizontally centered at narrow and wide viewports.
All data-test-* hooks across login / register-user / forgot-password still resolve.
pnpm test in packages/host green; pnpm lint clean (modulo the pre-existing baseline boxel-ui TS2307 noise).

🤖 Generated with Claude Code

Drop the white auth-container "platter" and apply shadcn-style theme aliases (--background, --foreground, --border, --muted-foreground, --ring) on the wrapper so BoxelInput and the secondary-dark Button kind re-theme automatically across login, register, and forgot-password. Add a multi-color Google G icon to the Sign-in-with-Google CTA, switch both secondary CTAs to secondary-dark with a contrast nudge so the dark buttons sit a hair lighter than the page, remove the "or" dividers, and move the Boxel logo to the upper-left of the viewport. No change to the SSO flow, the GOOGLE_AUTH_ENABLED gate, or the password login task. Refs: CS-11712 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-06-26T07:42:24Z

Preview deployments

Host staging preview

Host production preview

Boxel UI staging preview

Host Test Results

1 files ±0 1 suites ±0 2h 27m 4s ⏱️ + 21m 27s
3 272 tests ±0 3 257 ✅ ±0 15 💤 ±0 0 ❌ ±0
3 291 runs ±0 3 276 ✅ ±0 15 💤 ±0 0 ❌ ±0

Results for commit c476fa3. ± Comparison against earlier commit 2a0aaf5.

Realm Server Test Results

1 files ±0 1 suites ±0 8m 49s ⏱️ -43s
1 663 tests +1 1 663 ✅ +1 0 💤 ±0 0 ❌ ±0
1 742 runs +1 1 742 ✅ +1 0 💤 ±0 0 ❌ ±0

Results for commit c476fa3. ± Comparison against earlier commit 2a0aaf5.

- Sign-in: Google CTA + "OR USE YOUR EMAIL" divider now sit above the email form, with a subtitle introducing the Google flow. The "Create a new Boxel account" secondary button is replaced by a footer text link. - "Signing you in with Google" and "Email validation complete" now render as centered headlines paired with a green LoadingIndicator. - Registration form: positive validation hints (name available / password is valid / passwords match) appear below each field once valid. - Invite-code screen: heading split out from the field label, copy refers to Boxel rather than "this site", and the input gains a placeholder. - Awaiting-validation: trailing period dropped from the heading; Resend Email button spans the column. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Page background is #191624 and the auth container fills the viewport (min-height: 100vh) so the form stays vertically and horizontally centered on every breakpoint. - Primary CTAs (Sign In, Create Account, Next, Reset Your Password, Resend Email, Reset Password, Sign In to Boxel) use #00ffba / #000 when enabled and #444051 / #817c93 when disabled. - Secondary CTAs (Continue with Google, Login with an existing account, Back to login) sit on the page bg with a #525252 1px border and #fff text. - "Forgot password?" and the "Don't have an account?" prompt render in #7f7c8c (the muted-foreground alias) to match the comps. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Drop the explicit 500 weight on the sign-in subtitle so it inherits the font-sm default instead of looking heavier than the surrounding muted copy. - Bring the registration field error messages in line with the other small helper text by setting font: 500 var(--boxel-font-xs). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Replace raw hex that duplicated existing boxel tokens or the auth aliases (highlight/light/dark, --background/--border/--foreground), centralize the secondary-button hover color as --auth-secondary-hover-bg, drop the no-op --icon-bg-color on the logo, and switch the auth canvas to 100dvh. Assert the username/password/confirm validation hints in the registration happy-path spec. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2a0aaf5aa1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-26T14:46:40Z

+      [data-test-login-btn] {
+        --boxel-button-color: var(--auth-primary-bg);
+        --boxel-button-text-color: var(--auth-primary-text);
+      }
+      [data-test-login-btn]:disabled {
+        --boxel-button-color: var(--auth-primary-disabled-bg);
+        --boxel-button-text-color: var(--auth-primary-disabled-text);
+        --boxel-button-border: none;


Use production selectors for button palette

The repo guidance says data-test-* attributes are stripped from production and must not be used for runtime styling. In production these selectors will not match, so the login button loses the explicit auth palette/disabled overrides; the same pattern is repeated in register-user.gts and forgot-password.gts. Please attach these styles to a class or non-test data-* attribute instead.

Useful? React with 👍 / 👎.

ugh how did this pass lint

[Claude Code 🤖]

Fixed in c476fa3. Switched all four [data-test-*-btn] selectors over to .kind-primary — that's the class the Button component actually emits for @kind='primary', and it's scoped by glimmer-scoped-css's data-scopedcss-* attribute so it stays scoped without depending on test-only attributes. Same change applied to login.gts, register-user.gts, and forgot-password.gts.

[Claude Code 🤖]

Good catch — fixed in c476fa3. The hbs/eslint passes didn't flag it because [data-test-*] is valid CSS; the production-strip step that drops the attribute happens later in the build. Switched to .kind-primary so the palette survives a prod build.

Copilot

Pull request overview

Refreshes the Matrix auth UI (login/register/forgot-password) to use a dark-theme wrapper palette and updated layouts, with a new multi-color Google icon and updated registration UX hints, while aligning Playwright tests with the new UI states.

Changes:

Reworks auth page wrapper (AuthContainer) to apply shadcn-style theme alias variables and a shared auth button palette.
Updates login/register/forgot-password components with new dark-theme styling, layout tweaks, placeholders, and registration validation hints.
Adds GoogleColor icon to @cardstack/boxel-ui/icons and updates matrix Playwright tests/helpers to match copy + new UI affordances.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/matrix/tests/registration-with-token.spec.ts	Adds assertions for new registration validation-hint elements.
packages/matrix/helpers/index.ts	Updates email-validation copy expectation (drops trailing period).
packages/host/app/components/matrix/register-user.gts	Adds placeholders, validation hints, invite-code copy/layout changes, and dark-theme styling.
packages/host/app/components/matrix/login.gts	Reworks login flow layout, Google CTA section, and dark-theme styling.
packages/host/app/components/matrix/forgot-password.gts	Removes “or” divider, adjusts CTAs, and applies dark-theme styling updates.
packages/host/app/components/matrix/auth-container.gts	Replaces “platter” container with full-viewport dark wrapper + logo positioning and CSS variables.
packages/boxel-ui/addon/src/icons/google-color.gts	Introduces new auto-generated multi-color Google “G” icon component.
packages/boxel-ui/addon/src/icons.gts	Registers and exports `GoogleColor` icon.
packages/boxel-ui/addon/raw-icons/google-color.svg	Adds the raw SVG source for the new icon.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

FadhlanR · 2026-06-26T14:58:30Z

+      [data-test-login-btn] {
+        --boxel-button-color: var(--auth-primary-bg);
+        --boxel-button-text-color: var(--auth-primary-text);
+      }
+      [data-test-login-btn]:disabled {
+        --boxel-button-color: var(--auth-primary-disabled-bg);
+        --boxel-button-text-color: var(--auth-primary-disabled-text);
+        --boxel-button-border: none;
+      }


[Claude Code 🤖]

Fixed in c476fa3 — replaced [data-test-login-btn] with .kind-primary, which is the class the Button component renders for @kind='primary'.

FadhlanR · 2026-06-26T14:58:31Z

+      [data-test-register-btn],
+      [data-test-next-btn] {
+        --boxel-button-color: var(--auth-primary-bg);
+        --boxel-button-text-color: var(--auth-primary-text);
+      }
+      [data-test-register-btn]:disabled,
+      [data-test-next-btn]:disabled {
+        --boxel-button-color: var(--auth-primary-disabled-bg);
+        --boxel-button-text-color: var(--auth-primary-disabled-text);
+        --boxel-button-border: none;
+      }


[Claude Code 🤖]

Fixed in c476fa3 — replaced both [data-test-register-btn] and [data-test-next-btn] with .kind-primary. Also dropped the duplicate .resend-email color rules since that button is @kind='primary' too and now picks up the palette from the same selector.

FadhlanR · 2026-06-26T14:58:32Z

+      [data-test-reset-your-password-btn],
+      [data-test-resend-validation-btn],
+      [data-test-reset-password-btn],
+      [data-test-back-to-login-btn] {
+        --boxel-button-color: var(--auth-primary-bg);
+        --boxel-button-text-color: var(--auth-primary-text);
+      }
+      [data-test-reset-your-password-btn]:disabled,
+      [data-test-resend-validation-btn]:disabled,
+      [data-test-reset-password-btn]:disabled,
+      [data-test-back-to-login-btn]:disabled {
+        --boxel-button-color: var(--auth-primary-disabled-bg);
+        --boxel-button-text-color: var(--auth-primary-disabled-text);
+        --boxel-button-border: none;
+      }


[Claude Code 🤖]

Fixed in c476fa3 — collapsed all four [data-test-*-btn] selectors down to a single .kind-primary rule.

burieberry · 2026-06-26T14:57:42Z

+        gap: var(--boxel-sp-xxxs);
+        margin: var(--boxel-sp-xxs) 0 0;


all new code should use the current css var names (2xs, 3xs etc) instead of the deprecated ones

data-test-* attributes are stripped from production builds, so styling the auth primary CTAs through those selectors silently broke the palette outside dev/test. Target the .kind-primary class emitted by the Button component instead — scoped via glimmer-scoped-css and production-safe.

burieberry

I recommend extracting the dark styled button/input components within the host package and moving the styling there, since they are used in multiple templates. Keep the css in the templates minimal.

What we didn't realize when discussing yesterday is that you can't actually use the theming system here because it is only injected in cards.

FadhlanR and others added 4 commits June 26, 2026 16:04

FadhlanR marked this pull request as ready for review June 26, 2026 14:41

FadhlanR requested review from a team and burieberry June 26, 2026 14:41

habdelra requested a review from Copilot June 26, 2026 14:44

Copilot started reviewing on behalf of habdelra June 26, 2026 14:45 View session

chatgpt-codex-connector Bot reviewed Jun 26, 2026

View reviewed changes

Copilot AI reviewed Jun 26, 2026

View reviewed changes

burieberry reviewed Jun 26, 2026

View reviewed changes

Comment thread packages/host/app/components/matrix/forgot-password.gts Outdated

burieberry reviewed Jun 26, 2026

View reviewed changes

Uh oh!

Conversation

FadhlanR commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Preview note

Out of scope

Test plan

Uh oh!

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

Uh oh!

Preview deployments

Host Test Results

Realm Server Test Results

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

burieberry Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

FadhlanR Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

FadhlanR Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

FadhlanR Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

FadhlanR Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

FadhlanR Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

burieberry Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

burieberry left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FadhlanR commented Jun 26, 2026 •

edited

Loading

github-actions Bot commented Jun 26, 2026 •

edited

Loading

burieberry left a comment •

edited

Loading