Skip to content

Commit 9cb6fc1

Browse files
samejrclaude
samejr
and
claude
committed
fix(webapp): keep the button text color when the label isn't plain text
A Button only applied its variant text color when the label was a plain string. Anything else - a fragment, a span, text interleaved with a value - inherited the page color instead. On the dark themes that lands near white and reads as roughly right, so it went unnoticed; on Light and White it lands near black, leaving 1.35:1 labels on the indigo and red buttons. The label row now carries the color, so every child inherits it, and the call sites that pinned their label to text-bright inside a primary or danger button no longer fight it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1 parent 3b65be0 commit 9cb6fc1

8 files changed

Lines changed: 23 additions & 29 deletions

File tree

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,12 @@ export function ButtonContent(props: ButtonContentPropsType) {
298298
className={cn(
299299
textAlignLeft ? "text-left" : "justify-center",
300300
"flex w-full items-center",
301+
// The label row owns the variant's text color so children inherit it
302+
// whatever shape they are. Setting it only on the string branch below
303+
// left element children (a fragment, a span, text mixed with a value)
304+
// inheriting the page color instead - near-white on the dark themes,
305+
// which read as roughly right, but near-black on Light and White.
306+
textColorClassName,
301307
iconSpacingClassName,
302308
iconSpacing,
303309
showSpinner && "invisible"
@@ -317,9 +323,7 @@ export function ButtonContent(props: ButtonContentPropsType) {
317323

318324
{text &&
319325
(typeof text === "string" ? (
320-
<span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
321-
{text}
322-
</span>
326+
<span className="mx-auto grow self-center truncate">{text}</span>
323327
) : (
324328
<>{text}</>
325329
))}

‎apps/webapp/app/components/schedules/PurchaseSchedulesModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export function PurchaseSchedulesModal({
240240
type="submit"
241241
disabled={isLoading}
242242
>
243-
<span className="tabular-nums text-text-bright">{`Send request for ${formatNumber(
243+
<span className="tabular-nums">{`Send request for ${formatNumber(
244244
amountValue
245245
)}`}</span>
246246
</Button>
@@ -254,7 +254,7 @@ export function PurchaseSchedulesModal({
254254
disabled={isLoading || state === "need_to_delete"}
255255
LeadingIcon={isLoading ? SpinnerWhite : undefined}
256256
>
257-
<span className="tabular-nums text-text-bright">{`Remove ${formatNumber(
257+
<span className="tabular-nums">{`Remove ${formatNumber(
258258
extraSchedules - amountValue
259259
)} ${extraSchedules - amountValue === 1 ? "schedule" : "schedules"}`}</span>
260260
</Button>
@@ -268,7 +268,7 @@ export function PurchaseSchedulesModal({
268268
disabled={isLoading || state === "no_change"}
269269
LeadingIcon={isLoading ? SpinnerWhite : undefined}
270270
>
271-
<span className="tabular-nums text-text-bright">{`Purchase ${formatNumber(
271+
<span className="tabular-nums">{`Purchase ${formatNumber(
272272
amountValue - extraSchedules
273273
)} ${amountValue - extraSchedules === 1 ? "schedule" : "schedules"}`}</span>
274274
</Button>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -798,7 +798,7 @@ function PurchaseBranchesModal({
798798
type="submit"
799799
disabled={isLoading}
800800
>
801-
<span className="tabular-nums text-text-bright">{`Send request for ${formatNumber(
801+
<span className="tabular-nums">{`Send request for ${formatNumber(
802802
amountValue
803803
)}`}</span>
804804
</Button>
@@ -812,7 +812,7 @@ function PurchaseBranchesModal({
812812
disabled={isLoading || state === "need_to_archive"}
813813
LeadingIcon={isLoading ? SpinnerWhite : undefined}
814814
>
815-
<span className="tabular-nums text-text-bright">{`Remove ${formatNumber(
815+
<span className="tabular-nums">{`Remove ${formatNumber(
816816
extraBranches - amountValue
817817
)} ${extraBranches - amountValue === 1 ? "branch" : "branches"}`}</span>
818818
</Button>
@@ -826,7 +826,7 @@ function PurchaseBranchesModal({
826826
disabled={isLoading || state === "no_change"}
827827
LeadingIcon={isLoading ? SpinnerWhite : undefined}
828828
>
829-
<span className="tabular-nums text-text-bright">{`Purchase ${formatNumber(
829+
<span className="tabular-nums">{`Purchase ${formatNumber(
830830
amountValue - extraBranches
831831
)} ${amountValue - extraBranches === 1 ? "branch" : "branches"}`}</span>
832832
</Button>

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1150,7 +1150,7 @@ export function PurchaseSeatsModal({
11501150
type="submit"
11511151
disabled={isLoading}
11521152
>
1153-
<span className="tabular-nums text-text-bright">{`Send request for ${formatNumber(
1153+
<span className="tabular-nums">{`Send request for ${formatNumber(
11541154
amountValue
11551155
)}`}</span>
11561156
</Button>
@@ -1164,7 +1164,7 @@ export function PurchaseSeatsModal({
11641164
disabled={isLoading || state === "need_to_remove_members"}
11651165
LeadingIcon={isLoading ? SpinnerWhite : undefined}
11661166
>
1167-
<span className="tabular-nums text-text-bright">{`Remove ${formatNumber(
1167+
<span className="tabular-nums">{`Remove ${formatNumber(
11681168
extraSeats - amountValue
11691169
)} ${extraSeats - amountValue === 1 ? "seat" : "seats"}`}</span>
11701170
</Button>
@@ -1178,7 +1178,7 @@ export function PurchaseSeatsModal({
11781178
disabled={isLoading || state === "no_change"}
11791179
LeadingIcon={isLoading ? SpinnerWhite : undefined}
11801180
>
1181-
<span className="tabular-nums text-text-bright">{`Purchase ${formatNumber(
1181+
<span className="tabular-nums">{`Purchase ${formatNumber(
11821182
amountValue - extraSeats
11831183
)} ${amountValue - extraSeats === 1 ? "seat" : "seats"}`}</span>
11841184
</Button>

‎apps/webapp/app/routes/login._index/route.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -313,11 +313,9 @@ export default function LoginPage() {
313313
{isEmailLoading ? (
314314
<Spinner className="mr-2 size-5" color="white" />
315315
) : (
316-
<EnvelopeIcon className="mr-2 size-5 text-text-bright" />
316+
<EnvelopeIcon className="mr-2 size-5" />
317317
)}
318-
<span className="text-text-bright">
319-
{isEmailLoading ? "Sending…" : "Continue with Email"}
320-
</span>
318+
<span>{isEmailLoading ? "Sending…" : "Continue with Email"}</span>
321319
</Button>
322320
</div>
323321
</div>

‎apps/webapp/app/routes/login.mfa/route.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -252,11 +252,7 @@ export default function LoginMfaPage() {
252252
data-action="verify recovery code"
253253
>
254254
{isLoading ? <Spinner className="mr-2 size-5" color="white" /> : null}
255-
{isLoading ? (
256-
<span className="text-text-bright">Verifying…</span>
257-
) : (
258-
<span className="text-text-bright">Verify</span>
259-
)}
255+
{isLoading ? <span>Verifying…</span> : <span>Verify</span>}
260256
</Button>
261257
{typeof mfaError === "string" && <FormError>{mfaError}</FormError>}
262258
</Fieldset>
@@ -304,11 +300,7 @@ export default function LoginMfaPage() {
304300
data-action="verify mfa code"
305301
>
306302
{isLoading ? <Spinner className="mr-2 size-5" color="white" /> : null}
307-
{isLoading ? (
308-
<span className="text-text-bright">Verifying…</span>
309-
) : (
310-
<span className="text-text-bright">Verify</span>
311-
)}
303+
{isLoading ? <span>Verifying…</span> : <span>Verify</span>}
312304
</Button>
313305
{typeof mfaError === "string" && <FormError>{mfaError}</FormError>}
314306
</Fieldset>

‎apps/webapp/app/routes/login.sso/route.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export default function LoginSsoPage() {
154154
data-action="continue with sso"
155155
>
156156
{isLoading && <Spinner className="mr-2 size-5" color="white" />}
157-
<span className="text-text-bright">
157+
<span>
158158
{isLoading
159159
? "Redirecting…"
160160
: reason === "expired"

‎apps/webapp/app/routes/resources.account.mfa.setup/MfaDisableDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,9 @@ export function MfaDisableDialog({
139139
<Button type="submit" variant="primary/medium" disabled={isSubmitting}>
140140
{isSubmitting ? <Spinner className="mr-2 size-5" color="white" /> : null}
141141
{isSubmitting ? (
142-
<span className="text-text-bright">Disabling…</span>
142+
<span>Disabling…</span>
143143
) : (
144-
<span className="text-text-bright">Disable MFA</span>
144+
<span>Disable MFA</span>
145145
)}
146146
</Button>
147147
</DialogFooter>

0 commit comments

Comments
 (0)