Wire up setting the display settings

This commit is contained in:
Jackson Harper 2023-02-27 15:37:00 +08:00
parent 8794bb18cb
commit bf7d8102ae
2 changed files with 15 additions and 7 deletions

View file

@ -9,7 +9,11 @@ import { TooltipWrapped } from '../../elements/Tooltip'
const HEADER_HEIGHT = '105px'
const MOBILE_HEIGHT = '48px'
export function ReaderHeader(): JSX.Element {
type ReaderHeaderProps = {
showDisplaySettingsModal: (show: boolean) => void
}
export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
return (
<>
<VStack
@ -39,7 +43,7 @@ export function ReaderHeader(): JSX.Element {
}}
>
<LogoBox />
<ControlButtonBox />
<ControlButtonBox {...props} />
</HStack>
</VStack>
</>
@ -78,7 +82,7 @@ function LogoBox(): JSX.Element {
)
}
function ControlButtonBox(): JSX.Element {
function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
return (
<>
<HStack
@ -98,9 +102,9 @@ function ControlButtonBox(): JSX.Element {
>
<Button
style="articleActionIcon"
onClick={() =>
console.log('readerSettings.setShowEditDisplaySettingsModal(true)')
}
onClick={() => {
props.showDisplaySettingsModal(true)
}}
>
<TooltipWrapped tooltipContent="Adjust Display Settings">
<TextAa size={25} color="#6A6968" />

View file

@ -292,7 +292,11 @@ export default function Home(): JSX.Element {
/>
<Toaster />
<ReaderHeader />
<ReaderHeader
showDisplaySettingsModal={
readerSettings.setShowEditDisplaySettingsModal
}
/>
<VStack
distribution="between"