Restyle pre-login pages: brand purple + WCAG AA contrast fixes by kcowger · Pull Request #38079 · dimagi/commcare-hq

kcowger · 2026-08-28T17:51:17Z

Product Description

Restyles the sign-in and sign-up pages to align stylistically with the commcare.dimagi.com webpage. The idea is, when someone flows through commcare.dimagi.com to commcarehq.org, it should feel cohesive from page to page.

Also introduces a couple small WCAG AA accessibility improvements.

Before (Sign In)

After (Sign In)

Before (Sign Up)

After (Sign Up)

Technical Summary

Three independent commits: WCAG AA fixes, the rebrand, and the logo link. All rules are scoped under a prelogin body class set only by pre-login templates and live in the stylesheets that own the elements they restyle. The authenticated app never sets the class.

Feature Flag

None.

Safety Assurance

Safety story

Verified locally on both pages. Rules are inert wherever the body class is absent.

Automated test coverage

None added; presentational CSS.

QA Plan

One known boundary: a project with custom branding shows its own logo image on its domain login page; that logo now sits on the dark blue bar and dark logos may have low contrast there.

Visual check of sign-in and sign-up on www/eu/india, desktop and mobile.

Rollback instructions

This PR can be reverted after deploy with no further considerations

Labels & Review

Risk label is set correctly
The set of people pinged as reviewers is appropriate for the level of risk of the change

🤖 Generated with Claude Code

kcowger · 2026-09-04T17:13:14Z

@nospame retrying for review. no need to spend too much time on this

nospame

General feedback: I think we need to make sure we're not leaving dead code by overriding a bunch of styles that (as far as I know) are only ever used on registration pages, versus changing those styles at their definition.

nospame · 2026-09-04T22:31:42Z

