From bdcec083f78e3902c93ae811ad8120645b4c1edc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 20:34:44 +0530
Subject: [PATCH] feat(gui): finalised navbar style

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss               |  2 +-
 .../nc-gui/components/cell/SingleSelect.vue     |  4 ++--
 .../nc-gui/components/dashboard/TreeView.vue    |  8 ++++----
 .../smartsheet/toolbar/SearchData.vue           |  5 +++--
 .../[projectType]/[projectId]/index/index.vue   | 17 +++++++++++------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index f3226f96ea..154c54bb75 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/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;
 }
 
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index f24a462f64..ba642ba82f 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/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>
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 1fdb747cfc..3f0e23100b 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 596ed5f354..dc3028e9a2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/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>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 60d10dbbda..77c004b51f 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/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>