Cleaned up siteWrap for docs and elsewhere. Converted the other sitewrap to function component.

packages/website/ts/components/annoucement_banner.tsx

@@ -5,9 +5,10 @@ import { colors } from 'ts/style/colors';
 import { zIndex } from 'ts/style/z_index';
 
 import { Button } from 'ts/components/button';
-import { ThemeInterface } from 'ts/components/siteWrap';
 import { Paragraph } from 'ts/components/text';
 
+import { IThemeInterface } from 'ts/style/theme';
+
 import { Column, Section, SectionProps } from 'ts/components/newLayout';
 
 interface Props {
@@ -16,7 +17,7 @@ interface Props {
     onDismiss?: () => void;
     mainCta?: CTAButton;
     secondaryCta?: CTAButton;
-    theme?: ThemeInterface;
+    theme?: IThemeInterface;
     dismissed?: boolean;
 }
 

packages/website/ts/components/banner.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { Button } from 'ts/components/button';
-import { ThemeInterface } from 'ts/components/siteWrap';
+import { IThemeInterface } from 'ts/style/theme';
 import { Paragraph } from 'ts/components/text';
 
 import { Column, Section } from 'ts/components/newLayout';
@@ -15,7 +15,7 @@ interface Props {
     customCta?: React.ReactNode;
     mainCta?: CTAButton;
     secondaryCta?: CTAButton;
-    theme?: ThemeInterface;
+    theme?: IThemeInterface;
 }
 
 interface CTAButton {

packages/website/ts/components/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { ThemeInterface } from 'ts/components/siteWrap';
+import { IThemeInterface } from 'ts/style/theme';
 
 import { colors } from 'ts/style/colors';
 import { withFilteredProps } from 'ts/utils/filter_props';
@@ -30,7 +30,7 @@ export interface ButtonInterface {
     textAlign?: string;
     to?: string;
     onClick?: (e: any) => any;
-    theme?: ThemeInterface;
+    theme?: IThemeInterface;
     shouldUseAnchorTag?: boolean;
 }
 

packages/website/ts/components/docs/header/header.tsx

@@ -5,13 +5,13 @@ import styled, { css } from 'styled-components';
 
 import { Link } from '@0x/react-shared';
 
-import { MobileNav } from 'ts/components/docs/mobileNav';
+import { MobileNav } from 'ts/components/docs/header/mobileNav';
 import { SearchInput } from 'ts/components/docs/search/search_input';
 
 import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { FlexWrap } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
+ import { IThemeValuesInterface } from 'ts/style/theme';
 
 import { colors } from 'ts/style/colors';
 import { zIndex } from 'ts/style/z_index';
@@ -149,7 +149,7 @@ const LinkWrap = styled.li`
     }
 `;
 
-const linkStyles = css<{ theme: ThemeValuesInterface }>`
+const linkStyles = css<{ theme: IThemeValuesInterface }>`
     color: ${({ theme }) => theme.textColor};
     opacity: 0.5;
     transition: opacity 0.35s;

packages/website/ts/components/docs/layout/docs_page_layout.tsx

@@ -6,7 +6,8 @@ import CircularProgress from 'material-ui/CircularProgress';
 
 import { Hero } from 'ts/components/docs/hero';
 import { ScrollTopArrow } from 'ts/components/docs/layout/scroll_top_arrow';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { SiteWrap } from 'ts/components/docs/layout/siteWrap';
+
 import { DocumentTitle } from 'ts/components/document_title';
 import { Section } from 'ts/components/newLayout';
 

packages/website/ts/components/docs/layout/siteWrap.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+
+import { Header } from 'ts/components/docs/header/header';
+import { Footer } from 'ts/components/footer';
+
+import { GlobalStyles } from 'ts/constants/globalStyle';
+import { GLOBAL_THEMES } from 'ts/style/theme';
+
+interface ISiteWrapProps {
+    theme?: 'dark' | 'light' | 'gray';
+    isFullScreen?: boolean;
+    children: any;
+}
+
+interface IMainProps {
+    isNavToggled: boolean;
+    isFullScreen?: boolean;
+}
+
+export const SiteWrap: React.FC<ISiteWrapProps> = props => {
+    const { children, theme = 'dark', isFullScreen } = props;
+    const [isMobileNavOpen, setIsMobileNavOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        document.documentElement.style.overflowY = 'auto';
+        window.scrollTo(0, 0);
+    }, []);
+
+    const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
+
+    return (
+        <ThemeProvider theme={GLOBAL_THEMES[theme]}>
+            <>
+                <GlobalStyles />
+
+                <Header isNavToggled={isMobileNavOpen} toggleMobileNav={toggleMobileNav} />
+
+                <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
+                    {children}
+                </Main>
+
+                <Footer />
+            </>
+        </ThemeProvider>
+    );
+};
+
+const Main = styled.main<IMainProps>`
+    transition: transform 0.5s, opacity 0.5s;
+    opacity: ${props => props.isNavToggled && '0.5'};
+    padding-bottom: 70px;
+
+    ${props =>
+        props.isFullScreen &&
+        `
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 108px - 381px);
+    `}
+`;

