From 560e4e72037c7d6122bfd8bca336b7b563064c90 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 12:41:02 +0200
Subject: [PATCH] feat(gui-v2): add color-transition shortcut to windi

---
 packages/nc-gui-v2/app.vue                       | 11 ++++++-----
 packages/nc-gui-v2/components/general/Share.vue  |  2 +-
 packages/nc-gui-v2/components/general/Social.vue |  2 +-
 packages/nc-gui-v2/pages/projects/index.vue      | 16 ++++++++--------
 .../nc-gui-v2/pages/projects/index/index.vue     |  2 +-
 packages/nc-gui-v2/pages/projects/index/list.vue |  2 +-
 packages/nc-gui-v2/pages/signin.vue              |  2 +-
 packages/nc-gui-v2/pages/signup.vue              |  2 +-
 packages/nc-gui-v2/windi.config.ts               |  1 +
 9 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 4e69eba213..8317c25d91 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -59,13 +59,14 @@ const signOut = () => {
               <template #activator="{ props }">
                 <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />
               </template>
-              <v-list class="!py-0 nc-user-menu min-w-32">
+
+              <v-list class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800)">
                 <nuxt-link
                   v-t="['c:navbar:user:email']"
-                  class="group hover:bg-gray-200 flex items-center p-2"
+                  class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
                   to="/user/settings"
                 >
-                  <MdiAt class="mt-1 transition-colors duration-150 ease-in group-hover:text-success" />&nbsp;
+                  <MdiAt class="mt-1 color-transition group-hover:text-success" />&nbsp;
                   <span class="prose">{{ email }}</span>
                 </nuxt-link>
 
@@ -73,10 +74,10 @@ const signOut = () => {
 
                 <div
                   v-t="['a:navbar:user:sign-out']"
-                  class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2"
                   @click="signOut"
                 >
-                  <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
+                  <MdiLogout class="color-transition dark:text-white group-hover:(!text-red-500)" />&nbsp;
                   <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
                 </div>
               </v-list>
diff --git a/packages/nc-gui-v2/components/general/Share.vue b/packages/nc-gui-v2/components/general/Share.vue
index 2e17b03156..ca6303138c 100644
--- a/packages/nc-gui-v2/components/general/Share.vue
+++ b/packages/nc-gui-v2/components/general/Share.vue
@@ -292,6 +292,6 @@ const openUrl = (url: string) => {
 }
 
 a {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/general/Social.vue b/packages/nc-gui-v2/components/general/Social.vue
index 36cad13024..3cf23a1f6b 100644
--- a/packages/nc-gui-v2/components/general/Social.vue
+++ b/packages/nc-gui-v2/components/general/Social.vue
@@ -46,7 +46,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
 
 <style scoped>
 .icon {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
 }
 
 .discourse {
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index c4cf35cc23..ac2200f60a 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -46,7 +46,7 @@ const activePage = $ref(navDrawerOptions[0].title)
             <v-menu class="select-none">
               <template #activator="{ props }">
                 <div
-                  class="bg-white hover:(!bg-gray-100) dark:(!bg-primary !text-white shadow-gray-600 hover:!bg-primary/75) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
+                  class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
                   @click="props.onClick"
                 >
                   <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
@@ -112,16 +112,16 @@ const activePage = $ref(navDrawerOptions[0].title)
         </div>
 
         <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-index-list' ? 'text-primary' : ''"
-            class="transition-color ease-in duration-100 cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects/list')"
-          />
           <MaterialSymbolsGridView
-            :class="route.name === 'projects-index' ? 'text-primary' : ''"
-            class="transition-color ease-in duration-100 cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            :class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects')"
           />
+          <MaterialSymbolsFormatListBulletedRounded
+            :class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            @click="navigateTo('/projects/list')"
+          />
         </div>
       </div>
 
diff --git a/packages/nc-gui-v2/pages/projects/index/index.vue b/packages/nc-gui-v2/pages/projects/index/index.vue
index 8a2e7530b2..c4c6152c84 100644
--- a/packages/nc-gui-v2/pages/projects/index/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index/index.vue
@@ -95,7 +95,7 @@ const formatTitle = (title: string) =>
 
 <style scoped>
 .thumbnail {
-  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease-in duration-100 hover:(after:opacity-100 shadow-none);
+  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center color-transition hover:(after:opacity-100 shadow-none);
 }
 
 .thumbnail::after {
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index 4e9ac2ab14..e179029262 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -28,7 +28,7 @@ const openProject = async (project: ProjectType) => {
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 color-transition"
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 22a66a711a..93dc82c51b 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -134,7 +134,7 @@ const resetError = () => {
                   ? '!opacity-50 !cursor-default'
                   : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 transition-color duration-100 ease-in rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index c7c799ef24..3c01eee925 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -130,7 +130,7 @@ const resetError = () => {
                   ? '!opacity-50 !cursor-default'
                   : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 transition-color duration-100 ease-in rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
diff --git a/packages/nc-gui-v2/windi.config.ts b/packages/nc-gui-v2/windi.config.ts
index 46dd01c80b..6c901809c4 100644
--- a/packages/nc-gui-v2/windi.config.ts
+++ b/packages/nc-gui-v2/windi.config.ts
@@ -43,6 +43,7 @@ export default defineConfig({
   },
 
   shortcuts: {
+    'color-transition': 'transition-color duration-100 ease-in',
     'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
   },