CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix buttons across app

Browse Source
This commit is contained in:
adilallo
2026-02-03 10:30:13 -07:00
parent 8f0db08d0f
commit 6ea840505a
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Alert/Alert.view.tsx
+2 -2
View File
@@ -50,10 +50,10 @@ export function AlertView({
</div> </div>
<Button <Button
variant="ghost" variant="ghost"
size="xsmall" size="large"
onClick={onClose} onClick={onClose}
ariaLabel="Close alert" ariaLabel="Close alert"
className="shrink-0" className="shrink-0 [&_svg_path]:transition-colors [&_svg_path]:duration-200 hover:[&_svg_path]:fill-[var(--color-content-default-primary)]"
> >
<svg <svg
width="20" width="20"
app/components/Button.tsx
+6 -6
View File
@@ -41,14 +41,14 @@ const Button = memo<ButtonProps>(
}) => { }) => {
const sizeStyles: Record<string, string> = { const sizeStyles: Record<string, string> = {
xsmall: xsmall:
"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", "p-[var(--spacing-scale-006)] gap-[var(--spacing-scale-002)]",
small: small:
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]", "p-[var(--spacing-scale-008)] gap-[var(--spacing-scale-002)]",
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]", medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
large: large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]", "p-[var(--spacing-scale-012)] gap-[var(--spacing-scale-006)]",
xlarge: xlarge:
"px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]", "p-[var(--spacing-scale-016)] gap-[var(--spacing-scale-008)]",
}; };
const fontStyles: Record<string, string> = { const fontStyles: Record<string, string> = {
@@ -65,8 +65,8 @@ const Button = memo<ButtonProps>(
"filled-inverse": "filled-inverse":
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
outline: outline:
"bg-transparent text-[var(--color-content-default-primary)] border border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border focus:border-[var(--color-border-invert-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-invert-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
"outline-inverse": "bg-transparent text-[var(--color-content-invert-primary)] border border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-primary)] focus:outline-none focus:border focus:border-[var(--color-border-default-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", "outline-inverse": "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-default-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
ghost: ghost:
"bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
"ghost-inverse": "ghost-inverse":
app/components/ContentLockup/ContentLockup.view.tsx
+3 -3
View File
@@ -93,19 +93,19 @@ function ContentLockupView({
<div className="flex justify-start"> <div className="flex justify-start">
{/* Small button for xsm and sm breakpoints */} {/* Small button for xsm and sm breakpoints */}
<div className="block md:hidden"> <div className="block md:hidden">
<Button variant="filled-inverse" size="small"> <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
{ctaText} {ctaText}
</Button> </Button>
</div> </div>
{/* Large button for md and lg breakpoints */} {/* Large button for md and lg breakpoints */}
<div className="hidden md:block xl:hidden"> <div className="hidden md:block xl:hidden">
<Button variant="filled-inverse" size="large" className={buttonClassName}> <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
{ctaText} {ctaText}
</Button> </Button>
</div> </div>
{/* XLarge button for xl breakpoint */} {/* XLarge button for xl breakpoint */}
<div className="hidden xl:block"> <div className="hidden xl:block">
<Button variant="filled-inverse" size="xlarge"> <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
{ctaText} {ctaText}
</Button> </Button>
</div> </div>
app/components/NumberedCards/NumberedCards.view.tsx
+3 -3
View File
@@ -47,13 +47,13 @@ function NumberedCardsView({
{/* Call to Action Button */} {/* Call to Action Button */}
<div className="text-center sm:text-left lg:text-center"> <div className="text-center sm:text-left lg:text-center">
{/* Default button for xsm and sm breakpoints */} {/* Filled button for xsm and sm breakpoints */}
<div className="block lg:hidden"> <div className="block lg:hidden">
<Button variant="default" size="large"> <Button variant="filled" size="large">
{t("numberedCards.buttons.createCommunityRule")} {t("numberedCards.buttons.createCommunityRule")}
</Button> </Button>
</div> </div>
{/* Outlined button for lg and xlg breakpoints */} {/* Outline button for lg and xlg breakpoints */}
<div className="hidden lg:block"> <div className="hidden lg:block">
<Button variant="outline" size="large"> <Button variant="outline" size="large">
{t("numberedCards.buttons.seeHowItWorks")} {t("numberedCards.buttons.seeHowItWorks")}