From ebaf7e75ada5213e33174100f16c8b1b07602321 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 12:12:05 +0200
Subject: [PATCH 1/4] chore(gui-v2): add default `a` styles

---
 packages/nc-gui-v2/assets/style-v2.css | 4 ++++
 packages/nc-gui-v2/pages/signin.vue    | 6 +++---
 packages/nc-gui-v2/pages/signup.vue    | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.css b/packages/nc-gui-v2/assets/style-v2.css
index 1419c81fdf..9aaecd717d 100644
--- a/packages/nc-gui-v2/assets/style-v2.css
+++ b/packages/nc-gui-v2/assets/style-v2.css
@@ -38,3 +38,7 @@ nav .v-list {
 .layout-leave-active {
     @apply opacity-0;
 }
+
+a {
+    @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
+}
\ No newline at end of file
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 69980178ab..22a66a711a 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -74,7 +74,7 @@ const resetError = () => {
     <v-form
       ref="formValidator"
       v-model="valid"
-      class="h-full min-h-[600px] flex justify-center items-center"
+      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
       @submit.prevent="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@@ -121,7 +121,7 @@ const resetError = () => {
           />
 
           <div class="hidden md:block self-end mx-8">
-            <nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/forgot-password">
+            <nuxt-link class="prose-sm" to="/forgot-password">
               {{ $t('msg.info.signUp.forgotPassword') }}
             </nuxt-link>
           </div>
@@ -141,7 +141,7 @@ const resetError = () => {
             </button>
             <div class="text-end prose-sm">
               {{ $t('msg.info.signUp.dontHaveAccount') }}
-              <nuxt-link class="text-primary underline hover:opacity-75" to="/signup">{{ $t('general.signUp') }}</nuxt-link>
+              <nuxt-link to="/signup">{{ $t('general.signUp') }}</nuxt-link>
             </div>
 
             <div class="prose-sm md:hidden">
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 163a36246b..c7c799ef24 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -122,7 +122,7 @@ const resetError = () => {
             @focus="resetError"
           />
 
-          <div class="self-center flex items-center justify-between w-full">
+          <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
             <button
               :disabled="!valid"
               :class="[
@@ -137,7 +137,7 @@ const resetError = () => {
             </button>
             <div class="text-end prose-sm">
               {{ $t('msg.info.signUp.alreadyHaveAccount') }}
-              <nuxt-link class="text-primary underline hover:opacity-75" to="/signin">{{ $t('general.signIn') }}</nuxt-link>
+              <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
             </div>
           </div>
         </div>

From c7503d2889283bc89c2e5caec242457b07154f99 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 12:15:02 +0200
Subject: [PATCH 2/4] chore(gui-v2): add dark mode add project btn styles

---
 packages/nc-gui-v2/pages/projects/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 4bf292c360..9317e7c4e9 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -46,10 +46,10 @@ const activePage = $ref(navDrawerOptions[0].title)
             <v-menu class="select-none">
               <template #activator="{ props }">
                 <div
-                  class="bg-white 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 hover:(!bg-gray-100)"
+                  class="bg-white hover:(!bg-gray-100) dark:(!bg-primary !text-white 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"
                   @click="props.onClick"
                 >
-                  <MdiPlus class="text-primary text-2xl" />
+                  <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
                   {{ $t('title.newProj') }}
                 </div>
               </template>

From ece801d49620f33eebe08f7f25dccd0a6506191b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 12:24:01 +0200
Subject: [PATCH 3/4] chore(gui-v2): update projects page styles

---
 packages/nc-gui-v2/pages/projects/index.vue      | 5 +++--
 packages/nc-gui-v2/pages/projects/index/list.vue | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 9317e7c4e9..c4cf35cc23 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -46,13 +46,14 @@ 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 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="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"
                   @click="props.onClick"
                 >
                   <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
                   {{ $t('title.newProj') }}
                 </div>
               </template>
+
               <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
                 <div
                   class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@@ -73,7 +74,7 @@ const activePage = $ref(navDrawerOptions[0].title)
           </div>
 
           <div class="advance-menu flex-1">
-            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'default' : 'primary'">
+            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'secondary' : 'primary'">
               <!-- todo: v-list-item-group doesn't seem to work with vuetify 3 yet ... -->
               <v-list-item
                 v-for="item in navDrawerOptions"
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index ef76a70b88..4e9ac2ab14 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -17,7 +17,7 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div>
+  <div class="mx-8">
     <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
       <div>{{ $t('general.title') }}</div>
       <div>Status</div>

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 4/4] 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',
   },