fix: mission and values link to new tab and not append

2 files changed, 30 insertions, 27 deletions

diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 7d98804bb..86a94ae2b 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -14,7 +15,8 @@ interface Props {
     title: string;
     description: React.ReactNode | string;
     linkLabel?: string;
-    linkUrl?: string;
+    href?: string;
+    to?: string;
     children?: React.ReactNode;
 }
 
@@ -22,31 +24,32 @@ export const AboutPageLayout = (props: Props) => (
     <SiteWrap theme="light">
         <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
             <Column>
-               <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink>
-           </Column>
+                <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink>
+            </Column>
 
-           <Column width="70%" maxWidth="800px">
-               <Column width="100%" maxWidth="680px">
-                    <AnimatedHeading size="medium">
-                        {props.title}
-                    </AnimatedHeading>
+            <Column width="70%" maxWidth="800px">
+                <Column width="100%" maxWidth="680px">
+                    <AnimatedHeading size="medium">{props.title}</AnimatedHeading>
 
-                   <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
-                     {props.description}
-                   </AnimatedParagraph>
+                    <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
+                        {props.description}
+                    </AnimatedParagraph>
 
-                   {(props.linkLabel && props.linkUrl) &&
-                        <AnimatedLink
-                            to={props.linkUrl}
-                            isWithArrow={true}
-                            isAccentColor={true}
-                        >
-                            {props.linkLabel}
-                        </AnimatedLink>
-                   }
+                    {props.linkLabel &&
+                        (props.href || props.to) && (
+                            <AnimatedLink
+                                to={props.to}
+                                href={props.href}
+                                target={!_.isUndefined(props.href) ? '_blank' : undefined}
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                {props.linkLabel}
+                            </AnimatedLink>
+                        )}
                 </Column>
             </Column>
         </Section>
@@ -56,13 +59,13 @@ export const AboutPageLayout = (props: Props) => (
 );
 
 const AnimatedHeading = styled(Heading)`
-  ${addFadeInAnimation('0.5s')}
+    ${addFadeInAnimation('0.5s')};
 `;
 
 const AnimatedParagraph = styled(Paragraph)`
-  ${addFadeInAnimation('0.5s', '0.15s')}
+    ${addFadeInAnimation('0.5s', '0.15s')};
 `;
 
 const AnimatedLink = styled(Button)`
-  ${addFadeInAnimation('0.6s', '0.3s')}
+    ${addFadeInAnimation('0.6s', '0.3s')};
 `;
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index 3b2b8895b..35aac684b 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -35,7 +35,7 @@ export const NextAboutMission = () => (
         title="Creating a tokenized world where all value can flow freely."
         description="0x is important infrastructure 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."
         linkLabel="Our mission and values"
-        linkUrl={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+        href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
     >
         <Section isFullWidth={true} isPadded={false}>
             <FullWidthImage>