fix : minor UI changes

packages/nc-gui-v2/components.d.ts

@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -135,7 +135,7 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-2 py-[11.75px] border-b-1">
+    <div class="px-6 py-[11.75px] border-b-1">
       <a-input-search
         v-model:value="filterQuery"
         size="small"
@@ -145,14 +145,14 @@ const activeTable = computed(() => {
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
-      <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull" style="direction: rtl">
+      <div class="p-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull" style="direction: rtl">
         <div
           style="direction: ltr"
           class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
           @click="showTableList = !showTableList"
           @contextmenu="setMenuContext('main')"
         >
-          <span class="flex-grow text-bold nc-project-tree text-gray-500">
+          <span class="flex-grow text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
             {{ $t('objects.tables') }}
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
@@ -170,7 +170,7 @@ const activeTable = computed(() => {
           />
         </div>
         <div style="direction: ltr" class="flex-1">
-          <div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
+          <div v-if="tables.length" class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
               <div
                 v-for="table of tables"

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -36,9 +36,9 @@ const applyChanges = async () => {
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex align-center gap-1">
-          <MdiFilterIcon class="text-grey" />
+          <MdiFilterIcon />
           <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.filter') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -69,10 +69,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex align-center gap-1">
-          <MdiEyeOffOutline class="text-grey" />
+          <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
         </div>

packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@@ -116,9 +116,9 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 align-center">
-          <MdiFlashIcon class="text-grey" />
+          <MdiFlashIcon />
           <!-- More -->
-          <span class="!text-sm font-weight-regular">{{ $t('general.more') }}</span>
+          <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>

packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@@ -112,9 +112,9 @@ const copyLink = () => {
   <div>
     <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn">
       <div class="flex align-center gap-1" @click="genShareLink">
-        <MdiOpenInNewIcon class="text-grey" />
+        <MdiOpenInNewIcon />
         <!-- Share View -->
-        <span class="!text-sm font-weight-regular"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-sm font-weight-medium"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -38,9 +38,9 @@ watch(
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex align-center gap-1">
-          <MdiSortIcon class="text-grey" />
+          <MdiSortIcon />
           <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-regular">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-sm font-weight-medium">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -6,9 +6,8 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2" style="z-index: 7">
-    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
 
-    <SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" />
+    <SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" class="ml-1"/>
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid" />
 
@@ -18,6 +17,9 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
 
+    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink ml-2" />
+
+
     <div class="flex-1" />
   </div>
 </template>