sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(contrast): increase text contrast on glossary page for light mode readability
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m24s
Details

Browse Source
This commit is contained in:
sepehr
2026-06-20 19:39:33 +02:00
parent 299173fff7
commit 07c50151cb
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app/dashboard/glossaries/page.tsx
View File

@@ -295,20 +295,20 @@ export default function GlossariesPage() {
<h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight"> <h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
{renderTitle(t('glossaries.title') || "Glossaires & Contexte")} {renderTitle(t('glossaries.title') || "Glossaires & Contexte")}
</h1> </h1>
<p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed"> <p className="text-brand-dark/80 dark:text-white/50 text-sm font-light leading-relaxed">
{t('glossaries.description') || "Gérez vos glossaires et instructions de contexte pour des traductions plus précises."} {t('glossaries.description') || "Gérez vos glossaires et instructions de contexte pour des traductions plus précises."}
</p> </p>
</div> </div>
</div> </div>
{/* ── Bandeau usage ──────────────────────────────────── */} {/* ── Bandeau usage ──────────────────────────────────── */}
<div className="mb-8 flex items-center gap-3 p-4 rounded-xl bg-brand-accent/5 dark:bg-brand-accent/10 border border-brand-accent/15"> <div className="mb-8 flex items-center gap-3 p-4 rounded-xl bg-brand-accent/8 dark:bg-brand-accent/10 border border-brand-accent/25">
<div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center shrink-0"> <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center shrink-0">
<Info size={13} /> <Info size={13} />
</div> </div>
<p className="text-[11px] text-brand-dark/70 dark:text-white/60 font-light leading-relaxed flex-1"> <p className="text-[11px] text-brand-dark/85 dark:text-white/70 font-medium leading-relaxed flex-1">
<strong className="font-bold text-brand-dark dark:text-white">Pour utiliser un glossaire dans une traduction :</strong>{' '} <strong className="font-bold text-brand-dark dark:text-white">Pour utiliser un glossaire dans une traduction :</strong>{' '}
cliquez sur <span className="font-bold text-brand-accent">«&nbsp;Utiliser&nbsp;»</span> sur la carte souhaitée. Vous serez redirigé sur la page Traduire avec ce glossaire déjà sélectionné. cliquez sur <span className="font-bold text-brand-accent">« Utiliser »</span> sur la carte souhaitée. Vous serez redirigé sur la page Traduire avec ce glossaire déjà sélectionné.
</p> </p>
<Link <Link
href="/dashboard/translate" href="/dashboard/translate"
@@ -326,7 +326,7 @@ export default function GlossariesPage() {
"pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer", "pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer",
activeTab === 'glossaries' activeTab === 'glossaries'
? "border-brand-accent text-brand-dark dark:text-white" ? "border-brand-accent text-brand-dark dark:text-white"
: "border-transparent text-brand-dark/40 dark:text-white/40 hover:text-brand-dark/70 dark:hover:text-white/70" : "border-transparent text-brand-dark/60 dark:text-white/40 hover:text-brand-dark dark:hover:text-white/70"
)} )}
> >
{t('glossaries.tabs.glossaries') || "Glossaires terminologiques"} {t('glossaries.tabs.glossaries') || "Glossaires terminologiques"}
@@ -337,7 +337,7 @@ export default function GlossariesPage() {
"pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer", "pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer",
activeTab === 'context' activeTab === 'context'
? "border-brand-accent text-brand-dark dark:text-white" ? "border-brand-accent text-brand-dark dark:text-white"
: "border-transparent text-brand-dark/40 dark:text-white/40 hover:text-brand-dark/70 dark:hover:text-white/70" : "border-transparent text-brand-dark/60 dark:text-white/40 hover:text-brand-dark dark:hover:text-white/70"
)} )}
> >
{t('glossaries.tabs.context') || "Consignes de contexte (IA)"} {t('glossaries.tabs.context') || "Consignes de contexte (IA)"}
@@ -519,7 +519,7 @@ export default function GlossariesPage() {
<h3 className="text-sm font-serif font-semibold text-brand-dark dark:text-white tracking-tight leading-snug line-clamp-2 group-hover:text-brand-accent transition-colors"> <h3 className="text-sm font-serif font-semibold text-brand-dark dark:text-white tracking-tight leading-snug line-clamp-2 group-hover:text-brand-accent transition-colors">
{glossary.name} {glossary.name}
</h3> </h3>
<p className="text-[11px] text-brand-dark/40 dark:text-white/40 font-medium flex items-center gap-1 mt-0.5"> <p className="text-[11px] text-brand-dark/65 dark:text-white/50 font-medium flex items-center gap-1 mt-0.5">
<span>{srcInfo?.flag ?? '🌐'}</span> <span>{srcInfo?.flag ?? '🌐'}</span>
<span>{srcInfo?.label ?? glossary.source_language}</span> <span>{srcInfo?.label ?? glossary.source_language}</span>
<span className="text-brand-accent font-bold">→</span> <span className="text-brand-accent font-bold">→</span>
@@ -529,12 +529,12 @@ export default function GlossariesPage() {
</div> </div>
</div> </div>
<div className="flex justify-between items-center pb-4 text-xs text-brand-dark/40 dark:text-white/40"> <div className="flex justify-between items-center pb-4 text-xs text-brand-dark/60 dark:text-white/40">
<span className="flex items-center gap-1 font-semibold text-brand-dark/65 dark:text-white/65"> <span className="flex items-center gap-1 font-semibold text-brand-dark/75 dark:text-white/65">
<Hash size={12} className="text-brand-accent" /> <Hash size={12} className="text-brand-accent" />
{termCount} {t('glossaries.defineTerms') || "termes"} {termCount} {t('glossaries.defineTerms') || "termes"}
</span> </span>
<span className="flex items-center gap-1 font-mono text-[9px] opacity-75"> <span className="flex items-center gap-1 font-mono text-[9px] text-brand-dark/55 dark:text-white/40">
<Calendar size={11} /> <Calendar size={11} />
{new Date(glossary.created_at).toLocaleDateString()} {new Date(glossary.created_at).toLocaleDateString()}
</span> </span>
@@ -544,7 +544,7 @@ export default function GlossariesPage() {
<div className="flex gap-2 pt-4 border-t border-black/5 dark:border-white/10 mt-auto shrink-0 w-full"> <div className="flex gap-2 pt-4 border-t border-black/5 dark:border-white/10 mt-auto shrink-0 w-full">
<Link <Link
href={`/dashboard/glossaries/${glossary.id}`} href={`/dashboard/glossaries/${glossary.id}`}
className="flex-none px-3 py-2 rounded-lg bg-brand-muted/65 dark:bg-white/5 hover:bg-brand-accent/10 text-brand-dark/60 dark:text-white/50 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all" className="flex-none px-3 py-2 rounded-lg bg-brand-muted dark:bg-white/5 hover:bg-brand-accent/10 text-brand-dark/75 dark:text-white/50 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all border border-black/8 dark:border-white/10"
> >
Éditer Éditer
</Link> </Link>