Skip to content

Buttons: Updates the primary button style to fit the UI style better #1828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 27, 2025
Merged

Buttons: Updates the primary button style to fit the UI style better #1828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e40993e
Move to indigo primary button to better fit in with the app UI style
samejr Mar 27, 2025
a3b8a56
Updates Pause queue button to secondary
samejr Mar 27, 2025
26267c3
Updates some blank state CTA buttons to primary
samejr Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions apps/webapp/app/components/BlankStatePanels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,7 @@ export function TestHasNoTasks() {
accessory={
<LinkButton
to={v3EnvironmentPath(organization, project, environment)}
variant="secondary/small"
LeadingIcon={PlusIcon}
variant="primary/small"
>
Create a task
</LinkButton>
Expand Down Expand Up @@ -396,8 +395,7 @@ export function QueuesHasNoTasks() {
accessory={
<LinkButton
to={v3EnvironmentPath(organization, project, environment)}
variant="secondary/small"
LeadingIcon={PlusIcon}
variant="primary/small"
>
Create a task
</LinkButton>
Expand Down
10 changes: 5 additions & 5 deletions apps/webapp/app/components/primitives/Buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ type Size = keyof typeof sizes;
const theme = {
primary: {
textColor:
"text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900",
"text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-dimmed",
button:
"bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none",
"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",
shortcut:
"border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900",
icon: "text-charcoal-900",
"border-text-bright/40 text-text-bright group-hover/button:border-text-bright/60 group-hover/button:text-text-bright",
icon: "text-text-bright",
},
secondary: {
textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
button:
"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",
"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",
shortcut:
"border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
icon: "text-text-bright",
Expand Down
4 changes: 2 additions & 2 deletions .../routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@ function EnvironmentPauseResumeButton({
<DialogTrigger asChild>
<Button
type="button"
variant="tertiary/small"
variant="secondary/small"
LeadingIcon={env.paused ? PlayIcon : PauseIcon}
leadingIconClassName={env.paused ? "text-success" : "text-amber-500"}
>
Expand All @@ -495,7 +495,7 @@ function EnvironmentPauseResumeButton({
</DialogTrigger>
</div>
</TooltipTrigger>
<TooltipContent side="right" className={"text-xs"}>
<TooltipContent className={"text-xs"}>
{env.paused
? `Resume processing runs in ${environmentFullTitle(env)}.`
: `Pause processing runs in ${environmentFullTitle(env)}.`}
Expand Down
42 changes: 26 additions & 16 deletions apps/webapp/app/routes/storybook.buttons/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@ export default function Story() {
</div>
<div className="flex flex-col items-start gap-2">
<Header3 className="mb-1 uppercase">Loading</Header3>
<Button variant="primary/small" LeadingIcon={Spinner}>
<Button
variant="primary/small"
LeadingIcon={<Spinner color="white" className="size-3.5" />}
>
Loading Primary…
</Button>
<Button variant="secondary/small" LeadingIcon={Spinner}>
Expand All @@ -120,7 +123,10 @@ export default function Story() {
<Button variant="minimal/small" LeadingIcon={Spinner}>
Loading Minimal…
</Button>
<Button variant="danger/small" LeadingIcon={Spinner}>
<Button
variant="danger/small"
LeadingIcon={<Spinner color="white" className="size-3.5" />}
>
Loading Danger…
</Button>
</div>
Expand Down Expand Up @@ -231,7 +237,10 @@ export default function Story() {
</div>
<div className="flex flex-col items-start gap-2">
<Header3 className="mb-1 uppercase">Loading</Header3>
<Button variant="primary/medium" LeadingIcon={Spinner}>
<Button
variant="primary/medium"
LeadingIcon={<Spinner color="white" className="size-4" />}
>
Loading Primary…
</Button>
<Button variant="secondary/medium" LeadingIcon={Spinner}>
Expand All @@ -243,7 +252,10 @@ export default function Story() {
<Button variant="minimal/medium" LeadingIcon={Spinner}>
Loading Minimal…
</Button>
<Button variant="danger/medium" LeadingIcon={Spinner}>
<Button
variant="danger/medium"
LeadingIcon={<Spinner color="white" className="size-4" />}
>
Loading Danger…
</Button>
</div>
Expand Down Expand Up @@ -279,12 +291,12 @@ export default function Story() {
<div className="flex flex-col gap-2">
<div className="flex flex-col items-start gap-2">
<Button variant="primary/large" fullWidth>
<GitHubDarkIcon className={"mr-1.5 size-[1.2rem]"} />
<span className="text-charcoal-900">Continue with GitHub</span>
<GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
<span className="text-text-bright">Continue with GitHub</span>
</Button>
<Button variant="secondary/large" fullWidth>
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
<span className="text-secondary">Continue with Email</span>
<EnvelopeIcon className={"mr-1.5 size-[1.2rem] text-text-bright transition"} />
<span className="text-text-bright">Continue with Email</span>
</Button>
<Button variant="tertiary/large" fullWidth>
<GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
Expand All @@ -306,22 +318,20 @@ export default function Story() {
<div className="flex flex-col gap-2">
<div className="flex flex-col items-start gap-2">
<Button variant="primary/extra-large" fullWidth>
<GitHubDarkIcon className={"mr-1.5 h-5 w-5"} />
<span className="text-charcoal-900">Continue with GitHub</span>
<GitHubLightIcon className={"mr-1.5 size-5"} />
<span className="text-text-bright">Continue with GitHub</span>
</Button>
<Button variant="secondary/extra-large" fullWidth>
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
<span className="text-secondary">Continue with Email</span>
<EnvelopeIcon className={"mr-1.5 h-5 w-5 text-text-bright transition"} />
<span className="text-text-bright">Continue with Email</span>
</Button>
<Button variant="tertiary/extra-large" fullWidth>
<GitHubLightIcon className={"mr-1.5 h-5 w-5"} />
<GitHubLightIcon className={"mr-1.5 size-5"} />
<span className="text-text-bright">Continue with GitHub</span>
</Button>
<Button variant="danger/extra-large" fullWidth>
<TrashIcon
className={
"mr-1.5 h-5 w-5 text-text-bright transition group-hover:text-text-bright"
}
className={"mr-1.5 size-5 text-text-bright transition group-hover:text-text-bright"}
/>
<span className="text-text-bright">This is a delete button</span>
</Button>
Expand Down
1 change: 1 addition & 0 deletions apps/webapp/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const charcoal = {
300: "#B5B8C0",
400: "#878C99",
500: "#5F6570",
550: "#4D525B",
600: "#3B3E45",
650: "#2C3034",
700: "#272A2E",
Expand Down