diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 74fea27927..237a38ca33 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -1,5 +1,6 @@ -import { Link, MenuItem } from '@chakra-ui/react'; +import { MenuItem } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; +import { skipToken } from '@reduxjs/toolkit/dist/query'; import { useAppToaster } from 'app/components/Toaster'; import { stateSelector } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -33,10 +34,9 @@ import { useRemoveImageFromBoardMutation, } from 'services/api/endpoints/images'; import { ImageDTO } from 'services/api/types'; +import { useDebounce } from 'use-debounce'; import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext'; import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions'; -import { useDebounce } from 'use-debounce'; -import { skipToken } from '@reduxjs/toolkit/dist/query'; type SingleSelectionMenuItemsProps = { imageDTO: ImageDTO; @@ -154,21 +154,29 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { return ( <> - - }> - {t('common.openInNewTab')} - - + } + > + {t('common.openInNewTab')} + {isClipboardAPIAvailable && ( } onClickCapture={handleCopyImage}> {t('parameters.copyImage')} )} - - } w="100%"> - {t('parameters.downloadImage')} - - + } + w="100%" + > + {t('parameters.downloadImage')} + } onClickCapture={handleRecallPrompt} diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx index fe15e15d09..70f4b12859 100644 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx @@ -1,16 +1,29 @@ -import { Flex, Link, MenuGroup, Spacer } from '@chakra-ui/react'; -import { memo } from 'react'; -import StatusIndicator from './StatusIndicator'; - -import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react'; +import { + Flex, + Menu, + MenuButton, + MenuGroup, + MenuItem, + MenuList, + Spacer, +} from '@chakra-ui/react'; import IAIIconButton from 'common/components/IAIIconButton'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { FaBars, FaBug, FaDiscord, FaKeyboard } from 'react-icons/fa'; -import { MdSettings } from 'react-icons/md'; +import { + FaBars, + FaBug, + FaCog, + FaDiscord, + FaGithub, + FaKeyboard, +} from 'react-icons/fa'; +import { menuListMotionProps } from 'theme/components/menu'; import { useFeatureStatus } from '../hooks/useFeatureStatus'; import HotkeysModal from './HotkeysModal/HotkeysModal'; import InvokeAILogoComponent from './InvokeAILogoComponent'; import SettingsModal from './SettingsModal/SettingsModal'; +import StatusIndicator from './StatusIndicator'; const SiteHeader = () => { const { t } = useTranslation(); @@ -39,29 +52,39 @@ const SiteHeader = () => { variant="link" aria-label={t('accessibility.menu')} icon={} + sx={{ boxSize: 8 }} /> - + {isGithubLinkEnabled && ( - - }> - {t('common.githubLabel')} - - + } + > + {t('common.githubLabel')} + )} {isBugLinkEnabled && ( - - }> - {t('common.reportBugLabel')} - - + } + > + {t('common.reportBugLabel')} + )} {isDiscordLinkEnabled && ( - - }> - {t('common.discordLabel')} - - + } + > + {t('common.discordLabel')} + )} @@ -71,7 +94,7 @@ const SiteHeader = () => { - }> + }> {t('common.settingsLabel')} diff --git a/invokeai/frontend/web/src/theme/components/menu.ts b/invokeai/frontend/web/src/theme/components/menu.ts index 563c5ce6a9..4ab323bdb5 100644 --- a/invokeai/frontend/web/src/theme/components/menu.ts +++ b/invokeai/frontend/web/src/theme/components/menu.ts @@ -33,12 +33,16 @@ const invokeAI = definePartsStyle((props) => ({ bg: mode('base.200', 'base.800')(props), _hover: { bg: mode('base.300', 'base.700')(props), + svg: { + opacity: 1, + }, }, _focus: { bg: mode('base.400', 'base.600')(props), }, svg: { - opacity: 0.5, + opacity: 0.7, + fontSize: 14, }, }, }));