Merge pull request #4996 from nocodb/feat/white-navbar

feat: New navbar style and alignment issues correction

packages/nc-gui/assets/style.scss

@@ -6,6 +6,8 @@
   --header-height: 42px;
   --toolbar-height: 48px;
   --tw-text-opacity: 1;
+  --navbar-bg: #FAFAFA;
+  --navbar-border: #e0e0e0;
 }
 
 .ant-layout-header {
@@ -303,3 +305,9 @@ a {
     @apply text-gray-300 italic;
   }
 }
+
+.ant-btn-loading-icon{
+  & > span {
+    @apply block bg-red-500
+  }
+}

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/components/cell/SingleSelect.vue

@@ -322,4 +322,8 @@ useEventListener(document, 'click', handleClose, true)
 :deep(.ant-select-selection-search-input) {
   @apply !text-xs;
 }
+
+:deep(.ant-select-clear > span) {
+  @apply block;
+}
 </style>

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

@@ -360,8 +360,8 @@ onMounted(async () => {
           </Transition>
 
           <Transition name="layout" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            <IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
         </div>
         <div
@@ -387,8 +387,8 @@ onMounted(async () => {
           </Transition>
 
           <Transition name="slide-right" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
+            <IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
           </Transition>
 
           <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>

packages/nc-gui/components/general/ShareBaseButton.vue

@@ -43,9 +43,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         <template #title>
           <span class="text-xs">{{ $t('activity.inviteTeam') }}</span>
         </template>
-        <div class="flex items-center space-x-1 cursor-pointer">
+        <a-button type="primary" class="!rounded-md mr-1" size="medium">
-          <MdiAccountPlusOutline class="mr-1 nc-share-base text-gray-300 hover:text-accent" />
+          <div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold">
+            <MdiAccountPlusOutline class="mr-1 nc-share-base hover:text-accent text-sm" />
+            {{ $t('activity.share') }}
           </div>
+        </a-button>
       </a-tooltip>
     </div>
 

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -59,6 +59,6 @@ const page = computed({
 }
 
 :deep(.ant-pagination-item-link) {
-  @apply text-gray-500;
+  @apply text-gray-500 flex items-center justify-center;
 }
 </style>

packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -11,7 +11,7 @@ const onClick = () => {
 <template>
   <div :class="{ 'nc-active-btn': isOpen }">
     <a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
-      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
+      <div class="flex items-center gap-1 text-[0.6rem] text-gray-500" :class="{ 'text-gray-500': !isOpen }">
         <AntDesignMenuUnfoldOutlined v-if="isOpen" />
 
         <AntDesignMenuFoldOutlined v-else />

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

@@ -76,7 +76,7 @@ useMenuCloseOnEsc(open)
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
 
           <span v-if="filtersLength" class="nc-count-badge">{{ filtersLength }}</span>

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

@@ -151,7 +151,7 @@ useMenuCloseOnEsc(open)
           <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
 

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -73,7 +73,7 @@ function onPressEnter() {
     <a-input
       v-model:value="search.query"
       size="small"
-      class="max-w-[200px]"
+      class="max-w-[200px] !text-xs"
       :placeholder="$t('placeholder.filterQuery')"
       :bordered="false"
       data-testid="search-data-input"
@@ -83,3 +83,9 @@ function onPressEnter() {
     </a-input>
   </div>
 </template>
+
+<style scoped>
+:deep(input::placeholder) {
+  @apply !text-xs;
+}
+</style>

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

@@ -237,7 +237,7 @@ const copyIframeCode = async () => {
       <div class="flex items-center gap-1">
         <MdiOpenInNew />
         <!-- Share View -->
-        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 

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

@@ -66,7 +66,7 @@ useMenuCloseOnEsc(open)
           <MdiSort />
 
           <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDown class="text-grey" />
 
           <span v-if="sorts?.length" class="nc-count-badge">{{ sorts.length }}</span>

packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@@ -94,7 +94,7 @@ useMenuCloseOnEsc(open)
         <div class="flex gap-2 items-center">
           <GeneralViewIcon :meta="selectedView"></GeneralViewIcon>
 
-          <span class="!text-sm font-weight-normal">
+          <span class="!text-xs font-weight-normal">
             <GeneralTruncateText :key="selectedView?.title">{{ selectedView?.title }}</GeneralTruncateText>
           </span>
 

packages/nc-gui/layouts/base.vue

@@ -37,10 +37,7 @@ hooks.hook('page:finish', () => {
     </Transition>
 
     <a-layout class="!flex-col">
-      <a-layout-header
+      <a-layout-header v-if="!route.meta.public && signedIn && !route.meta.hideHeader" class="nc-navbar">
-        v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-        class="flex !bg-primary items-center text-white !pl-2 !pr-5"
-      >
         <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-if="!isDashboard" width="120" alt="NocoDB" src="~/assets/img/brand/nocodb-full-color.png" />
-              <img v-show="!isDashboard" width="90" alt="NocoDB" src="~/assets/img/brand/text.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

@@ -252,9 +252,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         theme="light"
       >
         <div
-          style="height: var(--header-height)"
+          style="height: var(--header-height); border-bottom-width: 1px"
           :class="isOpen ? 'pl-4' : ''"
-          class="flex items-center !bg-primary text-white px-1 gap-1"
+          class="flex items-center text-primary px-1 gap-1 nc-sidebar-header"
         >
           <div
             v-if="isOpen && !isSharedBase"
@@ -267,7 +267,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
               <template #title>
                 {{ currentVersion }}
               </template>
-              <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+              <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
             </a-tooltip>
           </div>
 
@@ -589,7 +589,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
 .nc-left-sidebar {
   .nc-sidebar-left-toggle-icon {
-    @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
+    @apply opacity-0 transition-opactity duration-200 transition-color text-gray-500/80 hover:text-gray-500/100;
 
     .nc-left-sidebar {
       @apply !border-r-0;
@@ -604,4 +604,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 :deep(.ant-dropdown-menu-submenu-title) {
   @apply py-0;
 }
+
+.nc-sidebar-header {
+  @apply border-[var(--navbar-border)] !bg-[var(--navbar-bg)];
+}
 </style>

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

@@ -31,20 +31,20 @@ 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-primary nc-tab-bar">
+      <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"
+          class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1"
         >
           <MdiMenu
             v-e="['c:grid:toggle-navdraw']"
-            class="cursor-pointer transform transition-transform duration-500 text-white"
+            class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
             :class="{ 'rotate-180': !isOpen }"
             @click="toggle(!isOpen)"
           />
         </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 />
+        <LazyGeneralShareBaseButton class="mb-1px" />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon" />
+        <LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" />
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
@@ -108,23 +108,39 @@ 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-active {
+      & > .ant-tabs-tab {
-        @apply font-weight-medium;
+        @apply border-0 !text-sm py-2 font-weight-medium  z-2;
+
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+
+        & + .ant-tabs-tab {
+          @apply ml-1;
+        }
       }
 
-      & > .ant-tabs-tab {
+      & > .ant-tabs-tab-active {
-        @apply border-0;
+        @apply relative bg-white w-full h-full overflow-y-visible;
+
+        border-top: 1px solid white;
+        border-left: 1px solid white;
+        border-right: 1px solid white;
+        @apply !border-[var(--navbar-border)];
+
+        &: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-50 text-gray-500;
-        @apply bg-white/10 text-white/90;
+
         .ant-tabs-tab-remove {
-          @apply !text-white;
+          @apply !text-default;
         }
       }
     }
@@ -141,7 +157,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
   @apply !border-none;
 }
 
+.nc-tab-bar {
+  @apply border-gray-150 !bg-gray-50 relative z-1;
+
   :deep(.ant-tabs-tab-remove) {
     @apply flex mt-[2px];
   }
+
+  background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important;
+
+  :deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
+    background: linear-gradient(0deg, var(--navbar-border) 1px, #f2f2f2 1px) !important;
+  }
+}
 </style>