feat(gui): new navbar style

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components.d.ts

@@ -81,6 +81,7 @@ declare module '@vue/runtime-core' {
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
+    Icon: typeof import('~icons/ic/on')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']

packages/nc-gui/layouts/base.vue

@@ -37,10 +37,7 @@ hooks.hook('page:finish', () => {
     </Transition>
 
     <a-layout class="!flex-col">
-      <a-layout-header
-        v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-        class="flex !bg-primary items-center text-white !pl-2 !pr-5"
-      >
+      <a-layout-header v-if="!route.meta.public && signedIn && !route.meta.hideHeader" class="nc-navbar">
         <div
           v-if="!route.params.projectType"
           v-e="['c:navbar:home']"
@@ -53,8 +50,8 @@ hooks.hook('page:finish', () => {
               {{ currentVersion }}
             </template>
             <div class="flex items-center gap-2">
-              <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-              <img v-show="!isDashboard" width="90" alt="NocoDB" src="~/assets/img/brand/text.png" />
+              <img v-if="!isDashboard" width="120" alt="NocoDB" src="~/assets/img/brand/nocodb-full-color.png" />
+              <img v-else width="25" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
             </div>
           </a-tooltip>
         </div>
@@ -83,7 +80,7 @@ hooks.hook('page:finish', () => {
           <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
             <MdiDotsVertical
               data-testid="nc-menu-accounts"
-              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white"
+              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts"
               @click.prevent
             />
 
@@ -161,4 +158,8 @@ hooks.hook('page:finish', () => {
     @apply ring ring-accent ring-opacity-100;
   }
 }
+
+.nc-navbar {
+  @apply flex !bg-white items-center !pl-2 !pr-5;
+}
 </style>

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

@@ -254,7 +254,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         <div
           style="height: var(--header-height); border-bottom-width: 1px"
           :class="isOpen ? 'pl-4' : ''"
-          class="flex items-center !bg-white-500 text-primary px-1 gap-1 border-gray-150 nc-sidebar-header"
+          class="flex items-center text-primary px-1 gap-1 nc-sidebar-header"
         >
           <div
             v-if="isOpen && !isSharedBase"
@@ -605,10 +605,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   @apply py-0;
 }
 
-.nc-sidebar-header{
-  @apply relative;
-  &::after{
-    @apply absolute content-[''] -right-1 top-0 w-1 h-full bg-white;
-  }
+.nc-sidebar-header {
+  //@apply relative;
+  //&::after{
+  //  //@apply absolute content-[''] -right-1 top-0 w-1 h-full bg-inherit;
+  //}
+
+  @apply border-gray-150 !bg-gray-50;
 }
 </style>

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

@@ -31,7 +31,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 <template>
   <div class="h-full w-full nc-container">
     <div class="h-full w-full flex flex-col">
-      <div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar border-gray-150" style="border-bottom-width: 1px">
+      <div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar">
         <div
           v-if="!isOpen"
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
@@ -44,7 +44,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           />
         </div>
 
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs min-w-[500px]" type="editable-card" @edit="onEdit">
           <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
               <div class="flex items-center gap-2" data-testid="nc-tab-title">
@@ -78,8 +78,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           </div>
         </div>
 
-        <LazyGeneralShareBaseButton />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon" />
+        <LazyGeneralShareBaseButton class="mb-1px" />
+        <LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" />
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
@@ -108,29 +108,34 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     }
 
     .ant-tabs-nav-more {
-      @apply text-white;
+      @apply py-1.5;
     }
 
     & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-
       & > .ant-tabs-tab {
-        @apply border-0 !text-sm py-1.5 font-weight-medium ml-1;
+        @apply border-0 !text-sm py-1.5 font-weight-medium  z-2;
         border-top-right-radius: 8px;
         border-top-left-radius: 8px;
-        border-top: 2px solid white;
-        border-left: 2px solid white;
-        border-right: 2px solid white;
+        border-top: 1px solid white;
+        border-left: 1px solid white;
+        border-right: 1px solid white;
+        @apply !border-gray-200;
+        & + .ant-tabs-tab {
+          @apply ml-1;
+        }
       }
 
       & > .ant-tabs-tab-active {
-        @apply  relative bg-primary bg-opacity-20 w-full h-full;
-        border-color: currentColor;
+        @apply relative bg-white w-full h-full overflow-y-visible;
+        &:after {
+          @apply absolute content-[''] left-0 -bottom-[1px] w-full h-[1px] bg-inherit z-100;
+        }
       }
 
-
       & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
         //@apply bg-gray-100 text-gray-500;
-        @apply bg-gray-100 text-gray-500 border-gray-100;
+        @apply bg-gray-50 text-gray-500;
+
         .ant-tabs-tab-remove {
           //@apply !text-default;
         }
@@ -149,7 +154,26 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
   @apply !border-none;
 }
 
-:deep(.ant-tabs-tab-remove) {
-  @apply flex mt-[2px];
+.nc-tab-bar {
+  @apply border-gray-150 !bg-gray-50 relative z-1;
+
+  :deep(.ant-tabs-tab-remove) {
+    @apply flex mt-[2px];
+  }
+
+  &,
+  :deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
+    background: linear-gradient(0deg, #e5e7eb 1px, rgb(249, 250, 251) 1px) !important;
+  }
 }
+
+//:deep(.ant-tabs-nav-list), :deep(.ant-tabs-nav),:deep(.ant-tabs-nav-wrap), :deep(.ant-tabs), :deep(.nc-tab-bar) {
+//  overflow-y: visible !important;
+//}
+//
+//:deep(.ant-tabs),:deep(.ant-tabs-nav-wrap){
+//  overflow-x: hidden !important;
+//  overflow-y: visible !important;
+//  overflow: visible !important;
+//}
 </style>