Updates intro component (#10)

* Updates intro component

* Remove unused Inner

* Use Breakout component in Intro

3 files changed, 35 insertions, 22 deletions

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index e5c95d4c2..a5a7e9dc4 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
 
 import { Alpha, Lead } from './Typography';
 import Container from './Container';
+import Breakout from './Breakout';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
@@ -17,12 +18,6 @@ const Main = styled.div`
     `};
 `;
 
-const Inner = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-`;
-
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
 
@@ -32,38 +27,56 @@ const Title = styled(Alpha)`
 const Blocks = styled.div`
     display: flex;
     justify-content: space-between;
+    width: 100%;
 
     ${media.small`display: block;`};
 `;
 
-const IntroLead = styled(Lead)`
+
+const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
 
     ${media.small`margin-bottom: 1.5625rem;`};
 `;
-const IntroAside = styled.div`
+
+const StyledIntroAside = styled.div`
     max-width: 32.5rem;
     position: relative; 
-
-    ${media.small`
-        margin-left: -30px;
-        width: calc(100% + 60px);
-    `};
 `;
 
 interface IntroProps {
+    children?: React.ReactNode;
+}
+
+interface IntroLeadProps {
     title: string;
     children?: React.ReactNode;
 }
 
+function IntroLead(props: IntroLeadProps) {
+    return (
+        <StyledIntroLead>
+            <Title>{props.title}</Title>
+            {props.children}
+        </StyledIntroLead>
+    )
+}
+
+function IntroAside(props: IntroProps) {
+    return (
+        <Breakout>
+            <StyledIntroAside>
+                {props.children}
+            </StyledIntroAside>
+        </Breakout>
+    )
+}
+
 function Intro(props: IntroProps) {
     return (
         <Container wide>
             <Main>
-                <Inner>
-                    <Title>{props.title}</Title>
-                    <Blocks>{props.children}</Blocks>
-                </Inner>
+                <Blocks>{props.children}</Blocks>
             </Main>
         </Container>
     );
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 197ff174d..679cf6f62 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -15,8 +15,8 @@ import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Intro title="Measure your tests">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Measure your tests">
                     When it comes to writing smart contracts, testing is one of the most important steps of the process.
                     In order to quantify the robustness of your Solidity testing suite, you need to measure its code
                     coverage.
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 462789a16..f147d9d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -5,18 +5,18 @@ import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
 import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
+import Breakout from 'ts/components/Breakout';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Profiler() {
     return (
         <Base context={context}>
-            <Intro title="Headline">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Headline">
                     Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
                     This will help you find unexpected inefficiencies in parts of your smart contract, and take a
                     data-driven approach to optimizing it.