From 3edab0a937535e6ed2de678756cdecceb49f7c9b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:17:33 +0200
Subject: [PATCH 1/6] chore(gui-v2): fix modal menu styles

---
 .../components/dashboard/settings/Modal.vue   | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index ed2ee34488..1a6736855c 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
-import { useI18n } from 'vue-i18n'
 import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Misc from './Misc.vue'
+import { useI18n, useUIPermission, useVModel, watch } from '#imports'
 import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
 import UserManagement from '~/components/tabs/auth/UserManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NootbookOutline from '~icons/mdi/notebook-outline'
-import { useUIPermission, useVModel, watch } from '#imports'
-import MdiCloseIcon from '~icons/mdi/close'
 
 interface Props {
   modelValue: boolean
@@ -142,20 +140,24 @@ watch(
       <a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
       <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
         <template #icon>
-          <MdiCloseIcon class="cursor-pointer mt-1 nc-modal-close" />
+          <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
         </template>
       </a-button>
     </div>
 
-    <a-layout class="mt-3 modal-body flex">
+    <a-layout class="mt-3 h-[75vh] overflow-y-auto flex">
       <!-- Side tabs -->
-      <a-layout-sider theme="light">
-        <a-menu v-model:selected-keys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]">
-          <a-menu-item v-for="(tab, key) of tabsInfo" :key="key">
-            <div class="flex flex-row items-center space-x-2">
-              <component :is="tab.icon" class="flex" />
-
-              <div class="flex select-none">
+      <a-layout-sider>
+        <a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
+          <a-menu-item
+            v-for="(tab, key) of tabsInfo"
+            :key="key"
+            class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
+          >
+            <div class="flex items-center space-x-2">
+              <component :is="tab.icon" class="group-hover:text-accent" />
+
+              <div class="select-none">
                 {{ tab.title }}
               </div>
             </div>
@@ -177,9 +179,10 @@ watch(
   </a-modal>
 </template>
 
-<style scoped>
-.modal-body {
-  @apply h-[75vh];
-  @apply overflow-y-auto;
+<style lang="scss" scoped>
+.tabs-menu {
+  :deep(.ant-menu-item-selected) {
+    @apply border-r-3 border-primary bg-primary !bg-opacity-25;
+  }
 }
 </style>

From be5223b0dd8f4d729cb665a66da0520134f3fe48 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:23:12 +0200
Subject: [PATCH 2/6] chore(gui-v2): remove active styles

---
 packages/nc-gui-v2/components/dashboard/settings/Modal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index 1a6736855c..550e461c2c 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -138,6 +138,7 @@ watch(
   >
     <div class="flex flex-row justify-between w-full items-center mb-1">
       <a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+
       <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
         <template #icon>
           <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
@@ -168,7 +169,7 @@ watch(
       <!-- Sub Tabs -->
       <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
         <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
-          <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none">
+          <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="active:(!ring-0) select-none">
             {{ tab.title }}
           </a-menu-item>
         </a-menu>

From 725a8989f0b8faa9dffd3ceb48a354db49ff17cd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:27:14 +0200
Subject: [PATCH 3/6] chore(gui-v2): replace vuetify style

---
 packages/nc-gui-v2/components/general/HelpAndSupport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/general/HelpAndSupport.vue b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
index 1a4766c6a0..3368bafc49 100644
--- a/packages/nc-gui-v2/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
@@ -41,7 +41,7 @@ const openSwaggerLink = () => {
           <a-list-item v-if="project">
             <nuxt-link
               v-t="['e:docs']"
-              class="text-primary !no-underline !text-current py-4 font-weight-medium"
+              class="!no-underline !text-current py-4 font-semibold"
               target="_blank"
               @click="openSwaggerLink"
             >

From 03548da1938bc811c61be486f830fade97a493bb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:31:17 +0200
Subject: [PATCH 4/6] chore(gui-v2): extend windi color config

---
 .../nc-gui-v2/components/general/HelpAndSupport.vue  |  2 +-
 packages/nc-gui-v2/windi.config.ts                   | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/general/HelpAndSupport.vue b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
index 3368bafc49..4e638d1fe9 100644
--- a/packages/nc-gui-v2/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui-v2/components/general/HelpAndSupport.vue
@@ -36,7 +36,7 @@ const openSwaggerLink = () => {
       <!-- todo: i18n -->
       <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
 
-      <GeneralSocialCard show-swagger-link class="!w-full nc-social-card">
+      <GeneralSocialCard class="!w-full nc-social-card">
         <template #before>
           <a-list-item v-if="project">
             <nuxt-link
diff --git a/packages/nc-gui-v2/windi.config.ts b/packages/nc-gui-v2/windi.config.ts
index 037d3bbd39..306b909724 100644
--- a/packages/nc-gui-v2/windi.config.ts
+++ b/packages/nc-gui-v2/windi.config.ts
@@ -57,6 +57,18 @@ export default defineConfig({
         primary: 'rgba(var(--color-primary), var(--tw-text-opacity))',
         accent: 'rgba(var(--color-accent), var(--tw-text-opacity))',
       },
+      borderColor: {
+        primary: 'rgba(var(--color-primary), var(--tw-border-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-border-opacity))',
+      },
+      backgroundColor: {
+        primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
+      },
+      ringColor: {
+        primary: 'rgba(var(--color-primary), var(--tw-ring-opacity))',
+        accent: 'rgba(var(--color-accent), var(--tw-ring-opacity))',
+      },
       colors: {
         ...windiColors,
         ...themeColors,

From 99332624ea3dfa866fb41b6132525bbb1280d59a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 13:58:18 +0200
Subject: [PATCH 5/6] chore(gui-v2): add empty expand icon slot

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 6b1d779ad4..2649edbd08 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -362,6 +362,8 @@ const onMenuClose = (visible: boolean) => {
                       </div>
                     </template>
 
+                    <template #expandIcon></template>
+
                     <a-menu-item>
                       <div class="nc-project-menu-item group" @click.stop="openColorPicker('primary')">
                         <ClarityColorPickerSolid class="group-hover:text-accent" />

From 55382203df5e04915e504696bd28052c6b5e1fcd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 20:36:52 +0200
Subject: [PATCH 6/6] chore(gui-v2): cleanup imports

---
 .../components/smartsheet-toolbar/SearchData.vue          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 440254da2b..f154f6e4d4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject, ref, useSmartsheetStoreOrThrow } from '#imports'
-import { ReloadViewDataHookInj } from '~/context'
+import { ReloadViewDataHookInj, computed, inject, onClickOutside, ref, useSmartsheetStoreOrThrow } from '#imports'
 
 const reloadData = inject(ReloadViewDataHookInj)!
 
@@ -8,7 +7,9 @@ const { search, meta } = useSmartsheetStoreOrThrow()
 
 // todo: where is this value supposed to come from? it's not in the store
 const isDropdownOpen = ref(false)
+
 const searchDropdown = ref(null)
+
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
@@ -42,8 +43,7 @@ function onPressEnter() {
         :options="columns"
         dropdown-class-name="!py-0 !rounded"
         class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
-      >
-      </a-select>
+      />
     </div>
     <a-input
       v-model:value="search.query"