feat(gui): white navbar (WIP)

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

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">
+        <div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold ">
           <MdiAccountPlusOutline class="mr-1 nc-share-base text-gray-300 hover:text-accent" />
+          Share
         </div>
+        </a-button>
       </a-tooltip>
     </div>
 

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 !bg-white-500  text-primary px-1 gap-1 border-gray-200"
         >
           <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>
 

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-primary nc-tab-bar">
+      <div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar border-gray-200" style="border-bottom-width: 1px">
         <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"
@@ -112,19 +112,27 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     }
 
     & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-      & > .ant-tabs-tab-active {
-        @apply font-weight-medium;
-      }
 
       & > .ant-tabs-tab {
-        @apply border-0;
+        @apply border-0 !text-sm py-1.5 font-weight-medium ml-1;
+        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;
+      }
+
+      & > .ant-tabs-tab-active {
+        @apply  relative bg-primary bg-opacity-20 w-full h-full;
+        border-color: currentColor;
       }
 
+
       & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
         //@apply bg-gray-100 text-gray-500;
-        @apply bg-white/10 text-white/90;
+        @apply bg-gray-100 text-gray-500 border-gray-100;
         .ant-tabs-tab-remove {
-          @apply !text-white;
+          //@apply !text-default;
         }
       }
     }