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 ? : } + icon={} + colorScheme={searchDisclosure.isOpen ? 'invokeBlue' : 'base'} variant="link" /> 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 ? : } + icon={} + colorScheme={boardSearchDisclosure.isOpen ? 'invokeBlue' : 'base'} variant="link" />