From f06c17cccca46298a4b2780c1963165c5020c878 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Wed, 12 Dec 2018 15:00:03 +0100
Subject: Edits team page

---
 .../ts/@next/components/aboutPageLayout.tsx        | 12 ++---
 packages/website/ts/@next/components/newLayout.tsx |  1 +
 .../@next/components/sections/landing/clients.tsx  |  2 +-
 packages/website/ts/@next/pages/about/mission.tsx  |  2 +-
 packages/website/ts/@next/pages/about/team.tsx     | 60 ++++++++++++----------
 5 files changed, 39 insertions(+), 38 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 54e4c34f4..9f55c2e81 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -17,14 +17,14 @@ interface Props {
 export const AboutPageLayout = (props: Props) => (
     <SiteWrap theme="light">
         <Section isFlex={true} maxWidth="1170px">
-            <Nav colWidth="1/3">
+            <Column>
                <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>
 
-           <Column width="70%" maxWidth="826px">
+           <Column width="70%" maxWidth="800px">
                <Column width="100%" maxWidth="680px">
                    <Heading size="medium">
                      {props.title}
@@ -46,9 +46,3 @@ export const AboutPageLayout = (props: Props) => (
         {props.children}
     </SiteWrap>
 );
-
-const Nav = styled(Column)`
-    @media (max-width: 768px) {
-        // display: none;
-    }
-`;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 5c5f3d0d4..21f4271bd 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -110,6 +110,7 @@ FlexWrap.defaultProps = {
 
 WrapGrid.defaultProps = {
     isCentered: true,
+    isFullWidth: true,
 };
 
 Wrap.defaultProps = {
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index 8f6429328..6a1d96285 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -65,7 +65,7 @@ export const SectionLandingClients = () => (
             Join the growing number of projects developing on 0x
         </Heading>
 
-        <WrapGrid width="narrow" isWrapped={true}>
+        <WrapGrid isWrapped={true}>
             {_.map(projects, (item: ProjectLogo, index) => (
                 <StyledProject
                     key={`client-${index}`}
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index d71644094..5ebbf8f7c 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -45,7 +45,7 @@ export const NextAboutMission = () => (
         </Section>
 
         <Section isFlex={true} maxWidth="1170px">
-            <Column colWidth="1/3">
+            <Column>
                 <Heading size="medium">
                     Core Values
                 </Heading>
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index 10f27cc95..821fa19a0 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/@next/pages/about/team.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
 interface TeamMember {
@@ -182,36 +182,42 @@ export const NextAboutTeam = () => (
         linkLabel="Join the team"
         linkUrl="/jobs"
     >
-        <Section>
-            <Wrap>
-                <Column colWidth="1/3">
-                    <Heading size="medium">0x Team</Heading>
-                </Column>
+        <Section
+            maxWidth="1170px"
+            isFlex={true}
+        >
+            <Column>
+                <Heading size="medium">0x Team</Heading>
+            </Column>
 
-                <Column colWidth="2/3">
-                    <Wrap isWrapped={true} isCentered={false}>
-                        {_.map(team, (info: TeamMember, index) => (
-                            <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
-                        ))}
-                    </Wrap>
-                </Column>
-            </Wrap>
+            <Column
+                width="70%"
+                maxWidth="800px"
+            >
+                <WrapGrid isWrapped={true} isCentered={false}>
+                    {_.map(team, (info: TeamMember, index) => (
+                        <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
+                    ))}
+                </Wrap>
+            </Column>
         </Section>
 
-        <Section bgColor="#F3F6F4">
-            <Wrap>
-                <Column colWidth="1/3">
-                    <Heading size="medium">Advisors</Heading>
-                </Column>
+        <Section
+            bgColor="#F3F6F4"
+            maxWidth="1170px"
+            isFlex={true}
+        >
+            <Column>
+                <Heading size="medium">Advisors</Heading>
+            </Column>
 
-                <Column colWidth="2/3">
-                    <Wrap isWrapped={true} isCentered={false}>
-                        {_.map(advisors, (info: TeamMember, index) => (
-                            <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
-                        ))}
-                    </Wrap>
-                </Column>
-            </Wrap>
+            <Column width="70%" maxWidth="800px">
+                <WrapGrid isWrapped={true} isCentered={false}>
+                    {_.map(advisors, (info: TeamMember, index) => (
+                        <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
+                    ))}
+                </WrapGrid>
+            </Column>
         </Section>
     </AboutPageLayout>
 );
-- 
cgit v1.2.3