Skip to content

Commit f28aa52

Browse files
kcowgerclaude
kcowger
and
claude
committed
Restyle pre-login pages: brand purple + WCAG AA contrast fixes
Brand-purple nav with the full CommCare logo, action blue darkened from #5D70D2 (4.45:1, fails AA) to #4D5EC2 (5.68:1), AA placeholder and step label colors, visible focus outlines, and restyled sign-up stepper, cloud buttons, and bubbles. No markup or copy changes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent e8f21d2 commit f28aa52

3 files changed

Lines changed: 197 additions & 0 deletions

File tree

‎corehq/apps/hqwebapp/static/hqwebapp/images/commcare-by-dimagi-white.png‎

15.7 KB
Loading

‎corehq/apps/hqwebapp/static/registration/scss/login-refresh.scss‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
// --------------------------------
2+
// Pre-login brand refresh
3+
// Aligns the sign-in and sign-up pages with commcare.dimagi.com and brings
4+
// core elements up to WCAG 2.1 AA. Scoped under body.login-refresh, which
5+
// only the pre-login templates set (see
6+
// login_and_password/bootstrap5/login.html); the authenticated app shares
7+
// .navbar-hq-main-menu and is intentionally untouched.
8+
// --------------------------------
9+
10+
// white on $refresh-action-blue is 5.68:1 (AA); the default $cc-brand-mid
11+
// nav/button blue is 4.45:1, which fails AA for normal text
12+
$refresh-action-blue: #4d5ec2;
13+
$refresh-deep-blue: #2832a0; // dark accent for text on white pill buttons
14+
$refresh-muted-text: #5b6470; // 5.51:1 on the form bubble (AA)
15+
16+
.login-refresh {
17+
18+
// Nav: brand-purple bar with the full "CommCare by Dimagi" logo.
19+
// bg-light and the default logo are overridden; !important is needed to
20+
// beat Bootstrap's bg-light utility.
21+
.navbar-hq-main-menu {
22+
background: $refresh-action-blue !important;
23+
border: 0 !important; // _navbar.scss draws a 1px #d5d5d5 border that reads as a white edge on the purple bar
24+
25+
.navbar-brand > div {
26+
background-image: url(/static/hqwebapp/images/commcare-by-dimagi-white.png);
27+
background-size: contain;
28+
background-repeat: no-repeat;
29+
width: 140px;
30+
height: 34px;
31+
}
32+
}
33+
34+
.navbar-signin {
35+
.dropdown-toggle.btn-outline-primary {
36+
color: white !important;
37+
border-color: rgba(255, 255, 255, 0.65) !important;
38+
background: transparent !important;
39+
}
40+
41+
.btn-primary {
42+
background: transparent !important;
43+
border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
44+
color: white !important;
45+
border-radius: 999px !important;
46+
}
47+
48+
.btn-purple {
49+
background: white !important;
50+
border: 0 !important;
51+
color: $refresh-deep-blue !important;
52+
border-radius: 999px !important;
53+
font-weight: 600;
54+
}
55+
}
56+
57+
// WCAG AA on the form bubble: action blue 4.45:1 -> 5.68:1,
58+
// placeholders ~2.5:1 -> 4.69:1, step label 4.31:1 -> 5.51:1
59+
.form-bubble {
60+
.btn-primary {
61+
background: $refresh-action-blue !important;
62+
border-color: $refresh-action-blue !important;
63+
}
64+
65+
.btn-outline-primary {
66+
color: $refresh-action-blue !important;
67+
border-color: $refresh-action-blue !important;
68+
}
69+
70+
a:not(.btn) {
71+
color: $refresh-action-blue;
72+
}
73+
74+
.alert-warning {
75+
background: #fff8e6;
76+
border-color: #f0dfa8;
77+
color: #6b5a20;
78+
border-radius: 8px;
79+
}
80+
}
81+
82+
.form-control::placeholder {
83+
color: $gray-600;
84+
}
85+
86+
.form-step-number {
87+
color: $refresh-muted-text;
88+
font-size: 12px;
89+
font-weight: 700;
90+
letter-spacing: 0.04em;
91+
text-transform: uppercase;
92+
}
93+
94+
// Sign-up bubble (login page) and demo bar (sign-up page):
95+
// white on $refresh-action-blue instead of the old violet
96+
.form-bubble-purple {
97+
background-color: $refresh-action-blue !important;
98+
color: white !important;
99+
100+
h2,
101+
.lead {
102+
color: white !important;
103+
}
104+
105+
a:not(.btn) {
106+
color: white;
107+
}
108+
109+
.btn-purple {
110+
background: white !important;
111+
border: 0 !important;
112+
color: $refresh-deep-blue !important;
113+
border-radius: 999px !important;
114+
font-weight: 600;
115+
}
116+
}
117+
118+
// Sign-up stepper: keep the markup and counters from _form_steps.scss,
119+
// drop the dark box, and render the counters as circular badges
120+
ul.form-step-progress {
121+
background: transparent;
122+
overflow: visible;
123+
padding: 44px 0 10px;
124+
125+
li {
126+
color: rgba(255, 255, 255, 0.7);
127+
font-weight: 700;
128+
font-size: 10.5px;
129+
letter-spacing: 0.05em;
130+
131+
&:after {
132+
width: 28px;
133+
line-height: 26px;
134+
border-radius: 50%;
135+
font-size: 13px;
136+
background: rgba(255, 255, 255, 0.14);
137+
color: rgba(255, 255, 255, 0.75);
138+
border: 1px solid rgba(255, 255, 255, 0.35);
139+
top: -36px;
140+
margin-left: -14px;
141+
}
142+
143+
&:before {
144+
top: -22px;
145+
background: rgba(255, 255, 255, 0.35);
146+
}
147+
}
148+
149+
li.active {
150+
color: white;
151+
152+
&:after {
153+
background: white !important;
154+
color: $refresh-deep-blue !important;
155+
border-color: white;
156+
}
157+
158+
&:before {
159+
background: white !important;
160+
}
161+
}
162+
}
163+
164+
// Cloud-location choice buttons (sign-up step 1)
165+
.cloud-choice {
166+
background: white;
167+
border: 1.5px solid #e2e5ee !important;
168+
border-radius: 10px;
169+
box-shadow: none !important;
170+
171+
&.selected {
172+
border-color: $refresh-action-blue !important;
173+
background: #eef0fb !important;
174+
175+
div {
176+
color: $refresh-deep-blue;
177+
font-weight: 700;
178+
}
179+
}
180+
}
181+
182+
// Visible keyboard focus
183+
a:focus-visible,
184+
button:focus-visible,
185+
.form-control:focus-visible {
186+
outline: 2px solid $refresh-action-blue;
187+
outline-offset: 2px;
188+
}
189+
190+
.navbar-hq-main-menu {
191+
a:focus-visible,
192+
button:focus-visible {
193+
outline-color: white;
194+
}
195+
}
196+
}

‎corehq/apps/hqwebapp/static/registration/scss/registration.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
@import "forms";
1010

1111
@import "registration-main";
12+
@import "login-refresh";

0 commit comments

Comments
 (0)