Fix buttons

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);
 }

page/src/Playground.tsx

@@ -147,7 +147,7 @@ export function Playground() {
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button size="sm">
+                <Button size="sm" className="fancy">
                   <PlayFill /> Run
                 </Button>
               </DropdownMenuTrigger>
@@ -161,7 +161,7 @@ export function Playground() {
                   </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => loadAndRunUserFile()}>
                     <FileEarmarkCheckFill className="mr-2" />
-                    <span>Seelct your .exe</span>
+                    <span>Select your .exe</span>
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
               </DropdownMenuContent>
@@ -171,6 +171,7 @@ export function Playground() {
               disabled={!emulator}
               size="sm"
               variant="secondary"
+              className="fancy"
               onClick={() => emulator?.stop()}
             >
               <StopFill /> 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() {
 
             <Popover>
               <PopoverTrigger asChild>
-                <Button size="sm" variant="secondary">
+                <Button size="sm" variant="secondary" className="fancy">
                   <GearFill /> Settings
                 </Button>
               </PopoverTrigger>

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",