Skip to content

Commit 41873e7

Browse files
tripledoublevtripledoublev
committed
Emit missing design tokens to :root and fix hardcoded color
1 parent 83c4ec2 commit 41873e7

11 files changed

Lines changed: 26 additions & 60 deletions

‎components/Navbar.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
247247

248248
<div className={`align-self-center px-2`}>
249249
<Dropdown>
250-
<Dropdown.Toggle
251-
className={`desktop-navbar-dropdown btn-secondary`}
252-
>
250+
<Dropdown.Toggle className={`desktop-navbar-dropdown btn-secondary`}>
253251
{t("about")}
254252
</Dropdown.Toggle>
255253
<Dropdown.Menu>
@@ -264,9 +262,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
264262

265263
<div className={`align-self-center px-2`}>
266264
<Dropdown>
267-
<Dropdown.Toggle
268-
className={`desktop-navbar-dropdown btn-secondary`}
269-
>
265+
<Dropdown.Toggle className={`desktop-navbar-dropdown btn-secondary`}>
270266
{t("learn")}
271267
</Dropdown.Toggle>
272268
<Dropdown.Menu>

‎components/NavbarComponents.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,7 @@ export const NavbarLinkBills: React.FC<
111111
<Nav.Item onClick={handleClick}>
112112
<NavLink
113113
className={
114-
isMobile
115-
? "navLink-primary"
116-
: "desktop-navbar-link rounded px-3 py-1"
114+
isMobile ? "navLink-primary" : "desktop-navbar-link rounded px-3 py-1"
117115
}
118116
href="/bills"
119117
{...other}
@@ -136,9 +134,7 @@ export const NavbarLinkBallotQuestions: React.FC<
136134
<Nav.Item onClick={handleClick}>
137135
<NavLink
138136
className={
139-
isMobile
140-
? "navLink-primary"
141-
: "desktop-navbar-link rounded px-3 py-1"
137+
isMobile ? "navLink-primary" : "desktop-navbar-link rounded px-3 py-1"
142138
}
143139
href="/ballotQuestions"
144140
{...other}
@@ -161,9 +157,7 @@ export const NavbarLinkHearings: React.FC<
161157
<Nav.Item onClick={handleClick}>
162158
<NavLink
163159
className={
164-
isMobile
165-
? "navLink-primary"
166-
: "desktop-navbar-link rounded px-3 py-1"
160+
isMobile ? "navLink-primary" : "desktop-navbar-link rounded px-3 py-1"
167161
}
168162
href="/hearings"
169163
{...other}
@@ -310,9 +304,7 @@ export const NavbarLinkNewsfeed: React.FC<
310304
<Nav.Item onClick={handleClick}>
311305
<NavLink
312306
className={
313-
isMobile
314-
? "navLink-primary"
315-
: "desktop-navbar-link rounded px-3 py-1"
307+
isMobile ? "navLink-primary" : "desktop-navbar-link rounded px-3 py-1"
316308
}
317309
href="/newsfeed"
318310
{...other}
@@ -429,9 +421,7 @@ export const NavbarLinkTestimony: React.FC<
429421
<Nav.Item onClick={handleClick}>
430422
<NavLink
431423
className={
432-
isMobile
433-
? "navLink-primary"
434-
: "desktop-navbar-link rounded px-3 py-1"
424+
isMobile ? "navLink-primary" : "desktop-navbar-link rounded px-3 py-1"
435425
}
436426
href="/testimony"
437427
{...other}

