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

Fix color contrast issues in WordCard and WordDetailModal components

Browse Source
This commit is contained in:
johnny2211
2026-01-17 18:35:11 +01:00
parent 65d117cf16
commit 2b768d4c13
4 changed files with 187 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
fix-colors.md Normal file
View File

@@ -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<string, string> = {
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 */}
<h3 className="text-lg font-semibold text-center mb-3 text-gray-900">
{term.wordText}
</h3>
NOVI KOD:
{/* Word Text with colored background based on word type */}
<div className="flex justify-center mb-3">
<span className={`${wordTypeColors[term.wordType] || 'bg-gray-600'} text-white text-lg font-semibold px-4 py-2 rounded`}>
{term.wordText}
</span>
</div>
Š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):
<span className="text-xs text-gray-500">
{wordTypeLabels[term.wordType] || term.wordType}
</span>
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<br>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.

311
get-real.md
View File

@@ -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: `<div className="flex h-screen bg-indigo-50">`
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
<h1 className="text-xl font-bold text-primary">Znakovni.hr</h1>
```
**Should be:**
```tsx
<h1 className="text-xl font-bold">
<span className="text-indigo-600">ZNAKOVNI</span>
<span className="text-gray-400">.</span>
<span className="text-orange-600">hr</span>
</h1>
```
---
### 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.

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

@@ -17,6 +17,19 @@ const cefrColors: Record<CefrLevel, string> = {
[CefrLevel.C2]: 'bg-red-500',
};
const wordTypeColors: Record<string, string> = {
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<string, string> = {
NOUN: 'Imenica',
VERB: 'Glagol',
@@ -65,10 +78,10 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {
)}
</div>
{/* Word Text */}
<h3 className="text-lg font-semibold text-center mb-3 text-gray-900">
{/* Word Text with colored background based on word type */}
<div className={`${wordTypeColors[term.wordType] || 'bg-gray-600'} text-white text-lg font-semibold px-4 py-2 rounded text-center mb-3`}>
{term.wordText}
</h3>
</div>
{/* Short Description */}
{term.shortDescription && (

19
packages/frontend/src/components/dictionary/WordDetailModal.tsx
View File

@@ -24,6 +24,19 @@ const cefrColors: Record<CefrLevel, string> = {
[CefrLevel.C2]: 'bg-red-500',
};
const wordTypeColors: Record<string, string> = {
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<string, string> = {
NOUN: 'Imenica',
VERB: 'Glagol',
@@ -48,7 +61,9 @@ export function WordDetailModal({ term, open, onClose, onAddToSentence }: WordDe
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle className="flex items-center justify-between">
<span className="text-2xl font-bold">{term.wordText}</span>
<span className={`${wordTypeColors[term.wordType] || 'bg-gray-600'} text-white text-2xl font-bold px-4 py-2 rounded`}>
{term.wordText}
</span>
<span className={`${cefrColors[term.cefrLevel]} text-white text-sm font-bold px-3 py-1 rounded`}>
{term.cefrLevel}
</span>
@@ -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' }}
>