Merge pull request #1509 from 0xProject/fix/dev-tools-pages/finalTouches

Dev Tools Pages - Final Touches

7 files changed, 61 insertions, 19 deletions

diff --git a/packages/dev-tools-pages/ts/components/call_to_action.tsx b/packages/dev-tools-pages/ts/components/call_to_action.tsx
new file mode 100644
index 000000000..2a58d8fca
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/call_to_action.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface, ThemeContext } from 'ts/context';
+
+import { Button } from './button';
+
+const CallToAction: React.StatelessComponent<ContextInterface> = ({ children }) => (
+    <ThemeContext.Consumer>
+        {({ docLink }: ContextInterface) => (
+            <StyledCallToAction>
+                <CallToActionContainer>
+                    <Button as="a" href={docLink} target="_blank" large={true}>
+                        Read the Docs
+                    </Button>
+                </CallToActionContainer>
+                {navigator.userAgent !== 'ReactSnap' ? children : null}
+            </StyledCallToAction>
+        )}
+    </ThemeContext.Consumer>
+);
+
+const StyledCallToAction = styled.section`
+    text-align: center;
+    padding-top: 0;
+    padding-bottom: 1rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    min-height: min-content;
+    max-height: 37.5rem;
+    height: 20vh;
+    position: relative;
+`;
+
+const CallToActionContainer = styled.div`
+    margin: 0 auto;
+    max-width: 590px;
+`;
+
+export { CallToAction };
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index c4f9cee24..461a91ba3 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -139,7 +139,6 @@ class Code extends React.Component<CodeProps, CodeState> {
     public render(): React.ReactNode {
         const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
         const { hlCode } = this.state;
-
         return (
             <Container>
                 <Base language={language} isDiff={isDiff} isLight={isLight}>
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
index 694a535dd..c00e3a2b9 100644
--- a/packages/dev-tools-pages/ts/components/compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -45,7 +45,7 @@ const Dd = styled.dd`
 
 const cards = [
     {
-        title: 'A Project-centric',
+        title: 'Project-centric',
         body: (
             <React.Fragment>
                 Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
@@ -54,7 +54,7 @@ const cards = [
     },
     {
         title: 'Incremental builds',
-        body: 'Recompiles your smart contracts after they have changed',
+        body: 'Only recompiles smart contracts that have been modified.',
     },
     {
         title: 'Customizable artifacts',
@@ -63,12 +63,16 @@ const cards = [
     },
     {
         title: 'Seamless',
-        body: 'Fetches and caches the required compiler binaries.',
+        body: 'Fetches and caches the required compiler binaries for the Solidity versions you use.',
     },
     {
         title: 'Versioning',
         body:
-            'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
+            'Compiles each contract with the Solidity version specified at the top of its file (it even supports version ranges!).',
+    },
+    {
+        title: 'Watch mode',
+        body: 'Have your contracts instantly recompile on file save.',
     },
 ];
 
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index 04fd9b88e..d568a86fc 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { context as compiler } from 'ts/context/compiler';
-import { context as cov } from 'ts/context/cov';
+import { context as coverage } from 'ts/context/coverage';
 import { context as profiler } from 'ts/context/profiler';
 import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
@@ -12,7 +12,7 @@ import { media } from 'ts/variables';
 import { Container } from './container';
 import { Alpha, Beta } from './typography';
 
-const tools = [trace, cov, compiler, profiler];
+const tools = [trace, coverage, compiler, profiler];
 
 const Footer: React.StatelessComponent<{}> = () => (
     <StyledFooter>
@@ -20,9 +20,9 @@ const Footer: React.StatelessComponent<{}> = () => (
             <Top>
                 <Alpha>Other tools by 0x</Alpha>
                 <List>
-                    {_.map(tools, ({ title, subtitle, icon }) => (
+                    {_.map(tools, ({ title, subtitle, icon, name }) => (
                         <ListItem key={title}>
-                            <ListLink href="#">
+                            <ListLink href={`http://sol-${name}.com`}>
                                 <Icon as={icon as 'svg'} />
                                 <div>
                                     <Beta>{title}</Beta>
diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
index 2787692c1..4d3a8685c 100644
--- a/packages/dev-tools-pages/ts/components/header.tsx
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -17,7 +17,7 @@ const Header: React.StatelessComponent<{}> = () => (
                         <Title>{title}</Title>
                     </LogoMark>
 
-                    <Link as="a" href="https://0xproject.com/">
+                    <Link as="a" href="https://0x.org/" target="_blank">
                         Built by 0x
                     </Link>
                 </Container>
diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx
index cdcad6982..a024a49dc 100644
--- a/packages/dev-tools-pages/ts/components/hero.tsx
+++ b/packages/dev-tools-pages/ts/components/hero.tsx
@@ -9,12 +9,12 @@ import { Beta } from './typography';
 
 const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
     <ThemeContext.Consumer>
-        {({ subtitle, tagline }: ContextInterface) => (
+        {({ subtitle, tagline, docLink }: ContextInterface) => (
             <StyledHero>
                 <HeroContainer>
                     <Subtitle>{subtitle}</Subtitle>
                     <Tagline as="p">{tagline}</Tagline>
-                    <Button as="a" href="#" large={true}>
+                    <Button as="a" href={docLink} target="_blank" large={true}>
                         Read the Docs
                     </Button>
                 </HeroContainer>
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
index f41dac9b7..81f6db0ab 100644
--- a/packages/dev-tools-pages/ts/components/trace.tsx
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -25,7 +25,7 @@ const Trace: React.StatelessComponent<{}> = () => (
                             troublemaking line of code. The only hint you'll get is a generic error.
                         </MainCopy>
                         <Breakout>
-                            <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code>
+                            <Code isLight={true}>Error: VM Exception while processing transaction: revert</Code>
                         </Breakout>
 
                         <List>
@@ -44,8 +44,8 @@ const Trace: React.StatelessComponent<{}> = () => (
                                 <Copy dark={true}>
                                     <Gamma as="h3">Time-consuming</Gamma>
                                     <p>
-                                        Working with a large code-base that contains hundreds of smart contracts,
-                                        finding the failing line of code quickly becomes a daunting task.
+                                        Working within a large code-base that contains many smart contracts, finding the
+                                        failing line of code quickly becomes a daunting task.
                                     </p>
                                 </Copy>
                                 <Icon as={TimeConsuming} />
@@ -78,8 +78,8 @@ const Trace: React.StatelessComponent<{}> = () => (
                                 <Copy>
                                     <Gamma as="h3">Exact location</Gamma>
                                     <p>
-                                        It shows you the exact location of the specific code linen and where it was
-                                        called from.
+                                        It shows you the exact location of the offending line and where it was called
+                                        from.
                                     </p>
                                 </Copy>
                                 <Icon as={ExactLocation} />
@@ -90,8 +90,7 @@ const Trace: React.StatelessComponent<{}> = () => (
                                     <Gamma as="h3">Time-saving</Gamma>
                                     <p>
                                         Turning "Your code failed somewhere, good luck debugging it" into "Your code
-                                        failed on line X of contract Y", it drastically improves the developer
-                                        experience.
+                                        failed on line X of contract Y", drastically improves the developer experience.
                                     </p>
                                 </Copy>
                                 <Icon as={TimeSaving} />