+
+.prelogin {
+  .form-bubble {
+    .btn-primary {


Could these buttons use Bootstrap's sass mixins rather than setting CSS styles? https://getbootstrap.com/docs/5.3/components/buttons/#sass-mixins

done, switched to button-variant / button-outline-variant.

nospame · 2026-09-04T22:36:20Z

  }
 }
+
+.prelogin {


I don't know that I fully buy the new prelogin class is necessary (it might be). Is it possible to see whether the affected registration styles (i.e. without the .prelogin selector) would be used elsewhere? If they're not, we can change those styles directly rather than adding new styles here.

kept only for the shared navbar, set by the login template for logged-out viewers only, so logged-in views of inheriting pages keep the normal nav. everything else is changed at the definition.

nospame · 2026-09-04T22:37:03Z

I think we have a version of this file already, corehq/apps/registration/static/registration/images/commcare_by_dimagi.png, but this one might be different in ways I'm missing.

good catch, reusing the existing white logo and dropped the new file.

nospame · 2026-09-04T22:39:16Z

+
+$prelogin-step-circle: 28px;
+
+.prelogin ul.form-step-progress {


These new styles probably mean we can remove the old ones immediately above.

done, replaced at the definition.

nospame · 2026-09-04T22:40:38Z

-}
+}
+.prelogin {
+  .navbar-hq-main-menu {


I'm torn on whether this belongs here or in registration-main because that's the only place it ever gets used, don't think I have a strong preference though.

kept it in _navbar.scss so navbar styles stay in one file.

nospame · 2026-09-04T22:41:36Z

+
+    a:focus-visible,
+    button:focus-visible {
+      outline-color: white;


This is sometimes using white and sometimes #fff for styles, would be nice to see just one or the other.

standardized on $white.

nospame · 2026-09-04T22:43:14Z

+    .dropdown-toggle.btn-outline-primary,
+    .btn-primary {


I find it a bit odd that we're styling a regular and an outline button identically. Would be nice to keep a distinction or consider changing the classes applied to the buttons themselves.

the language picker renders as plain text under the refresh and Sign In as the outlined button, with Schedule a Demo as the filled one. the nav markup is unchanged because logged-out pages outside the refresh share it.

nospame · 2026-09-04T22:44:56Z

+    text-transform: uppercase;
+  }
+
+  .btn-purple {


Doesn't this make the button blue rather than purple? Might be nice to rename if so, also to see if it's used anywhere else (if not, it could be changed in the definition rather than overridden here).

btn-purple is still used in the logged-in app, so its definition stays. the pre-login buttons use a new btn-prelogin variant instead.

nospame · 2026-09-04T22:45:35Z

+    border-radius: 8px;
+  }
+
+  .cloud-choice {


This is definitely not used anywhere else and can be changed in its definition, rather than overridden in the .prelogin class.

done, changed at the definition.

nospame · 2026-09-04T22:47:37Z

+    --#{$prefix}btn-hover-border-color: #{$prelogin-action-blue};
+    --#{$prefix}btn-active-bg: #{$prelogin-action-blue-tint};
+    --#{$prefix}btn-active-border-color: #{$prelogin-action-blue};
+    border-radius: 10px;


Bet we could do this or very similar with a bootstrap class, maybe rounded-2? Or just let it have the regular button border radius.

dropped the custom radius, they use the regular button radius now.

White on the action blue #5D70D2 is 4.45:1, below the 4.5:1 minimum for normal text; the buttons and links on the login and registration cards move to #4D5EC2 (5.68:1). Placeholder text and the registration step label move to AA-compliant grays, and keyboard focus gets a visible outline. The registration stylesheet only loads on pre-login pages, so no scoping class is needed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Brand-purple nav with the full CommCare by Dimagi logo (reusing the existing white logo asset), circular sign-up stepper badges, card-style cloud-location buttons, and a soft warning box, all recolored through Bootstrap's button-variant mixins. The sign-up and demo bubbles turn the action blue and are renamed form-bubble-cta to match; their white call-to-action buttons use a new btn-prelogin variant, applied also to the dormant bootstrap5 accept-invite template so it is ready when its view migrates. Styles are changed at their definitions since the registration stylesheet and the stepper have no other pre-login consumers; the OAuth consent page shares the registration stylesheet and intentionally picks up the AA button colors while keeping the standard navbar. The shared navbar keeps its markup and gets a prelogin body-class scope, set by the login template only for logged-out viewers and inherited by the templates that extend it, so logged-in views of those pages and logged-out pages outside the refresh keep today's navbar. Under the scope the language picker renders as plain text, Sign In as the only outlined button, and Schedule a Demo as a white button. btn-purple is untouched for its authenticated-app users. Depends on the palette variables introduced in the preceding WCAG AA commit; revert them together. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The logo currently links to the homepage view, which redirects logged-out users back to the login page they are already on. On Dimagi-run environments, point it at the marketing site instead, matching where the other pre-login links go. Logged-in users and self-hosted deployments keep the homepage link. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kcowger · 2026-09-07T13:53:27Z

restructured so styles are changed at their definitions now. the only override left is the navbar, which the logged-in app shares, scoped under a prelogin body class.

dimagimon added the Risk: Medium Change affects files that have been flagged as medium risk. label Aug 28, 2026

kcowger force-pushed the kc/prelogin-refresh-css branch from f28aa52 to ab407c1 Compare August 28, 2026 20:02

kcowger added the product/all-users-all-environments Change impacts all users on all environments label Aug 28, 2026

kcowger force-pushed the kc/prelogin-refresh-css branch 4 times, most recently from 00d48c8 to bf71471 Compare September 3, 2026 21:12

kcowger requested a review from nospame September 4, 2026 15:26

kcowger marked this pull request as ready for review September 4, 2026 15:26

kcowger force-pushed the kc/prelogin-refresh-css branch from bf71471 to 8262757 Compare September 4, 2026 15:55

kcowger marked this pull request as draft September 4, 2026 15:59

kcowger removed the request for review from nospame September 4, 2026 16:04

kcowger marked this pull request as ready for review September 4, 2026 17:12

kcowger requested a review from nospame September 4, 2026 17:12

nospame reviewed Sep 4, 2026

View reviewed changes

kcowger and others added 3 commits September 5, 2026 16:04

kcowger force-pushed the kc/prelogin-refresh-css branch from 8262757 to 0555176 Compare September 7, 2026 13:52

kcowger requested a review from esoergel as a code owner September 7, 2026 13:52

kcowger removed the request for review from esoergel September 7, 2026 13:58


		$prelogin-step-circle: 28px;

		.prelogin ul.form-step-progress {

Uh oh!

Uh oh!

Conversation

kcowger commented Aug 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Product Description

Technical Summary

Feature Flag

Safety Assurance

Safety story

Automated test coverage

QA Plan

Rollback instructions

Labels & Review

Uh oh!

kcowger commented Sep 4, 2026

Uh oh!

nospame 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nospame Sep 4, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kcowger commented Sep 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kcowger commented Aug 28, 2026 •

edited

Loading

nospame left a comment •

edited

Loading

nospame Sep 4, 2026 •

edited

Loading