diff options
Diffstat (limited to 'packages/website/ts/components/siteWrap.tsx')
-rw-r--r-- | packages/website/ts/components/siteWrap.tsx | 146 |
1 files changed, 0 insertions, 146 deletions
diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx deleted file mode 100644 index 1f0902105..000000000 --- a/packages/website/ts/components/siteWrap.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -import { Footer } from 'ts/components/footer'; -import { Header } from 'ts/components/header'; -import { GlobalStyles } from 'ts/constants/globalStyle'; - -interface Props { - theme?: 'dark' | 'light' | 'gray'; - children: any; -} - -interface State { - isMobileNavOpen: boolean; -} - -interface MainProps { - isNavToggled: boolean; -} - -export interface ThemeValuesInterface { - bgColor: string; - darkBgColor?: string; - lightBgColor: string; - introTextColor: 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; -} - -export interface ThemeInterface { - [key: string]: ThemeValuesInterface; -} - -const GLOBAL_THEMES: ThemeInterface = { - dark: { - bgColor: '#000000', - darkBgColor: '#111A19', - lightBgColor: '#003831', - introTextColor: 'rgba(255, 255, 255, 0.75)', - 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', - lightBgColor: '#F3F6F4', - darkBgColor: '#003831', - introTextColor: 'rgba(92, 92, 92, 0.87)', - 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', - lightBgColor: '#003831', - introTextColor: 'rgba(92, 92, 92, 0.87)', - 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<Props, State> { - public state = { - isMobileNavOpen: false, - }; - - public componentDidMount(): void { - document.documentElement.style.overflowY = 'auto'; - window.scrollTo(0, 0); - } - - public toggleMobileNav = () => { - this.setState({ - isMobileNavOpen: !this.state.isMobileNavOpen, - }); - }; - - public render(): React.ReactNode { - const { children, theme = 'dark' } = this.props; - const { isMobileNavOpen } = this.state; - const currentTheme = GLOBAL_THEMES[theme]; - - return ( - <> - <ThemeProvider theme={currentTheme}> - <> - <GlobalStyles /> - - <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} /> - - <Main isNavToggled={isMobileNavOpen}>{children}</Main> - - <Footer /> - </> - </ThemeProvider> - </> - ); - } -} - -const Main = styled.main<MainProps>` - transition: transform 0.5s, opacity 0.5s; - opacity: ${props => props.isNavToggled && '0.5'}; -`; |