aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 22:45:04 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 22:45:04 +0800
commit8acb25f577feaea910ef0c1121aaba2ea177e718 (patch)
treeb875844cbafd5d4e1a287b1d20e712ce2adddc70 /packages/website/ts/@next/components
parenteec40080a06bf5dbc0661a5929e5cbb8d1b88911 (diff)
downloaddexon-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')
-rw-r--r--packages/website/ts/@next/components/button.tsx24
-rw-r--r--packages/website/ts/@next/components/header.tsx66
-rw-r--r--packages/website/ts/@next/components/newsletterForm.tsx3
3 files changed, 36 insertions, 57 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2f96759ce..2c153788a 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -1,3 +1,4 @@
+import { History } from 'history';
import * as React from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
@@ -5,15 +6,19 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
- children: Node | string;
+ color?: string;
+ children?: Node | string;
isTransparent?: boolean;
+ isNoBorder?: boolean;
+ isNoPadding?: boolean;
hasIcon?: boolean | string;
isInline?: boolean;
href?: string;
- history?: {
- push: () => void;
+ onClick?: () => any;
+ history?: History;
+ theme?: {
+ textColor: string;
};
- onClick?: () => void;
}
export const Button = styled.button<ButtonInterface>`
@@ -21,24 +26,25 @@ export const Button = styled.button<ButtonInterface>`
border: 1px solid transparent;
display: ${props => props.isInline && 'inline-block'};
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
- border-color: ${props => props.isTransparent && '#6a6a6a'};
+ border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
color: ${props => props.color || props.theme.textColor};
+ padding: ${props => !props.isNoPadding && '14px 22px'};
text-align: center;
- padding: 14px 22px;
font-size: 18px;
text-decoration: none;
`;
export const Link = withRouter((props: ButtonInterface) => {
const {
+ children,
history,
href,
- children,
} = props;
- const Component = StyledButton.withComponent('a');
+ const Component = Button.withComponent('a');
+ const handleClick = () => history.push(href);
return (
- <Component onClick={history.push(href)}>
+ <Component onClick={handleClick} {...props}>
{children}
</Component>
);
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);
- }
-`;
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
index 4ff9663ba..9e82975f4 100644
--- a/packages/website/ts/@next/components/newsletterForm.tsx
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -8,13 +8,14 @@ import {Button} from 'ts/@next/components/button';
interface InputProps {
name: string;
label: string;
+ type: string;
}
interface Props {
}
const Input = (props: InputProps) => {
- const { name, label } = props;
+ const { name, label, type } = props;
const id = `input-${name}`;
return (