From 94c90cc49a556438a6eb298ddac7c0fb36163fde Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Wed, 12 Dec 2018 15:19:11 +0100
Subject: Cleanup press page, siteWrap

---
 packages/website/ts/@next/components/layout.tsx   |  1 -
 packages/website/ts/@next/components/siteWrap.tsx | 13 ++++++++--
 packages/website/ts/@next/pages/about/press.tsx   | 30 +++++++++++------------
 3 files changed, 26 insertions(+), 18 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 32e92aa34..358120adc 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -75,7 +75,6 @@ const COLUMN_WIDTHS: ColumnWidths = {
 };
 
 export const Main = styled.main`
-    width: calc(100% - 0);
     max-width: ${MAX_WIDTH}px;
     margin: 0 auto;
 
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index ae642f193..abbd27845 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
+
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
-import { Main } from 'ts/@next/components/layout';
 import { GlobalStyles } from 'ts/@next/constants/globalStyle';
 
 // Note(ez): We'll define the theme and provide it via a prop
@@ -78,3 +78,12 @@ export const SiteWrap: React.StatelessComponent<Props> = props => {
         </>
     );
 };
+
+export const Main = styled.main`
+    max-width: 1500px;
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+        width: calc(100% - 60px);
+    }
+`;
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 68af1cb0f..259618d13 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
 import { Link } from 'ts/@next/components/button';
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Separator } from 'ts/@next/components/separator';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
@@ -45,8 +45,6 @@ export const NextAboutPress = () => (
                     Want to write about 0x? Get in touch, or download our press kit.
                 </Paragraph>
 
-                <Separator/>
-
                 {_.map(highlights, (highlight, index) => (
                     <Highlight key={`highlight-${index}`} highlight={highlight} />
                 ))}
@@ -56,17 +54,19 @@ export const NextAboutPress = () => (
 );
 
 const Highlight = ({ highlight }) => (
-    <>
-        <Wrap>
-            <Column colWidth="1/3">
-                <img src={highlight.logo} alt={highlight.title} />
-            </Column>
-            <Column colWidth="2/3">
-                <Paragraph isMuted={false}>{highlight.text}</Paragraph>
-                <Link href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Link>
-            </Column>
-        </Wrap>
+    <HighlightWrap>
+        <Column>
+            <img src={highlight.logo} alt={highlight.title} />
+        </Column>
 
-        <Separator/>
-    </>
+        <Column width="60%" maxWidth="560px">
+            <Paragraph isMuted={false}>{highlight.text}</Paragraph>
+            <Link href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Link>
+        </Column>
+    </HighlightWrap>
 );
+
+const HighlightWrap = styled(FlexWrap)`
+    border-top: 1px solid #eaeaea;
+    padding: 30px 0;
+`;
-- 
cgit