Edits aboutLayout, mission.tsx

1 files changed, 27 insertions, 32 deletions

diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index e8f09c8d9..54e4c34f4 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Link } from 'ts/@next/components/button';
 import { ChapterLink } from 'ts/@next/components/chapter_link';
-import { BREAKPOINTS, Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, Section } from 'ts/@next/components/newLayout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
@@ -16,44 +16,39 @@ interface Props {
 
 export const AboutPageLayout = (props: Props) => (
     <SiteWrap theme="light">
-        <Section isPadLarge={true}>
-            <Wrap>
-               <Nav colWidth="1/3">
-                  <ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
-                  <ChapterLink to="/next/about/team">Team</ChapterLink>
-                  <ChapterLink to="/next/about/press">Press</ChapterLink>
-                  <ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
-              </Nav>
-
-              <Column colWidth="2/3">
-                  <IntroWrap>
-                      <Heading size="medium">
-                        {props.title}
-                      </Heading>
-                      <Paragraph size="medium" marginBottom="60px">
-                        {props.description}
-                      </Paragraph>
-
-                      {(props.linkLabel && props.linkUrl) &&
-                          <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
-                                {props.linkLabel}
-                          </Link>
-                      }
-                  </IntroWrap>
-              </Column>
-             </Wrap>
+        <Section isFlex={true} maxWidth="1170px">
+            <Nav colWidth="1/3">
+               <ChapterLink to="/next/about/mission">Our Mission</ChapterLink>
+               <ChapterLink to="/next/about/team">Team</ChapterLink>
+               <ChapterLink to="/next/about/press">Press</ChapterLink>
+               <ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
+           </Nav>
+
+           <Column width="70%" maxWidth="826px">
+               <Column width="100%" maxWidth="680px">
+                   <Heading size="medium">
+                     {props.title}
+                   </Heading>
+
+                   <Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
+                     {props.description}
+                   </Paragraph>
+
+                   {(props.linkLabel && props.linkUrl) &&
+                       <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
+                             {props.linkLabel}
+                       </Link>
+                   }
+               </Column>
+           </Column>
         </Section>
 
         {props.children}
     </SiteWrap>
 );
 
-const IntroWrap = styled.div`
-    max-width: 680px;
-`;
-
 const Nav = styled(Column)`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         // display: none;
     }
 `;