From a235c992ff66422eebea0e6df4923a95d81c2894 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Jul 2022 16:59:07 +0200
Subject: [PATCH] feat(gui-v2): update language switcher styles

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../nc-gui-v2/components/general/Language.vue | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index 087cb0e0a0..e21fb495c6 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -35,11 +35,18 @@ onMounted(() => {
 <template>
   <v-menu top offset-y>
     <template #activator="{ props }">
-      <MaterialSymbolsTranslate style="cursor: pointer" @click="props.onClick" />
+      <MaterialSymbolsTranslate class="cursor-pointer" @click="props.onClick" />
     </template>
-    <v-list dense class="nc-language-list">
-      <v-list-item v-for="lang in languages" :key="lang.value" dense :value="lang" color="primary" @click="changeLanguage(lang)">
-        <v-list-item-subtitle class="text-capitalize">
+    <v-list dense class="min-w-50 max-h-90vh overflow-auto !py-0">
+      <v-list-item
+        v-for="lang of languages"
+        :key="lang.value"
+        class="!min-h-8 group"
+        dense
+        :value="lang"
+        @click="changeLanguage(lang)"
+      >
+        <v-list-item-subtitle class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold)">
           {{ Languages[lang] || lang }}
         </v-list-item-subtitle>
       </v-list-item>
@@ -48,9 +55,8 @@ onMounted(() => {
         <a
           href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
           target="_blank"
-          class="caption"
+          class="caption py-2 text-primary underline hover:opacity-75"
         >
-          <!-- Help translate -->
           {{ $t('activity.translate') }}
         </a>
       </v-list-item>
@@ -59,13 +65,7 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-:deep(.nc-language-list) {
-  min-width: 200px;
-  max-height: 90vh;
-  overflow: auto;
-
-  .v-list-item {
-    min-height: 30px !important;
-  }
+.v-list {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white;
 }
 </style>