updated look of language selection

Kahera · Sep 19, 2023 · 1d5b9c0 · 1d5b9c0
1 parent 234aeef
commit 1d5b9c0
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -22,9 +22,9 @@ const isDev = import.meta.env.DEV;
   <header class="flex items-center space-x-4 md:space-x-8 mx-4 md:mx-6 my-2 md:my-4">
     <!-- Logo home-link -->
     <RouterLink to="/" class="flex sm:space-x-4 md:space-x-6 max-md:grow">
-      <img alt="icon" src="@/assets/images/Kahera.png" class="max-h-12 max-sm:hidden" />
+      <img alt="{{ $t('common.JuneIcon') }}" src="@/assets/images/Kahera.png" class="max-h-12 max-sm:hidden" />
       <h1 class="font-display font-bold text-center my-auto text-2xl sm:text-4xl text-primary dark:text-primary/80">
-        {{ $t('June', 2) }}
+        {{ $t('common.JuneHansen') }}
       </h1>
     </RouterLink>
 
@@ -38,12 +38,15 @@ const isDev = import.meta.env.DEV;
         </RouterLink>
       </div>
     </nav>
-    <select v-model="$i18n.locale">
-      <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
+    <!-- TODO: Complete select -->
+    <select v-model="$i18n.locale"
+      class="h-12 px-2 rounded-lg bg-transparent border border-primary dark:border-primary/80 text-primary dark:text-primary/80 outline-none outline-offset-0 focus:outline-1 focus:outline-primary-light">
+      <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale"
+        class="bg-primary-lighter dark:bg-accent-darker">
         {{ $t('locale.' + locale) }}
       </option>
     </select>
-    <Button @click="darkModeStore.toggle()" :icon-position="'right'" :type="'outline'" :size="'lg'">
+    <Button @click=" darkModeStore.toggle()" :icon-position="'right'" :type="'outline'" :size="'lg'">
       <template #icon> {{ darkModeStore.darkMode ? 'light_mode' : 'dark_mode' }}</template>
     </Button>
   </header>

diff --git a/src/assets/data/about-en.json b/src/assets/data/about-en.json
diff --git a/src/assets/data/about-no.json b/src/assets/data/about-no.json
diff --git a/src/components/DropdownComponent.vue b/src/components/DropdownComponent.vue
@@ -74,9 +74,7 @@ function onLeave(el: any, done: any) {
                 <!-- Dropdown items (list content) -->
                 <TransitionGroup name="list" @enter="onEnter" @leave="onLeave">
                     <a v-for="(link, index) in dropDownElements" :key="index" :href=link.path :data-index="index" class="block 
-                        bg-primary-lighter dark:bg-accent-darker
-                        hover:bg-primary-light hover:dark:bg-accent-darker 
-                        hover:opacity-100 hover:dark:opacity-100">
+                        bg-primary-lighter dark:bg-accent-darker">
                         <span class="font-icon">
                             <slot name="icon"></slot>
                         </span>

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1,5 +1,8 @@
 {
-    "June": "June | June Hansen",
+    "common": {
+        "JuneHansen": "June Hansen",
+        "JuneIcon": "June icon"
+    },
     "locale": {
         "en": "EN",
         "no": "NO"

diff --git a/src/i18n/no.json b/src/i18n/no.json
@@ -1,5 +1,8 @@
 {
-    "June": "June | June Hansen",
+    "common": {
+        "JuneHansen": "June Hansen",
+        "JuneIcon": "June ikon"
+    },
     "locale": {
         "en": "EN",
         "no": "NO"