Improve language toggle button design

- Add globe icon to language toggle
- Style with border, proper padding, and hover effects
- Match overall nav design language
- Use Inter font for Arabic mode to show 'EN' consistently
This commit is contained in:
fahed
2026-02-03 16:32:31 +03:00
parent fa43cf8dd1
commit 0c7987493e
2 changed files with 39 additions and 0 deletions

View File

@@ -307,6 +307,40 @@ html[dir="rtl"] {
opacity: 1; opacity: 1;
} }
/* Language Toggle Button */
.nav-lang-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
min-width: 44px;
letter-spacing: 0.02em;
}
.nav-lang-toggle:hover {
background: var(--surface);
color: var(--text-primary);
border-color: var(--primary);
}
.nav-lang-toggle:active {
transform: scale(0.96);
}
/* RTL adjustments */
html[dir="rtl"] .nav-lang-toggle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Main Content */ /* Main Content */
.dashboard, .dashboard,
.comparison { .comparison {

View File

@@ -119,6 +119,11 @@ function App() {
onClick={switchLanguage} onClick={switchLanguage}
title="Switch language" title="Switch language"
> >
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
{t('language.switch')} {t('language.switch')}
</button> </button>
</div> </div>