refactor(gui): tab size increase and define colors as css var

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

packages/nc-gui/assets/style.scss

@@ -6,6 +6,8 @@
   --header-height: 42px;
   --toolbar-height: 48px;
   --tw-text-opacity: 1;
+  --navbar-bg: #F4F6F6;
+  --navbar-border: #e5e7eb;
 }
 
 .ant-layout-header {

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

@@ -606,11 +606,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 }
 
 .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;
+  @apply border-[var(--navbar-border)] !bg-[var(--navbar-bg)];
 }
 </style>

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

@@ -113,7 +113,7 @@ 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-1.5 font-weight-medium  z-2;
+        @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;
@@ -163,17 +163,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 
   &,
   :deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
-    background: linear-gradient(0deg, #e5e7eb 1px, rgb(249, 250, 251) 1px) !important;
+    background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 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>