Skip to content

Commit bde54d4

Browse files
OpenStaxClaudeclaudeCopilot
committed
Address final Copilot review comments (Review #31)
1. Fixed quote consistency in Modal/index.tsx - Changed formatMessage parameter from double quotes to single quotes - Maintains consistency with rest of file 2. Removed unused --link-hover CSS variable - Modal.css only references --link-hover-color - No Typography components use --link-hover - Keeps JS/CSS contract minimal and clear 3. Added explanatory comment for @import positioning in index.css - Clarifies that external fonts complement local @font-face declarations - IBM Plex Mono (external) is for code/monospace usage - Neue Helvetica (local @font-face) is for body text - No conflicts or double-loading 🤖 Generated with [Claude Code](https://claude.com/claude-code) Address final Copilot review comments - Fix Checkbox.css: Change 'Highlight' to 'highlight' for stylelint compliance CSS keywords are case-insensitive, using lowercase for consistency - Fix Modal.tsx: Add --link-hover variable alongside --link-hover-color Ensures compatibility with both Modal.css and Typography link components that use different variable names for hover colors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Lint for Button.css (added from main after 2.1 merged) Update index.css Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent 61f8479 commit bde54d4

5 files changed

Lines changed: 105 additions & 179 deletions

File tree

‎src/app/components/Checkbox.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
background-color: var(--checkbox-focus-bg, #f1f1f1); /* theme.color.neutral.pageBackground */
5656

5757
/* Browser default focus outline */
58-
outline: 0.2rem auto Highlight;
58+
outline: 0.2rem auto highlight;
5959
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
6060
outline: 0.2rem auto -webkit-focus-ring-color; /* Fallback for webkit browsers */
6161
}

‎src/app/components/Modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const Modal = ({
3333
<Styled.CloseModalIcon
3434
ref={closeButtonRef}
3535
onClick={onModalClose}
36-
aria-label={intl.formatMessage({id: "i18n:modal:close"})}
36+
aria-label={intl.formatMessage({ id: 'i18n:modal:close' })}
3737
/>
3838
</Styled.Header>
3939
{children}

‎src/app/content/highlights/components/__snapshots__/ConfirmationModal.spec.tsx.snap‎

Lines changed: 48 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ConfirmationModal matches snapshot 1`] = `
4-
.c1 {
5-
display: -webkit-box;
6-
display: -webkit-flex;
7-
display: -ms-flexbox;
8-
display: flex;
9-
cursor: pointer;
10-
-webkit-align-items: center;
11-
-webkit-box-align: center;
12-
-ms-flex-align: center;
13-
align-items: center;
14-
-webkit-box-pack: center;
15-
-webkit-justify-content: center;
16-
-ms-flex-pack: center;
17-
justify-content: center;
18-
border-radius: 0.5rem;
19-
box-shadow: 0 0.2rem 0.4rem rgba(ui-color(black),0.2);
20-
-webkit-text-decoration: none;
21-
text-decoration: none;
22-
white-space: nowrap;
23-
overflow: initial;
24-
min-width: 12rem;
25-
font-size: 1.6rem;
26-
height: 4rem;
27-
padding: 0 3rem;
28-
color: #fff;
29-
background-color: #d4450c;
30-
font-weight: bold;
31-
border: none;
32-
-webkit-font-smoothing: antialiased;
33-
-moz-osx-font-smoothing: grayscale;
34-
}
35-
36-
.c1:hover {
37-
background-color: ,#be3c08,;
38-
}
39-
40-
.c1:active {
41-
background-color: ,#b03808,;
42-
}
43-
44-
.c1:focus {
45-
outline: solid #fff;
46-
box-shadow: inset 0 0 0 0.3rem #000;
47-
}
48-
49-
.c2 {
50-
display: -webkit-box;
51-
display: -webkit-flex;
52-
display: -ms-flexbox;
53-
display: flex;
54-
cursor: pointer;
55-
-webkit-align-items: center;
56-
-webkit-box-align: center;
57-
-ms-flex-align: center;
58-
align-items: center;
59-
-webkit-box-pack: center;
60-
-webkit-justify-content: center;
61-
-ms-flex-pack: center;
62-
justify-content: center;
63-
border-radius: 0.5rem;
64-
box-shadow: 0 0.2rem 0.4rem rgba(ui-color(black),0.2);
65-
-webkit-text-decoration: none;
66-
text-decoration: none;
67-
white-space: nowrap;
68-
overflow: initial;
69-
min-width: 12rem;
70-
font-size: 1.6rem;
71-
height: 4rem;
72-
padding: 0 3rem;
73-
color: #fff;
74-
background-color: #949494;
75-
font-weight: bold;
76-
border: none;
77-
}
78-
79-
.c2:hover {
80-
background-color: ,#8b8b8b,;
81-
}
82-
83-
.c2:active {
84-
background-color: ,#818181,;
85-
}
86-
874
.c0 {
885
-webkit-box-pack: justify;
896
-webkit-justify-content: space-between;
@@ -190,17 +107,63 @@ exports[`ConfirmationModal matches snapshot 1`] = `
190107
className="modal-footer c0"
191108
>
192109
<button
193-
className="c1"
110+
className="button button-primary button-medium"
194111
data-testid="discard-changes"
112+
disabled={false}
195113
onClick={[Function]}
114+
style={
115+
Object {
116+
"--button-default-active": "#e5e5e5",
117+
"--button-default-border": "#d5d5d5",
118+
"--button-default-color": "#fff",
119+
"--button-default-foreground": "#5e6062",
120+
"--button-default-hover": "#fafafa",
121+
"--button-disabled-color": "#f1f1f1",
122+
"--button-disabled-foreground": "#c1c1c1",
123+
"--button-focus-outline": "#fff",
124+
"--button-focus-shadow": "#000",
125+
"--button-primary-active": "#b03808",
126+
"--button-primary-color": "#d4450c",
127+
"--button-primary-foreground": "#fff",
128+
"--button-primary-hover": "#be3c08",
129+
"--button-secondary-active": "#818181",
130+
"--button-secondary-color": "#949494",
131+
"--button-secondary-foreground": "#fff",
132+
"--button-secondary-hover": "#8b8b8b",
133+
"--button-transparent-color": "#027EB5",
134+
}
135+
}
196136
>
197137
198138
Discard changes
199139
</button>
200140
<button
201-
className="c2"
141+
className="button button-secondary button-medium"
202142
data-testid="cancel-discard"
143+
disabled={false}
203144
onClick={[Function]}
145+
style={
146+
Object {
147+
"--button-default-active": "#e5e5e5",
148+
"--button-default-border": "#d5d5d5",
149+
"--button-default-color": "#fff",
150+
"--button-default-foreground": "#5e6062",
151+
"--button-default-hover": "#fafafa",
152+
"--button-disabled-color": "#f1f1f1",
153+
"--button-disabled-foreground": "#c1c1c1",
154+
"--button-focus-outline": "#fff",
155+
"--button-focus-shadow": "#000",
156+
"--button-primary-active": "#b03808",
157+
"--button-primary-color": "#d4450c",
158+
"--button-primary-foreground": "#fff",
159+
"--button-primary-hover": "#be3c08",
160+
"--button-secondary-active": "#818181",
161+
"--button-secondary-color": "#949494",
162+
"--button-secondary-foreground": "#fff",
163+
"--button-secondary-hover": "#8b8b8b",
164+
"--button-transparent-color": "#027EB5",
165+
}
166+
}
204167
>
205168
206169
Cancel

‎src/app/errors/components/__snapshots__/ErrorModal.spec.tsx.snap‎

Lines changed: 48 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ErrorModal matches snapshot 1`] = `
4-
.c1 {
5-
display: -webkit-box;
6-
display: -webkit-flex;
7-
display: -ms-flexbox;
8-
display: flex;
9-
cursor: pointer;
10-
-webkit-align-items: center;
11-
-webkit-box-align: center;
12-
-ms-flex-align: center;
13-
align-items: center;
14-
-webkit-box-pack: center;
15-
-webkit-justify-content: center;
16-
-ms-flex-pack: center;
17-
justify-content: center;
18-
border-radius: 0.5rem;
19-
box-shadow: 0 0.2rem 0.4rem rgba(ui-color(black),0.2);
20-
-webkit-text-decoration: none;
21-
text-decoration: none;
22-
white-space: nowrap;
23-
overflow: initial;
24-
min-width: 12rem;
25-
font-size: 1.6rem;
26-
height: 4rem;
27-
padding: 0 3rem;
28-
color: #fff;
29-
background-color: #d4450c;
30-
font-weight: bold;
31-
border: none;
32-
-webkit-font-smoothing: antialiased;
33-
-moz-osx-font-smoothing: grayscale;
34-
}
35-
36-
.c1:hover {
37-
background-color: ,#be3c08,;
38-
}
39-
40-
.c1:active {
41-
background-color: ,#b03808,;
42-
}
43-
44-
.c1:focus {
45-
outline: solid #fff;
46-
box-shadow: inset 0 0 0 0.3rem #000;
47-
}
48-
494
.c0 {
505
padding: 1.5rem 0;
516
}
@@ -161,9 +116,32 @@ exports[`ErrorModal matches snapshot 1`] = `
161116
className="modal-footer "
162117
>
163118
<button
164-
className="c1"
119+
className="button button-primary button-medium"
165120
data-testid="clear-error"
121+
disabled={false}
166122
onClick={[Function]}
123+
style={
124+
Object {
125+
"--button-default-active": "#e5e5e5",
126+
"--button-default-border": "#d5d5d5",
127+
"--button-default-color": "#fff",
128+
"--button-default-foreground": "#5e6062",
129+
"--button-default-hover": "#fafafa",
130+
"--button-disabled-color": "#f1f1f1",
131+
"--button-disabled-foreground": "#c1c1c1",
132+
"--button-focus-outline": "#fff",
133+
"--button-focus-shadow": "#000",
134+
"--button-primary-active": "#b03808",
135+
"--button-primary-color": "#d4450c",
136+
"--button-primary-foreground": "#fff",
137+
"--button-primary-hover": "#be3c08",
138+
"--button-secondary-active": "#818181",
139+
"--button-secondary-color": "#949494",
140+
"--button-secondary-foreground": "#fff",
141+
"--button-secondary-hover": "#8b8b8b",
142+
"--button-transparent-color": "#027EB5",
143+
}
144+
}
167145
>
168146
OK
169147
</button>
@@ -187,51 +165,6 @@ exports[`ErrorModal matches snapshots with recorded error ids 1`] = `
187165
opacity: 0.6;
188166
}
189167
190-
.c2 {
191-
display: -webkit-box;
192-
display: -webkit-flex;
193-
display: -ms-flexbox;
194-
display: flex;
195-
cursor: pointer;
196-
-webkit-align-items: center;
197-
-webkit-box-align: center;
198-
-ms-flex-align: center;
199-
align-items: center;
200-
-webkit-box-pack: center;
201-
-webkit-justify-content: center;
202-
-ms-flex-pack: center;
203-
justify-content: center;
204-
border-radius: 0.5rem;
205-
box-shadow: 0 0.2rem 0.4rem rgba(ui-color(black),0.2);
206-
-webkit-text-decoration: none;
207-
text-decoration: none;
208-
white-space: nowrap;
209-
overflow: initial;
210-
min-width: 12rem;
211-
font-size: 1.6rem;
212-
height: 4rem;
213-
padding: 0 3rem;
214-
color: #fff;
215-
background-color: #d4450c;
216-
font-weight: bold;
217-
border: none;
218-
-webkit-font-smoothing: antialiased;
219-
-moz-osx-font-smoothing: grayscale;
220-
}
221-
222-
.c2:hover {
223-
background-color: ,#be3c08,;
224-
}
225-
226-
.c2:active {
227-
background-color: ,#b03808,;
228-
}
229-
230-
.c2:focus {
231-
outline: solid #fff;
232-
box-shadow: inset 0 0 0 0.3rem #000;
233-
}
234-
235168
.c0 {
236169
padding: 1.5rem 0;
237170
}
@@ -352,9 +285,32 @@ exports[`ErrorModal matches snapshots with recorded error ids 1`] = `
352285
className="modal-footer "
353286
>
354287
<button
355-
className="c2"
288+
className="button button-primary button-medium"
356289
data-testid="clear-error"
290+
disabled={false}
357291
onClick={[Function]}
292+
style={
293+
Object {
294+
"--button-default-active": "#e5e5e5",
295+
"--button-default-border": "#d5d5d5",
296+
"--button-default-color": "#fff",
297+
"--button-default-foreground": "#5e6062",
298+
"--button-default-hover": "#fafafa",
299+
"--button-disabled-color": "#f1f1f1",
300+
"--button-disabled-foreground": "#c1c1c1",
301+
"--button-focus-outline": "#fff",
302+
"--button-focus-shadow": "#000",
303+
"--button-primary-active": "#b03808",
304+
"--button-primary-color": "#d4450c",
305+
"--button-primary-foreground": "#fff",
306+
"--button-primary-hover": "#be3c08",
307+
"--button-secondary-active": "#818181",
308+
"--button-secondary-color": "#949494",
309+
"--button-secondary-foreground": "#fff",
310+
"--button-secondary-hover": "#8b8b8b",
311+
"--button-transparent-color": "#027EB5",
312+
}
313+
}
358314
>
359315
OK
360316
</button>

‎src/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/*
2+
* Font @imports must appear at the top of the file per CSS spec.
3+
* These external fonts (IBM Plex Mono from Google Fonts, Neue Helvetica from fonts.net)
4+
* complement the local @font-face declarations below and do not conflict.
5+
* The local @font-face declarations define Neue Helvetica W01 variants, while the external
6+
* imports provide IBM Plex Mono for code/monospace usage.
7+
*/
18
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
29
@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=437b6557-ce99-4f35-97ff-64a93247731f");
310

0 commit comments

Comments
 (0)