Skip to content

Commit ff6359c

Browse files
samejrsamejr
authored
Buttons: Updates the primary button style to fit the UI style better (#1828)
* Move to indigo primary button to better fit in with the app UI style * Updates Pause queue button to secondary * Updates some blank state CTA buttons to primary
1 parent 0e82698 commit ff6359c

File tree

5 files changed

+36
-27
lines changed

5 files changed

+36
-27
lines changed

‎apps/webapp/app/components/BlankStatePanels.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,7 @@ export function TestHasNoTasks() {
200200
accessory={
201201
<LinkButton
202202
to={v3EnvironmentPath(organization, project, environment)}
203-
variant="secondary/small"
204-
LeadingIcon={PlusIcon}
203+
variant="primary/small"
205204
>
206205
Create a task
207206
</LinkButton>
@@ -396,8 +395,7 @@ export function QueuesHasNoTasks() {
396395
accessory={
397396
<LinkButton
398397
to={v3EnvironmentPath(organization, project, environment)}
399-
variant="secondary/small"
400-
LeadingIcon={PlusIcon}
398+
variant="primary/small"
401399
>
402400
Create a task
403401
</LinkButton>

‎apps/webapp/app/components/primitives/Buttons.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ type Size = keyof typeof sizes;
4242
const theme = {
4343
primary: {
4444
textColor:
45-
"text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900",
45+
"text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-dimmed",
4646
button:
47-
"bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none",
47+
"bg-indigo-600 border border-indigo-500 group-hover/button:bg-indigo-500 group-hover/button:border-indigo-400 group-disabled/button:opacity-50 group-disabled/button:bg-indigo-600 group-disabled/button:border-indigo-500 group-disabled/button:pointer-events-none",
4848
shortcut:
49-
"border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900",
50-
icon: "text-charcoal-900",
49+
"border-text-bright/40 text-text-bright group-hover/button:border-text-bright/60 group-hover/button:text-text-bright",
50+
icon: "text-text-bright",
5151
},
5252
secondary: {
5353
textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
5454
button:
55-
"bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-650 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
55+
"bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-550 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
5656
shortcut:
5757
"border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
5858
icon: "text-text-bright",

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ function EnvironmentPauseResumeButton({
486486
<DialogTrigger asChild>
487487
<Button
488488
type="button"
489-
variant="tertiary/small"
489+
variant="secondary/small"
490490
LeadingIcon={env.paused ? PlayIcon : PauseIcon}
491491
leadingIconClassName={env.paused ? "text-success" : "text-amber-500"}
492492
>
@@ -495,7 +495,7 @@ function EnvironmentPauseResumeButton({
495495
</DialogTrigger>
496496
</div>
497497
</TooltipTrigger>
498-
<TooltipContent side="right" className={"text-xs"}>
498+
<TooltipContent className={"text-xs"}>
499499
{env.paused
500500
? `Resume processing runs in ${environmentFullTitle(env)}.`
501501
: `Pause processing runs in ${environmentFullTitle(env)}.`}

‎apps/webapp/app/routes/storybook.buttons/route.tsx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,10 @@ export default function Story() {
108108
</div>
109109
<div className="flex flex-col items-start gap-2">
110110
<Header3 className="mb-1 uppercase">Loading</Header3>
111-
<Button variant="primary/small" LeadingIcon={Spinner}>
111+
<Button
112+
variant="primary/small"
113+
LeadingIcon={<Spinner color="white" className="size-3.5" />}
114+
>
112115
Loading Primary…
113116
</Button>
114117
<Button variant="secondary/small" LeadingIcon={Spinner}>
@@ -120,7 +123,10 @@ export default function Story() {
120123
<Button variant="minimal/small" LeadingIcon={Spinner}>
121124
Loading Minimal…
122125
</Button>
123-
<Button variant="danger/small" LeadingIcon={Spinner}>
126+
<Button
127+
variant="danger/small"
128+
LeadingIcon={<Spinner color="white" className="size-3.5" />}
129+
>
124130
Loading Danger…
125131
</Button>
126132
</div>
@@ -231,7 +237,10 @@ export default function Story() {
231237
</div>
232238
<div className="flex flex-col items-start gap-2">
233239
<Header3 className="mb-1 uppercase">Loading</Header3>
234-
<Button variant="primary/medium" LeadingIcon={Spinner}>
240+
<Button
241+
variant="primary/medium"
242+
LeadingIcon={<Spinner color="white" className="size-4" />}
243+
>
235244
Loading Primary…
236245
</Button>
237246
<Button variant="secondary/medium" LeadingIcon={Spinner}>
@@ -243,7 +252,10 @@ export default function Story() {
243252
<Button variant="minimal/medium" LeadingIcon={Spinner}>
244253
Loading Minimal…
245254
</Button>
246-
<Button variant="danger/medium" LeadingIcon={Spinner}>
255+
<Button
256+
variant="danger/medium"
257+
LeadingIcon={<Spinner color="white" className="size-4" />}
258+
>
247259
Loading Danger…
248260
</Button>
249261
</div>
@@ -279,12 +291,12 @@ export default function Story() {
279291
<div className="flex flex-col gap-2">
280292
<div className="flex flex-col items-start gap-2">
281293
<Button variant="primary/large" fullWidth>
282-
<GitHubDarkIcon className={"mr-1.5 size-[1.2rem]"} />
283-
<span className="text-charcoal-900">Continue with GitHub</span>
294+
<GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
295+
<span className="text-text-bright">Continue with GitHub</span>
284296
</Button>
285297
<Button variant="secondary/large" fullWidth>
286-
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
287-
<span className="text-secondary">Continue with Email</span>
298+
<EnvelopeIcon className={"mr-1.5 size-[1.2rem] text-text-bright transition"} />
299+
<span className="text-text-bright">Continue with Email</span>
288300
</Button>
289301
<Button variant="tertiary/large" fullWidth>
290302
<GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
@@ -306,22 +318,20 @@ export default function Story() {
306318
<div className="flex flex-col gap-2">
307319
<div className="flex flex-col items-start gap-2">
308320
<Button variant="primary/extra-large" fullWidth>
309-
<GitHubDarkIcon className={"mr-1.5 h-5 w-5"} />
310-
<span className="text-charcoal-900">Continue with GitHub</span>
321+
<GitHubLightIcon className={"mr-1.5 size-5"} />
322+
<span className="text-text-bright">Continue with GitHub</span>
311323
</Button>
312324
<Button variant="secondary/extra-large" fullWidth>
313-
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
314-
<span className="text-secondary">Continue with Email</span>
325+
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-text-bright transition"} />
326+
<span className="text-text-bright">Continue with Email</span>
315327
</Button>
316328
<Button variant="tertiary/extra-large" fullWidth>
317-
<GitHubLightIcon className={"mr-1.5 h-5 w-5"} />
329+
<GitHubLightIcon className={"mr-1.5 size-5"} />
318330
<span className="text-text-bright">Continue with GitHub</span>
319331
</Button>
320332
<Button variant="danger/extra-large" fullWidth>
321333
<TrashIcon
322-
className={
323-
"mr-1.5 h-5 w-5 text-text-bright transition group-hover:text-text-bright"
324-
}
334+
className={"mr-1.5 size-5 text-text-bright transition group-hover:text-text-bright"}
325335
/>
326336
<span className="text-text-bright">This is a delete button</span>
327337
</Button>

‎apps/webapp/tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const charcoal = {
6161
300: "#B5B8C0",
6262
400: "#878C99",
6363
500: "#5F6570",
64+
550: "#4D525B",
6465
600: "#3B3E45",
6566
650: "#2C3034",
6667
700: "#272A2E",

0 commit comments

Comments
 (0)