import * as React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import { colors } from 'ts/style/colors'; import { Footer } from 'ts/@next/components/footer'; import { Header } from 'ts/@next/components/header'; import { GlobalStyles } from 'ts/@next/constants/globalStyle'; interface Props { theme?: 'dark' | 'light' | 'gray'; children: any; } interface State { isMobileNavOpen: boolean; } interface MainProps { isNavToggled: boolean; } export interface ThemeInterface { [key: string]: { bgColor: string; darkBgColor: string; lightBgColor: string; textColor: string; paragraphColor: string; linkColor: string; mobileNavBgUpper: string; mobileNavBgLower: string; mobileNavColor: string; dropdownBg: string; dropdownButtonBg: string; dropdownBorderColor?: string; dropdownColor: string; headerButtonBg: string; footerBg: string; footerColor: string; }; } const GLOBAL_THEMES: ThemeInterface = { dark: { bgColor: '#000000', darkBgColor: '#111A19', lightBgColor: '#003831', textColor: '#FFFFFF', paragraphColor: '#FFFFFF', linkColor: colors.brandLight, mobileNavBgUpper: '#003831', mobileNavBgLower: '#022924', mobileNavColor: '#FFFFFF', dropdownBg: '#111A19', dropdownButtonBg: '#003831', dropdownColor: '#FFFFFF', headerButtonBg: '#00AE99', footerBg: '#181818', footerColor: '#FFFFFF', }, light: { bgColor: '#FFFFFF', textColor: '#000000', paragraphColor: '#474747', linkColor: colors.brandDark, mobileNavBgUpper: '#FFFFFF', mobileNavBgLower: '#F3F6F4', mobileNavColor: '#000000', dropdownBg: '#FBFBFB', dropdownButtonBg: '#F3F6F4', dropdownColor: '#003831', dropdownBorderColor: '#E4E4E4', headerButtonBg: '#003831', footerBg: '#F2F2F2', footerColor: '#000000', }, gray: { bgColor: '#e0e0e0', textColor: '#000000', paragraphColor: '#777777', linkColor: colors.brandDark, mobileNavBgUpper: '#FFFFFF', mobileNavBgLower: '#F3F6F4', mobileNavColor: '#000000', dropdownBg: '#FFFFFF', dropdownButtonBg: '#F3F6F4', dropdownColor: '#003831', headerButtonBg: '#003831', footerBg: '#181818', footerColor: '#FFFFFF', }, }; export class SiteWrap extends React.Component { public state = { isMobileNavOpen: false, }; public componentDidMount(): void { document.documentElement.style.overflowY = 'auto'; window.scrollTo(0, 0); } public toggleMobileNav = () => { this.setState({ isMobileNavOpen: !this.state.isMobileNavOpen, }, () => { const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto'; document.documentElement.style.overflowY = overflow; }); } public render(): React.ReactNode { const { children, theme = 'dark', } = this.props; const { isMobileNavOpen } = this.state; const currentTheme = GLOBAL_THEMES[theme]; return ( <> <>
{children}