From 614ca51cb130003f523209412ad7f8a70604ebf3 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 15:20:25 +0200
Subject: Adds wide prop for full width sections

---
 packages/dev-tools-pages/ts/components/Container.tsx | 11 +++++++++--
 packages/dev-tools-pages/ts/components/Intro.tsx     |  5 +++--
 2 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages')

diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index d6df7a0b4..53fb8427f 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,9 +1,16 @@
 import styled from 'styled-components';
 
-const Container = styled.div`
+interface ContainerProps {
+    wide?: boolean;
+}
+
+const Container =
+    styled.div <
+    ContainerProps >
+    `
     max-width: 77.5rem;
-    width: calc(100% - 3.75rem);
     margin: 0 auto;
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
 `;
 
 export default Container;
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 50fa24c13..8bba2dbe5 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { media, colors } from '../variables';
 
 import { Alpha, Lead } from './Typography';
+import Container from './Container';
 import Code from './Code';
 
 const Main = styled.div`
@@ -38,7 +39,7 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Breakout>
+        <Container wide>
             <Main>
                 <Content>
                     <Title>{props.title}</Title>
@@ -48,7 +49,7 @@ function Intro(props: IntroProps) {
                     <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
                 </Breakout>
             </Main>
-        </Breakout>
+        </Container>
     );
 }
 
-- 
cgit