feat(ui): tweak menu style, increase icon size

feat(ui) use `as` for menuitem links

I had requested this be done with the chakra `Link` component, but actually using `as` is correct according to the docs. For other components, you are supposed to use `Link` but looks like `MenuItem` has this built in.

Fixed in all places where we use it.

Also:
- fix github icon
- give menu hamburger button padding
- add menu motion props so it animates the same as other menus

feat(ui): restore ColorModeButton

@maryhipp

chore(ui): lint

feat(ui): remove colormodebutton again

sry

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 (
     <>
-      <Link href={imageDTO.image_url} target="_blank">
-        <MenuItem icon={<FaExternalLinkAlt />}>
-          {t('common.openInNewTab')}
-        </MenuItem>
-      </Link>
+      <MenuItem
+        as="a"
+        href={imageDTO.image_url}
+        target="_blank"
+        icon={<FaExternalLinkAlt />}
+      >
+        {t('common.openInNewTab')}
+      </MenuItem>
       {isClipboardAPIAvailable && (
         <MenuItem icon={<FaCopy />} onClickCapture={handleCopyImage}>
           {t('parameters.copyImage')}
         </MenuItem>
       )}
-      <Link download={true} href={imageDTO.image_url} target="_blank">
-        <MenuItem icon={<FaDownload />} w="100%">
-          {t('parameters.downloadImage')}
-        </MenuItem>
-      </Link>
+      <MenuItem
+        as="a"
+        download={true}
+        href={imageDTO.image_url}
+        target="_blank"
+        icon={<FaDownload />}
+        w="100%"
+      >
+        {t('parameters.downloadImage')}
+      </MenuItem>
       <MenuItem
         icon={<FaQuoteRight />}
         onClickCapture={handleRecallPrompt}

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={<FaBars />}
+          sx={{ boxSize: 8 }}
         />
-        <MenuList>
+        <MenuList motionProps={menuListMotionProps}>
           <MenuGroup title={t('common.communityLabel')}>
             {isGithubLinkEnabled && (
-              <Link href={githubLink} target="_blank">
-                <MenuItem icon={<FaDiscord />}>
-                  {t('common.githubLabel')}
-                </MenuItem>
-              </Link>
+              <MenuItem
+                as="a"
+                href={githubLink}
+                target="_blank"
+                icon={<FaGithub />}
+              >
+                {t('common.githubLabel')}
+              </MenuItem>
             )}
             {isBugLinkEnabled && (
-              <Link href={`${githubLink}/issues`} target="_blank">
-                <MenuItem icon={<FaBug />}>
-                  {t('common.reportBugLabel')}
-                </MenuItem>
-              </Link>
+              <MenuItem
+                as="a"
+                href={`${githubLink}/issues`}
+                target="_blank"
+                icon={<FaBug />}
+              >
+                {t('common.reportBugLabel')}
+              </MenuItem>
             )}
             {isDiscordLinkEnabled && (
-              <Link href={discordLink} target="_blank">
-                <MenuItem icon={<FaDiscord />}>
-                  {t('common.discordLabel')}
-                </MenuItem>
-              </Link>
+              <MenuItem
+                as="a"
+                href={discordLink}
+                target="_blank"
+                icon={<FaDiscord />}
+              >
+                {t('common.discordLabel')}
+              </MenuItem>
             )}
           </MenuGroup>
           <MenuGroup title={t('common.settingsLabel')}>
@@ -71,7 +94,7 @@ const SiteHeader = () => {
               </MenuItem>
             </HotkeysModal>
             <SettingsModal>
-              <MenuItem as="button" icon={<MdSettings />}>
+              <MenuItem as="button" icon={<FaCog />}>
                 {t('common.settingsLabel')}
               </MenuItem>
             </SettingsModal>

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