refactor(nc-gui): update smartsheet toolbar button styles

packages/nc-gui/assets/style.scss

@@ -271,3 +271,7 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
+
+.nc-toolbar-btn {
+  @apply shadow-sm rounded !border border-slate-300 color-transition;
+}

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

@@ -14,7 +14,7 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    class="nc-table-toolbar w-full py-1 flex gap-2 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
     style="z-index: 7"
   >
     <LazySmartsheetToolbarViewActions
@@ -25,7 +25,7 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarViewInfo v-if="!isUIAllowed('dataInsert') && !isPublic" />
 
-    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" />
 
     <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
@@ -37,11 +37,11 @@ const { allowCSVDownload } = useSharedView()
 
     <div class="flex-1" />
 
-    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
+    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" />
 
-    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />
+    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" />
 
-    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mx-2" />
 
     <template v-if="!isOpen && !isPublic">
       <div class="border-l-1 pl-3">

packages/nc-gui/components/smartsheet/toolbar/AddRow.vue

@@ -16,7 +16,7 @@ const onClick = () => {
     <div
       v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-add-new-row-btn flex align-center"
+      class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
     >
       <MdiPlusOutline
         :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"

packages/nc-gui/components/smartsheet/toolbar/Reload.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, inject, useNuxtApp } from '#imports'
+import { ReloadViewDataHookInj, inject, ref, useNuxtApp, watch } from '#imports'
 
-const { $e } = useNuxtApp()
+const { $e, $state } = useNuxtApp()
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
+const isReloading = ref(false)
+
 const onClick = () => {
   $e('a:table:reload:navbar')
+  isReloading.value = true
   reloadHook.trigger()
+
+  const stop = watch($state.isLoading, (isLoading) => {
+    if (!isLoading) {
+      isReloading.value = false
+      stop()
+    }
+  })
 }
 </script>
 
@@ -15,8 +25,12 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="group flex align-center">
-      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn" @click="onClick" />
+    <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
+      <MdiReload
+        class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
+        :class="isReloading ? 'animate-spin' : ''"
+        @click="onClick"
+      />
     </div>
   </a-tooltip>
 </template>

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

@@ -153,8 +153,9 @@ watch(passwordProtected, (value) => {
       v-e="['c:view:share']"
       outlined
       class="nc-btn-share-view nc-toolbar-btn"
+      @click="genShareLink"
     >
-      <div class="flex items-center gap-1" @click="genShareLink">
+      <div class="flex items-center gap-1">
         <MdiOpenInNew />
         <!-- Share View -->
         <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>