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

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' }}
>