refactor(gui-v2): project list page style updates

packages/nc-gui-v2/assets/style-v2.scss

@@ -17,6 +17,10 @@ main {
   @apply m-0 h-full w-full bg-white dark:(bg-black text-white);
 }
 
+html {
+  overflow-y: auto !important;
+}
+
 main {
   @apply flex-0 w-full relative scrollbar-thin-dull;
   overflow-x: hidden;
@@ -43,16 +47,21 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply color-transition;
 }
 
-html {
-  overflow-y: auto !important;
-}
-
-
 // menu item styling
 .nc-menu-item {
   @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 }
 
+.nc-project-menu-item {
+  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+
+  &:hover {
+    .nc-icon {
+      @apply text-pink-500;
+    }
+  }
+}
+
 .nc-sidebar-right-item {
   @apply relative flex items-center;
 
@@ -136,9 +145,9 @@ html {
   @apply transition-opacity duration-300 ease-in-out;
 }
 
-.page-enter,
+.page-enter-active,
 .page-leave-active,
-.layout-enter,
+.layout-enter-active,
 .layout-leave-active {
   @apply opacity-0;
 }
@@ -167,3 +176,21 @@ html {
 .glow-leave-active {
   @apply opacity-0;
 }
+
+.scaling-btn {
+  @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+
+  &::after {
+    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+    content: '';
+    z-index: -1;
+  }
+
+  &:hover::after {
+    @apply transform scale-110 ring ring-pink-500;
+  }
+
+  &:active::after {
+    @apply ring ring-pink-500;
+  }
+}

packages/nc-gui-v2/components.d.ts

@@ -155,6 +155,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']

packages/nc-gui-v2/components/general/PreviewAs.vue

@@ -7,6 +7,7 @@ import MdiEyeOutline from '~icons/mdi/eye-outline'
 import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
 
 const { float } = defineProps<{ float?: boolean }>()
+
 const position = useState('preview-as-position', () => ({
   y: `${window.innerHeight - 100}px`,
   x: `${window.innerWidth / 2 - 250}px`,
@@ -98,10 +99,6 @@ watch(previewAs, () => window.location.reload())
 </template>
 
 <style scoped>
-.nc-project-menu-item {
-  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
-}
-
 .floating-reset-btn {
   @apply z-1000 index-100 fixed text-white
   @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -279,10 +279,6 @@ const copyAuthToken = async () => {
 </template>
 
 <style lang="scss" scoped>
-.nc-project-menu-item {
-  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
-}
-
 :deep(.ant-dropdown-menu-item-group-title) {
   @apply border-b-1;
 }

packages/nc-gui-v2/pages/forgot-password.vue

@@ -129,7 +129,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

packages/nc-gui-v2/pages/index/index.vue

@@ -69,61 +69,74 @@ onMounted(() => {
       </div>
 
       <div class="min-w-2/4 flex-auto">
-        <a-card :loading="isLoading" class="!rounded-lg shadow">
+        <a-card class="transition-all duration-300 ease-out !rounded-lg shadow">
-          <h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
+          <h1 class="flex items-center justify-center gap-2 leading-8 mb-8">
             <!-- My Projects -->
-            <b>{{ $t('title.myProject') }}</b>
+            <span class="text-4xl">{{ $t('title.myProject') }}</span>
 
+            <a-tooltip title="Reload projects">
+              <span
+                class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
+                :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
+              >
                 <MdiRefresh
                   v-t="['a:project:refresh']"
-              class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
+                  class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
+                  :class="isLoading ? '!text-primary' : ''"
                   @click="loadProjects"
                 />
+              </span>
+            </a-tooltip>
           </h1>
 
           <div class="order-1 flex mb-6">
             <a-input-search
               v-model:value="filterQuery"
-              class="max-w-[200px] nc-project-page-search"
+              class="max-w-[250px] nc-project-page-search rounded"
               :placeholder="$t('activity.searchProject')"
             />
 
             <div class="flex-grow" />
 
-            <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
+            <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
-              <a-button class="nc-new-project-menu !shadow">
+              <button class="nc-new-project-menu">
-                <div class="flex align-center">
+                <div class="flex items-center w-full">
                   {{ $t('title.newProj') }}
                   <MdiMenuDown class="menu-icon" />
                 </div>
-              </a-button>
+              </button>
 
               <template #overlay>
                 <a-menu>
+                  <a-menu-item>
                     <div
                       v-t="['c:project:create:xcdb']"
-                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
+                      class="nc-project-menu-item gap-4"
                       @click="navigateTo('/project/create')"
                     >
-                    <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                      <MdiPlusOutline class="text-lg" />
 
-                    <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+                      <div>{{ $t('activity.createProject') }}</div>
                     </div>
+                  </a-menu-item>
 
+                  <a-menu-item>
                     <div
                       v-t="['c:project:create:extdb']"
-                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
+                      class="nc-project-menu-item gap-4"
                       @click="navigateTo('/project/create-external')"
                     >
-                    <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                      <MdiDatabaseOutline class="text-lg" />
 
-                    <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+                      <div v-html="$t('activity.createProjectExtended.extDB')" />
                     </div>
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
           </div>
 
+          <TransitionGroup name="layout" mode="out-in">
             <div v-if="isLoading">
               <a-skeleton />
             </div>
@@ -136,6 +149,7 @@ onMounted(() => {
                     $e('a:project:open')
                     navigateTo(`/nc/${record.id}`)
                   },
+                  class: ['group'],
                 })
               "
               :data-source="filteredProjects"
@@ -145,27 +159,29 @@ onMounted(() => {
               <a-table-column key="title" :title="$t('general.title')" data-index="title">
                 <template #default="{ text }">
                   <div
-                  class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
+                    class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
-                  :title="text"
                   >
                     {{ text }}
                   </div>
                 </template>
               </a-table-column>
               <!-- Actions -->
+
               <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
                 <template #default="{ text, record }">
-                <div class="flex align-center">
+                  <div class="flex items-center gap-2">
                     <MdiEditOutline
                       v-t="['c:project:edit:rename']"
                       class="nc-action-btn"
                       @click.stop="navigateTo(`/project/${text}`)"
                     />
+
                     <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
                   </div>
                 </template>
               </a-table-column>
             </a-table>
+          </TransitionGroup>
         </a-card>
       </div>
 
@@ -182,7 +198,25 @@ onMounted(() => {
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 hover:text-primary mr-2 cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+}
+
+.nc-new-project-menu {
+  @apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
+
+  &::after {
+    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+    content: '';
+    z-index: -1;
+  }
+
+  &:hover::after {
+    @apply transform scale-110 ring ring-pink-500;
+  }
+
+  &:active::after {
+    @apply ring ring-pink-500;
+  }
 }
 
 :deep(.ant-table-cell) {

packages/nc-gui-v2/pages/signin.vue

@@ -167,7 +167,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

packages/nc-gui-v2/pages/signup/[[token]].vue

@@ -186,7 +186,7 @@ function resetError() {
   }
 
   .submit {
-    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
+    @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
 
     &::after {
       @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;