Add link to mission

2 files changed, 19 insertions, 18 deletions

diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index db8f433b3..c240a0cdc 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -17,22 +17,6 @@ interface LinkInterface {
     };
 }
 
-const StyledLink = styled(ReactRouterLink)<LinkInterface>`
-    display: ${props => !props.isBlock && 'inline-flex'};
-    color: ${props => props.color || props.theme.linkColor};
-    text-align: center;
-    font-size: 18px;
-    text-decoration: none;
-    align-items: center;
-
-    @media (max-width: 768px) {
-    }
-
-    svg {
-        margin-left: 3px;
-    }
-`;
-
 export const Link = (props: LinkInterface) => {
     const {
         children,
@@ -43,7 +27,7 @@ export const Link = (props: LinkInterface) => {
     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>}
+            {!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="currentColor"/></svg>}
         </StyledLink>
     );
 };
@@ -56,3 +40,19 @@ export const LinkWrap = styled.div`
         margin-left: 20px;
     }
 `;
+
+const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+    display: ${props => !props.isBlock && 'inline-flex'};
+    color: ${props => props.color || props.theme.linkColor};
+    text-align: center;
+    font-size: 18px;
+    text-decoration: none;
+    align-items: center;
+
+    @media (max-width: 768px) {
+    }
+
+    svg {
+        margin-left: 3px;
+    }
+`;
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index 234f7254d..782f1e1b5 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { Image } from 'ts/@next/components/image';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Link } from 'ts/@next/components/link';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
@@ -24,7 +25,7 @@ export const NextAboutMission = () => (
         <Column colWidth="2/3">
             <Heading size="medium">Creating a tokenized world where all value can flow freely.</Heading>
             <Paragraph size="medium">0x Protocol is an important infrastructure layer for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past.</Paragraph>
-            <Paragraph>Our missions and values (arrow)</Paragraph>
+            <Link href="/mission">Our missions and values</Link>
         </Column>
       </Wrap>
     </Section>