From 2726ba552bd615b660b43794acb2114f35796e0a Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Mon, 1 Dec 2025 10:29:13 +0200
Subject: [PATCH] Align language selector and improve contrast

---
 app/components/NavBar.tsx | 10 +++-------
 app/globals.css           | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
index 1b14534..fea7f99 100644
--- a/app/components/NavBar.tsx
+++ b/app/components/NavBar.tsx
@@ -194,15 +194,11 @@ export default function NavBar() {
             </Link>
           </>
         )}
-        <label style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 8 }}>
-          <span style={{ fontSize: 12, color: '#555', display: 'flex', alignItems: 'center', gap: 4 }}>
+        <label className="language-wrapper">
+          <span className="language-label">
             <Icon name="globe" /> {t('navLanguage')}:
           </span>
-          <select
-            value={locale}
-            onChange={(e) => setLocale(e.target.value as any)}
-            style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid #ddd', background: '#fff' }}
-          >
+          <select value={locale} onChange={(e) => setLocale(e.target.value as any)} className="language-select">
             <option value="fi">🇫🇮 Suomi</option>
             <option value="sv">🇸🇪 Svenska</option>
             <option value="en">🇬🇧 English</option>
diff --git a/app/globals.css b/app/globals.css
index fef21e5..9b2aedd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -45,6 +45,34 @@ body {
   text-align: center;
 }
 
+.language-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+}
+
+.language-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.language-select {
+  min-height: 44px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.language-select option {
+  color: #0b1224;
+}
+
 main {
   padding: 48px 20px 80px;
   max-width: 1100px;