From 65d117cf16e8b01f385852fce39c03561937caed Mon Sep 17 00:00:00 2001 From: johnny2211 Date: Sat, 17 Jan 2026 18:24:37 +0100 Subject: [PATCH] UI improvements: update favicon, reorder WordCard buttons, style logo, and refine color scheme - Add custom favicon.ico to replace default Vite icon - Reorder WordCard action buttons (Dodaj on left, Info on right) - Add white circular background to sidebar logo for better visibility - Update CSS color variables to use proper indigo color scheme with HSL values --- packages/frontend/index.html | 2 +- packages/frontend/public/favicon.ico | Bin 0 -> 15086 bytes .../src/components/dictionary/WordCard.tsx | 20 ++--- .../src/components/layout/Sidebar.tsx | 12 +-- packages/frontend/src/index.css | 75 ++++++++---------- 5 files changed, 53 insertions(+), 56 deletions(-) create mode 100644 packages/frontend/public/favicon.ico diff --git a/packages/frontend/index.html b/packages/frontend/index.html index fb53310..0fa6533 100644 --- a/packages/frontend/index.html +++ b/packages/frontend/index.html @@ -2,7 +2,7 @@ - + diff --git a/packages/frontend/public/favicon.ico b/packages/frontend/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..27275f2024b9a384336b64160d233243f296eee9 GIT binary patch literal 15086 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 literal 0 HcmV?d00001 diff --git a/packages/frontend/src/components/dictionary/WordCard.tsx b/packages/frontend/src/components/dictionary/WordCard.tsx index 1d26c5e..9e8729a 100644 --- a/packages/frontend/src/components/dictionary/WordCard.tsx +++ b/packages/frontend/src/components/dictionary/WordCard.tsx @@ -77,17 +77,8 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {

)} - {/* Actions */} + {/* Actions - Dodaj on left, Info on right */}
- {onAddToSentence && (
); diff --git a/packages/frontend/src/components/layout/Sidebar.tsx b/packages/frontend/src/components/layout/Sidebar.tsx index bca6465..ff162f3 100644 --- a/packages/frontend/src/components/layout/Sidebar.tsx +++ b/packages/frontend/src/components/layout/Sidebar.tsx @@ -47,11 +47,13 @@ export function Sidebar() {
{/* Logo */}
- Znakovni.hr logo +
+ Znakovni.hr logo +

ZNAKOVNI . diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css index 8889cd1..d83743c 100644 --- a/packages/frontend/src/index.css +++ b/packages/frontend/src/index.css @@ -5,64 +5,59 @@ @layer base { :root { /* Indigo-50 (#eef2ff) - Primary background */ - --background: 0 0% 100%; + --background: 238 100% 97%; /* Slate-900 (#101828) - Primary text */ - --foreground: 0 0% 3.9%; + --foreground: 222 47% 11%; --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; + --card-foreground: 222 47% 11%; --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; + --popover-foreground: 222 47% 11%; /* Indigo-600 (#4f39f6) - Primary accent color */ - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; + --primary: 248 91% 60%; + --primary-foreground: 0 0% 100%; /* Indigo-50 (#eef2ff) - Secondary background */ - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; + --secondary: 238 100% 97%; + --secondary-foreground: 248 91% 60%; /* Slate-100 (#f4f4f6) - Muted background */ - --muted: 0 0% 96.1%; + --muted: 240 5% 96%; /* Slate-600 (#4a5565) - Secondary text */ - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; + --muted-foreground: 218 15% 35%; + --accent: 238 100% 97%; + --accent-foreground: 248 91% 60%; --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; + --destructive-foreground: 0 0% 100%; /* Slate-300 (#d0d5e2) - Borders */ - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; + --border: 225 20% 85%; + --input: 225 20% 85%; + --ring: 248 91% 60%; --radius: 0.5rem; /* CEFR Level Colors */ --cefr-a1-a2: 145 100% 33%; /* Green-600 (#00a63e) */ --cefr-b1-b2: 32 100% 51%; /* Orange-500 (#ff8904) */ - --cefr-c1-c2: 14 100% 57%; /* Red-Orange (#ff5c33) */ --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; + --cefr-c1-c2: 14 100% 57%; /* Red-Orange (#ff5c33) */ } .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } }