diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index 29d1d36fef..4fc1289fbf 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -4,7 +4,6 @@ import { media, colors } from '../variables'; import { Alpha, Lead } from './Typography'; import Container from './Container'; -import Code from './Code'; const Main = styled.div` background-color: ${colors.lightGray}; @@ -18,46 +17,56 @@ const Main = styled.div` `}; `; +const Inner = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + const Title = styled(Alpha)` margin-bottom: 2.5rem; ${media.small`margin-bottom: 2.25rem;`}; `; -const Content = styled.div` - max-width: 25.9375rem; +const Blocks = styled.div` display: flex; - flex-direction: column; + justify-content: space-between; - ${Lead} { - ${media.small`margin-bottom: 2.25rem;`}; - } + ${media.small`display: block;`}; `; -const StyledCode = styled(Code)` - width: 520px; - height: 350px; +const IntroLead = styled(Lead)` + max-width: 25.9375rem; - ${media.small`margin-bottom: 2.25rem;`}; + ${media.small`margin-bottom: 1.5625rem;`}; +`; +const IntroAside = styled.div` + max-width: 32.5rem; + + ${media.small` + margin-left: -30px; + width: calc(100% + 60px); + `}; `; interface IntroProps { title: string; - children: React.ReactNode; + children?: React.ReactNode; } function Intro(props: IntroProps) { return (
- + {props.title} - {props.children} - - Function execute transaction + {props.children} +
); } export default Intro; +export { IntroLead, IntroAside, Intro }; diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx index ccaa60d5a3..8fd1ace434 100644 --- a/packages/dev-tools-pages/ts/pages/Cov.tsx +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -9,19 +9,28 @@ 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 Intro from 'ts/components/Intro'; import Breakout from 'ts/components/Breakout'; +import { Intro, IntroLead, IntroAside } from 'ts/components/Intro'; function Cov() { return ( -

+ 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. -

+ + + + {`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);`} + +
+