aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/header.tsx14
-rw-r--r--packages/website/ts/@next/components/hero.tsx6
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx23
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx22
4 files changed, 38 insertions, 27 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c16e2f7b4..b982538da 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/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>
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 9ba67df91..1ccef77d0 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/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) {
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 9e1231332..c19d4b587 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/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%;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index f2851d2d2..57fdcae43 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/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'};