From 369c97c68f05a2acdaeb7dc969a0c258ded35cca Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:31:09 +0200
Subject: [PATCH] chore(gui-v2): cleanup menu styles and colorings

---
 .../nc-gui-v2/components/general/Language.vue | 28 +++++++++++++---
 .../components/general/PreviewAs.vue          |  2 +-
 packages/nc-gui-v2/layouts/base.vue           | 32 +++++++++++++------
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index 604c7cb5f8..68a5ce37d9 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -37,22 +37,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-dropdown class="select-none" :trigger="['click']">
+  <a-dropdown class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
-      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
+      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
         <a-menu-item
           v-for="lang of languages"
           :key="lang"
-          :class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
-          class="!min-h-8 group"
+          :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+          class="group"
           :value="lang"
           @click="changeLanguage(lang)"
         >
           <div
             :class="lang === locale ? '!font-semibold !text-primary' : ''"
-            class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold) dark:(group-hover:text-secondary)"
+            class="nc-project-menu-item capitalize group-hover:text-pink-500"
           >
             {{ Language[lang] || lang }}
           </div>
@@ -71,3 +71,21 @@ onMounted(() => {
     </template>
   </a-dropdown>
 </template>
+
+<style scoped>
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 5e1e300e7c..8214054b49 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -58,7 +58,7 @@ watch(previewAs, () => window.location.reload())
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
-      <span>Preview as :</span>
+      <span>Preview as:</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
         <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index d46b05c9bd..f60fb9e030 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -50,35 +50,35 @@ const logout = () => {
 
           <GeneralShareBaseButton />
 
-          <a-tooltip placement="bottom">
+          <a-tooltip placement="bottom" :mouse-enter-delay="1">
             <template #title> Switch language</template>
 
             <div class="flex pr-4 items-center">
-              <GeneralLanguage class="cursor-pointer text-2xl" />
+              <GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" />
             </div>
           </a-tooltip>
 
           <template v-if="signedIn && !isSharedBase">
             <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
+              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500" @click.prevent />
 
               <template #overlay>
-                <a-menu class="!py-0 nc-user-menu dark:(!bg-gray-800) leading-8 !rounded">
+                <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
                   <a-menu-item key="0" class="!rounded-t">
-                    <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
-                      <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
+                    <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
+                      <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
 
-                      <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+                      <span class="prose">{{ email }}</span>
                     </nuxt-link>
                   </a-menu-item>
 
                   <a-menu-divider class="!m-0" />
 
                   <a-menu-item key="1" class="!rounded-b">
-                    <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
-                      <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+                    <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                      <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
 
-                      <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                      <span class="prose">
                         {{ $t('general.signOut') }}
                       </span>
                     </div>
@@ -112,10 +112,22 @@ const logout = () => {
   @apply border-b-1;
 }
 
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
 :deep(.ant-dropdown-menu-item-group-list) {
   @apply m-0;
 }
 
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
 .nc-lang-btn {
   @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);