Improved language picker

src/components/LanguagePicker.jsx

@@ -7,17 +7,24 @@ export default function LanguagePicker() {
   const [language, setLanguage] = useAtom(languageState);
   const t = getTranslations(language);
 
-  const toggleLanguage = () => {
-    setLanguage(language === 'en' ? 'fi' : 'en');
-  };
-
   return (
-    <button
-      className={styles.picker}
-      onClick={toggleLanguage}
-      aria-label={`Switch to ${language === 'en' ? t.languages.fi : t.languages.en}`}
-    >
-      <span className={styles.label}>{language === 'en' ? 'FI' : 'EN'}</span>
-    </button>
+    <div className={styles.picker}>
+      <button
+        className={styles.flag}
+        onClick={() => setLanguage('fi')}
+        aria-label={`Switch to ${t.languages.fi}`}
+        aria-pressed={language === 'fi'}
+      >
+        <span className={styles.flagIcon}>🇫🇮</span>
+      </button>
+      <button
+        className={styles.flag}
+        onClick={() => setLanguage('en')}
+        aria-label={`Switch to ${t.languages.en}`}
+        aria-pressed={language === 'en'}
+      >
+        <span className={styles.flagIcon}>🇬🇧</span>
+      </button>
+    </div>
   );
 }

src/state/atoms.js

@@ -6,4 +6,6 @@ export const activeSectionState = atom('home');
 
 export const themeState = atom('dark');
 
-export const languageState = atom('en');
+export const languageState = atom(
+  typeof navigator !== 'undefined' && navigator.language?.startsWith('fi') ? 'fi' : 'en'
+);

src/styles/components/LanguagePicker.module.scss

@@ -1,27 +1,45 @@
 @use '../variables' as *;
 
 .picker {
+  display: flex;
+  gap: 0.25rem;
   background: transparent;
   border: 1px solid var(--text-secondary);
   border-radius: 4px;
-  padding: 0.4rem 0.8rem;
-  color: var(--text-primary);
+  padding: 0.2rem;
+
+  @media (max-width: 768px) {
+    padding: 0.15rem;
+    gap: 0.15rem;
+  }
+}
+
+.flag {
+  background: transparent;
+  border: none;
   cursor: pointer;
-  font-size: 0.85rem;
-  font-weight: 500;
+  padding: 0.2rem;
+  border-radius: 2px;
   transition: all 0.2s ease;
 
+  &[aria-pressed='false'] {
+    opacity: 0.6;
+  }
+
   &:hover {
-    border-color: var(--accent);
-    color: var(--accent);
+    opacity: 1;
   }
 
   @media (max-width: 768px) {
-    padding: 0.35rem 0.6rem;
-    font-size: 0.8rem;
+    padding: 0.15rem;
   }
 }
 
-.label {
+.flagIcon {
+  font-size: 1.1rem;
   display: inline-block;
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
 }