packages/website/ts/components/docs/siteWrap.tsx

@@ -1,143 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-
-import { Header } from 'ts/components/docs/header';
-import { Footer } from 'ts/components/footer';
-
-import { GlobalStyles } from 'ts/constants/globalStyle';
-
-import { colors } from 'ts/style/colors';
-
-interface ISiteWrapProps {
-    theme?: 'dark' | 'light' | 'gray';
-    isFullScreen?: boolean;
-    children: any;
-}
-
-interface IMainProps {
-    isNavToggled: boolean;
-    isFullScreen?: 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;
-}
-
-export const SiteWrap: React.FC<ISiteWrapProps> = props => {
-    const { children, theme = 'dark', isFullScreen } = props;
-    const [isMobileNavOpen, setIsMobileNavOpen] = useState<boolean>(false);
-
-    useEffect(() => {
-        document.documentElement.style.overflowY = 'auto';
-        window.scrollTo(0, 0);
-    }, []);
-
-    const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
-
-    return (
-        <ThemeProvider theme={GLOBAL_THEMES[theme]}>
-            <>
-                <GlobalStyles />
-
-                <Header isNavToggled={isMobileNavOpen} toggleMobileNav={toggleMobileNav} />
-
-                <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
-                    {children}
-                </Main>
-
-                <Footer />
-            </>
-        </ThemeProvider>
-    );
-};
-
-const Main = styled.main<IMainProps>`
-    transition: transform 0.5s, opacity 0.5s;
-    opacity: ${props => props.isNavToggled && '0.5'};
-    padding-bottom: 70px;
-
-    ${props =>
-        props.isFullScreen &&
-        `
-        display: flex;
-        align-items: center;
-        min-height: calc(100vh - 108px - 381px);
-    `}
-`;
-
-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',
-    },
-};

packages/website/ts/components/dropdowns/dropdown_developers.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 import { Button } from 'ts/components/button';
 import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
