[WIP] cleanup, typing

packages/website/ts/@next/components/header.tsx

@@ -11,14 +11,14 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeInteface } from 'ts/@next/components/siteWrap';
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
 import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
     isOpen?: boolean;
     location?: Location;
     isNavToggled?: boolean;
-    toggleMobileNav: () => void;
+    toggleMobileNav?: () => void;
     theme: ThemeInterface;
 }
 
@@ -117,7 +117,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         </TradeButton>
                     </MediaQuery>
 
-                    <Hamburger onClick={toggleMobileNav}/>
+                    <Hamburger isOpen={isOpen} onClick={toggleMobileNav}/>
                     <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
                 </HeaderWrap>
             </StyledHeader>
@@ -127,17 +127,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: NavItem): React.ReactNode => {
+const NavItem = (props: { link: NavItem }): React.ReactNode => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
     return (
         <LinkWrap>
-            <StyledNavLink
-                to={link.url}
-                isTransparent={true}
-                isNoBorder={true}
-            >
+            <StyledNavLink to={link.url}>
                 {link.text}
             </StyledNavLink>
 

packages/website/ts/@next/components/hero.tsx

@@ -46,7 +46,7 @@ const Section = styled.section`
     }
 `;
 
-const Wrap = styled.div`
+const Wrap = styled.div<{ isCentered?: boolean }>`
     width: calc(100% - 60px);
     margin: 0 auto;
 
@@ -64,7 +64,7 @@ const Wrap = styled.div`
     }
 `;
 
-const Title = styled.h1`
+const Title = styled.h1<{ isLarge?: any }>`
     font-size: ${props => props.isLarge ? '80px' : '58px'};
     font-weight: 300;
     line-height: 1.1;
@@ -93,7 +93,7 @@ const Description = styled.p`
     }
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ width: string }>`
     width: 100%;
 
     @media (min-width: 768px) {

packages/website/ts/@next/components/mobileNav.tsx

@@ -5,8 +5,13 @@ import {Link} from 'react-router-dom';
 
 import {WrapGrid} from 'ts/@next/components/newLayout';
 
-export class MobileNav extends React.PureComponent {
-    public render(): React.Node {
+interface Props {
+    isToggled: boolean;
+    toggleMobileNav: () => void;
+}
+
+export class MobileNav extends React.PureComponent<Props> {
+    public render(): React.ReactNode {
         const { isToggled, toggleMobileNav } = this.props;
 
         return (
@@ -14,7 +19,7 @@ export class MobileNav extends React.PureComponent {
                 <Section>
                     <h4>Products</h4>
 
-                    <List>
+                    <ul>
                         <li>
                             <Link to="#">
                                 0x instant
@@ -25,7 +30,7 @@ export class MobileNav extends React.PureComponent {
                                 0x Launch Kit
                             </Link>
                         </li>
-                    </List>
+                    </ul>
                 </Section>
 
                 <Section isDark={true}>
@@ -61,7 +66,7 @@ export class MobileNav extends React.PureComponent {
     }
 }
 
-const Wrap = styled.nav`
+const Wrap = styled.nav<{ isToggled: boolean }>`
     width: 100%;
     height: 357px;
     background-color: ${props => props.theme.mobileNavBgUpper};
@@ -98,18 +103,12 @@ const Overlay = styled.div`
     cursor: pointer;
 `;
 
-const Section = styled.div`
+const Section = styled.div<{ isDark?: boolean }>`
     width: 100%;
     padding: 15px 30px;
     background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
 `;
 
-const List = styled.ul`
-    li {
-        float: ${props => props.inline && 'left'}''
-    }
-`;
-
 const Grid = styled(WrapGrid)`
     li {
         width: 50%;

packages/website/ts/@next/components/siteWrap.tsx

@@ -14,12 +14,28 @@ interface Props {
     children: any;
 }
 
+interface State {
+    isMobileNavOpen: boolean;
+}
+
 // we proabbly want to put this somewhere else (themes)
 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;
+        dropdownColor: string;
+        headerButtonBg: string;
+        footerBg: string;
+        footerColor: string;
     };
 }
 
@@ -71,7 +87,7 @@ const GLOBAL_THEMES: ThemeInterface = {
     },
 };
 
-export class SiteWrap extends React.Component<Props> {
+export class SiteWrap extends React.Component<Props, State> {
     public state = {
         isMobileNavOpen: false,
     };
@@ -85,7 +101,7 @@ export class SiteWrap extends React.Component<Props> {
         });
     }
 
-    public render(): React.Node {
+    public render(): React.ReactNode {
         const {
             children,
             theme = 'dark',
@@ -110,7 +126,7 @@ export class SiteWrap extends React.Component<Props> {
     }
 }
 
-const Main = styled.main`
+const Main = styled.main<{ isNavtoggled: boolean }>`
     transition: transform 0.5s, opacity 0.5s;
     transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0);
     opacity: ${props => props.isNavToggled && '0.5'};