refactor(gui-v2): remove background color of add row and reload icon

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

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OpenNewRecordFormHookInj, inject } from '#imports'
+
+const isLocked = inject(IsLockedInj)
+
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj)!
+
+const onClick = () => {
+  if (!isLocked?.value) openNewRecordFormHook.trigger()
+}
+</script>
+
+<template>
+  <a-tooltip placement="bottom">
+    <template #title> {{ $t('activity.addRow') }} </template>
+    <div :class="{ 'group': !isLocked, 'disabled-ring': isLocked }" class="nc-add-row flex align-center">
+      <MdiPlusOutline
+        :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
+        @click="onClick"
+      />
+    </div>
+  </a-tooltip>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ReloadViewDataHookInj, inject } from '#imports'
+
+const reloadHook = inject(ReloadViewDataHookInj)!
+
+const onClick = () => reloadHook.trigger()
+</script>
+
+<template>
+  <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)" @click="onClick" />
+    </div>
+  </a-tooltip>
+</template>

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
-import AddRow from '~/components/smartsheet/sidebar/toolbar/AddRow.vue'
-import Reload from '~/components/smartsheet/sidebar/toolbar/Reload.vue'
 import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
@@ -32,8 +30,8 @@ const { isOpen } = useSidebar()
 
     <div class="flex-1" />
 
-    <Reload />
+    <SmartsheetToolbarReload class="mx-1" />
-    <AddRow />
+    <SmartsheetToolbarAddRow class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 

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

@@ -13,11 +13,11 @@ const onClick = () => {
 <template>
   <a-tooltip placement="bottom">
     <template #title> {{ $t('activity.addRow') }} </template>
-    <div
+    <div :class="{ 'group': !isLocked, 'disabled-ring': isLocked }" class="nc-add-row flex align-center">
-      :class="{ 'hover:after:(bg-primary bg-opacity-75) group': !isLocked, 'disabled-ring': isLocked }"
+      <MdiPlusOutline
-      class="nc-sidebar-right-item nc-sidebar-add-row"
+        :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary) ': !isLocked, 'disabled': isLocked }"
-    >
+        @click="onClick"
-      <MdiPlusOutline :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }" @click="onClick" />
+      />
     </div>
   </a-tooltip>
 </template>

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

@@ -10,8 +10,8 @@ const onClick = () => reloadHook.trigger()
   <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
+    <div class="group flex align-center">
-      <MdiReload class="cursor-pointer group-hover:(!text-white)" @click="onClick" />
+      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary)" @click="onClick" />
     </div>
   </a-tooltip>
 </template>