From 96db9016a5f8539d97661a1d2df5c4ca9dded541 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 6 Oct 2023 15:00:26 +0530
Subject: [PATCH] fix: hover effect on toolabr icons

---
 packages/nc-gui/assets/nc-icons/fields.svg           | 12 ++++++------
 packages/nc-gui/assets/nc-icons/filter.svg           |  2 +-
 packages/nc-gui/assets/nc-icons/group.svg            |  6 +++---
 packages/nc-gui/assets/nc-icons/super-admin.svg      |  7 ++++++-
 .../smartsheet/toolbar/ColumnFilterMenu.vue          |  7 ++-----
 .../components/smartsheet/toolbar/GroupByMenu.vue    |  3 +--
 .../components/smartsheet/toolbar/SortListMenu.vue   |  4 +---
 packages/nc-gui/utils/iconUtils.ts                   |  8 ++++++++
 8 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/assets/nc-icons/fields.svg b/packages/nc-gui/assets/nc-icons/fields.svg
index ad389d64e0..1922eb13a1 100644
--- a/packages/nc-gui/assets/nc-icons/fields.svg
+++ b/packages/nc-gui/assets/nc-icons/fields.svg
@@ -1,8 +1,8 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.3335 12H14.0002" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 12H2.00667" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.3335 8H14.0002" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 8H2.00667" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.3335 4H14.0002" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 4H2.00667" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.3335 12H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 12H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.3335 8H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.3335 4H14.0002" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 4H2.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/nc-icons/filter.svg b/packages/nc-gui/assets/nc-icons/filter.svg
index 0369fd2c1b..4779e17a99 100644
--- a/packages/nc-gui/assets/nc-icons/filter.svg
+++ b/packages/nc-gui/assets/nc-icons/filter.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6668 2H1.3335L6.66683 8.30667V12.6667L9.3335 14V8.30667L14.6668 2Z" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6668 2H1.3335L6.66683 8.30667V12.6667L9.3335 14V8.30667L14.6668 2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/nc-icons/group.svg b/packages/nc-gui/assets/nc-icons/group.svg
index 3f57b18319..3d0c09d23f 100644
--- a/packages/nc-gui/assets/nc-icons/group.svg
+++ b/packages/nc-gui/assets/nc-icons/group.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 5.33331V14H2V5.33331" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.6665 8H9.33317" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.3332 2H0.666504V5.33333H15.3332V2Z" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 5.33331V14H2V5.33331" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.6665 8H9.33317" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3332 2H0.666504V5.33333H15.3332V2Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/nc-icons/super-admin.svg b/packages/nc-gui/assets/nc-icons/super-admin.svg
index d03e84861a..45cdf43031 100644
--- a/packages/nc-gui/assets/nc-icons/super-admin.svg
+++ b/packages/nc-gui/assets/nc-icons/super-admin.svg
@@ -4,10 +4,15 @@
 </mask>
 <g mask="url(#mask0_1882_74955)">
 <path d="M7.33333 7.99996C6.6 7.99996 5.97222 7.73885 5.45 7.21663C4.92778 6.6944 4.66667 6.06663 4.66667 5.33329C4.66667 4.59996 4.92778 3.97218 5.45 3.44996C5.97222 2.92774 6.6 2.66663 7.33333 2.66663C8.06667 2.66663 8.69444 2.92774 9.21667 3.44996C9.73889 3.97218 10 4.59996 10 5.33329C10 6.06663 9.73889 6.6944 9.21667 7.21663C8.69444 7.73885 8.06667 7.99996 7.33333 7.99996ZM2 12V11.4666C2 11.1 2.09444 10.7555 2.28333 10.4333C2.47222 10.1111 2.73333 9.86663 3.06667 9.69996C3.63333 9.41107 4.27222 9.16663 4.98333 8.96663C5.69444 8.76663 6.47778 8.66663 7.33333 8.66663H7.56667C7.63333 8.66663 7.7 8.67774 7.76667 8.69996C7.67778 8.89996 7.60278 9.10829 7.54167 9.32496C7.48056 9.54163 7.43333 9.76663 7.4 9.99996H7.33333C6.54444 9.99996 5.83611 10.1 5.20833 10.3C4.58056 10.5 4.06667 10.7 3.66667 10.9C3.56667 10.9555 3.48611 11.0333 3.425 11.1333C3.36389 11.2333 3.33333 11.3444 3.33333 11.4666V12H7.53333C7.6 12.2333 7.68889 12.4638 7.8 12.6916C7.91111 12.9194 8.03333 13.1333 8.16667 13.3333H3.33333C2.96667 13.3333 2.65278 13.2027 2.39167 12.9416C2.13056 12.6805 2 12.3666 2 12ZM7.33333 6.66663C7.7 6.66663 8.01389 6.53607 8.275 6.27496C8.53611 6.01385 8.66667 5.69996 8.66667 5.33329C8.66667 4.96663 8.53611 4.65274 8.275 4.39163C8.01389 4.13051 7.7 3.99996 7.33333 3.99996C6.96667 3.99996 6.65278 4.13051 6.39167 4.39163C6.13056 4.65274 6 4.96663 6 5.33329C6 5.69996 6.13056 6.01385 6.39167 6.27496C6.65278 6.53607 6.96667 6.66663 7.33333 6.66663Z" fill="currentColor" stroke="none"/>