‎components/ballotquestions/BallotQuestionHeader.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@ export const BallotQuestionHeader = ({
4343

4444
return (
4545
<Container fluid="xl" className="mt-4">
46-
<div
47-
className="maple-surface-gradient rounded-4 px-4 py-4 px-lg-5 py-lg-5"
48-
>
46+
<div className="maple-surface-gradient rounded-4 px-4 py-4 px-lg-5 py-lg-5">
4947
<Row className="g-4 align-items-start">
5048
<Col lg={8}>
5149
<Link
@@ -72,8 +70,7 @@ export const BallotQuestionHeader = ({
7270
height: "0.6rem",
7371
borderRadius: "var(--maple-radius-pill)",
7472
backgroundColor: "var(--maple-brand-primary)",
75-
boxShadow:
76-
"0 0 0 4px var(--maple-surface-accent-strong)"
73+
boxShadow: "0 0 0 4px var(--maple-surface-accent-strong)"
7774
}}
7875
/>
7976
{statusLabel}
@@ -127,9 +124,7 @@ export const BallotQuestionHeader = ({
127124

128125
<Col lg={4}>
129126
<div className="h-100 maple-muted-surface rounded-4 p-4">
130-
<div className="maple-eyebrow mb-3">
131-
Take part
132-
</div>
127+
<div className="maple-eyebrow mb-3">Take part</div>
133128
<div className="mb-3">
134129
{notifications && user && (
135130
<FollowBallotQuestionButton ballotQuestion={ballotQuestion} />
@@ -171,15 +166,11 @@ function MetaFact({ label, value }: { label: string; value: string }) {
171166
return (
172167
<div
173168
className="d-flex flex-column"
174-
style={{
175-
minWidth: "6.5rem"
176-
}}
169+
style={{
170+
minWidth: "6.5rem"
171+
}}
177172
>
178-
<span
179-
className="maple-eyebrow"
180-
>
181-
{label}
182-
</span>
173+
<span className="maple-eyebrow">{label}</span>
183174
<span
184175
style={{
185176
color: "var(--maple-text-body)",

‎components/ballotquestions/BallotQuestionNav.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,7 @@ export const BallotQuestionNav = ({
7272
return (
7373
<div className="maple-surface rounded-4 p-3 p-lg-4">
7474
<div className="mb-3 mb-lg-4">
75-
<div className="maple-eyebrow mb-1">
76-
Explore
77-
</div>
75+
<div className="maple-eyebrow mb-1">Explore</div>
7876
<p className="mb-0 small text-body-secondary">
7977
Move between the question overview and public perspectives.
8078
</p>

‎components/ballotquestions/DescriptionBox.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
export const DescriptionBox = ({ description }: { description: string }) => {
22
return (
3-
<div
4-
className="maple-accent-surface rounded-4 px-4 py-4"
5-
>
3+
<div className="maple-accent-surface rounded-4 px-4 py-4">
64
<div className="d-flex align-items-start gap-3">
75
<div
86
className="maple-icon-chip rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"

‎components/ballotquestions/OverviewTab.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,7 @@ export const OverviewTab = ({
5151
{ballotQuestion.atAGlance.map((item, idx) => (
5252
<Col key={idx} md={6}>
5353
<div className="maple-muted-surface rounded-4 h-100 px-3 py-3">
54-
<div className="maple-eyebrow mb-2">
55-
{item.label}
56-
</div>
54+
<div className="maple-eyebrow mb-2">{item.label}</div>
5755
<div
5856
style={{
5957
color: "var(--maple-text-strong)",
@@ -171,8 +169,6 @@ function BallotGlyph() {
171169

172170
function SectionCard({ children }: { children: ReactNode }) {
173171
return (
174-
<section className="maple-surface rounded-4 px-4 py-4">
175-
{children}
176-
</section>
172+
<section className="maple-surface rounded-4 px-4 py-4">{children}</section>
177173
)
178174
}

‎components/ballotquestions/TestimoniesTab.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,7 @@ function SummaryItem({
119119
<div className="maple-muted-surface rounded-4 h-100 px-3 py-3">
120120
<div className="d-flex align-items-center justify-content-between gap-3">
121121
<div>
122-
<div className="maple-eyebrow mb-1">
123-
{label}
124-
</div>
122+
<div className="maple-eyebrow mb-1">{label}</div>
125123
<div
126124
className="fw-semibold"
127125
style={{ color, fontSize: "1.75rem", lineHeight: 1 }}

‎components/ballotquestions/YourTestimonyPanel.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@ export const YourTestimonyPanel = ({
3131
return (
3232
<div className="h-100">
3333
<div className="d-flex align-items-center justify-content-between mb-3">
34-
<div className="maple-panel-title">
35-
Your Perspective
36-
</div>
34+
<div className="maple-panel-title">Your Perspective</div>
3735
{showInlineEditButton && bill ? (
3836
<EditTestimonyButton
3937
billId={bill.id}

‎components/search/SearchContainer.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,7 @@ export const SearchContainer = styled.div`
151151
background-color: var(--maple-surface-base);
152152
border: 1px solid var(--maple-surface-border);
153153
box-shadow: var(--maple-shadow-sm);
154-
padding: var(--maple-space-sm) var(--maple-space-lg)
155-
var(--maple-space-lg);
154+
padding: var(--maple-space-sm) var(--maple-space-lg) var(--maple-space-lg);
156155
border-radius: var(--maple-radius-sm);
157156
margin-bottom: var(--maple-space-xl);
158157
max-height: 250px;

‎styles/bootstrap.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ $utilities: (
226226

227227
--maple-brand-primary: #{$maple-brand-primary};
228228
--maple-brand-primary-strong: #{$maple-brand-primary-strong};
229+
--maple-brand-accent: #{$maple-brand-accent};
229230
--maple-brand-danger: #{$maple-brand-danger};
230231
--maple-brand-dark: #{$maple-brand-dark};
231232

@@ -271,8 +272,10 @@ $utilities: (
271272
--maple-space-lg: #{$maple-space-lg};
272273
--maple-space-xl: #{$maple-space-xl};
273274
--maple-space-2xl: #{$maple-space-2xl};
275+
--maple-space-3xl: #{$maple-space-3xl};
274276

275277
--maple-transition-fast: #{$maple-transition-fast};
278+
--maple-transition-base: #{$maple-transition-base};
276279

277280
--maple-status-legislature-bg: #{$maple-status-legislature-bg};
278281
--maple-status-legislature-text: #{$maple-status-legislature-text};
@@ -302,8 +305,7 @@ $utilities: (
302305
--bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--maple-focus-ring);
303306
transition: background-color var(--maple-transition-fast),
304307
border-color var(--maple-transition-fast),
305-
color var(--maple-transition-fast),
306-
box-shadow var(--maple-transition-fast),
308+
color var(--maple-transition-fast), box-shadow var(--maple-transition-fast),
307309
transform var(--maple-transition-fast);
308310
}
309311

0 commit comments

Comments
 (0)