diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index cbfb87d4a..21b80a503 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -83,45 +83,21 @@ const SoapboxMount = () => { const me = useAppSelector(state => state.me); const instance = useAppSelector(state => state.instance); const account = useOwnAccount(); - const settings = useSettings(); const soapboxConfig = useSoapboxConfig(); const features = useFeatures(); - const locale = useLocale(); const waitlisted = account && !account.source.get('approved', true); const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding); const showOnboarding = account && !waitlisted && needsOnboarding; const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; - const systemTheme = useSystemTheme(); - const userTheme = settings.get('themeMode'); - const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark'); const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true; - const themeCss = generateThemeCss(soapboxConfig); - // @ts-ignore: I don't actually know what these should be, lol const shouldUpdateScroll = (prevRouterProps, { location }) => { return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); }; - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', { - 'no-reduce-motion': !settings.get('reduceMotion'), - 'underline-links': settings.get('underlineLinks'), - 'dyslexic': settings.get('dyslexicFont'), - 'demetricator': settings.get('demetricator'), - }); - - const helmet = ( - - - - {themeCss && } - {darkMode && } - - - ); - /** Render the onboarding flow. */ const renderOnboarding = () => ( @@ -193,7 +169,6 @@ const SoapboxMount = () => { <> - {helmet} {renderBody()} @@ -266,13 +241,52 @@ const SoapboxLoad: React.FC = ({ children }) => { ); }; +interface ISoapboxHead { + children: React.ReactNode, +} + +/** Injects metadata into site head with Helmet. */ +const SoapboxHead: React.FC = ({ children }) => { + const locale = useLocale(); + const settings = useSettings(); + const soapboxConfig = useSoapboxConfig(); + const systemTheme = useSystemTheme(); + + const userTheme = settings.get('themeMode'); + const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark'); + const themeCss = generateThemeCss(soapboxConfig); + + const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', { + 'no-reduce-motion': !settings.get('reduceMotion'), + 'underline-links': settings.get('underlineLinks'), + 'dyslexic': settings.get('dyslexicFont'), + 'demetricator': settings.get('demetricator'), + }); + + return ( + <> + + + + {themeCss && } + {darkMode && } + + + + {children} + + ); +}; + /** The root React node of the application. */ -const Soapbox = () => { +const Soapbox: React.FC = () => { return ( - - - + + + + + ); };