diff options
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 35 |
1 files changed, 16 insertions, 19 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 0e7d8f5cd..b9b04a8c0 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -4,8 +4,8 @@ import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import { Section, Wrap } from './layout'; import { Button } from './button'; -import { Container } from './container'; import { Logo } from './logo'; interface HeaderProps { @@ -36,27 +36,24 @@ const Link: React.StatelessComponent<LinkProps> = props => { }; export const Header: React.StatelessComponent<HeaderProps> = ({}) => ( - <Container> - <StyledHeader> - <Link href="/next"> - <Logo/> - </Link> + <StyledHeader> + <HeaderWrap> + <Link href="/next"> + <Logo/> + </Link> - <Links> - {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)} - </Links> - <TradeButton href="#">Trade on 0x</TradeButton> - </StyledHeader> - </Container> + <Links> + {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)} + </Links> + <TradeButton href="#">Trade on 0x</TradeButton> + </HeaderWrap> + </StyledHeader> ); -const StyledHeader = styled.header` - display: flex; - flex-wrap: wrap; - text-align: center; - align-items: center; - justify-content: space-between; - padding: 1.666666667rem 0; +const StyledHeader = Section.withComponent('header'); +const HeaderWrap = styled(Wrap)` + justify-content: space-between; + align-items: center; `; const TradeButton = styled(Button)` |