Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes Report Bug icon to a bug

Browse Source
This commit is contained in:
psychedelicious 2022-11-02 11:32:07 +11:00 committed by Lincoln Stein
parent 07ae626b22
commit 16c8b23b34
3 changed files with 63 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/common/components/IAIIconButton.scss
View File

@ -8,7 +8,7 @@
background-color: var(--btn-grey-hover); background-color: var(--btn-grey-hover);
} }
&[data-selected=true] { &[data-selected='true'] {
background-color: var(--accent-color); background-color: var(--accent-color);
&:hover { &:hover {
background-color: var(--accent-color-hover); background-color: var(--accent-color-hover);
@ -17,4 +17,12 @@
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
&[data-variant='link'] {
background-color: none !important;
&:hover {
background-color: none !important;
background: none !important;
}
}
} }

1
frontend/src/common/components/IAIIconButton.tsx
View File

@ -28,6 +28,7 @@ const IAIIconButton = (props: Props) => {
<Tooltip label={tooltip} hasArrow placement={tooltipPlacement}> <Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
<IconButton <IconButton
className={`icon-button ${styleClass}`} className={`icon-button ${styleClass}`}
data-variant={props.variant}
{...rest} {...rest}
cursor={cursor ? cursor : onClick ? 'pointer' : 'unset'} cursor={cursor ? cursor : onClick ? 'pointer' : 'unset'}
onClick={onClick} onClick={onClick}

50
frontend/src/features/system/SiteHeader.tsx
View File

@ -2,10 +2,11 @@ import { IconButton, Link, Tooltip, useColorMode } from '@chakra-ui/react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { FaSun, FaMoon, FaGithub, FaDiscord } from 'react-icons/fa'; import { FaSun, FaMoon, FaGithub, FaDiscord, FaBug } from 'react-icons/fa';
import { MdHelp, MdKeyboard, MdSettings } from 'react-icons/md'; import { MdHelp, MdKeyboard, MdSettings } from 'react-icons/md';
import InvokeAILogo from '../../assets/images/logo.png'; import InvokeAILogo from '../../assets/images/logo.png';
import IAIIconButton from '../../common/components/IAIIconButton';
import HotkeysModal from './HotkeysModal/HotkeysModal'; import HotkeysModal from './HotkeysModal/HotkeysModal';
@ -44,50 +45,42 @@ const SiteHeader = () => {
<StatusIndicator /> <StatusIndicator />
<HotkeysModal> <HotkeysModal>
<div> <IAIIconButton
<Tooltip hasArrow label="Hotkeys" placement={'bottom'}>
<IconButton
aria-label="Hotkeys" aria-label="Hotkeys"
variant="link" tooltip="Hotkeys"
fontSize={24} fontSize={24}
size={'sm'} size={'sm'}
variant="link"
icon={<MdKeyboard />} icon={<MdKeyboard />}
/> />
</Tooltip>
</div>
</HotkeysModal> </HotkeysModal>
<Tooltip hasArrow label="Theme" placement={'bottom'}> <IAIIconButton
<IconButton
aria-label="Toggle Dark Mode" aria-label="Toggle Dark Mode"
tooltip="Dark Mode"
onClick={toggleColorMode} onClick={toggleColorMode}
variant="link" variant="link"
size={'sm'} size={'sm'}
fontSize={colorModeIconFontSize} fontSize={colorModeIconFontSize}
icon={colorModeIcon} icon={colorModeIcon}
/> />
</Tooltip>
<Tooltip hasArrow label="Report Bug" placement={'bottom'}> <IAIIconButton
<IconButton aria-label="Report Bug"
aria-label="Link to Github Issues" tooltip="Report Bug"
variant="link" variant="link"
fontSize={23} fontSize={19}
size={'sm'} size={'sm'}
icon={ icon={
<Link <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
isExternal <FaBug />
href="http://github.com/invoke-ai/InvokeAI/issues"
>
<MdHelp />
</Link> </Link>
} }
/> />
</Tooltip>
<Tooltip hasArrow label="Github" placement={'bottom'}> <IAIIconButton
<IconButton
aria-label="Link to Github Repo" aria-label="Link to Github Repo"
tooltip="Github"
variant="link" variant="link"
fontSize={20} fontSize={20}
size={'sm'} size={'sm'}
@ -97,11 +90,10 @@ const SiteHeader = () => {
</Link> </Link>
} }
/> />
</Tooltip>
<Tooltip hasArrow label="Discord" placement={'bottom'}> <IAIIconButton
<IconButton
aria-label="Link to Discord Server" aria-label="Link to Discord Server"
tooltip="Discord"
variant="link" variant="link"
fontSize={20} fontSize={20}
size={'sm'} size={'sm'}
@ -111,20 +103,16 @@ const SiteHeader = () => {
</Link> </Link>
} }
/> />
</Tooltip>
<SettingsModal> <SettingsModal>
<div> <IAIIconButton
<Tooltip label="Settings">
<IconButton
aria-label="Settings" aria-label="Settings"
tooltip="Settings"
variant="link" variant="link"
fontSize={24} fontSize={24}
size={'sm'} size={'sm'}
icon={<MdSettings />} icon={<MdSettings />}
/> />
</Tooltip>
</div>
</SettingsModal> </SettingsModal>
</div> </div>
</div> </div>