92900933e5
- Added hotkey for manual inpaint: Shift + R (Updated the hotkey list to display this) - Moved Settings icon in the header to the end which is consistent with how most programs do it. - Fixed some missing useEffect dependencies. - Made the formatting of the Shorcut description text consistent. - Removed the borders around the bottom toolkit buttons. The 1px border was choppy and the entire region was looking boxed and cluttered. Now I feel it looks cleaner and is consistent with the button in the header.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { ArrowLeftIcon } from '@heroicons/react/outline'
|
|
import React from 'react'
|
|
import { useRecoilState } from 'recoil'
|
|
import { fileState } from '../../store/Atoms'
|
|
import Button from '../shared/Button'
|
|
import Shortcuts from '../Shortcuts/Shortcuts'
|
|
import useResolution from '../../hooks/useResolution'
|
|
import { ThemeChanger } from './ThemeChanger'
|
|
import SettingIcon from '../Settings/SettingIcon'
|
|
|
|
const Header = () => {
|
|
const [file, setFile] = useRecoilState(fileState)
|
|
const resolution = useResolution()
|
|
|
|
const renderHeader = () => {
|
|
return (
|
|
<header>
|
|
<div style={{ visibility: file ? 'visible' : 'hidden' }}>
|
|
<Button
|
|
icon={<ArrowLeftIcon />}
|
|
onClick={() => {
|
|
setFile(undefined)
|
|
}}
|
|
style={{ border: 0 }}
|
|
>
|
|
{resolution === 'desktop' ? 'Start New' : undefined}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="header-icons-wrapper">
|
|
<ThemeChanger />
|
|
{file && (
|
|
<div className="header-icons">
|
|
<Shortcuts />
|
|
<SettingIcon />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
return renderHeader()
|
|
}
|
|
|
|
export default Header
|