aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-10 19:59:33 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-10 20:38:05 +0800
commita617c801bc46f265cacea5515e59102f4d2fe261 (patch)
treedd58d4cea9fd73f64ad254891799265ec941a7de /packages/website/ts
parent7d9ab27b9d26bf008a1113c50a00b18a1ad6e641 (diff)
downloaddexon-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
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/link.tsx16
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx4
-rw-r--r--packages/website/ts/@next/pages/why.tsx2
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>