From a617c801bc46f265cacea5515e59102f4d2fe261 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 10 Dec 2018 12:59:33 +0100
Subject: Add arrow to link

---
 packages/website/ts/@next/components/link.tsx       | 16 ++++++++++++----
 packages/website/ts/@next/constants/globalStyle.tsx |  4 ++++
 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>
-- 
cgit