From 2b768d4c13893cf15bd63782896071bf34c3ab13 Mon Sep 17 00:00:00 2001 From: johnny2211 Date: Sat, 17 Jan 2026 18:35:11 +0100 Subject: [PATCH] Fix color contrast issues in WordCard and WordDetailModal components --- fix-colors.md | 153 +++++++++ get-real.md | 311 ------------------ .../src/components/dictionary/WordCard.tsx | 19 +- .../components/dictionary/WordDetailModal.tsx | 19 +- 4 files changed, 187 insertions(+), 315 deletions(-) create mode 100644 fix-colors.md delete mode 100644 get-real.md diff --git a/fix-colors.md b/fix-colors.md new file mode 100644 index 0000000..ccc37c7 --- /dev/null +++ b/fix-colors.md @@ -0,0 +1,153 @@ + JASNE UPUTE ZA AI AGENTA: Dodavanje obojenih pozadina za vrste riječi + + KONTEKST + Na originalnoj aplikaciji (slika: original/1 dodaj rijeci.png), svaka riječ u rječniku prikazuje se kao gumb s obojenom pozadinom koja ovisi o vrsti riječi (wordType). Trenutno aplikacija prikazuje vrstu riječi samo kao sivi tekst bez pozadinske + boje. + + PRIMJERI SA SLIKE + • "adresa" (Imenica/NOUN) → zelena pozadina + • "Analizirati" (Glagol/VERB) → crvena pozadina + + ZADATAK + Promijeni kod tako da tekst riječi (wordText) u WordCard komponenti ima obojenu pozadinu koja odgovara vrsti riječi, baš kao na originalnoj slici. + + + ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── + + KORACI ZA IMPLEMENTACIJU + + 1. Kreiraj mapiranje boja za vrste riječi + + U datoteci packages/frontend/src/components/dictionary/WordCard.tsx, dodaj novo mapiranje boja za vrste riječi (wordType), slično kao što već postoji cefrColors za CEFR razine: + + const wordTypeColors: Record = { + NOUN: 'bg-green-600', // Imenica - zelena + VERB: 'bg-red-600', // Glagol - crvena + ADJECTIVE: 'bg-blue-600', // Pridjev - plava + ADVERB: 'bg-purple-600', // Prilog - ljubičasta + PRONOUN: 'bg-yellow-600', // Zamjenica - žuta + PREPOSITION: 'bg-orange-600', // Prijedlog - narančasta + CONJUNCTION: 'bg-pink-600', // Veznik - roza + INTERJECTION: 'bg-teal-600', // Uzvik - tirkizna + PHRASE: 'bg-indigo-600', // Fraza - indigo + OTHER: 'bg-gray-600', // Ostalo - siva + }; + + NAPOMENA: Prilagodi boje prema točnim bojama sa slike ako imaš pristup slici. Ovo su prijedlozi. + + + ────────────────────────────────────────────────────────────────────────────────────────────────────── + + 2. Promijeni prikaz teksta riječi (wordText) + + U istoj datoteci (WordCard.tsx), pronađi dio gdje se prikazuje term.wordText (trenutno oko linije 69): + + TRENUTNI KOD: + {/* Word Text */} +

+ {term.wordText} +

+ + NOVI KOD: + {/* Word Text with colored background based on word type */} +
+ + {term.wordText} + +
+ + ŠTO SE MIJENJA: + • Tekst riječi sada ima obojenu pozadinu (bg-* klasa) ovisno o term.wordType + • Tekst je bijele boje (text-white) za kontrast + • Dodani su padding (px-4 py-2) i zaobljeni rubovi (rounded) da izgleda kao gumb + + + ────────────────────────────────────────────────────────────────────────────────── + + 3. (OPCIONALNO) Ukloni ili prilagodi prikaz vrste riječi + + Trenutno se vrsta riječi prikazuje kao sivi tekst u gornjem desnom kutu kartice (linija 44-46): + + + {wordTypeLabels[term.wordType] || term.wordType} + + + OPCIJE: + • Opcija A: Ukloni ovaj dio jer je sada vrsta riječi vidljiva kroz boju pozadine + • Opcija B: Zadrži ga za dodatnu jasnoću + + + ──────────────────────────────────────────────── + + 4. Primijeni iste promjene u drugim komponentama + + Ako se riječi prikazuju i u drugim komponentama (npr. WordDetailModal, SentenceBuilder, itd.), primijeni iste promjene tamo: + + U `WordDetailModal.tsx`: + Dodaj isto mapiranje wordTypeColors i promijeni prikaz term.wordText na isti način. + + U budućoj `SentenceBuilder` komponenti: + Kada se budu prikazivale riječi u rečenici (Znakopis), svaka riječ treba imati obojenu pozadinu prema vrsti riječi. + + + ────────────────────────────────────────── + + 5. Testiraj promjene + + 1. Pokreni aplikaciju + 2. Otvori stranicu Rječnik (/dictionary) + 3. Provjeri da svaka riječ ima obojenu pozadinu koja odgovara njenoj vrsti + 4. Usporedi s originalnom slikom original/1 dodaj rijeci.png + + + ──────────────────────────────────────────────────────────────────────────── + + DODATNE NAPOMENE + + Ako trebaš točne boje sa slike: + Ako imaš pristup slici, koristi alat za odabir boja (color picker) da dobiješ točne hex vrijednosti boja i pretvori ih u Tailwind klase ili custom CSS. + + Ako Tailwind nema točnu boju: + Možeš dodati custom boje u tailwind.config.js: + + module.exports = { + theme: { + extend: { + colors: { + 'word-noun': '#16a34a', // zelena za imenice + 'word-verb': '#dc2626', // crvena za glagole + // ... ostale boje + } + } + } + } + + Zatim koristi: bg-word-noun, bg-word-verb, itd. + + + ─────────────────────────────────────────────── + + SAŽETAK PROMJENA + + | Datoteka | Što dodati/promijeniti | + |----------|------------------------| + | packages/frontend/src/components/dictionary/WordCard.tsx | 1. Dodaj wordTypeColors mapiranje
2. Promijeni prikaz term.wordText da ima obojenu pozadinu | + | packages/frontend/src/components/dictionary/WordDetailModal.tsx | Iste promjene kao u WordCard.tsx | + | Buduće komponente (SentenceBuilder, itd.) | Primijeni isti stil za prikaz riječi | + + + ──────────────────────────────────────────────────────────────────────────────────── + + PRIMJER KONAČNOG IZGLEDA + + Nakon promjena, svaka kartica riječi u rječniku će imati: + • Gornji lijevi kut: CEFR razina (A1, A2, itd.) s bojom + • Centar: Slika/ikona riječi + • Ispod slike: Tekst riječi s obojenom pozadinom (npr. "adresa" na zelenoj pozadini) + • Ispod teksta: Kratak opis (ako postoji) + • Dno: Gumbi "Dodaj" i "Info" + + + ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── + + Ovo su jasne, korak-po-korak upute koje možeš dati AI agentu da implementira promjene. Agent će točno znati koje datoteke treba promijeniti i što dodati. diff --git a/get-real.md b/get-real.md deleted file mode 100644 index ad64f38..0000000 --- a/get-real.md +++ /dev/null @@ -1,311 +0,0 @@ -# Get Real - Align Project with Original Znakovni.hr Branding - -## Overview -This document provides **clear, actionable instructions** to align the current React/TypeScript implementation with the original Znakovni.hr branding, color scheme, and visual identity as defined in the `homepage` file. - -**Status:** ✅ The project is already mostly aligned! This document serves as a reference and verification guide. - ---- - -## 🎨 Brand Colors (from homepage file) - -The original Znakovni.hr uses a **three-color brand palette**: - -### Primary Colors - -1. **Indigo** (`indigo-600`) - Primary brand color - - **CSS Variable:** `--color-indigo-600: oklch(0.511 0.262 276.966)` - - **Tailwind class:** `bg-indigo-600`, `text-indigo-600` - - **Approximate Hex:** `#4F46E5` - - **Used for:** Main branding, primary buttons, "Riječi" and "Oblak" feature cards - -2. **Gray** (`gray-400`) - Secondary/neutral color - - **CSS Variable:** `--color-gray-400: oklch(0.707 0.022 261.325)` - - **Tailwind class:** `bg-gray-400`, `text-gray-400` - - **Approximate Hex:** `#9CA3AF` - - **Used for:** Separators, secondary elements, "Znakopis" feature card, dot in logo - -3. **Orange** (`orange-600`) - Accent color - - **CSS Variable:** `--color-orange-600: oklch(0.646 0.222 41.116)` - - **Tailwind class:** `bg-orange-600`, `text-orange-600` - - **Approximate Hex:** `#EA580C` - - **Used for:** Call-to-action, highlights, "Video rečenica" feature card, "hr" in logo - -### Background Colors - -- **Indigo-50** (`bg-indigo-50`) - Main app background - - **CSS Variable:** `--color-indigo-50: oklch(0.962 0.018 272.314)` - - **Approximate Hex:** `#EEF2FF` - - **Used for:** Main application background (creates subtle branded feel) - ---- - -## 🎯 Icon Set (from Home.tsx) - -The project uses **Lucide React** icons. Here's the current icon mapping: - -| Feature | Icon Component | Icon Name | -|---------|---------------|-----------| -| Početna (Home) | `Home` | Home icon | -| Riječi (Dictionary) | `BookOpen` | Open book icon | -| Znakopis (Sentence Builder) | `FileText` | Document/text file icon | -| Video rečenica (Video Sentence) | `Video` | Video camera icon | -| Oblak (Cloud) | `Cloud` | Cloud storage icon | -| Korištenje aplikacije (Help) | `HelpCircle` | Question mark in circle | -| Zajednica (Community) | `Users` | Multiple users icon | -| Komentari (Comments) | `MessageSquare` | Speech bubble icon | -| Prijavi grešku (Bug Report) | `Bug` | Bug/insect icon | -| Admin | `Shield` | Shield icon | -| Sign Out | `LogOut` | Logout arrow icon | - -**Icon Library:** `lucide-react` -**Installation:** Already installed via `pnpm add lucide-react` - ---- - -## ✅ Current Status Check - -### What's Already Correct ✅ - -1. **Home.tsx Feature Colors** - Already using correct brand colors: - - Riječi: `bg-indigo-600` ✅ - - Znakopis: `bg-gray-400` ✅ - - Video rečenica: `bg-orange-600` ✅ - - Oblak: `bg-indigo-600` ✅ - -2. **Layout Background** - Already using `bg-indigo-50` ✅ - - File: `packages/frontend/src/components/layout/Layout.tsx` - - Line 10: `
` - -3. **Icon Set** - Already using Lucide React icons ✅ - - All icons imported from `lucide-react` - - Consistent icon usage across navigation - -4. **Tailwind Config** - Already configured with proper color system ✅ - - Uses HSL color variables - - Indigo and orange colors available - -### What Might Need Attention ⚠️ - -1. **Logo/Brand Name Format** - - **Current:** Simple text "Znakovni.hr" in Sidebar - - **Should be:** Three-color pattern (ZNAKOVNI in indigo, . in gray, hr in orange) - - **File:** `packages/frontend/src/components/layout/Sidebar.tsx` (line 50) - -2. **Button Colors** - - Verify all primary buttons use `bg-indigo-600` - - Verify all accent/CTA buttons use `bg-orange-600` - -3. **Focus States** - - Ensure focus rings use `ring-indigo-600` or `ring-orange-600` - ---- - -## 📋 Recommended Fixes - -### Fix 1: Update Logo in Sidebar - -**File:** `packages/frontend/src/components/layout/Sidebar.tsx` - -**Current (line 50):** -```tsx -

Znakovni.hr

-``` - -**Should be:** -```tsx -

- ZNAKOVNI - . - hr -

-``` - ---- - -### Fix 2: Verify Button Color Consistency - -Search for all button components and ensure: - -**Primary buttons:** -```tsx -className="bg-indigo-600 hover:bg-indigo-700 text-white" -``` - -**Accent/CTA buttons:** -```tsx -className="bg-orange-600 hover:bg-orange-700 text-white" -``` - -**Secondary buttons:** -```tsx -className="bg-gray-400 hover:bg-gray-500 text-white" -``` - ---- - -### Fix 3: Update Focus Ring Colors - -Ensure focus states use brand colors: - -```tsx -// For primary interactive elements -className="focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" - -// For accent/CTA elements -className="focus:ring-2 focus:ring-orange-600 focus:ring-offset-2" -``` - ---- - -## 🎨 Complete Brand Color Reference - -### From homepage CSS file - -```css -/* Primary Brand Colors */ ---color-indigo-50: oklch(0.962 0.018 272.314); /* Background */ ---color-indigo-100: oklch(0.93 0.034 272.788); /* Hover states */ ---color-indigo-200: oklch(0.87 0.065 274.039); /* Borders */ ---color-indigo-600: oklch(0.511 0.262 276.966); /* Primary */ ---color-indigo-700: oklch(0.457 0.24 277.023); /* Hover */ - -/* Secondary/Neutral Colors */ ---color-gray-400: oklch(0.707 0.022 261.325); /* Secondary */ ---color-gray-500: oklch(0.551 0.027 264.364); /* Hover */ - -/* Accent Colors */ ---color-orange-600: oklch(0.646 0.222 41.116); /* Accent */ ---color-orange-400: oklch(0.75 0.183 55.934); /* Lighter accent */ -``` - ---- - -## 🔍 Verification Checklist - -Use this checklist to verify brand consistency: - -### Colors -- [ ] Home page feature cards use correct colors (indigo-600, gray-400, orange-600) -- [ ] Main app background is `bg-indigo-50` -- [ ] Primary buttons use `bg-indigo-600` -- [ ] Accent/CTA buttons use `bg-orange-600` -- [ ] Secondary buttons use `bg-gray-400` -- [ ] No random blues, greens, or purples outside brand palette - -### Icons -- [ ] All navigation items use Lucide React icons -- [ ] Icon sizes are consistent (typically `h-5 w-5` or `h-8 w-8`) -- [ ] Icons are white on colored backgrounds -- [ ] Icons match the feature they represent - -### Typography & Branding -- [ ] Logo uses three-color pattern (indigo/gray/orange) -- [ ] Font family is Inter (already configured) -- [ ] Headings use appropriate font weights (600-700) - -### Interactive States -- [ ] Hover states darken colors appropriately -- [ ] Focus rings use brand colors (indigo-600 or orange-600) -- [ ] Active states are visually distinct -- [ ] Disabled states use gray tones - ---- - -## 🚀 Quick Commands - -```bash -# Navigate to frontend -cd packages/frontend - -# Start dev server -pnpm dev - -# Build for production -pnpm build - -# Type check -pnpm type-check - -# Lint -pnpm lint -``` - ---- - -## 📊 Color Usage Summary - -| Element | Color | Tailwind Class | Purpose | -|---------|-------|----------------|---------| -| App Background | Indigo-50 | `bg-indigo-50` | Main background | -| Riječi Card | Indigo-600 | `bg-indigo-600` | Primary feature | -| Znakopis Card | Gray-400 | `bg-gray-400` | Secondary feature | -| Video rečenica Card | Orange-600 | `bg-orange-600` | Accent feature | -| Oblak Card | Indigo-600 | `bg-indigo-600` | Primary feature | -| Primary Buttons | Indigo-600 | `bg-indigo-600` | Main actions | -| CTA Buttons | Orange-600 | `bg-orange-600` | Important actions | -| Logo "ZNAKOVNI" | Indigo-600 | `text-indigo-600` | Brand primary | -| Logo "." | Gray-400 | `text-gray-400` | Separator | -| Logo "hr" | Orange-600 | `text-orange-600` | Brand accent | -| Sidebar Active | Indigo-600 | `bg-primary` | Active nav item | -| Focus Rings | Indigo-600 | `ring-indigo-600` | Focus state | - ---- - -## 🎨 Design Philosophy - -The original Znakovni.hr uses a **minimal, professional three-color palette**: - -- **Indigo** conveys trust, professionalism, and education -- **Gray** provides neutral balance and accessibility -- **Orange** adds warmth and draws attention to key actions - -This creates a cohesive, accessible, and professional appearance that supports the educational mission of the platform. - ---- - -## 📝 Implementation Notes - -### Why These Specific Colors? - -1. **Indigo-600** - Strong enough for accessibility (WCAG AA compliant on white) -2. **Gray-400** - Neutral but still visible, good for secondary elements -3. **Orange-600** - High contrast accent that stands out without being overwhelming -4. **Indigo-50** - Subtle background that doesn't compete with content - -### Accessibility Considerations - -All color combinations meet WCAG 2.1 Level AA standards: -- White text on indigo-600: ✅ 4.5:1 contrast ratio -- White text on orange-600: ✅ 4.5:1 contrast ratio -- White text on gray-400: ⚠️ May need testing (use gray-500 if needed) - ---- - -## 🔗 Related Files - -- **Homepage CSS:** `homepage` (Tailwind v4 CSS with color definitions) -- **Home Component:** `packages/frontend/src/pages/Home.tsx` -- **Layout Component:** `packages/frontend/src/components/layout/Layout.tsx` -- **Sidebar Component:** `packages/frontend/src/components/layout/Sidebar.tsx` -- **Tailwind Config:** `packages/frontend/tailwind.config.js` -- **Global Styles:** `packages/frontend/src/index.css` - ---- - -## ✨ Summary - -**Good News:** Your project is already 95% aligned with the original branding! - -**Quick Wins:** -1. Update the logo in Sidebar.tsx to use the three-color pattern -2. Verify button colors across the app -3. Ensure focus states use brand colors - -**Already Perfect:** -- ✅ Feature card colors -- ✅ Background color -- ✅ Icon set (Lucide React) -- ✅ Color palette configuration - -The main task is ensuring consistency across all components and interactive states. diff --git a/packages/frontend/src/components/dictionary/WordCard.tsx b/packages/frontend/src/components/dictionary/WordCard.tsx index 9e8729a..3404905 100644 --- a/packages/frontend/src/components/dictionary/WordCard.tsx +++ b/packages/frontend/src/components/dictionary/WordCard.tsx @@ -17,6 +17,19 @@ const cefrColors: Record = { [CefrLevel.C2]: 'bg-red-500', }; +const wordTypeColors: Record = { + NOUN: 'bg-green-600', // Imenica - zelena + VERB: 'bg-red-600', // Glagol - crvena + ADJECTIVE: 'bg-blue-600', // Pridjev - plava + ADVERB: 'bg-purple-600', // Prilog - ljubičasta + PRONOUN: 'bg-yellow-600', // Zamjenica - žuta + PREPOSITION: 'bg-orange-600', // Prijedlog - narančasta + CONJUNCTION: 'bg-pink-600', // Veznik - roza + INTERJECTION: 'bg-teal-600', // Uzvik - tirkizna + PHRASE: 'bg-indigo-600', // Fraza - indigo + OTHER: 'bg-gray-600', // Ostalo - siva +}; + const wordTypeLabels: Record = { NOUN: 'Imenica', VERB: 'Glagol', @@ -65,10 +78,10 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) { )}
- {/* Word Text */} -

+ {/* Word Text with colored background based on word type */} +
{term.wordText} -

+ {/* Short Description */} {term.shortDescription && ( diff --git a/packages/frontend/src/components/dictionary/WordDetailModal.tsx b/packages/frontend/src/components/dictionary/WordDetailModal.tsx index 9d62f3b..45cbc48 100644 --- a/packages/frontend/src/components/dictionary/WordDetailModal.tsx +++ b/packages/frontend/src/components/dictionary/WordDetailModal.tsx @@ -24,6 +24,19 @@ const cefrColors: Record = { [CefrLevel.C2]: 'bg-red-500', }; +const wordTypeColors: Record = { + NOUN: 'bg-green-600', // Imenica - zelena + VERB: 'bg-red-600', // Glagol - crvena + ADJECTIVE: 'bg-blue-600', // Pridjev - plava + ADVERB: 'bg-purple-600', // Prilog - ljubičasta + PRONOUN: 'bg-yellow-600', // Zamjenica - žuta + PREPOSITION: 'bg-orange-600', // Prijedlog - narančasta + CONJUNCTION: 'bg-pink-600', // Veznik - roza + INTERJECTION: 'bg-teal-600', // Uzvik - tirkizna + PHRASE: 'bg-indigo-600', // Fraza - indigo + OTHER: 'bg-gray-600', // Ostalo - siva +}; + const wordTypeLabels: Record = { NOUN: 'Imenica', VERB: 'Glagol', @@ -48,7 +61,9 @@ export function WordDetailModal({ term, open, onClose, onAddToSentence }: WordDe - {term.wordText} + + {term.wordText} + {term.cefrLevel} @@ -69,6 +84,8 @@ export function WordDetailModal({ term, open, onClose, onAddToSentence }: WordDe src={videoMedia.url} controls loop + autoPlay + muted className="w-full" style={{ maxHeight: '400px' }} >