From 24bd736b9a82cdc7a8051d0ce4e590dcb2e9e374 Mon Sep 17 00:00:00 2001
From: Docker Config Backup <backup@example.com>
Date: Fri, 10 Oct 2025 20:49:14 +0200
Subject: [PATCH] style: Clean minimal design matching shadcn.com aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove all gradient backgrounds for clean white interface
- Update color scheme to neutral shadcn.com palette
- Simplify card headers (remove icons and colored backgrounds)
- Clean up spacing and reduce visual noise
- Update buttons to use outline variants
- Simplify table and stats styling with muted colors
- Improve typography with better font smoothing
- Match shadcn.com's minimal, professional aesthetic

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/components/DataPreview.tsx | 95 +++++++++++--------------
 frontend/app/components/JourneyForm.tsx | 30 +++-----
 frontend/app/globals.css                | 36 +++++-----
 frontend/app/page.tsx                   | 15 ++--
 4 files changed, 75 insertions(+), 101 deletions(-)

diff --git a/frontend/app/components/DataPreview.tsx b/frontend/app/components/DataPreview.tsx
index ddfc03e..c5729da 100644
--- a/frontend/app/components/DataPreview.tsx
+++ b/frontend/app/components/DataPreview.tsx
@@ -56,10 +56,10 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
   }
   if (loading) {
     return (
-      <Card className="bg-white/98 backdrop-blur-lg border-white/30">
-        <CardContent className="flex flex-col items-center justify-center h-96 p-8">
-          <Loader2 className="h-20 w-20 text-blue-600 animate-spin" />
-          <p className="mt-6 text-gray-700 font-semibold text-lg">Načítání dat...</p>
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center h-96">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="mt-4 text-sm text-muted-foreground">Načítání dat...</p>
         </CardContent>
       </Card>
     )
@@ -67,26 +67,16 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
 
   if (!data) {
     return (
-      <Card className="bg-white/98 backdrop-blur-lg border-white/30">
-        <CardHeader className="bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200">
-          <CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
-            <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
-              <BarChart3 className="w-7 h-7 text-white" />
-            </div>
-            <span>Náhled dat</span>
-          </CardTitle>
+      <Card>
+        <CardHeader>
+          <CardTitle>Náhled dat</CardTitle>
         </CardHeader>
-        <CardContent className="p-8">
+        <CardContent>
           <div className="flex flex-col items-center justify-center py-16 text-center">
-            <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4">
-              <FileText className="w-10 h-10 text-gray-400" />
-            </div>
-            <p className="text-gray-500 font-medium">
+            <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+            <p className="text-sm text-muted-foreground">
               Vyplňte formulář a klikněte na "Vypočítat"
             </p>
-            <p className="text-gray-400 text-sm mt-1">
-              Data se zobrazí zde
-            </p>
           </div>
         </CardContent>
       </Card>
@@ -94,60 +84,55 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
   }
 
   return (
-    <Card className="bg-white/98 backdrop-blur-lg border-white/30">
-      <CardHeader className="bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200">
-        <CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
-          <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
-            <BarChart3 className="w-7 h-7 text-white" />
-          </div>
-          <span>Náhled dat</span>
-        </CardTitle>
+    <Card>
+      <CardHeader>
+        <CardTitle>Náhled dat</CardTitle>
       </CardHeader>
-      <CardContent className="p-8">
+      <CardContent>
 
-      <div className="mb-6 grid grid-cols-2 gap-3 bg-gradient-to-br from-blue-50 to-indigo-50 p-5 rounded-xl border border-blue-100">
+      <div className="mb-4 grid grid-cols-2 md:grid-cols-3 gap-4 p-4 rounded-lg border bg-muted/50">
         <div>
-          <p className="text-sm text-gray-600">Měsíc</p>
-          <p className="font-semibold text-lg">{data.month}</p>
+          <p className="text-xs text-muted-foreground">Měsíc</p>
+          <p className="font-medium">{data.month}</p>
         </div>
         <div>
-          <p className="text-sm text-gray-600">Celkem záznamů</p>
-          <p className="font-semibold text-lg">{data.total_entries}</p>
+          <p className="text-xs text-muted-foreground">Celkem záznamů</p>
+          <p className="font-medium">{data.total_entries}</p>
         </div>
         <div>
-          <p className="text-sm text-gray-600">Počáteční km</p>
-          <p className="font-semibold text-lg">{data.start_km.toLocaleString()}</p>
+          <p className="text-xs text-muted-foreground">Počáteční km</p>
+          <p className="font-medium">{data.start_km.toLocaleString()}</p>
         </div>
         <div>
-          <p className="text-sm text-gray-600">Koncový km</p>
-          <p className="font-semibold text-lg">{data.end_km.toLocaleString()}</p>
+          <p className="text-xs text-muted-foreground">Koncový km</p>
+          <p className="font-medium">{data.end_km.toLocaleString()}</p>
         </div>
         <div>
-          <p className="text-sm text-gray-600">Celkem ujeto</p>
-          <p className="font-semibold text-lg">{(data.end_km - data.start_km).toLocaleString()} km</p>
+          <p className="text-xs text-muted-foreground">Celkem ujeto</p>
+          <p className="font-medium">{(data.end_km - data.start_km).toLocaleString()} km</p>
         </div>
         <div>
-          <p className="text-sm text-gray-600">Filtrováno dnů</p>
-          <p className="font-semibold text-lg">{data.filtered_days}</p>
+          <p className="text-xs text-muted-foreground">Filtrováno dnů</p>
+          <p className="font-medium">{data.filtered_days}</p>
         </div>
       </div>
 
-      <div className="overflow-auto max-h-96 rounded-xl border border-gray-200">
+      <div className="overflow-auto max-h-96 rounded-md border">
         <table className="w-full text-sm">
-          <thead className="bg-gradient-to-r from-gray-50 to-gray-100 sticky top-0">
+          <thead className="bg-muted/50 sticky top-0">
             <tr>
               {data.entries.length > 0 && Object.keys(data.entries[0]).map((key: string) => (
-                <th key={key} className="px-4 py-3 text-left font-bold text-gray-700 border-b-2 border-gray-300 whitespace-nowrap">
+                <th key={key} className="px-4 py-2 text-left font-medium border-b whitespace-nowrap">
                   {key}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-100 bg-white">
+          <tbody className="divide-y">
             {data.entries.map((entry: any, index: number) => (
-              <tr key={index} className="hover:bg-blue-50 transition-colors">
+              <tr key={index} className="hover:bg-muted/50">
                 {Object.keys(entry).map((key: string) => (
-                  <td key={key} className="px-4 py-3 text-right text-gray-600">
+                  <td key={key} className="px-4 py-2 text-right">
                     {entry[key] !== null && entry[key] !== undefined ? entry[key] : '-'}
                   </td>
                 ))}
@@ -158,29 +143,29 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
       </div>
 
       {formData && formData.startDate === '2025-01-01' && (
-        <div className="mt-6">
+        <div className="mt-4">
           <Button
             onClick={handleFillToWebsite}
             disabled={filling}
-            size="lg"
-            className="w-full bg-gradient-to-r from-orange-600 to-orange-700 hover:from-orange-700 hover:to-orange-800 text-lg h-12"
+            variant="secondary"
+            className="w-full"
           >
             {filling ? (
               <>
-                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 Vyplňování...
               </>
             ) : (
               <>
-                <Upload className="mr-2 h-5 w-5" />
+                <Upload className="mr-2 h-4 w-4" />
                 Vyplnit na web
               </>
             )}
           </Button>
 
           {fillResult && (
-            <div className={`mt-4 ${fillResult.dry_run ? 'bg-blue-50 border-blue-200' : 'bg-green-50 border-green-200'} border rounded-xl p-4`}>
-              <h3 className={`font-bold ${fillResult.dry_run ? 'text-blue-900' : 'text-green-900'} mb-2 flex items-center gap-2`}>
+            <div className={`mt-4 rounded-md border p-4 ${fillResult.dry_run ? 'bg-blue-50 border-blue-200' : 'bg-green-50 border-green-200'}`}>
+              <h3 className={`text-sm font-semibold mb-2 flex items-center gap-2 ${fillResult.dry_run ? 'text-blue-900' : 'text-green-900'}`}>
                 {fillResult.dry_run ? (
                   <>
                     <AlertCircle className="h-5 w-5" />
diff --git a/frontend/app/components/JourneyForm.tsx b/frontend/app/components/JourneyForm.tsx
index 83c3b5a..568ac40 100644
--- a/frontend/app/components/JourneyForm.tsx
+++ b/frontend/app/components/JourneyForm.tsx
@@ -104,20 +104,13 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
   }
 
   return (
-    <Card className="bg-white/98 backdrop-blur-lg border-white/30">
-      <CardHeader className="bg-gradient-to-r from-blue-50 to-blue-100 border-b border-blue-200">
-        <CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
-          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
-            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-            </svg>
-          </div>
-          <span>Vstupní údaje</span>
-        </CardTitle>
+    <Card>
+      <CardHeader>
+        <CardTitle>Vstupní údaje</CardTitle>
       </CardHeader>
-      <CardContent className="p-8">
+      <CardContent>
 
-      <form onSubmit={handleSubmit} className="space-y-5">
+      <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
           <Label htmlFor="username">Uživatelské jméno</Label>
           <Input
@@ -225,23 +218,22 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
           </div>
         )}
 
-        <div className="flex flex-col sm:flex-row gap-4 pt-6">
+        <div className="flex flex-col sm:flex-row gap-3 pt-4">
           <Button
             type="submit"
-            size="lg"
-            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-lg h-12"
+            className="flex-1"
           >
-            <Calculator className="mr-2 h-5 w-5" />
+            <Calculator className="mr-2 h-4 w-4" />
             Vypočítat
           </Button>
 
           <Button
             type="button"
             onClick={handleExport}
-            size="lg"
-            className="flex-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-lg h-12"
+            variant="outline"
+            className="flex-1"
           >
-            <Download className="mr-2 h-5 w-5" />
+            <Download className="mr-2 h-4 w-4" />
             Export Excel
           </Button>
         </div>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 0187eaa..9245ff1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,24 +2,24 @@
 
 @theme {
   --color-background: 0 0% 100%;
-  --color-foreground: 222.2 84% 4.9%;
+  --color-foreground: 240 10% 3.9%;
   --color-card: 0 0% 100%;
-  --color-card-foreground: 222.2 84% 4.9%;
+  --color-card-foreground: 240 10% 3.9%;
   --color-popover: 0 0% 100%;
-  --color-popover-foreground: 222.2 84% 4.9%;
-  --color-primary: 221.2 83.2% 53.3%;
-  --color-primary-foreground: 210 40% 98%;
-  --color-secondary: 210 40% 96.1%;
-  --color-secondary-foreground: 222.2 47.4% 11.2%;
-  --color-muted: 210 40% 96.1%;
-  --color-muted-foreground: 215.4 16.3% 46.9%;
-  --color-accent: 210 40% 96.1%;
-  --color-accent-foreground: 222.2 47.4% 11.2%;
+  --color-popover-foreground: 240 10% 3.9%;
+  --color-primary: 240 5.9% 10%;
+  --color-primary-foreground: 0 0% 98%;
+  --color-secondary: 240 4.8% 95.9%;
+  --color-secondary-foreground: 240 5.9% 10%;
+  --color-muted: 240 4.8% 95.9%;
+  --color-muted-foreground: 240 3.8% 46.1%;
+  --color-accent: 240 4.8% 95.9%;
+  --color-accent-foreground: 240 5.9% 10%;
   --color-destructive: 0 84.2% 60.2%;
-  --color-destructive-foreground: 210 40% 98%;
-  --color-border: 214.3 31.8% 91.4%;
-  --color-input: 214.3 31.8% 91.4%;
-  --color-ring: 221.2 83.2% 53.3%;
+  --color-destructive-foreground: 0 0% 98%;
+  --color-border: 240 5.9% 90%;
+  --color-input: 240 5.9% 90%;
+  --color-ring: 240 5.9% 10%;
   --radius: 0.5rem;
 }
 
@@ -30,8 +30,10 @@
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: hsl(var(--color-background));
   min-height: 100vh;
   color: hsl(var(--color-foreground));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 71a87d5..6d5be8c 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -10,18 +10,13 @@ export default function Home() {
   const [formData, setFormData] = useState(null)
 
   return (
-    <main className="min-h-screen p-4 md:p-8 flex flex-col items-center justify-center">
-      <div className="max-w-7xl w-full my-auto">
-        <div className="text-center mb-10">
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-2xl mb-6">
-            <svg className="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-            </svg>
-          </div>
-          <h1 className="text-5xl md:text-6xl font-bold text-white mb-4 drop-shadow-2xl">
+    <main className="min-h-screen p-8 md:p-12">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold tracking-tight mb-2">
             Kniha Jízd
           </h1>
-          <p className="text-xl md:text-2xl text-white/95 font-medium drop-shadow-lg">
+          <p className="text-muted-foreground">
             Automatizovaný systém pro správu knihy jízd
           </p>
         </div>