From cb61ef9bb182833edb2af953953da2fe911c1e1a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jul 2024 13:23:36 +1000
Subject: [PATCH] feat(ui): use color instead of super tiny icon change to
 indicate board search toggle state

You can't even see the icon, no point in changing it. Blue = active/open, Grey = closed.
---
 .../web/src/features/gallery/components/Gallery.tsx         | 5 +++--
 .../src/features/gallery/components/ImageGalleryContent.tsx | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
index 12202a30ab..feb5a9c0e1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
@@ -16,7 +16,7 @@ import { galleryViewChanged, searchTermChanged } from 'features/gallery/store/ga
 import type { CSSProperties } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MdSearch, MdSearchOff } from 'react-icons/md';
+import { PiMagnifyingGlassBold } from 'react-icons/pi';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@@ -82,7 +82,8 @@ export const Gallery = () => {
             onClick={handleClickSearch}
             tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`}
             aria-label={t('gallery.displaySearch')}
-            icon={searchTerm.length ? <MdSearchOff /> : <MdSearch />}
+            icon={<PiMagnifyingGlassBold />}
+            colorScheme={searchDisclosure.isOpen ? 'invokeBlue' : 'base'}
             variant="link"
           />
         </TabList>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index f112bf71b2..e5a54b3ae0 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -7,8 +7,7 @@ import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MdSearch, MdSearchOff } from 'react-icons/md';
-import { PiCaretDownBold, PiCaretUpBold } from 'react-icons/pi';
+import { PiCaretDownBold, PiCaretUpBold, PiMagnifyingGlassBold } from 'react-icons/pi';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
@@ -81,7 +80,8 @@ const ImageGalleryContent = () => {
                     : `${t('gallery.displayBoardSearch')}`
                 }
                 aria-label={t('gallery.displayBoardSearch')}
-                icon={boardSearchText.length ? <MdSearchOff /> : <MdSearch />}
+                icon={<PiMagnifyingGlassBold />}
+                colorScheme={boardSearchDisclosure.isOpen ? 'invokeBlue' : 'base'}
                 variant="link"
               />
             </Flex>