From 0c7987493ed1bbc577c7c7274c5beebac4a29830 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 3 Feb 2026 16:32:31 +0300
Subject: [PATCH] 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
---
 src/App.css | 34 ++++++++++++++++++++++++++++++++++
 src/App.js  |  5 +++++
 2 files changed, 39 insertions(+)

diff --git a/src/App.css b/src/App.css
index 2923602..0310c5a 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/App.js b/src/App.js
index b58f0bb..91c2fb8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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>