From 3e542e4158ceece9b2fae7280f94cccf073207b5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 16:23:10 +0530
Subject: [PATCH] refactor(gui): remove outline and provide a simple transition
 for icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss              |  5 +++++
 .../smartsheet/expanded-form/Header.vue        | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 82c97d0136..3cd427b4b9 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -324,3 +324,8 @@ a {
 .nc-drawer-expanded-form .ant-drawer-content-wrapper {
   transition: width 0.3s !important;
 }
+
+
+.nc-icon-transition {
+  @apply transform transition-transform !hover:(scale-115) !active:(scale-100)
+}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index ef7144b3f3..f9030ae66d 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -108,7 +108,7 @@ const onConfirmDeleteRowClick = async () => {
       <template #title>
         <div class="text-center w-full">{{ $t('general.reload') }}</div>
       </template>
-      <mdi-reload v-if="!isNew" class="cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" />
+      <mdi-reload v-if="!isNew" class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" />
     </a-tooltip>
     <a-tooltip placement="bottom">
       <template #title>
@@ -117,7 +117,7 @@ const onConfirmDeleteRowClick = async () => {
       </template>
       <mdi-link
         v-if="!isNew"
-        class="cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
+        class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
         @click="copyRecordUrl"
       />
     </a-tooltip>
@@ -130,7 +130,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiCommentTextOutline
         v-if="isUIAllowed('rowComments') && !isNew"
         v-e="['c:row-expand:comment-toggle']"
-        class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
         @click="commentsDrawer = !commentsDrawer"
       />
     </a-tooltip>
@@ -143,7 +143,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiContentCopy
         v-if="isUIAllowed('xcDatatableEditable') && !isNew"
         v-e="['c:row-expand:duplicate']"
-        class="cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
         @click="!isNew && emit('duplicateRow')"
       />
     </a-tooltip>
@@ -156,7 +156,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiDeleteOutline
         v-if="isUIAllowed('xcDatatableEditable') && !isNew"
         v-e="['c:row-expand:delete']"
-        class="cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
         @click="!isNew && onDeleteRowClick()"
       />
     </a-tooltip>
@@ -196,7 +196,7 @@ const onConfirmDeleteRowClick = async () => {
         <div class="text-center w-full">{{ $t('general.close') }}</div>
       </template>
       <MdiCloseCircleOutline
-        class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
         @click="emit('cancel')"
       />
     </a-tooltip>
@@ -206,3 +206,9 @@ const onConfirmDeleteRowClick = async () => {
     </a-modal>
   </div>
 </template>
+
+<style scoped>
+:deep(svg) {
+  @apply outline-none;
+}
+</style>