Make language switcher more visible, fix #90

spraakbanken · Apr 2, 2024 · 56dcea6 · 56dcea6
1 parent b455ab7
commit 56dcea6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ As this project is a user-facing application, the places in the semantic version
 
 - Use the new Språkbanken Text logo
 - Unallowed file format sometimes saved to local config [#153](https://github.com/spraakbanken/mink-frontend/issues/153)
+- Make language switcher more visible [#90](https://github.com/spraakbanken/mink-frontend/issues/90)
 - Show hint if parsing config fails
 
 ## [1.4.0] (2024-03-11)

diff --git a/src/assets/dropdown.svg b/src/assets/dropdown.svg
diff --git a/src/fontawesome.ts b/src/fontawesome.ts
@@ -13,6 +13,7 @@ import {
   faCircleInfo,
   faDownload,
   faGears,
+  faLanguage,
   faPen,
   faPersonRunning,
   faRightToBracket,
@@ -27,6 +28,7 @@ library.add(
   faDownload,
   faFile,
   faGears,
+  faLanguage,
   faLightbulb,
   faPen,
   faPersonRunning,

diff --git a/src/i18n/LocaleSwitcher.vue b/src/i18n/LocaleSwitcher.vue
@@ -3,13 +3,26 @@ import { languageNames, type LocaleId } from "./i18n";
 </script>
 
 <template>
-  <select v-model="$i18n.locale" class="bg-transparent border-0">
-    <option
-      v-for="locale in $i18n.availableLocales"
-      :key="locale"
-      :value="locale"
+  <div>
+    <icon icon="language" />
+    <select
+      v-model="$i18n.locale"
+      class="bg-transparent border-0 appearance-none"
     >
-      {{ languageNames[locale as LocaleId] }}
-    </option>
-  </select>
+      <option
+        v-for="locale in $i18n.availableLocales"
+        :key="locale"
+        :value="locale"
+      >
+        {{ languageNames[locale as LocaleId] }}
+      </option>
+    </select>
+  </div>
 </template>
+
+<style scoped>
+select.appearance-none {
+  padding-right: 1.4em;
+  background: url(@/assets/dropdown.svg) no-repeat 95% 50%;
+}
+</style>