Merge remote-tracking branch 'origin/dev-tools-pages' into dev-tools-pages

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>
     );

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.

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.