diff options
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> |