diff --git a/page/src/App.css b/page/src/App.css index 13046bb4..567f13e2 100644 --- a/page/src/App.css +++ b/page/src/App.css @@ -34,12 +34,12 @@ button { cursor: pointer; } -button.fancy-primary, -button.fancy-secondary { +button.fancy.bg-primary, +button.fancy.bg-secondary { transition: all 0.2s ease; } -button.fancy-primary { +button.fancy.bg-primary { background: linear-gradient( 180deg, rgba(38, 144, 255, 1) 0%, @@ -49,7 +49,7 @@ button.fancy-primary { text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; } -button.fancy-primary:hover { +button.fancy.bg-primary:hover { background: linear-gradient( 180deg, rgba(46, 151, 255, 1) 0%, @@ -58,12 +58,12 @@ button.fancy-primary:hover { border: 1px solid rgb(33, 33, 34); } -button.fancy-secondary { +button.fancy.bg-secondary { background: linear-gradient(180deg, rgb(38, 38, 39) 0%, rgb(34, 34, 35) 100%); border: 1px solid rgb(42, 42, 44); } -button.fancy-secondary:hover { +button.fancy.bg-secondary:hover { background: linear-gradient(180deg, rgb(42, 42, 43) 0%, rgb(38, 38, 39) 100%); border: 1px solid rgb(33, 33, 34); } diff --git a/page/src/Playground.tsx b/page/src/Playground.tsx index d5da6ffb..df557c25 100644 --- a/page/src/Playground.tsx +++ b/page/src/Playground.tsx @@ -147,7 +147,7 @@ export function Playground() { - @@ -161,7 +161,7 @@ export function Playground() { loadAndRunUserFile()}> - Seelct your .exe + Select your .exe @@ -171,6 +171,7 @@ export function Playground() { disabled={!emulator} size="sm" variant="secondary" + className="fancy" onClick={() => emulator?.stop()} > Stop @@ -179,6 +180,7 @@ export function Playground() { size="sm" disabled={!emulator} variant="secondary" + className="fancy" onClick={toggleEmulatorState} > {isEmulatorPaused() ? ( @@ -194,7 +196,7 @@ export function Playground() { - diff --git a/page/src/components/ui/button.tsx b/page/src/components/ui/button.tsx index d0f87271..2adaf00d 100644 --- a/page/src/components/ui/button.tsx +++ b/page/src/components/ui/button.tsx @@ -10,13 +10,13 @@ const buttonVariants = cva( variants: { variant: { default: - "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 fancy-primary", + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: - "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 fancy-secondary", + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline",