From f95a942f6e8c753812a1989ed4e149fb89fff590 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 14 Aug 2023 15:45:35 +0530
Subject: [PATCH] chore: smart view / tag hover style

---
 .../src/javascripts/Components/Tags/SmartViewsListItem.tsx | 4 ++--
 .../web/src/javascripts/Components/Tags/TagsListItem.tsx   | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
index 9f6441bed..8e0ee411b 100644
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -115,7 +115,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
       <div
         role="button"
         tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-        className={classNames('tag px-3.5', isSelected && 'selected', isFaded && 'opacity-50')}
+        className={classNames('tag group px-3.5', isSelected && 'selected', isFaded && 'opacity-50')}
         onClick={selectCurrentTag}
         onContextMenu={(event) => {
           event.preventDefault()
@@ -131,7 +131,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
       >
         <div className="tag-info">
           <div className={'tag-icon mr-2'}>
-            <Icon type={view.iconString} className={iconClass} />
+            <Icon type={view.iconString} className={classNames(iconClass, 'group-hover:text-text')} />
           </div>
           {isEditing ? (
             <input
diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index d4d3cfd8c..5c7024c31 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -260,7 +260,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
         <div
           role="button"
           tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-          className={classNames('tag px-3.5', isSelected && 'selected', isBeingDraggedOver && 'is-drag-over')}
+          className={classNames('tag group px-3.5', isSelected && 'selected', isBeingDraggedOver && 'is-drag-over')}
           onClick={selectCurrentTag}
           ref={tagRef}
           style={{
@@ -282,7 +282,10 @@ export const TagsListItem: FunctionComponent<Props> = observer(
             <div onClick={selectCurrentTag} className={'tag-icon draggable mr-2'}>
               <Icon
                 type={tag.iconString as IconType}
-                className={`cursor-pointer ${isSelected ? 'text-info' : 'text-neutral'}`}
+                className={classNames(
+                  'cursor-pointer group-hover:text-text',
+                  isSelected ? 'text-info' : 'text-neutral',
+                )}
               />
             </div>