feat(gui): finalised navbar style

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

packages/nc-gui/assets/style.scss

@@ -6,7 +6,7 @@
   --header-height: 42px;
   --toolbar-height: 48px;
   --tw-text-opacity: 1;
-  --navbar-bg: #f4f4f4;
+  --navbar-bg: #FAFAFA;
   --navbar-border: #e0e0e0;
 }
 

packages/nc-gui/components/cell/SingleSelect.vue

@@ -323,7 +323,7 @@ useEventListener(document, 'click', handleClose, true)
   @apply !text-xs;
 }
 
-:deep(.ant-select-clear > span){
-  @apply block
+: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" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <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" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <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/smartsheet/toolbar/SearchData.vue

@@ -83,8 +83,9 @@ function onPressEnter() {
     </a-input>
   </div>
 </template>
+
 <style scoped>
-:deep(input::placeholder){
-  @apply !text-xs
+:deep(input::placeholder) {
+  @apply !text-xs;
 }
 </style>

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

@@ -114,12 +114,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
       & > .ant-tabs-tab {
         @apply border-0 !text-sm py-2 font-weight-medium  z-2;
+
         border-top-right-radius: 8px;
         border-top-left-radius: 8px;
-        border-top: 1px solid white;
-        border-left: 1px solid white;
-        border-right: 1px solid white;
-        @apply !border-[var(--navbar-border)];
+
         & + .ant-tabs-tab {
           @apply ml-1;
         }
@@ -127,6 +125,12 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 
       & > .ant-tabs-tab-active {
         @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;
         }
@@ -160,9 +164,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     @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, var(--navbar-bg) 1px) !important;
+    background: linear-gradient(0deg, var(--navbar-border) 1px, #f2f2f2 1px) !important;
   }
 }
 </style>