diff --git a/packages/website/ts/components/docs/step_link.tsx b/packages/website/ts/components/docs/step_link.tsx deleted file mode 100644 index 7a60512437..0000000000 --- a/packages/website/ts/components/docs/step_link.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { Link } from '@0x/react-shared'; - -import { colors } from 'ts/style/colors'; - -export interface IStepLinkConfig { - title: string; - url: string; -} - -export const StepLink: React.FC = props => ( - - {props.title} - - - - -); - -const StepLinkWrapper = styled(Link)` - padding: 21px 25px 19px; - display: flex; - align-items: center; - justify-content: space-between; - - &:hover { - background: ${colors.brandDark}; - - * { - color: ${colors.white}; - fill: ${colors.white}; - } - } - - & + & { - border-top: 1px solid #dbdfdd; - } - - @media (max-width: 500px) { - svg { - transform: scale(0.85); - } - } -`; - -const StepLinkText = styled.span` - font-size: 1.25rem; - - @media (max-width: 500px) { - font-size: 16px; - } -`; diff --git a/packages/website/ts/components/docs/step_links.tsx b/packages/website/ts/components/docs/step_links.tsx index e313052d98..e98cfd5f6b 100644 --- a/packages/website/ts/components/docs/step_links.tsx +++ b/packages/website/ts/components/docs/step_links.tsx @@ -1,15 +1,20 @@ import React from 'react'; import styled from 'styled-components'; -import { IStepLinkConfig, StepLink } from 'ts/components/docs/step_link'; +import { Link } from '@0x/react-shared'; import { colors } from 'ts/style/colors'; -export interface ILinkProps { - links: IStepLinkConfig[]; +export interface IStepLinkProps { + title: string; + url: string; } -export const StepLinks: React.FC = ({ links }) => ( +interface IStepLinksProps { + links: IStepLinkProps[]; +} + +export const StepLinks: React.FC = ({ links }) => ( {links.map((link, index) => ( @@ -17,7 +22,55 @@ export const StepLinks: React.FC = ({ links }) => ( ); +export const StepLink: React.FC = props => ( + + {props.title} + + + + +); + const StepLinksWrapper = styled.div` background-color: ${colors.backgroundLight}; border: 1px solid #dbdfdd; `; + +const StepLinkWrapper = styled(Link)` + padding: 21px 25px 19px; + display: flex; + align-items: center; + justify-content: space-between; + + &:hover { + background: ${colors.brandDark}; + + * { + color: ${colors.white}; + fill: ${colors.white}; + } + } + + & + & { + border-top: 1px solid #dbdfdd; + } + + @media (max-width: 500px) { + svg { + transform: scale(0.85); + } + } +`; + +const StepLinkText = styled.span` + font-size: 1.25rem; + + @media (max-width: 500px) { + font-size: 16px; + } +`; diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx index 5330577102..36379e1af2 100644 --- a/packages/website/ts/pages/docs/home.tsx +++ b/packages/website/ts/pages/docs/home.tsx @@ -4,10 +4,9 @@ import styled from 'styled-components'; import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link'; import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link'; import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link'; -import { IStepLinkConfig } from 'ts/components/docs/step_link'; +import { IStepLinkProps, StepLinks } from 'ts/components/docs/step_links'; import { Separator } from 'ts/components/docs/separator'; -import { StepLinks } from 'ts/components/docs/step_links'; import { Heading } from 'ts/components/text'; import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout'; @@ -107,7 +106,7 @@ const shortcuts: IShortcutLinkProps[] = [ }, ]; -const usefulLinks: IStepLinkConfig[] = [ +const usefulLinks: IStepLinkProps[] = [ { title: 'Core Concepts', url: '/docs/core-concepts',