Unverified Commit ae91133e authored by Lemon-miaow's avatar Lemon-miaow
Browse files

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

parent cfe126fb

panel/src/components/ServerCard.tsx

+2 −1
Changes for panel/src/components/ServerCard.tsx: 2 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -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

+5 −4
Changes for panel/src/components/ui/button.tsx: 5 added lines, 4 removed lines.
Original line number Diff line number Diff line
@@ -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

+8 −8
Changes for panel/src/index.css: 8 added lines, 8 removed lines.
Original line number Diff line number Diff line
@@ -10,17 +10,17 @@ 
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;

    --popover-foreground: 222 47% 11%;

    --primary: 142 71% 45%;

    --primary-foreground: 144 80% 10%;

    --primary: 142 60% 43%;

    --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-foreground: 144 80% 8%;

    --primary: 142 58% 46%;

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

+2 −2
Changes for panel/src/pages/ServerConsole.tsx: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -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>

              )}