Ombrora/convert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): use flag icons in the language switcher

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
anthony
2026-07-31 15:59:39 +02:00
co-authored by Claude Sonnet 5
parent f5958586b7
commit 7c58e50c11
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LanguageSwitcher.jsx
+3 -2
View File
@@ -6,10 +6,11 @@ export function LanguageSwitcher() {
const { t } = useTranslation(); const { t } = useTranslation();
const otherLang = lang === 'fr' ? 'en' : 'fr'; const otherLang = lang === 'fr' ? 'en' : 'fr';
const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench'); const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench');
const flagCode = otherLang === 'en' ? 'gb' : 'fr';
return ( return (
<Link to={`/${otherLang}/`} className="language-switcher"> <Link to={`/${otherLang}/`} className="language-switcher" aria-label={label} title={label}>
{label} <span className={`fi fi-${flagCode}`} aria-hidden="true" />
</Link> </Link>
); );
} }
frontend/src/styles/layout.css
+6
View File
@@ -28,6 +28,12 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.language-switcher .fi {
font-size: 1.35rem;
border-radius: 3px;
box-shadow: 0 0 0 1px var(--color-border);
}
.theme-toggle { .theme-toggle {
background: none; background: none;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);