refactor(gui-v2): minor ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -45,6 +45,8 @@ declare module '@vue/runtime-core' {
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
+    AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']

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

@@ -37,8 +37,11 @@ const { isOpen } = useSidebar()
     <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm" class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
-
-    <ToggleDrawer v-if="!isOpen && !isPublic" class="mr-2" />
+    <template v-if="!isOpen && !isPublic">
+      <div class="border-l-1 pl-3">
+        <ToggleDrawer class="mr-2" />
+      </div>
+    </template>
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue

@@ -24,7 +24,7 @@ watch(
 
 <template>
   <div class="h-full flex flex-col w-full bg-[#eceff1] p-2">
-    <div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2 space-y-2">
+    <div ref="commentsWrapperEl" class="flex-1 min-h-[100px] overflow-y-auto scrollbar-thin-dull p-2 space-y-2">
       <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
       <template v-else>

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import {
-  computed,
-  useExpandedFormStoreOrThrow,
-  useSmartsheetRowStoreOrThrow,
-  useSmartsheetStoreOrThrow,
-  useUIPermission,
-} from '#imports'
-import MdiDoorOpen from '~icons/mdi/door-open'
-import MdiDoorClosed from '~icons/mdi/door-closed'
+import { useExpandedFormStoreOrThrow, useSmartsheetRowStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
 
 const emit = defineEmits(['cancel'])
 
@@ -28,8 +20,6 @@ const save = async () => {
   }
 }
 
-const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
-
 // todo: accept as a prop / inject
 const iconColor = '#1890ff'
 </script>
@@ -56,16 +46,15 @@ const iconColor = '#1890ff'
       <template #title>
         <div class="text-center w-full">Reload</div>
       </template>
-      <mdi-reload class="cursor-pointer select-none" />
+      <mdi-reload class="cursor-pointer select-none text-gray-500" />
     </a-tooltip>
     <a-tooltip placement="bottom">
       <template #title>
         <div class="text-center w-full">Toggle comments draw</div>
       </template>
-      <component
-        :is="drawerToggleIcon"
+      <MdiCommentTextOutline
         v-if="isUIAllowed('rowComments') && !isNew"
-        class="cursor-pointer select-none nc-toggle-comments"
+        class="cursor-pointer select-none nc-toggle-comments text-gray-500"
         @click="commentsDrawer = !commentsDrawer"
       />
     </a-tooltip>

packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@@ -117,7 +117,7 @@ export default {
     <Header @cancel="onClose" />
     <div class="!bg-gray-100 rounded flex-1">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
-        <div class="flex-1 overflow-auto scrollbar-thin-primary">
+        <div class="flex-1 overflow-auto scrollbar-thin-dull">
           <div class="w-[500px] mx-auto">
             <div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -7,7 +7,9 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
   <div :class="{ 'nc-active-btn': isOpen }">
     <a-button size="small" class="nc-toggle-right-navbar" @click="toggle(!isOpen)">
       <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
-        <MdiMenu class="!text-xs" />
+        <AntDesignMenuUnfoldOutlined v-if="isOpen" />
+        <AntDesignMenuFoldOutlined v-else />
+
         Views
       </div>
     </a-button>