diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Container.tsx | 11 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Intro.tsx | 5 |
2 files changed, 12 insertions, 4 deletions
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx index d6df7a0b4..53fb8427f 100644 --- a/packages/dev-tools-pages/ts/components/Container.tsx +++ b/packages/dev-tools-pages/ts/components/Container.tsx @@ -1,9 +1,16 @@ import styled from 'styled-components'; -const Container = styled.div` +interface ContainerProps { + wide?: boolean; +} + +const Container = + styled.div < + ContainerProps > + ` max-width: 77.5rem; - width: calc(100% - 3.75rem); margin: 0 auto; + width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')}; `; export default Container; diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index 50fa24c13..8bba2dbe5 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { media, colors } from '../variables'; import { Alpha, Lead } from './Typography'; +import Container from './Container'; import Code from './Code'; const Main = styled.div` @@ -38,7 +39,7 @@ interface IntroProps { function Intro(props: IntroProps) { return ( - <Breakout> + <Container wide> <Main> <Content> <Title>{props.title}</Title> @@ -48,7 +49,7 @@ function Intro(props: IntroProps) { <Code>Function execute transaction Function execute transaction Function execute transaction</Code> </Breakout> </Main> - </Breakout> + </Container> ); } |