style(panel): refine button styles with shadow, active scale, toned-down colors

panel/src/components/ServerCard.tsx

@@ -98,7 +98,7 @@ export function ServerCard({ server, cfg, onChanged }: Props) {
           (running || transitioning ? (
             <Button
               size="sm"
-              variant="outline"
+              variant="destructive"
               disabled={busy !== null}
               onClick={() => act("stop", () => api.stop(server.name))}
             >
@@ -107,6 +107,7 @@ export function ServerCard({ server, cfg, onChanged }: Props) {
           ) : (
             <Button
               size="sm"
+              variant="default"
               disabled={busy !== null}
               onClick={() => act("wake", () => api.wake(server.name))}
             >

panel/src/components/ui/button.tsx

@@ -4,15 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.97]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
       },
       size: {

panel/src/index.css

@@ -10,17 +10,17 @@
     --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
     --popover-foreground: 222 47% 11%;
-    --primary: 142 71% 45%;
+    --primary: 142 60% 43%;
-    --primary-foreground: 144 80% 10%;
+    --primary-foreground: 0 0% 100%;
     --muted: 210 40% 96%;
     --muted-foreground: 215 16% 47%;
     --accent: 210 40% 96%;
     --accent-foreground: 222 47% 11%;
-    --destructive: 0 72% 51%;
+    --destructive: 0 68% 49%;
     --destructive-foreground: 0 0% 100%;
     --border: 214 32% 91%;
     --input: 214 32% 91%;
-    --ring: 142 71% 45%;
+    --ring: 142 60% 43%;
     --radius: 0.6rem;
   }
 
@@ -31,17 +31,17 @@
     --card-foreground: 210 40% 96%;
     --popover: 222 44% 9%;
     --popover-foreground: 210 40% 96%;
-    --primary: 142 70% 45%;
+    --primary: 142 58% 46%;
-    --primary-foreground: 144 80% 8%;
+    --primary-foreground: 210 40% 98%;
     --muted: 217 33% 16%;
     --muted-foreground: 215 20% 65%;
     --accent: 217 33% 18%;
     --accent-foreground: 210 40% 96%;
-    --destructive: 0 63% 45%;
+    --destructive: 0 60% 44%;
     --destructive-foreground: 210 40% 98%;
     --border: 217 33% 18%;
     --input: 217 33% 20%;
-    --ring: 142 70% 45%;
+    --ring: 142 58% 46%;
   }
 
   * {

panel/src/pages/ServerConsole.tsx

@@ -218,14 +218,14 @@ export function ServerConsole() {
               <PhaseBadge phase={data.phase} />
               {streamable ? (
                 <Button
-                  variant="outline"
+                  variant="destructive"
                   size="sm"
                   onClick={() => api.stop(name).then(reload)}
                 >
                   {t("stop")}
                 </Button>
               ) : (
-                <Button size="sm" onClick={() => api.wake(name).then(reload)}>
+                <Button variant="default" size="sm" onClick={() => api.wake(name).then(reload)}>
                   {t("wake")}
                 </Button>
               )}