Merge pull request #3287 from nocodb/fix/menu-active-styles

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
@@ -140,22 +138,27 @@ 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>
-          <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>
@@ -166,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>
@@ -177,9 +180,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>

packages/nc-gui-v2/components/general/HelpAndSupport.vue

@@ -36,12 +36,12 @@ 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
               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"
             >

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"

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" />

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,