Merge branch 'feature/variables' into dev-tools-pages

13 files changed, 222 insertions, 143 deletions

diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore
index 9e9db7dae..557b82311 100644
--- a/packages/dev-tools-pages/.gitignore
+++ b/packages/dev-tools-pages/.gitignore
@@ -1,2 +1,3 @@
 public
-assets/fonts
\ No newline at end of file
+assets/fonts/*.woff
+assets/fonts/*.woff2
\ No newline at end of file
diff --git a/packages/dev-tools-pages/assets/fonts/.gitkeep b/packages/dev-tools-pages/assets/fonts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/dev-tools-pages/assets/fonts/.gitkeep
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
new file mode 100644
index 000000000..fb76c8c29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+    ${media.small`
+        margin-left: -30px;
+        width: calc(100% + 60px);
+  `};
+`;
+
+export default Breakout;
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2d0fbc353..eae6aaf54 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../variables';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 
 interface ButtonProps extends Props {
@@ -22,6 +23,12 @@ const Button =
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
+  ${props =>
+      props.large &&
+      media.small`
+    font-size: 1rem;
+    padding: .875rem 1.5rem;
+  `}
 `;
 
 export default withContext(Button);
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 72b3e1af7..02bd0382e 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
+import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
+    light?: boolean;
 }
 
 interface CodeState {
@@ -26,13 +27,14 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
-  white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
-  position: relative;
-  &:hover ${Button} {
-    opacity: 1;
-  }
+    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+    background-color: ${props =>
+        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+    position: relative;
+    &:hover ${Button} {
+        opacity: 1;
+    }
 `;
 
 const StyledCode = styled.code`
@@ -92,10 +94,10 @@ class Code extends React.Component<CodeProps, CodeState> {
     };
 
     render() {
-        const { language, children } = this.props;
+        const { language, light, children } = this.props;
 
         return (
-            <Base language={language}>
+            <Base language={language} light={light}>
                 <StyledPre>
                     {this.state.hlCode !== undefined ? (
                         <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index fa558e9ab..39c99f6d9 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -3,18 +3,31 @@ import styled from 'styled-components';
 
 import { withContext, Props } from './withContext';
 import { Beta, Alpha } from './Typography';
+import { media } from 'ts/variables';
 
 const Base = styled.div`
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    &:not(:last-of-type) {
+    :not(:last-of-type) {
         margin-bottom: 6.25rem;
     }
+    ${Beta} {
+        margin-bottom: 2.5rem;
+    }
+    ${media.small`
+        display: block;
+        :not(:last-of-type) {
+            margin-bottom: 3.125rem;
+        }
+    `};
 `;
 
 const Content = styled.div`
     width: 66.693548387%;
+    ${media.small`
+        width: 100%;
+    `};
 `;
 
 const Item = styled.div`
@@ -24,6 +37,9 @@ const Item = styled.div`
 
     &:not(:last-of-type) {
         margin-bottom: 2.5rem;
+        ${media.small`
+            margin-bottom: 1.875rem;
+        `};
     }
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 15e6a5b86..df2d920ac 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -71,7 +71,7 @@ const Top = styled.div`
 
 const Icon = styled.div`
     margin-right: 1.3125rem;
-
+    flex-shrink: 0;
     ${media.small`margin-right: 0.9375rem`};
 `;
 
@@ -110,7 +110,12 @@ const ListItem = styled.li`
         ${media.small`margin-bottom: 1.875rem`};
     }
 
-    ${media.small`margin-bottom: 1.875rem`};
+    ${media.small`
+        margin-bottom: 1.875rem
+        :last-of-type {
+            margin-bottom: 0;
+        }
+    `};
 `;
 
 const Small = styled.small`
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 5ba469fca..f52ce5bc9 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
@@ -23,6 +24,8 @@ const StyledHero = styled.section`
     margin: 0 auto;
     padding-top: 9.375rem;
     padding-bottom: 2rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
     max-width: 590px;
     min-height: min-content;
     max-height: 37.5rem;
@@ -33,10 +36,19 @@ const Subtitle = styled.h2`
     font-size: 3.75rem;
     line-height: 1.16;
     margin-bottom: 1.5rem;
+
+    ${media.small`
+        font-size: 2.25rem;
+        line-height: 1.1;
+        margin-bottom: 1.375rem;
+    `};
 `;
 
 const Tagline = styled(Beta)`
     margin-bottom: 2rem;
+    ${media.small`
+        margin-bottom: 1.25rem;
+    `};
 `;
 
 export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index cddee5b6f..597dddce0 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,30 +1,35 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
+
+    ${media.small`
+        padding: 2.5rem 1.875rem
+        display: block;     
+    `};
 `;
 
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
+
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 const Content = styled.div`
     max-width: 25.9375rem;
     display: flex;
     flex-direction: column;
-`;
 
-const Code = styled.div`
-    background-color: ${colors.darkGray};
-    width: 520px;
-    height: 350px;
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Main>
-            <Content>
-                <Title>{props.title}</Title>
-                <Beta as="div">{props.children}</Beta>
-            </Content>
-            <Code />
-        </Main>
+        <Breakout>
+            <Main>
+                <Content>
+                    <Title>{props.title}</Title>
+                    <Beta as="div">{props.children}</Beta>
+                </Content>
+                <Breakout>
+                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+                </Breakout>
+            </Main>
+        </Breakout>
     );
 }
 
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index df1fdc53b..3041fc475 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const StyledList = styled.ul`
     list-style-type: none;
@@ -17,6 +18,11 @@ const StyledItem = styled.li`
         transform: rotate(45deg);
         margin-right: 1.09375rem;
     }
+    :not(:last-child) {
+        margin-bottom: 0.5625rem;
+
+        ${media.small`margin-bottom: 0.375rem`};
+    }
 `;
 
 interface ListProps {
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..5307483e8 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,37 +1,40 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
-
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
-
-import {withContext, Props} from './withContext';
+import { colors } from 'ts/variables';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
+import Breakout from './Breakout';
+import { withContext, Props } from './withContext';
 
 const StyledTabList = styled(TabList)`
-  text-transform: uppercase;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;  
+    text-transform: uppercase;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 `;
 
 const StyledTab = styled(Tab)`
-  height: 2.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  float: left;
-  &:not(:first-of-type) {
-    margin-left: .25rem;
-  }
-  &:focus, &:hover {
-    color: red;
-    outline: 0;
-  }
+    height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    float: left;
+    &:not(:first-of-type) {
+        margin-left: 0.25rem;
+    }
+    &:focus,
+    &:hover {
+        color: red;
+        outline: 0;
+    }
 `;
 
-const Root = styled.div<{primaryColor: string;}>`
+const Root =
+    styled.div <
+    { primaryColor: string } >
+    `
   ${StyledTab} {
     background-color: ${props => props.primaryColor};
   }
@@ -41,41 +44,37 @@ const Root = styled.div<{primaryColor: string;}>`
 `;
 
 interface TabsProps extends Props {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 function Tabs(props: TabsProps) {
-  return (
-    <Root primaryColor={props.colors.secondary}>
-      <ReactTabs>
-        <StyledTabList>
-          { React.Children.map(props.children, child => {
-            const {props} = React.cloneElement(child as React.ReactElement<any>);
-            return <StyledTab>{props.title}</StyledTab>
-          }) }
-        </StyledTabList>
+    return (
+        <Breakout>
+            <Root primaryColor={props.colors.secondary}>
+                <ReactTabs>
+                    <StyledTabList>
+                        {React.Children.map(props.children, child => {
+                            const { props } = React.cloneElement(child as React.ReactElement<any>);
+                            return <StyledTab>{props.title}</StyledTab>;
+                        })}
+                    </StyledTabList>
 
-        { React.Children.map(props.children, child => (
-          <TabPanel>{child}</TabPanel>
-        )) }
-      </ReactTabs>
-    </Root>
-  )
+                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+                </ReactTabs>
+            </Root>
+        </Breakout>
+    );
 }
 
 interface TabBlockProps {
-  title: string;
-  children: React.ReactNode;
+    title: string;
+    children: React.ReactNode;
 }
 
 function TabBlock(props: TabBlockProps) {
-  return (
-    <React.Fragment>
-      {props.children}
-    </React.Fragment>
-  )
+    return <React.Fragment>{props.children}</React.Fragment>;
 }
 
 const ContextTabs = withContext(Tabs);
 
-export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 545e87d53..5e52ee154 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -28,7 +28,7 @@ function Trace(props: Props) {
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
@@ -39,7 +39,7 @@ function Trace(props: Props) {
                                     completely in the dark about its exact location.
                                 </p>
                             </Copy>
-                            <NoLocation />
+                            <Icon as={NoLocation} />
                         </Item>
 
                         <Item>
@@ -50,7 +50,7 @@ function Trace(props: Props) {
                                     the failing line of code quickly becomes a daunting task.
                                 </p>
                             </Copy>
-                            <TimeConsuming />
+                            <Icon as={TimeConsuming} />
                         </Item>
                     </List>
                 </Block>
@@ -61,7 +61,7 @@ function Trace(props: Props) {
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
@@ -72,7 +72,7 @@ function Trace(props: Props) {
                                     from.
                                 </p>
                             </Copy>
-                            <ExactLocation />
+                            <Icon as={ExactLocation} />
                         </Item>
 
                         <Item>
@@ -83,7 +83,7 @@ function Trace(props: Props) {
                                     on linen X of contract Y", it drastically improves the developer experience.
                                 </p>
                             </Copy>
-                            <TimeSaving />
+                            <Icon as={TimeSaving} />
                         </Item>
                     </List>
                 </Block>
@@ -102,7 +102,11 @@ const StyledSection =
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
     
-    ${media.small`background: none`};
+    ${media.small`
+        background: none
+        padding-top: 0;
+        padding-bottom: 0;
+    `};
 `;
 
 const Wrapper = styled(Container)`
@@ -185,4 +189,8 @@ const Copy = styled.div`
     ${media.small`margin-right: 2.0625rem;`};
 `;
 
+const Icon = styled.div`
+    flex-shrink: 0;
+`;
+
 export default withContext(Trace);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 13ecde7aa..f51ea4b1d 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { withContext } from 'ts/components/withContext';
 
 const BaseStyles = createGlobalStyle`
-  ${styledNormalize}
-  ${hljsStyles}
+    ${styledNormalize}
+    ${hljsStyles}
 
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
-    font-weight: 500;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: optional;
-    unicode-range: U+20-7E;
-  }
-
-  html {
-    font-size: 100%;
-    box-sizing: border-box;
-  }
-  
-  *, *::before, *::after {
-    box-sizing: inherit;
-  }
-  
-  body {
-    font-family: "Maison Neue", system-ui, sans-serif;
-    font-weight: 300;
-    font-size: 1rem;
-    line-height: 1.8;
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+        font-weight: 500;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue Mono";
+        src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: optional;
+        unicode-range: U+20-7E;
+    }
 
-    ${media.small`font-size: 0.875rem;`};
+    html {
+        font-size: 100%;
+        box-sizing: border-box;
+    }
+    
+    *, *::before, *::after {
+        box-sizing: inherit;
+    }
+    
+    body {
+        font-family: "Maison Neue", system-ui, sans-serif;
+        font-weight: 300;
+        font-size: 1rem;
+        line-height: 1.8;
 
-  }
+        ${media.small`font-size: 0.875rem;`};
+    }
 
-  a {
-  color: ${(props: any) => props.colors.link};
-    text-decoration: none; 
+    a {
+        color: ${(props: any) => props.colors.link};
+        text-decoration: none; 
 
-    &:hover {
-      color: red; //what should this be?
+        &:hover {
+            color: red; //what should this be?
+        }
+    }
+    
+    h1, h2, h3, h4 {
+        font-weight: 500;
+        margin: 0;
     }
-  }
-  
-  h1, h2, h3, h4 {
-    font-weight: 500;
-    margin: 0;
-  }
 
-  p {
-    margin-top: 0;
-    margin-bottom: 1em;
-    &:not([class]):last-of-type {
-      margin-bottom: 0;
+    p {
+        margin-top: 0;
+        margin-bottom: 1em;
+        &:not([class]):last-of-type {
+            margin-bottom: 0;
+        }
     }
-  }
 
-  code {
-    font-family: "Maison Neue Mono", monospace;
-  }
+    code {
+        font-family: "Maison Neue Mono", monospace;
+        ${media.small`
+            font-size: .75rem;
+        `}
+    }
 `;
 
 export default withContext(BaseStyles);