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:
34
src/App.css
34
src/App.css
@@ -307,6 +307,40 @@ html[dir="rtl"] {
|
||||
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 */
|
||||
.dashboard,
|
||||
.comparison {
|
||||
|
||||
@@ -119,6 +119,11 @@ function App() {
|
||||
onClick={switchLanguage}
|
||||
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')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user