diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/ContentBlock.tsx | 17 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Main.tsx | 43 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/Compiler.tsx | 69 |
3 files changed, 79 insertions, 50 deletions
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx index 56d52a150..fcd85830e 100644 --- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Beta } from './Typography'; +import { withContext, Props } from './withContext'; +import { Beta, Alpha } from './Typography'; const Base = styled.div` display: flex; @@ -26,8 +27,14 @@ const Item = styled.div` } `; -interface ContentBlockProps { +const StyledTitle = styled(Alpha)` + color: ${props => props.color}; + margin-bottom: 6.25rem; +`; + +interface ContentBlockProps extends Props { title: string; + main?: boolean; children: React.ReactNode; } @@ -36,12 +43,14 @@ function ContentBlock(props: ContentBlockProps) { return <Item>{child}</Item>; }); + const Title = props.main ? StyledTitle : Beta; + return ( <Base> - <Beta>{props.title}</Beta> + <Title color={props.colors.main}>{props.title}</Title> <Content>{children}</Content> </Base> ); } -export default ContentBlock; +export default withContext(ContentBlock); diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx index 8046abc91..6c0270dbc 100644 --- a/packages/dev-tools-pages/ts/components/Main.tsx +++ b/packages/dev-tools-pages/ts/components/Main.tsx @@ -1,33 +1,44 @@ import * as React from 'react'; import styled from 'styled-components'; -import { withContext, Props } from './withContext'; +import { Beta } from './Typography'; +import Container from './Container'; +import ContentBlock from './ContentBlock'; -import { Alpha } from './Typography'; - -const StyledMain = styled.div` +const StyledMain = + styled.div < + MainProps > + ` padding-top: 6.25rem; padding-bottom: 6.25rem; + ${props => + props.dark + ? ` + background-color: #000; + color: #fff; + ` + : ''}; `; -const Title = styled(Alpha)` - color: ${props => props.color}; - margin-bottom: 6.25rem; -`; - -interface MainProps extends Props { +interface MainProps { + title?: string; + subtitle?: string; + dark?: boolean; children: React.ReactNode; } function Main(props: MainProps) { return ( - <StyledMain> - <Title as="h2" color={props.colors.main}> - Get started - </Title> - {props.children} + <StyledMain dark={props.dark}> + <Container> + <ContentBlock main title={props.title || 'Get started'}> + {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null} + </ContentBlock> + + {props.children} + </Container> </StyledMain> ); } -export default withContext(Main); +export default Main; diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx index 35c810cb3..e7336f1b1 100644 --- a/packages/dev-tools-pages/ts/pages/Compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -15,40 +15,49 @@ import CompilerComponent from 'ts/components/Compiler'; function Compiler() { return ( <Base context={context}> - <Container> - <CompilerComponent /> - <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> + <CompilerComponent /> + <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> + <Main + title="Artifacts" + subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need." + dark + > + <ContentBlock title="Production"> + <p> + Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can + define which parts of the artifact you need. + </p> + </ContentBlock> + </Main> </Base> ); } |