Merge pull request #3096 from nocodb/refactor/gui-v2-ui-updates

refactor(gui-v2): ui updates

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

@@ -102,7 +102,7 @@ html {
 
 // for highlighting toolbar menu item
 .nc-active-btn > .ant-btn{
-  @apply bg-primary/20;
+  @apply bg-primary/20 hover:(bg-primary/20);
 }
 
 .ant-modal-wrap {

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

@@ -91,6 +91,7 @@ declare module '@vue/runtime-core' {
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
+    MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -120,6 +121,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -4,7 +4,6 @@ import Sortable from 'sortablejs'
 import { useNuxtApp, useRoute } from '#app'
 import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
 import { TabType } from '~/composables'
-import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuDown from '~icons/mdi/chevron-down'
@@ -153,9 +152,7 @@ const activeTable = computed(() => {
           @click="showTableList = !showTableList"
           @contextmenu="setMenuContext('main')"
         >
-          <MdiTable class="mr-1 text-gray-500" />
+          <span class="flex-grow text-bold nc-project-tree text-gray-500">
-
-          <span class="flex-grow text-bold nc-project-tree">
             {{ $t('objects.tables') }}
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
@@ -196,14 +193,10 @@ const activeTable = computed(() => {
                       @click.stop.prevent
                     />
 
-                    <component
+                    <component :is="icon(table)" class="nc-view-icon group-hover:hidden text-xs group-hover:text-gray-500" />
-                      :is="icon(table)"
-                      :class="route.params.title && route.params.title.includes(table.title) ? 'text-pink-500' : 'text-gray-500'"
-                      class="nc-view-icon group-hover:hidden text-xs"
-                    />
                   </div>
 
-                  <div class="nc-tbl-title text-xs flex-1">{{ table.title }}</div>
+                  <div class="nc-tbl-title flex-1">{{ table.title }}</div>
 
                   <a-dropdown :trigger="['click']" @click.stop>
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
@@ -298,17 +291,17 @@ const activeTable = computed(() => {
 }
 
 .nc-tree-item svg {
-  @apply text-gray-500;
+  @apply text-primary/60;
 }
 
 .nc-tree-item.active {
-  @apply !text-primary after:(!opacity-5);
+  @apply !text-primary font-weight-medium after:(!opacity-20);
   svg {
     @apply !text-primary;
   }
 }
 
 .nc-tree-item:hover {
-  @apply !text-grey after:(!opacity-2);
+  @apply !text-grey after:(!opacity-5);
 }
 </style>

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -21,7 +21,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
 <template>
-  <div class="flex align-center w-full">
+  <div class="flex align-center w-full text-xs font-weight-regular">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -80,7 +80,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
 <template>
-  <div class="d-flex align-center w-full">
+  <div class="d-flex align-center w-full text-xs font-weight-regular">
     <!--    <v-tooltip bottom>
           <template #activator="{ on }">
           todo: bring tooltip

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@@ -112,7 +112,7 @@ defineExpose({
 
 <template>
   <div
-    class="pa-2 menu-filter-dropdown bg-gray-50"
+    class="p-6 menu-filter-dropdown bg-gray-50"
     :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
@@ -132,13 +132,12 @@ defineExpose({
               <a-select
                 v-model:value="filter.logical_op"
                 :dropdown-match-select-width="false"
-                size="small"
+                class="shrink grow-0"
-                class="flex-shrink-1 flex-grow-0 elevation-0 caption !text-xs"
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
-                <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+                <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="">
                   {{ op.text }}
                 </a-select-option>
               </a-select>
@@ -173,20 +172,19 @@ defineExpose({
             />
             <span v-else />
 
-            <span v-if="!i" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span>
+            <span v-if="!i" class="flex items-center">{{ $t('labels.where') }}</span>
 
             <a-select
               v-else
               v-model:value="filter.logical_op"
               :dropdown-match-select-width="false"
-              size="small"
+              class="h-full"
-              class="h-full !text-xs"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
-              <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+              <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value">
                 {{ op.text }}
               </a-select-option>
             </a-select>
@@ -194,7 +192,7 @@ defineExpose({
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
               v-model="filter.fk_column_id"
-              class="caption nc-filter-field-select"
+              class="nc-filter-field-select"
               :columns="columns"
               :disabled="filter.readOnly"
               @click.stop
@@ -204,8 +202,7 @@ defineExpose({
             <a-select
               v-model:value="filter.comparison_op"
               :dropdown-match-select-width="false"
-              size="small"
+              class="caption nc-filter-operation-select"
-              class="caption nc-filter-operation-select !text-xs"
               :placeholder="$t('labels.operation')"
               density="compact"
               variant="solo"
@@ -213,7 +210,7 @@ defineExpose({
               hide-details
               @change="filterUpdateCondition(filter, i)"
             >
-              <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="!text-xs">
+              <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="">
                 {{ compOp.text }}
               </a-select-option>
             </a-select>
@@ -232,7 +229,6 @@ defineExpose({
             <a-checkbox
               v-else-if="types[filter.field] === 'boolean'"
               v-model:checked="filter.value"
-              size="small"
               dense
               :disabled="filter.readOnly"
               @change="saveOrUpdate(filter, i)"
@@ -241,8 +237,7 @@ defineExpose({
               v-else
               :key="`${i}_7`"
               v-model:value="filter.value"
-              size="small"
+              class="nc-filter-value-select"
-              class="caption nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
               @input="saveOrUpdate(filter, i)"
@@ -252,8 +247,8 @@ defineExpose({
       </template>
     </div>
 
-    <div class="flex gap-2 my-2">
+    <div class="flex gap-2 mb-2 mt-4">
-      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
+      <a-button class="elevation-0 text-capitalize" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -261,7 +256,7 @@ defineExpose({
           {{ $t('activity.addFilter') }}
         </div>
       </a-button>
-      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilterGroup">
+      <a-button class="text-capitalize !text-gray-500" @click.stop="addFilterGroup">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -278,15 +273,10 @@ defineExpose({
 .nc-filter-grid {
   display: grid;
   grid-template-columns: 18px 70px auto auto auto;
-  column-gap: 6px;
+  @apply gap-[12px]
-  row-gap: 6px;
   align-items: center;
 }
 
-:deep(.ant-btn, .ant-select, .ant-input) {
-  @apply "!text-xs";
-}
-
 :deep(.ant-select-item-option) {
   @apply "!min-w-full";
 }

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -34,11 +34,11 @@ const applyChanges = async () => {
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
-      <a-button v-t="['c:filter']" class="text-xs nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
           <!-- Filter -->
-          <span class="text-capitalize">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('activity.filter') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
@@ -46,7 +46,7 @@ const applyChanges = async () => {
     <template #overlay>
       <SmartsheetToolbarColumnFilter
         ref="filterComp"
-        class="nc-table-toolbar-menu"
+        class="nc-table-toolbar-menu shadow-lg"
         :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >

packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@@ -81,14 +81,12 @@ const filterOption = (input: string, option: any) => {
   <a-select
     v-model:value="localValue"
     :dropdown-match-select-width="false"
-    size="small"
     show-search
-    class="!text-xs"
     placeholder="Select a field"
     :filter-option="filterOption"
   >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
-      <div class="flex gap-2 text-xs items-center align-center h-full">
+      <div class="flex gap-2 items-center align-center h-full">
         <component :is="option.icon" class="min-w-5 !mx-0" />
         <span class="min-w-0"> {{ option.label }}</span>
       </div>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -67,19 +67,19 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex align-center gap-1">
           <MdiEyeOffOutline class="text-grey" />
 
           <!-- Fields -->
-          <span class="text-xs text-capitalize">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
     </div>
     <template #overlay>
-      <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto" @click.stop>
+      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
@@ -88,7 +88,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
             <template #item="{ element: field }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
-                  <span class="text-xs">{{ field.title }}</span>
+                  <span class="">{{ field.title }}</span>
                 </a-checkbox>
                 <div class="flex-1" />
                 <MdiDrag class="cursor-move" />
@@ -122,7 +122,4 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
-:deep(::placeholder) {
-  @apply !text-xs;
-}
 </style>

packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@@ -118,12 +118,12 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
         <div class="flex gap-1 align-center">
           <MdiFlashIcon class="text-grey" />
           <!-- More -->
-          {{ $t('general.more') }}
+          <span class="!text-sm font-weight-regular">{{ $t('general.more') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
       <template #overlay>
-        <div class="bg-white shadow">
+        <div class="bg-white shadow-lg">
           <div>
             <div class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadIcon />

packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@@ -110,11 +110,11 @@ const copyLink = () => {
 
 <template>
   <div>
-    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small">
+    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn">
       <div class="flex align-center gap-1" @click="genShareLink">
         <MdiOpenInNewIcon class="text-grey" />
         <!-- Share View -->
-        {{ $t('activity.shareView') }}
+        <span class="!text-sm font-weight-regular"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -36,17 +36,17 @@ watch(
 <template>
   <a-dropdown offset-y class="" :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
-      <a-button v-t="['c:sort']" size="small" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
+      <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
           <!-- Sort -->
-          <span class="text-capitalize">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto">
+      <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto">
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
             <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
@@ -65,7 +65,6 @@ watch(
             />
             <a-select
               v-model:value="sort.direction"
-              size="small"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"
               @click.stop
@@ -76,7 +75,7 @@ watch(
                 :key="j"
                 :value="option.value"
               >
-                <span class="text-xs">{{ option.text }}</span>
+                <span>{{ option.text }}</span>
               </a-select-option>
             </a-select>
             <!--            <template #item="{ item }"> -->
@@ -85,7 +84,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-xs text-grey text-capitalize my-2" @click.stop="addSort">
+        <a-button class="text-capitalize mb-1 mt-4" @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->
@@ -101,11 +100,6 @@ watch(
 .sort-grid {
   display: grid;
   grid-template-columns: 22px auto 150px;
-  column-gap: 6px;
+  @apply gap-[12px];
-  row-gap: 6px;
-}
-
-:deep(.ant-btn, .ant-select, .ant-input, ::placeholder) {
-  @apply "!text-xs";
 }
 </style>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -293,7 +293,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <thead>
             <tr>
               <th>
-                <div class="flex align-center w-[80px] px-1">
+                <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
                   <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -315,9 +315,11 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresizing="onXcResizing(col.title, $event)"
                 @xcresized="resizingCol = null"
               >
+                <div class="w-full h-full bg-gray-100 flex items-center">
                   <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
 
                   <SmartsheetHeaderCell v-else :column="col" />
+                </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th v-t="['c:column:add']" @click="addColumnDropdown = true">

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -5,8 +5,8 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2" style="z-index: 7">
-    <SmartsheetToolbarSearchData v-if="isGrid" class="flex-shrink" />
+    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
 
     <SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" />
 

packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@@ -33,14 +33,8 @@ function onOpenModal(type: ViewTypes, title = '') {
 
 <template>
   <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
-    <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4">
+    <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
       {{ $t('activity.createView') }}
-      <a-tooltip>
-        <template #title>
-          {{ $t('msg.info.onlyCreator') }}
-        </template>
-        <mdi-shield-lock-outline class="text-pink-500" />
-      </a-tooltip>
     </h3>
 
     <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)">
@@ -100,17 +94,17 @@ function onOpenModal(type: ViewTypes, title = '') {
     <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
+        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
-        @click="onApiSnippet"
+        @click="onWebhooks"
       >
-        <mdi-xml />Get API Snippet
+        <mdi-hook />{{ $t('objects.webhooks') }}
       </button>
 
       <button
-        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
+        class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
-        @click="onWebhooks"
+        @click="onApiSnippet"
       >
-        <mdi-hook />{{ $t('objects.webhooks') }}
+        <mdi-xml />Get API Snippet
       </button>
     </div>
 
@@ -122,7 +116,7 @@ function onOpenModal(type: ViewTypes, title = '') {
           <div>
             <a
               v-t="['e:hiring']"
-              class="px-4 py-3 !bg-primary rounded shadow text-white"
+              class="px-4 py-3 rounded border text-xs text-current"
               href="https://angel.co/company/nocodb"
               target="_blank"
               @click.stop
@@ -138,7 +132,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         <a
           href="https://github.com/sponsors/nocodb"
           target="_blank"
-          class="group flex items-center gap-2 w-full mx-3 px-4 py-2 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease"
+          class="group flex items-center gap-2 w-full mx-3 px-4 py-3 rounded-l border transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease !text-xs text-current"
           @click.stop
         >
           <mdi-cards-heart class="text-red-500" />

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -185,7 +185,7 @@ function onDeleted() {
 </script>
 
 <template>
-  <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
+  <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3>
 
   <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu" :selected-keys="selected">
     <RenameableMenuItem
@@ -236,11 +236,7 @@ function onDeleted() {
   }
 
   .active {
-    @apply bg-blue-500/15;
+    @apply bg-primary/20 text-primary font-medium;
-
-    .nc-icon {
-      @apply !text-pink-500;
-    }
   }
 }
 </style>

packages/nc-gui-v2/nuxt.config.ts

@@ -6,6 +6,7 @@ import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
+import { themeColors } from './utils/colorsUtils'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -50,7 +51,7 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         less: {
-          modifyVars: { 'primary-color': '#1348ba', 'text-color': 'rgba(61, 61, 61, 1)' },
+          modifyVars: { 'primary-color': themeColors.primary, 'text-color': 'rgba(61, 61, 61, 1)' },
           javascriptEnabled: true,
         },
       },

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { TabItem } from '~/composables'
+import { TabType } from '~/composables'
 import { TabMetaInj } from '~/context'
 import { useTabs, useUIPermission } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -8,6 +10,8 @@ import MdiExcelIcon from '~icons/mdi/file-excel'
 import MdiJSONIcon from '~icons/mdi/code-json'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiRequestDataSourceIcon from '~icons/mdi/open-in-new'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiAccountGroup from '~icons/mdi/account-group'
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
@@ -25,14 +29,32 @@ function openQuickImportDialog(type: string) {
   quickImportDialog.value = true
   importType.value = type
 }
+
+const icon = (tab: TabItem) => {
+  switch (tab.type) {
+    case TabType.TABLE:
+      return MdiAirTableIcon
+    case TabType.VIEW:
+      return MdiView
+    case TabType.AUTH:
+      return MdiAccountGroup
+  }
+}
 </script>
 
 <template>
   <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
-      <div class="px-2">
+      <div>
         <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
-          <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
+          <a-tab-pane v-for="(tab, i) in tabs" :key="i">
+            <template #tab>
+              <div class="flex align-center gap-2">
+                <component :is="icon(tab)" class="text-sm"></component>
+                {{ tab.title }}
+              </div>
+            </template>
+          </a-tab-pane>
 
           <template #leftExtra>
             <a-menu v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
@@ -123,7 +145,7 @@ function openQuickImportDialog(type: string) {
         </a-tabs>
       </div>
 
-      <NuxtPage class="px-4 pt-2" />
+      <NuxtPage />
     </div>
 
     <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
@@ -155,4 +177,12 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-tabs-nav-add) {
   @apply !hidden;
 }
+
+:deep(.ant-tabs-tab-active) {
+  @apply font-weight-medium;
+}
+
+:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
+  @apply bg-gray-100;
+}
 </style>

packages/nc-gui-v2/utils/colorsUtils.ts

@@ -33,7 +33,7 @@ export const enumColor = {
 export const themeColors = {
   'background': '#FFFFFF',
   'surface': '#FFFFFF',
-  'primary': '#1348ba',
+  'primary': '#4351e8',
   'secondary': '#03DAC6',
   'secondary-darken-1': '#018786',
   'error': '#B00020',