From bf7d8102aeee5c44cf1a2ff1b997b0a32ac72d84 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 27 Feb 2023 15:37:00 +0800
Subject: [PATCH] Wire up setting the display settings

---
 .../components/templates/reader/ReaderHeader.tsx | 16 ++++++++++------
 packages/web/pages/[username]/[slug]/index.tsx   |  6 +++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 0abb6d828..f8b466517 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -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" />
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 66c8b39cf..89449f0a2 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -292,7 +292,11 @@ export default function Home(): JSX.Element {
       />
       <Toaster />
 
-      <ReaderHeader />
+      <ReaderHeader
+        showDisplaySettingsModal={
+          readerSettings.setShowEditDisplaySettingsModal
+        }
+      />
 
       <VStack
         distribution="between"