johnny2211/znakovni.hr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements: update favicon, reorder WordCard buttons, style logo, and refine color scheme

Browse Source 
- 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
This commit is contained in:
johnny2211
2026-01-17 18:24:37 +01:00
parent c6d6c18466
commit 65d117cf16
5 changed files with 53 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/index.html
View File

@@ -2,7 +2,7 @@
<html lang="hr">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

BIN
packages/frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

20
packages/frontend/src/components/dictionary/WordCard.tsx
View File

@@ -77,17 +77,8 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {
</p>
)}
{/* Actions */}
{/* Actions - Dodaj on left, Info on right */}
<div className="flex gap-2 mt-auto">
<Button
variant="outline"
size="sm"
className="flex-1"
onClick={() => onInfo(term)}
>
<Info className="h-4 w-4 mr-1" />
Info
</Button>
{onAddToSentence && (
<Button
variant="default"
@@ -99,6 +90,15 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {
Dodaj
</Button>
)}
<Button
variant="outline"
size="sm"
className="flex-1"
onClick={() => onInfo(term)}
>
<Info className="h-4 w-4 mr-1" />
Info
</Button>
</div>
</div>
);

12
packages/frontend/src/components/layout/Sidebar.tsx
View File

@@ -47,11 +47,13 @@ export function Sidebar() {
<div className="flex h-screen w-80 flex-col bg-primary border-r border-indigo-700">
{/* Logo */}
<div className="flex h-16 items-center gap-3 px-6 border-b border-indigo-700">
<img
src="https://znakovni.b-cdn.net/img/znakovni-logo.svg"
alt="Znakovni.hr logo"
className="h-8 w-8"
/>
<div className="bg-white rounded-full p-1 flex items-center justify-center">
<img
src="https://znakovni.b-cdn.net/img/znakovni-logo.svg"
alt="Znakovni.hr logo"
className="h-6 w-6"
/>
</div>
<h1 className="text-xl font-bold">
<span className="text-white">ZNAKOVNI</span>
<span className="text-indigo-300">.</span>

75
packages/frontend/src/index.css
View File

@@ -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%;
}
}