diff --git a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx index d3100f4331..1cdbadc2fc 100644 --- a/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx +++ b/frontend/src/features/public-form/components/FormStartPage/FormHeader.tsx @@ -1,4 +1,4 @@ -import { RefObject, useCallback } from 'react' +import { RefObject, useCallback, useEffect, useState } from 'react' import { BiLogOutCircle } from 'react-icons/bi' import { Waypoint } from 'react-waypoint' import { @@ -18,6 +18,8 @@ import { noPrintCss } from '~utils/noPrintCss' import Button from '~components/Button' import IconButton from '~components/IconButton' +import ZoomControls from '../ZoomControls' + export type MiniHeaderProps = Pick< FormHeaderProps, | 'title' @@ -142,6 +144,30 @@ export const FormHeader = ({ [onClose, onOpen], ) + const [rootFontSize, setRootFontSize] = useState('16px') + + const setDefaultSize = () => { + setRootFontSize('16px') + console.log('set default size!') + } + + const setLargeSize = () => { + setRootFontSize('18px') + console.log('set large size!') + } + + const setLargestSize = () => { + setRootFontSize('24px') + console.log('set largest size!') + } + + useEffect(() => { + const root = document.documentElement + root.style.setProperty('font-size', rootFontSize) + // need to reset on unmount + return () => root.style.removeProperty('font-size') + }, [rootFontSize]) + if (!showHeader) return null return ( @@ -162,7 +188,8 @@ export const FormHeader = ({ ) : null} + {