diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
commit | abdf91c691b924b75d71db49fba296da9c8ddcac (patch) | |
tree | 78e62a107f1de7f3b16dd63bdbc039ab26b561a3 /packages/website/ts/components/siteWrap.tsx | |
parent | 9b540fd8e52e7578d3749e6d9ef9cd97d602ffb3 (diff) | |
download | dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.gz dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.bz2 dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.lz dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.xz dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.zst dexon-0x-contracts-abdf91c691b924b75d71db49fba296da9c8ddcac.zip |
feat: move all @next files to non @next directory
Diffstat (limited to 'packages/website/ts/components/siteWrap.tsx')
-rw-r--r-- | packages/website/ts/components/siteWrap.tsx | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx new file mode 100644 index 000000000..75cb9a268 --- /dev/null +++ b/packages/website/ts/components/siteWrap.tsx @@ -0,0 +1,149 @@ +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 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'}; +`; |