diff options
| author | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-22 21:20:25 +0800 |
|---|---|---|
| committer | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-23 15:58:34 +0800 |
| commit | 614ca51cb130003f523209412ad7f8a70604ebf3 (patch) | |
| tree | 89b7448e3fb333e5cabed7d28e1ce96780228af7 /packages/dev-tools-pages | |
| parent | f31f9eb24e5376f57d0b4b53a00fd44cf65e9448 (diff) | |
| download | dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar.gz dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar.bz2 dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar.lz dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar.xz dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.tar.zst dexon-sol-tools-614ca51cb130003f523209412ad7f8a70604ebf3.zip | |
Adds wide prop for full width sections
Diffstat (limited to 'packages/dev-tools-pages')
| -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> ); } |