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 0000000..27275f2
Binary files /dev/null and b/packages/frontend/public/favicon.ico differ
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
.
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%;
}
}