diff options
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 14 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/mobileNav.tsx | 23 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 22 |
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'}; |