+ import { IThemeValuesInterface } from 'ts/style/theme';
 import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -11,7 +11,7 @@ import { constants } from 'ts/utils/constants';
 import { Link } from '../documentation/shared/link';
 
 interface Props {
-    theme: ThemeValuesInterface;
+    theme: IThemeValuesInterface;
 }
 
 interface LinkConfig {

packages/website/ts/components/dropdowns/dropdown_resources.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 import { Column, FlexWrap } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
+ import { IThemeValuesInterface } from 'ts/style/theme';
 import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -10,7 +10,7 @@ import { constants } from 'ts/utils/constants';
 import { Link } from '../documentation/shared/link';
 
 interface Props {
-    theme: ThemeValuesInterface;
+    theme: IThemeValuesInterface;
 }
 
 interface LinkConfig {

packages/website/ts/components/header.tsx

@@ -14,7 +14,7 @@ import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobileNav';
 import { FlexWrap } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
+ import { IThemeValuesInterface } from 'ts/style/theme';
 
 import { zIndex } from 'ts/style/z_index';
 
@@ -24,7 +24,7 @@ interface HeaderProps {
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
-    theme: ThemeValuesInterface;
+    theme: IThemeValuesInterface;
 }
 
 interface NavItemProps {

packages/website/ts/components/logo.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { ThemeInterface } from 'ts/components/siteWrap';
+import { IThemeInterface } from 'ts/style/theme';
 import LogoIcon from 'ts/icons/logo-with-type.svg';
 
 import { zIndex } from 'ts/style/z_index';
 
 interface LogoInterface {
-    theme?: ThemeInterface;
+    theme?: IThemeInterface;
 }
 
 // Note let's refactor this

packages/website/ts/components/siteWrap.tsx

@@ -1,152 +1,55 @@
-import * as React from 'react';
+import React, { useEffect, useState } 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 {
+import { GlobalStyles } from 'ts/constants/globalStyle';
+import { GLOBAL_THEMES } from 'ts/style/theme';
+
+interface ISiteWrapProps {
     theme?: 'dark' | 'light' | 'gray';
     isFullScreen?: boolean;
     children: any;
 }
 
-interface State {
-    isMobileNavOpen: boolean;
-}
-
-interface MainProps {
+interface IMainProps {
     isNavToggled: boolean;
     isFullScreen?: 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 const SiteWrap: React.FC<ISiteWrapProps> = props => {
+    const { children, theme = 'dark', isFullScreen } = props;
+    const [isMobileNavOpen, setIsMobileNavOpen] = useState<boolean>(false);
 
-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 {
+    useEffect(() => {
         document.documentElement.style.overflowY = 'auto';
         window.scrollTo(0, 0);
-    }
+    }, []);
 
-    public toggleMobileNav = () => {
-        this.setState({
-            isMobileNavOpen: !this.state.isMobileNavOpen,
-        });
-    };
+    const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
 
-    public render(): React.ReactNode {
-        const { children, theme = 'dark', isFullScreen } = this.props;
-        const { isMobileNavOpen } = this.state;
-        const currentTheme = GLOBAL_THEMES[theme];
-
-        return (
+    return (
+        <ThemeProvider theme={GLOBAL_THEMES[theme]}>
             <>
-                <ThemeProvider theme={currentTheme}>
-                    <>
-                        <GlobalStyles />
+                <GlobalStyles />
 
-                        <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
+                <Header isNavToggled={isMobileNavOpen} toggleMobileNav={toggleMobileNav} />
 
-                        <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
-                            {children}
-                        </Main>
+                <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
+                    {children}
+                </Main>
 
-                        <Footer />
-                    </>
-                </ThemeProvider>
+                <Footer />
             </>
-        );
-    }
-}
+        </ThemeProvider>
+    );
+};
 
-const Main = styled.main<MainProps>`
+const Main = styled.main<IMainProps>`
     transition: transform 0.5s, opacity 0.5s;
     opacity: ${props => props.isNavToggled && '0.5'};
+    padding-bottom: 70px;
 
     ${props =>
         props.isFullScreen &&

packages/website/ts/pages/explore/explore_tag_button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { ThemeInterface } from 'ts/components/siteWrap';
+import { IThemeInterface } from 'ts/style/theme';
 
 import { colors } from 'ts/style/colors';
 
@@ -14,7 +14,7 @@ export interface ButtonInterface {
     hasIcon?: boolean | string;
     padding?: string;
     onClick?: (e: any) => any;
-    theme?: ThemeInterface;
+    theme?: IThemeInterface;
 }
 
 export const ExploreTagButton: React.StatelessComponent<ButtonInterface> = (props: ButtonInterface) => {

packages/website/ts/style/theme.ts

@@ -1,5 +1,31 @@
 import * as styledComponents from 'styled-components';
 
+import { colors } from 'ts/style/colors';
+
+export interface IThemeValuesInterface {
+    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 IThemeInterface {
+    [key: string]: IThemeValuesInterface;
+}
+
 // tslint:disable:no-unnecessary-type-assertion
 const {
     default: styled,
@@ -10,8 +36,61 @@ const {
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
 // tslint:enable:no-unnecessary-type-assertion
 
-export interface IThemeInterface {}
-
-export const theme = {};
-
 export { styled, css, createGlobalStyle, keyframes, ThemeProvider };
+
+export const GLOBAL_THEMES: IThemeInterface = {
+    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',
+    },
+};