From ffdfac65deb61ef1d3c5069101d4f3c2da9ec9ef Mon Sep 17 00:00:00 2001 From: Docker Config Backup Date: Fri, 10 Oct 2025 20:53:36 +0200 Subject: [PATCH] feat: Implement blue theme with modern design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Inter font from Google Fonts for modern typography - Implement blue theme from shadcn.com (primary: blue) - Add beautiful hero header with car icon - Create Separator component for visual division - Increase card padding (p-8) for better breathing room - Larger card titles (text-2xl) for better hierarchy - Improved spacing throughout (gap-8, py-12, etc.) - Blue primary color (#3B82F6) with proper foregrounds - Professional, modern look matching shadcn.com aesthetic 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- frontend/app/globals.css | 31 ++++--- frontend/app/layout.tsx | 9 +- frontend/app/page.tsx | 30 ++++--- frontend/components/ui/card.tsx | 6 +- frontend/components/ui/separator.tsx | 29 +++++++ package-lock.json | 121 +++++++++++++++++++++++++++ package.json | 5 ++ 7 files changed, 201 insertions(+), 30 deletions(-) create mode 100644 frontend/components/ui/separator.tsx create mode 100644 package-lock.json create mode 100644 package.json diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 9245ff1..2d69412 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -2,24 +2,24 @@ @theme { --color-background: 0 0% 100%; - --color-foreground: 240 10% 3.9%; + --color-foreground: 222.2 84% 4.9%; --color-card: 0 0% 100%; - --color-card-foreground: 240 10% 3.9%; + --color-card-foreground: 222.2 84% 4.9%; --color-popover: 0 0% 100%; - --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-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-destructive: 0 84.2% 60.2%; - --color-destructive-foreground: 0 0% 98%; - --color-border: 240 5.9% 90%; - --color-input: 240 5.9% 90%; - --color-ring: 240 5.9% 10%; + --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%; --radius: 0.5rem; } @@ -30,7 +30,6 @@ } body { - 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)); diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 6e9fef4..2539406 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,6 +1,13 @@ import type { Metadata } from 'next' +import { Inter } from 'next/font/google' import './globals.css' +const inter = Inter({ + subsets: ['latin'], + display: 'swap', + variable: '--font-inter', +}) + export const metadata: Metadata = { title: 'Kniha Jízd', description: 'Journey Book Management System', @@ -13,7 +20,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ) } diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 6d5be8c..6a71d87 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -3,6 +3,8 @@ import { useState } from 'react' import JourneyForm from './components/JourneyForm' import DataPreview from './components/DataPreview' +import { Separator } from '@/components/ui/separator' +import { Car } from 'lucide-react' export default function Home() { const [calculatedData, setCalculatedData] = useState(null) @@ -10,18 +12,26 @@ export default function Home() { const [formData, setFormData] = useState(null) return ( -
-
-
-

- Kniha Jízd -

-

- Automatizovaný systém pro správu knihy jízd -

+
+
+
+
+
+ +
+
+

+ Kniha Jízd +

+

+ Automatizovaný systém pro správu knihy jízd +

+
+
+
-
+
(({ className, ...props }, ref) => (
)) @@ -35,7 +35,7 @@ const CardTitle = React.forwardRef< >(({ className, ...props }, ref) => (
)) @@ -57,7 +57,7 @@ const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
)) CardContent.displayName = "CardContent" diff --git a/frontend/components/ui/separator.tsx b/frontend/components/ui/separator.tsx new file mode 100644 index 0000000..9864754 --- /dev/null +++ b/frontend/components/ui/separator.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0ab52cc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,121 @@ +{ + "name": "kniha_jizd", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@radix-ui/react-separator": "^1.1.7" + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", + "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.2.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz", + "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.1.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", + "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", + "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.0" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT", + "peer": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..219238a --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@radix-ui/react-separator": "^1.1.7" + } +}