diff --git a/packages/website/ts/components/docs/get_started_link.tsx b/packages/website/ts/components/docs/get_started_link.tsx new file mode 100644 index 0000000000..e1f1c57060 --- /dev/null +++ b/packages/website/ts/components/docs/get_started_link.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { Button } from 'ts/components/button'; +import { Paragraph } from 'ts/components/text'; + +import { colors } from 'ts/style/colors'; + +export interface IGetStartedLinkProps { + heading: string; + description: string; + url: string; +} + +export const GetStartedLink: React.FC = props => ( + <> + + {props.heading} + + + {props.description} + + +); + +const GetStartedButton = styled(Button)` + margin-bottom: 12px; + + @media (max-width: 500px) { + font-size: 16px !important; + + svg { + display: none; + } + } +`; + +const GetStartedParagraph = styled(Paragraph)` + @media (max-width: 500px) { + font-size: 14px; + } +`; diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx index 00fab504e6..06080f9a8f 100644 --- a/packages/website/ts/pages/docs/home.tsx +++ b/packages/website/ts/pages/docs/home.tsx @@ -1,19 +1,18 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import styled from 'styled-components'; -import { Button } from 'ts/components/button'; import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link'; +import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link'; import { Hero } from 'ts/components/docs/hero'; +import { Separator } from 'ts/components/docs/separator'; import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link'; import { SiteWrap } from 'ts/components/docs/siteWrap'; import { IStepLinkConfig } from 'ts/components/docs/step_link'; import { StepLinks } from 'ts/components/docs/step_links'; import { DocumentTitle } from 'ts/components/document_title'; import { Section } from 'ts/components/newLayout'; -import { Separator } from 'ts/components/docs/separator'; -import { Heading, Paragraph } from 'ts/components/text'; +import { Heading } from 'ts/components/text'; -import { colors } from 'ts/style/colors'; import { documentConstants } from 'ts/utils/document_meta_constants'; export const DocsHome: React.FC = () => { @@ -32,16 +31,10 @@ export const DocsHome: React.FC = () => {
Get Started {getStartedLinks.map((link, index) => ( - - - {link.heading} - - - {link.description} - - + ))}
+
Useful Links @@ -71,7 +64,7 @@ const ShortcutsWrapper = styled.div` const GetStartedWrapper = styled.div` display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 0 1fr; grid-column-gap: 70px; grid-row-gap: 30px; @@ -81,24 +74,6 @@ const GetStartedWrapper = styled.div` } `; -const GetStartedButton = styled(Button)` - margin-bottom: 12px; - - @media (max-width: 500px) { - font-size: 16px !important; - - svg { - display: none; - } - } -`; - -const GetStartedParagraph = styled(Paragraph)` - @media (max-width: 500px) { - font-size: 14px; - } -`; - const CommunityWrapper = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); @@ -156,29 +131,25 @@ const usefulLinks: IStepLinkConfig[] = [ }, ]; -const getStartedLinks: IShortcutLinkProps[] = [ +const getStartedLinks: IGetStartedLinkProps[] = [ { heading: 'Launch an exchange in 30 seconds', description: 'Learn how to spin up an exchange or marketplace in seconds.', - icon: 'coreConcepts', url: '/docs/core-concepts', }, { heading: 'Tap into contract-fillable liquidity', description: 'Source contract-fillable liquidity at the best prices from 0x.', - icon: 'apiExplorer', url: '/docs/api-explorer', }, { heading: 'Launch your in-game marketplace', description: 'Make your in-game items tradable with minimal effort.', - icon: 'getStarted', url: '/docs/get-started', }, { heading: 'Predict the future with 0x', description: 'Build a prediction market end-to-end using 0x and Augur.', - icon: 'tools', url: '/docs/core-concepts', }, ]; diff --git a/packages/website/ts/pages/docs/view.tsx b/packages/website/ts/pages/docs/view.tsx index c61688ae47..ce79ef2741 100644 --- a/packages/website/ts/pages/docs/view.tsx +++ b/packages/website/ts/pages/docs/view.tsx @@ -75,7 +75,7 @@ export const DocsView: React.FC = props => { -
+
{Component ? (