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,
},
},
}));