diff options
| -rw-r--r-- | packages/website/ts/@next/components/link.tsx | 16 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 2 |
3 files changed, 17 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c1b8b33e9..4a572b8a9 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -9,7 +9,8 @@ interface LinkInterface { children?: Node | string; isNoArrow?: boolean; hasIcon?: boolean | string; - isInline?: boolean; + isBlock?: boolean; + isCentered?: boolean; href?: string; theme?: { textColor: string; @@ -17,27 +18,34 @@ interface LinkInterface { } const StyledLink = styled(ReactRouterLink)<LinkInterface>` - display: ${props => props.isInline && 'inline-block'}; + display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; - padding: ${props => !props.isNoPadding && '18px 30px'}; + //padding: ${props => !props.isNoPadding && '18px 30px'}; text-align: center; font-size: 18px; text-decoration: none; + align-items: center; @media (max-width: 768px) { - padding: ${props => !props.isNoPadding && '6% 10%'}; + //padding: ${props => !props.isNoPadding && '6% 10%'}; + } + + svg { + margin-left: 3px; } `; export const Link = (props: LinkInterface) => { const { children, + isNoArrow, href, } = props; return ( <StyledLink to={href} {...props}> {children} + {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="#00AE99"/></svg>} </StyledLink> ); }; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 7d5e59c6e..e1b97fc3b 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -99,6 +99,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` line-height: 1.444444444em; // 26px } + :root a { + text-decoration: none; + } + svg + p, img + p { padding-top: 30px; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 1d2d7cd4a..6b22c6fa4 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -19,7 +19,7 @@ export const NextWhy = () => ( <Column colWidth="2/3"> <Heading size="medium" isCentered={true} style={{ '--desktopMaxWidth': '570px' }}>The exchange layer for the crypto economy</Heading> <Paragraph size="medium" isCentered={true}>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph> - <Link href="/docs" isCentered={true}>Build on 0x (arrow)</Link> + <Link href="/docs" isCentered={true}>Build on 0x</Link> </Column> </WrapCentered> </Section> |