Feature/feedbacktweaks (#11)

* Fix typo

* Fix 1px line showing in middle of divs

* Increase inline code padding by 2px

* Make masonry block not full width on screens larger than mobile

* Align list items

* Change button text to copied if it's been copied

5 files changed, 33 insertions, 24 deletions

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index e9a503f0b..b883dcbf8 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -178,7 +178,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                     ) : null}
                 </Base>
-                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button> : null}
             </Container>
         );
     }
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 995a53e89..2ca340146 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
 
 import Container from './Container';
 import InlineCode from './InlineCode';
+import Breakout from './Breakout';
 
 const Cards = styled.dl`
     column-count: 3;
@@ -71,15 +72,17 @@ const cards = [
 
 function Compiler() {
     return (
-        <Container wide>
-            <Cards>
-                {cards.map(card => (
-                    <Card key={card.title.split(' ').join('-')}>
-                        <Dt>{card.title}</Dt>
-                        <Dd>{card.body}</Dd>
-                    </Card>
-                ))}
-            </Cards>
+        <Container>
+            <Breakout>
+                <Cards>
+                    {cards.map(card => (
+                        <Card key={card.title.split(' ').join('-')}>
+                            <Dt>{card.title}</Dt>
+                            <Dd>{card.body}</Dd>
+                        </Card>
+                    ))}
+                </Cards>
+            </Breakout>
         </Container>
     );
 }
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 4b5afa95c..9f25927cd 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -9,7 +9,7 @@ interface InlineCodeProps {
 
 const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
     background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
-    padding: 0.1875rem;
+    padding: 0.3125rem;
 `;
 
 export default InlineCode;
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index ceb3bc108..b9bc4ab24 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -5,18 +5,24 @@ import { media } from '../variables';
 const StyledList = styled.ul`
     list-style-type: none;
     margin: 0;
-    padding-inline-start: 0.2rem;
+    padding-inline-start: 0rem;
+    position: relative;
 `;
 
 const StyledItem = styled.li`
+    position: relative;
+    padding-left: 26px;  
+
     :before {
         content: '';
+        position: absolute;
+        left: 0;
         border: 1px solid black;
         width: 0.6875rem;
         height: 0.6875rem;
         display: inline-block;
-        transform: rotate(45deg);
-        margin-right: 1.09375rem;
+        transform: rotate(45deg) translateY(-50%);
+        top: 12px;
     }
     :not(:last-child) {
         margin-bottom: 0.5625rem;
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 3b272ce98..d5f323775 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 light>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: revert</Code>
 
                     <List>
                         <Item>
@@ -62,7 +62,7 @@ function Trace(props: Props) {
                         snippets, every time you encounter an error.
                     </MainCopy>
                     <Code light language="javascript">
-                    {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+                        {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
             hash,
@@ -71,7 +71,7 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-        </Code>
+                    </Code>
 
                     <List>
                         <Item>
@@ -104,13 +104,11 @@ function Trace(props: Props) {
 
 const StyledSection =
     styled.section <
-    TraceProps >
-    `
+        TraceProps >
+        `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
-    padding-top: 6.25rem;
-    padding-bottom: 5.25rem;
     
     ${media.small`
         background: none
@@ -136,11 +134,13 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-    TraceProps >
-    `
+        TraceProps >
+        `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
+    padding-top: 6.25rem;
+    padding-bottom: 5.25rem;
 
     :first-of-type {
         padding-right: 6.25rem;
@@ -191,7 +191,7 @@ const Item = styled.li`
     }
 `;
 
-const Copy = styled.div<{dark?: boolean;}>`
+const Copy = styled.div<{ dark?: boolean; }>`
     max-width: 20rem;
     margin-right: 5.875rem;
     ${props => props.dark && `