From e7944c427d40917b3528303b193092527da0eb79 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:04:25 +1000
Subject: [PATCH] feat(ui): revised viewer toggle @joshistoast

---
 .../ImageViewer/ViewerToggleMenu.tsx          | 98 ++++++++-----------
 1 file changed, 42 insertions(+), 56 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
index 7dc13afb48..78a57bf192 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -1,18 +1,8 @@
-import {
-  Button,
-  Flex,
-  Icon,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Text,
-} from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi';
+import { PiEyeBold, PiPencilBold } from 'react-icons/pi';
 
 export const ViewerToggleMenu = () => {
   const { t } = useTranslation();
@@ -21,49 +11,45 @@ export const ViewerToggleMenu = () => {
   useHotkeys('esc', imageViewer.onClose, [imageViewer]);
 
   return (
-    <Popover isLazy>
-      <PopoverTrigger>
-        <Button variant="outline" data-testid="toggle-viewer-menu-button" pointerEvents="auto">
-          <Flex gap={3} w="full" alignItems="center">
-            {imageViewer.isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
-            <Text fontSize="md">{imageViewer.isOpen ? t('common.viewing') : t('common.editing')}</Text>
-            <Icon as={PiCaretDownBold} />
-          </Flex>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent p={2} pointerEvents="auto">
-        <PopoverArrow />
-        <PopoverBody>
-          <Flex flexDir="column">
-            <Button onClick={imageViewer.onOpen} variant="ghost" h="auto" w="auto" p={2}>
-              <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'visible' : 'hidden'} />
-                <Flex flexDir="column" gap={2} alignItems="flex-start">
-                  <Text fontWeight="semibold" color="base.100">
-                    {t('common.viewing')}
-                  </Text>
-                  <Text fontWeight="normal" color="base.300">
-                    {t('common.viewingDesc')}
-                  </Text>
-                </Flex>
-              </Flex>
-            </Button>
-            <Button onClick={imageViewer.onClose} variant="ghost" h="auto" w="auto" p={2}>
-              <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'hidden' : 'visible'} />
-                <Flex flexDir="column" gap={2} alignItems="flex-start">
-                  <Text fontWeight="semibold" color="base.100">
-                    {t('common.editing')}
-                  </Text>
-                  <Text fontWeight="normal" color="base.300">
-                    {t('common.editingDesc')}
-                  </Text>
-                </Flex>
-              </Flex>
-            </Button>
-          </Flex>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <Flex gap={4} alignItems="center" justifyContent="center">
+      <ButtonGroup size="md">
+        <Tooltip
+          hasArrow
+          label={
+            <Flex flexDir="column">
+              <Text fontWeight="semibold">{t('common.viewing')}</Text>
+              <Text fontWeight="normal">{t('common.viewingDesc')}</Text>
+            </Flex>
+          }
+        >
+          <IconButton
+            icon={<PiEyeBold />}
+            onClick={imageViewer.onOpen}
+            variant={imageViewer.isOpen ? 'solid' : 'outline'}
+            colorScheme={imageViewer.isOpen ? 'invokeBlue' : 'base'}
+            aria-label={t('common.viewing')}
+            w={12}
+          />
+        </Tooltip>
+        <Tooltip
+          hasArrow
+          label={
+            <Flex flexDir="column">
+              <Text fontWeight="semibold">{t('common.editing')}</Text>
+              <Text fontWeight="normal">{t('common.editingDesc')}</Text>
+            </Flex>
+          }
+        >
+          <IconButton
+            icon={<PiPencilBold />}
+            onClick={imageViewer.onClose}
+            variant={!imageViewer.isOpen ? 'solid' : 'outline'}
+            colorScheme={!imageViewer.isOpen ? 'invokeBlue' : 'base'}
+            aria-label={t('common.editing')}
+            w={12}
+          />
+        </Tooltip>
+      </ButtonGroup>
+    </Flex>
   );
 };