aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-22 21:20:25 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-23 15:58:34 +0800
commit614ca51cb130003f523209412ad7f8a70604ebf3 (patch)
tree89b7448e3fb333e5cabed7d28e1ce96780228af7 /packages/dev-tools-pages/ts
parentf31f9eb24e5376f57d0b4b53a00fd44cf65e9448 (diff)
downloaddexon-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/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Container.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx5
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>
);
}