diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-10 19:59:33 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-10 20:38:05 +0800 |
| commit | a617c801bc46f265cacea5515e59102f4d2fe261 (patch) | |
| tree | dd58d4cea9fd73f64ad254891799265ec941a7de | |
| parent | 7d9ab27b9d26bf008a1113c50a00b18a1ad6e641 (diff) | |
| download | dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar.gz dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar.bz2 dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar.lz dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar.xz dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.tar.zst dexon-sol-tools-a617c801bc46f265cacea5515e59102f4d2fe261.zip | |
Add arrow to link
| -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> |