From a91baa7b3e8f39e205c7810683fd0566aaf0472a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 20 Aug 2022 15:29:54 +0530
Subject: [PATCH] refactor(gui-v2): remove background color of add row and
 reload icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/AddRow.vue  | 23 +++++++++++++++++++
 .../components/smartsheet-toolbar/Reload.vue  | 17 ++++++++++++++
 .../components/smartsheet/Toolbar.vue         |  6 ++---
 .../smartsheet/sidebar/toolbar/AddRow.vue     | 10 ++++----
 .../smartsheet/sidebar/toolbar/Reload.vue     |  4 ++--
 5 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
new file mode 100644
index 0000000000..aa124f9f75
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
new file mode 100644
index 0000000000..5c780b1c16
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 7a8f832f39..01260b88b3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/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 />
-    <AddRow />
+    <SmartsheetToolbarReload class="mx-1" />
+    <SmartsheetToolbarAddRow class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 6d047858c7..a7053ac8bb 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/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
-      :class="{ 'hover:after:(bg-primary bg-opacity-75) group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-sidebar-right-item nc-sidebar-add-row"
-    >
-      <MdiPlusOutline :class="{ 'cursor-pointer group-hover:(!text-white)': !isLocked, 'disabled': isLocked }" @click="onClick" />
+    <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>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index eeb5ae49ff..5c780b1c16 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/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">
-      <MdiReload class="cursor-pointer group-hover:(!text-white)" @click="onClick" />
+    <div class="group flex align-center">
+      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary)" @click="onClick" />
     </div>
   </a-tooltip>
 </template>