"Refactor admin UI components using Conventional Commits (feat)"

backend/app/templates/base.html

@@ -117,7 +117,7 @@
                         
                         <a href="{{ url_for('printers_page') }}" 
                            class="menu-item {{ 'text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-500' if request.endpoint == 'printers_page' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-8 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                             </svg>
                             <span>3D-Drucker</span>

frontend/src/app/admin/admin-sidebar.tsx

@@ -47,17 +47,14 @@ export function AdminSidebar() {
 	];
 
 	return (
-		<ul className="w-full space-y-1">
+		<ul className="w-full">
 			{adminSites.map((site) => (
 				<li key={site.path}>
 					<Link
 						href={site.path}
-						className={cn(
+						className={cn("flex items-center gap-2 p-2 rounded hover:bg-muted", {
-							"flex items-center gap-2 p-2 rounded-md transition-colors",
+							"font-semibold": pathname === site.path,
-							pathname === site.path
+						})}
-								? "bg-primary/10 text-primary font-semibold dark:bg-primary/20"
-								: "hover:bg-muted text-foreground/80 hover:text-foreground dark:text-foreground/70 dark:hover:text-foreground dark:hover:bg-muted/80"
-						)}
 					>
 						{site.icon}
 						<span>{site.name}</span>

frontend/src/app/admin/layout.tsx

@@ -19,15 +19,15 @@ export default async function AdminLayout(props: AdminLayoutProps) {
 	}
 
 	return (
-		<main className="flex flex-1 flex-col gap-6 p-2 md:p-4">
+		<main className="flex flex-1 flex-col gap-4">
 			<div className="mx-auto grid w-full gap-2">
-				<h1 className="text-3xl font-semibold text-foreground">Admin</h1>
+				<h1 className="text-3xl font-semibold">Admin</h1>
 			</div>
 			<div className="mx-auto grid w-full items-start gap-4 md:gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-				<nav className="grid gap-4 text-sm bg-background/50 p-3 rounded-lg dark:bg-background/10 shadow-sm">
+				<nav className="grid gap-4 text-sm">
 					<AdminSidebar />
 				</nav>
-				<div className="bg-background/50 p-2 rounded-lg dark:bg-background/10 shadow-sm">{children}</div>
+				<div>{children}</div>
 			</div>
 		</main>
 	);

frontend/src/app/admin/page.tsx

@@ -64,7 +64,7 @@ export default async function AdminPage() {
 	return (
 		<>
 			<Tabs defaultValue={"@general"} className="flex flex-col gap-4 items-start">
-				<TabsList className="bg-neutral-100 dark:bg-background/5 w-full py-6 border-b dark:border-muted">
+				<TabsList className="bg-neutral-100 w-full py-6">
 					<TabsTrigger value="@general">Allgemein</TabsTrigger>
 					<TabsTrigger value="@capacity">Druckerauslastung</TabsTrigger>
 					<TabsTrigger value="@report">Fehlerberichte</TabsTrigger>

frontend/src/components/data-card.tsx

@@ -24,19 +24,14 @@ export function DataCard(props: DataCardProps) {
 	const { title, description, value, icon } = props;
 
 	return (
-		<Card className="w-full overflow-hidden relative border dark:border-muted/40 dark:bg-background/30">
+		<Card className="w-full">
-			<div className="absolute right-0 top-0 h-full w-16 bg-gradient-to-r from-transparent to-primary/5 dark:to-primary/10"></div>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+				<CardTitle className="text-sm font-medium">{title}</CardTitle>
-				<CardTitle className="text-sm font-medium text-foreground/90">{title}</CardTitle>
+				<GenericIcon name={icon} className="h-4 w-4 text-muted-foreground" />
-				<GenericIcon name={icon} className="h-5 w-5 text-primary dark:text-primary/90" />
 			</CardHeader>
-			<CardContent className="relative z-10">
+			<CardContent>
-				<div className="text-2xl font-bold text-foreground">{value}</div>
+				<div className="text-2xl font-bold">{value}</div>
-				{description ? (
+				<p className="text-xs text-muted-foreground">&nbsp;</p>
-					<p className="text-xs text-muted-foreground">{description}</p>
-				) : (
-					<p className="text-xs text-muted-foreground">&nbsp;</p>
-				)}
 			</CardContent>
 		</Card>
 	);

frontend/src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground dark:bg-muted/20",
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-background/90 dark:data-[state=active]:text-primary dark:data-[state=active]:shadow-md dark:data-[state=active]:shadow-primary/10 dark:hover:text-foreground/90 hover:bg-background/80 hover:text-foreground/90",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:text-foreground/90",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}