remove container from all pages

4 files changed, 88 insertions, 101 deletions

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index e7336f1b1..c6e67021e 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index e835e5c82..d5b607334 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="Measure your tests">
+            <Intro title="Measure your tests">
+                <p>
+                    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.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        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.
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
                     </p>
-                </Intro>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 9f8b46b9c..ae847ad41 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Profiler() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="ra">
+            <Intro title="ra">
+                <p>
+                    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.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        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.
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
                     </p>
-                </Intro>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index be5acdac4..b55c03005 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -16,39 +15,36 @@ function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
-            <Container>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
+                    <p>
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
+                    </p>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }