diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 22:45:04 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 22:45:04 +0800 |
commit | 8acb25f577feaea910ef0c1121aaba2ea177e718 (patch) | |
tree | b875844cbafd5d4e1a287b1d20e712ce2adddc70 /packages/website/ts/@next/components/header.tsx | |
parent | eec40080a06bf5dbc0661a5929e5cbb8d1b88911 (diff) | |
download | dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.gz dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.bz2 dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.lz dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.xz dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.tar.zst dexon-sol-tools-8acb25f577feaea910ef0c1121aaba2ea177e718.zip |
Refactors buttons/links/header
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 66 |
1 files changed, 19 insertions, 47 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index dfe9028c3..a6bbe4d65 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,20 +1,15 @@ import _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; - import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; -import { Button } from 'ts/@next/components/button'; +import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; import { Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; interface HeaderProps { } -interface LinkProps { - href: string; -} - const links = [ { url: '/next/why', text: 'Why 0x' }, { url: '/next/0x-instant', text: 'Products' }, @@ -26,53 +21,30 @@ const links = [ export const Header: React.StatelessComponent<HeaderProps> = ({}) => ( <StyledHeader> <HeaderWrap> - <Link href="/next"> + <ReactRouterLink to="/next"> <Logo/> - </Link> - - <Links> - {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)} - </Links> - <TradeButton href="#">Trade on 0x</TradeButton> + </ReactRouterLink> + + <ButtonWrap> + {_.map(links, (link, index) => ( + <Link + key={`hb-${index}`} + href={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </Link> + ))} + </ButtonWrap> + + <Button href="#">Trade on 0x</Button> </HeaderWrap> </StyledHeader> ); -const Link: React.StatelessComponent<LinkProps> = props => { - const { children, href } = props; - - return ( - <StyledRouterLink to={href}> - {children} - </StyledRouterLink> - ); -}; - const StyledHeader = Section.withComponent('header'); const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; `; - -const TradeButton = styled(Button)` - @media (max-width: 999px) { - display: none; - } -`; - -const Links = styled.div` - display: flex; - justify-content: space-around; -`; - -const StyledRouterLink = styled(ReactRouterLink)` - color: rgba(255, 255, 255, 0.5); - font-size: 1rem; - margin: 0 1.666666667em; - transition: color 0.25s ease-in-out; - text-decoration: none; - - &:hover { - color: rgba(255, 255, 255, 1); - } -`; |