ui: redesign

apps/client/app/components/create-volume-dialog.tsx

@@ -6,15 +6,7 @@ import { createVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
 import { parseError } from "~/lib/errors";
 import { CreateVolumeForm } from "./create-volume-form";
 import { Button } from "./ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "./ui/dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { ScrollArea } from "./ui/scroll-area";
 
 type Props = {
@@ -41,7 +33,7 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
-				<Button className="bg-blue-900 hover:bg-blue-800">
+				<Button className="bg-transparent  border hover:bg-strong-accent">
 					<Plus size={16} className="mr-2" />
 					Create volume
 				</Button>

apps/client/app/components/layout.tsx

@@ -1,13 +1,13 @@
 import { useMutation } from "@tanstack/react-query";
 import { Outlet, useNavigate } from "react-router";
 import { toast } from "sonner";
+import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
+import { appContext } from "~/context";
 import { cn } from "~/lib/utils";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/layout";
 import { AppBreadcrumb } from "./app-breadcrumb";
 import { Button } from "./ui/button";
-import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
-import type { Route } from "./+types/layout";
-import { appContext } from "~/context";
-import { authMiddleware } from "~/middleware/auth";
 
 export const clientMiddleware = [authMiddleware];
 
@@ -39,19 +39,23 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 				"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
 			)}
 		>
-			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
-			<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
-				<div className="flex items-center justify-between mb-4">
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-card"></div>
+			<header className="relative bg-card-header border-b border-border/50">
+				<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-4 container mx-auto">
 					<AppBreadcrumb />
 					{loaderData.user && (
 						<div className="flex items-center gap-4">
-							<span className="text-sm text-muted-foreground">Welcome, {loaderData.user?.username}</span>
+							<span className="text-sm text-muted-foreground">
+								Welcome, <span className="text-strong-accent">{loaderData.user?.username}</span>
+							</span>
 							<Button variant="outline" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
 								Logout
 							</Button>
 						</div>
 					)}
 				</div>
+			</header>
+			<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
 				<Outlet />
 			</main>
 		</div>

apps/client/app/components/ui/button.tsx

@@ -6,23 +6,23 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
-	"inline-flex cursor-pointer uppercase border items-center justify-center dark:border-white dark:bg-secondary dark:text-white gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	"inline-flex cursor-pointer uppercase rounded-sm items-center justify-center gap-2 whitespace-nowrap text-xs font-semibold tracking-wide transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring border-0",
 	{
 		variants: {
 			variant: {
-				default: "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",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				default:
+					"bg-[var(--strong-accent)] text-white hover:bg-[var(--strong-accent)]/90 focus-visible:ring-[var(--strong-accent)]/50",
+				destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/50",
+				outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-[#464646] text-white hover:bg-[#464646]/80 dark:bg-[#464646] dark:text-white dark:hover:bg-[#464646]/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "rounded-xs h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 px-6 has-[>svg]:px-4",
+				default: "h-9 px-5 py-2 has-[>svg]:px-4",
+				sm: "h-8 px-3 py-1.5 has-[>svg]:px-2.5",
+				lg: "h-10 px-6 py-2.5 has-[>svg]:px-5",
 				icon: "size-9",
 			},
 		},

apps/client/app/components/volume-icon.tsx

@@ -42,10 +42,10 @@ const getIconAndColor = (backend: BackendType) => {
 };
 
 export const VolumeIcon = ({ backend, size = 10 }: VolumeIconProps) => {
-	const { icon: Icon, color, label } = getIconAndColor(backend);
+	const { icon: Icon, label } = getIconAndColor(backend);
 
 	return (
-		<span className={`flex items-center gap-2 ${color} rounded-md px-2 py-1`}>
+		<span className={`flex items-center gap-2 rounded-md px-2 py-1`}>
 			<Icon size={size} />
 			{label}
 		</span>