-<path d="M10.4828 13.8679L10.4824 13.8674L8.05657 11.0906L10.4828 13.8679ZM10.4828 13.8679C10.55 13.944 10.6295 14.0024 10.7207 14.0418C10.8102 14.0804 10.9036 14.1 11 14.1C11.0964 14.1 11.1898 14.0804 11.2793 14.0418C11.3705 14.0024 11.45 13.944 11.5172 13.8679L11.5176 13.8674M10.4828 13.8679L11.5176 13.8674M7.97336 10.3756L8.55759 9.25797L8.55927 9.25474L8.55933 9.25477C8.62026 9.14788 8.70377 9.06179 8.80875 8.99766C8.91566 8.93233 9.03434 8.9 9.16243 8.9H12.8376C12.9657 8.9 13.0843 8.93233 13.1913 8.99766C13.2962 9.06179 13.3797 9.14788 13.4407 9.25477L13.4425 9.25794L13.4424 9.25797L14.0266 10.3756C14.0538 10.4227 14.0731 10.4726 14.0843 10.5251C14.0947 10.5743 14.1 10.6235 14.1 10.6727L7.97336 10.3756ZM7.97336 10.3756C7.94624 10.4227 7.92688 10.4726 7.91574 10.5251L7.97336 10.3756ZM11.5176 13.8674L13.9434 11.0906M11.5176 13.8674L13.9434 11.0906M9.97116 9.55908L9.51524 10.4303H8.71344L9.16893 9.5599C9.16905 9.55983 9.16918 9.55974 9.16934 9.55965L9.97116 9.55908ZM9.97116 9.55908H9.17043C9.1702 9.55908 9.17026 9.55909 9.17043 9.55905C9.17046 9.55905 9.1705 9.55904 9.17053 9.55903C9.17064 9.559 9.17061 9.559 9.17043 9.55907C9.17024 9.55915 9.16989 9.55932 9.16934 9.55965L9.97116 9.55908ZM13.9434 11.0906C13.995 11.0317 14.0344 10.9664 14.0608 10.8949L13.9434 11.0906ZM7.9 10.6727C7.9 10.7497 7.91295 10.8239 7.93916 10.8949L7.91574 10.5252C7.9053 10.5743 7.9 10.6235 7.9 10.6727ZM7.93916 10.8949C7.96557 10.9663 8.005 11.0316 8.05652 11.0905L7.93916 10.8949ZM11.725 10.4303H10.275L10.731 9.55908H11.269L11.725 10.4303ZM8.95191 11.0894H10.6598V13.0534L8.95191 11.0894ZM11.3402 11.0894H13.0481L11.3402 13.0534V11.0894ZM12.0288 9.55908H12.8296C12.8298 9.55908 12.8297 9.55909 12.8296 9.55905C12.8295 9.55905 12.8295 9.55904 12.8295 9.55903C12.8294 9.559 12.8294 9.559 12.8296 9.55907C12.8298 9.55915 12.8301 9.55933 12.8307 9.55965C12.8308 9.55974 12.831 9.55983 12.8311 9.5599L13.2866 10.4303H12.4848L12.0288 9.55908ZM12.8303 9.55841L12.8303 9.55842L12.8303 9.55841Z" fill="currentColor" stroke="none"/>
+<path d="M11 14C10.9117 14 10.826 13.9815 10.7429 13.9444C10.6597 13.9074 10.587 13.8543 10.5247 13.7852L8.14026 11.0741C8.09351 11.0198 8.05844 10.9605 8.03506 10.8963C8.01169 10.8321 8 10.7654 8 10.6963C8 10.6519 8.0039 10.6062 8.01169 10.5593C8.01948 10.5123 8.03636 10.4691 8.06234 10.4296L8.64675 9.32593C8.7039 9.22716 8.78052 9.14815 8.87662 9.08889C8.97273 9.02963 9.08052 9 9.2 9H12.8C12.9195 9 13.0273 9.02963 13.1234 9.08889C13.2195 9.14815 13.2961 9.22716 13.3532 9.32593L13.9377 10.4296C13.9636 10.4691 13.9805 10.5123 13.9883 10.5593C13.9961 10.6062 14 10.6519 14 10.6963C14 10.7654 13.9883 10.8321 13.9649 10.8963C13.9416 10.9605 13.9065 11.0198 13.8597 11.0741L11.4753 13.7852C11.413 13.8543 11.3403 13.9074 11.2571 13.9444C11.174 13.9815 11.0883 14 11 14ZM10.2597 10.4815H11.7403L11.2727 9.59259H10.7273L10.2597 10.4815ZM10.6883 13.0519V11.0741H8.95844L10.6883 13.0519ZM11.3117 13.0519L13.0416 11.0741H11.3117V13.0519ZM12.4338 10.4815H13.2597L12.7922 9.59259H11.9662L12.4338 10.4815ZM8.74026 10.4815H9.56623L10.0338 9.59259H9.20779L8.74026 10.4815Z" fill="currentColor" stroke="currentColor" stroke-width="0.3"/>
 </g>
 </svg>
 
 
 
 
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index d907947729..8c0a6f2e3b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type ColumnFilter from './ColumnFilter.vue'
 import {
   ActiveViewInj,
   IsLockedInj,
@@ -11,10 +10,9 @@ import {
   useSmartsheetStoreOrThrow,
   useViewFilters,
   watch,
+  iconMap,
 } from '#imports'
 
-import FilterIcon from '~icons/nc-icons/filter'
-
 const isLocked = inject(IsLockedInj, ref(false))
 
 const activeView = inject(ActiveViewInj, ref())
@@ -63,8 +61,7 @@ useMenuCloseOnEsc(open)
     <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-2">
-          <FilterIcon class="h-4 w-4" />
-
+          <component :is="iconMap.filter" class="h-4 w-4" />
           <!-- Filter -->
           <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.filter') }}</span>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 070cdd8f36..51adf27125 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -15,7 +15,6 @@ import {
   useNuxtApp,
   useSmartsheetStoreOrThrow,
 } from '#imports'
