aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:11:22 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:11:22 +0800
commit86acca5e1c37bf24bef393700fbf0909b58b9df3 (patch)
tree5837b78a7ac5a0279b2737aff4fe9afa7d4692d7 /packages/website
parentcb2b45bf043b4dd39f656be295c3823988b63a08 (diff)
downloaddexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar.gz
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar.bz2
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar.lz
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar.xz
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.tar.zst
dexon-sol-tools-86acca5e1c37bf24bef393700fbf0909b58b9df3.zip
WIP dropdown menus
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/button.tsx10
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx141
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx24
-rw-r--r--packages/website/ts/@next/components/header.tsx14
-rw-r--r--packages/website/ts/@next/components/layout.tsx1
-rw-r--r--packages/website/ts/@next/components/text.tsx6
-rw-r--r--packages/website/ts/@next/pages/why.tsx2
7 files changed, 153 insertions, 45 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index cd14c80ba..06a9f8c7a 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -6,6 +6,7 @@ import { BREAKPOINTS } from 'ts/@next/components/layout';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
+ bgColor?: string;
color?: string;
children?: Node | string;
isTransparent?: boolean;
@@ -26,13 +27,14 @@ export const Button = styled.button<ButtonInterface>`
appearance: none;
border: 1px solid transparent;
display: ${props => props.isInline && 'inline-block'};
- background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
+ background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
text-align: center;
font-size: ${props => props.isWithArrow ? '20px' : '18px'};
text-decoration: none;
+ cursor: pointer;
svg {
margin-left: 12px;
@@ -52,7 +54,7 @@ export const Link = (props: ButtonInterface) => {
const Component = Button.withComponent(ReactRouterLink);
return (
- <Component to={href} isTransparent={true} {...props}>
+ <Component to={href} {...props}>
{children}
{ isWithArrow &&
@@ -66,6 +68,10 @@ export const Link = (props: ButtonInterface) => {
);
};
+Link.defaultProps = {
+ isTransparent: true,
+};
+
// Added this, & + & doesnt really work since we switch with element types...
export const ButtonWrap = styled.div`
button + button,
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index a9cfed538..d87540511 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,37 +1,132 @@
+import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
-import {Link} from 'react-router-dom';
-import {WrapGrid} from 'ts/@next/components/layout';
+import {Link as RouterLink} from 'react-router-dom';
+import {Link} from 'ts/@next/components/button';
+import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
import {Heading} from 'ts/@next/components/text';
+const introData = [
+ {
+ label: 'Build a relayer',
+ url: '#',
+ },
+ {
+ label: 'Develop on Ethereum',
+ url: '#',
+ },
+ {
+ label: 'Make & take orders',
+ url: '#',
+ },
+ {
+ label: 'Use networked liquidity',
+ url: '#',
+ },
+];
+
+const docsData = [
+ {
+ label: '0x.js',
+ url: '#',
+ },
+ {
+ label: '0x Connect',
+ url: '#',
+ },
+ {
+ label: 'Smart Contract',
+ url: '#',
+ },
+];
+
+const linksData = [
+ {
+ label: 'Wiki',
+ url: '#',
+ },
+ {
+ label: 'Github',
+ url: '#',
+ },
+ {
+ label: 'Whitepaper',
+ url: '#',
+ },
+];
+
export const DropdownDevelopers = () => (
<>
- <Wrap>
- <Heading size="small" color="#5d5d5d">
- Getting Started
- </Heading>
-
- <WrapGrid isCentered={false} isWrapped={true}>
- <Link to="#">Build a relayer</Link>
- <Link to="#">Develop on Ethereum</Link>
- <Link to="#">Make & take orders</Link>
- <Link to="#">Use networked liquidity</Link>
- </WrapGrid>
- </Wrap>
-
- <Wrap>
- asdf
- </Wrap>
+ <DropdownWrap>
+ <div>
+ <Heading size={14} color="#5d5d5d">
+ Getting Started
+ </Heading>
+
+ <WrapGrid isCentered={false} isWrapped={true}>
+ {_.map(introData, (item, index) => (
+ <RouterLink to={item.url}>
+ {item.label}
+ </RouterLink>
+ ))}
+ </WrapGrid>
+ </div>
+
+ <StyledWrap>
+ <Column colWidth="1/2" isNoPadding={true}>
+ <Heading size={14} color="#5d5d5d">
+ Popular Docs
+ </Heading>
+
+ <ul>
+ {_.map(docsData, (item, index) => (
+ <li>
+ <RouterLink to={item.url}>
+ {item.label}
+ </RouterLink>
+ </li>
+ ))}
+ </ul>
+ </Column>
+
+ <Column colWidth="1/2" isNoPadding={true}>
+ <Heading size={14} color="#5d5d5d">
+ Useful Links
+ </Heading>
+
+ <ul>
+ {_.map(linksData, (item, index) => (
+ <li>
+ <RouterLink to={item.url}>
+ {item.label}
+ </RouterLink>
+ </li>
+ ))}
+ </ul>
+ </Column>
+ </StyledWrap>
+
+ <StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
+ View All Documentation
+ </StyledLink>
+ </DropdownWrap>
</>
);
-const Wrap = styled.div`
- padding: 15px 30px;
+const DropdownWrap = styled.div`
+ padding: 15px 30px 75px 15px;
+`;
+
+const StyledWrap = styled(Wrap)`
+ border-top: 1px solid #dadada;
+ padding-top: 20px;
+ margin-top: 30px;
`;
const StyledLink = styled(Link)`
- width: calc(50% - 15px);
- flex-shrink: 0;
- color: #000000;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
`;
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 83d554f03..0271daf84 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,5 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
+import {Link} from 'react-router-dom';
import styled from 'styled-components';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -7,7 +8,7 @@ const navData = [
{
title: '0x Instant',
description: 'Simple crypto purchasing',
- url: '#',
+ url: '/next/0x-instant',
},
{
title: '0x Launch kit',
@@ -24,22 +25,25 @@ export const DropdownProducts = () => (
<List>
{_.map(navData, (item, index) => (
<li>
- <Heading color="#000000" isNoMargin={true} size="small">
- {item.title}
- </Heading>
+ <Link to={item.url}>
+ <Heading color="#000000" isNoMargin={true} size="small">
+ {item.title}
+ </Heading>
- {item.description &&
- <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
- {item.description}
- </Paragraph>
- }
+ {item.description &&
+ <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+ {item.description}
+ </Paragraph>
+ }
+ </Link>
</li>
))}
</List>
);
const List = styled.ul`
- li {
+ a {
padding: 15px 30px;
+ display: block;
}
`;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 4b5f8d346..165cba562 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -6,8 +6,7 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
-import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
-import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { Button, Link } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -50,7 +49,7 @@ const navItems: NavItem[] = [
url: '#',
text: 'Developers',
dropdownComponent: DropdownDevelopers,
- dropdownWidth: 420,
+ dropdownWidth: 450,
},
{ id: 'about', url: '/next/about/mission', text: 'About' },
{ id: 'blog', url: '#', text: 'Blog' },
@@ -154,8 +153,10 @@ const HeaderWrap = styled(Wrap)`
}
`;
-const StyledButtonWrap = styled(ButtonWrap)`
+const StyledButtonWrap = styled.div`
display: flex;
+ align-items: center;
+ justify-content: space-between;
@media (max-width: 768px) {
background-color: #022924;
@@ -166,7 +167,10 @@ const StyledButtonWrap = styled(ButtonWrap)`
a {
text-align: left;
padding-left: 0;
- margin: 0 !important;
+ }
+
+ a + a {
+ margin-left: 0;
}
}
`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 0559d6e3d..42468a27f 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -110,7 +110,6 @@ export const Wrap = styled(WrapBase)`
@media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
- flex-wrap: wrap;
flex-direction: ${props => props.isReversed && 'row-reverse'};
}
`;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 74bf58701..bf471db2e 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
interface BaseTextInterface extends PaddingInterface {
- size?: 'default' | 'medium' | 'large' | 'small';
+ size?: 'default' | 'medium' | 'large' | 'small' | number;
isCentered?: boolean;
}
@@ -23,14 +23,14 @@ interface ParagraphProps extends BaseTextInterface {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
- font-size: ${props => `var(--${props.size || 'default'}Heading)`};
+ font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
text-align: ${props => props.isCentered && 'center'};
- font-weight: 400;
margin-left: ${props => props.isCentered && 'auto'};
margin-right: ${props => props.isCentered && 'auto'};
+ font-weight: 400;
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 43e37a74b..e9a31e67d 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -123,7 +123,7 @@ export class NextWhy extends React.PureComponent {
<Section>
<Wrap>
<Column colWidth="1/3">
- <NavStickyWrap>
+ <NavStickyWrap offsetTop="130px">
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
<ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
<ChapterLink offset="60" href="#functionality">Features</ChapterLink>