From 32997bbb5f684eebbf3d1202f9acc60d4d93cd39 Mon Sep 17 00:00:00 2001
From: Naveen MR <oof1lab@gmail.com>
Date: Fri, 12 Aug 2022 15:24:00 +0100
Subject: [PATCH] fix : UI improvements

---
 .../nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue  | 4 ++--
 .../nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue    | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue   | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue  | 2 +-
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue          | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 949f5f46b2..6b730127ff 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -112,7 +112,7 @@ defineExpose({
 
 <template>
   <div
-    class="p-6 menu-filter-dropdown bg-gray-50"
+    class="p-6 menu-filter-dropdown bg-gray-50 !border"
     :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
@@ -272,7 +272,7 @@ defineExpose({
 <style scoped>
 .nc-filter-grid {
   display: grid;
-  grid-template-columns: 18px 70px auto auto auto;
+  grid-template-columns: 18px 75px auto auto auto;
   @apply gap-[12px]
   align-items: center;
 }
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 0068c50bbe..a2cbb0e0cd 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -79,7 +79,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto" @click.stop>
+      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 74669ff137..ba4ba4fe5e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -117,7 +117,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
         </div>
       </a-button>
       <template #overlay>
-        <div class="bg-white shadow-lg">
+        <div class="bg-white shadow-lg !border">
           <div>
             <div class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadIcon />
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 6c7cb7996a..c0b00bfafa 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -46,7 +46,7 @@ watch(
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto">
+      <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border">
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
             <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 545cbfdba3..db68acbc11 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -15,10 +15,10 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
     <SmartsheetToolbarShareView v-if="isForm || isGrid" />
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
+    <div class="flex-1" />
+    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
 
-    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink ml-2" />
 
-    <div class="flex-1" />
   </div>
 </template>