-import GroupIcon from '~icons/nc-icons/group'
 
 const groupingUidt = [
   UITypes.SingleSelect,
@@ -220,7 +219,7 @@ onMounted(async () => {
     <div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">
       <a-button v-e="['c:group-by']" class="nc-group-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
-          <GroupIcon class="h-4 w-4" />
+          <component :is="iconMap.group" class="h-4 w-4" />
 
           <!-- Group By -->
           <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.groupBy') }}</span>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index c17a53d938..d84fcb799d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -17,8 +17,6 @@ import {
   watch,
 } from '#imports'
 
-import SortIcon from '~icons/nc-icons/sort'
-
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
@@ -115,7 +113,7 @@ watch(open, () => {
     <div :class="{ 'nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
-          <SortIcon class="h-4 w-4" />
+          <component :is="iconMap.sort" class="h-4 w-4" />
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.sort') }}</span>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 3f21f5543b..6c26e296e6 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -99,7 +99,12 @@ import Editor from '~icons/nc-icons/editor'
 import Commentor from '~icons/nc-icons/commentor'
 import Viewer from '~icons/nc-icons/viewer'
 import NoAccess from '~icons/nc-icons/no-access'
+
+// toolbar
 import Fields from '~icons/nc-icons/fields'
+import Filter from '~icons/nc-icons/filter'
+import Group from '~icons/nc-icons/group'
+import Sort from '~icons/nc-icons/sort'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -249,6 +254,9 @@ import Fields from '~icons/nc-icons/fields'
 } as const */
 
 export const iconMap = {
+  sort: Sort,
+  group: Group,
+  filter: Filter,
   fields: Fields,
   mm: ManytoManyIcon,
   hm: HasManyIcon,