aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx40
-rw-r--r--packages/dev-tools-pages/ts/components/Container.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx23
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx9
-rw-r--r--packages/dev-tools-pages/ts/components/Typography.tsx8
5 files changed, 60 insertions, 31 deletions
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index bda29dc1f..a5b92da13 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,22 +1,30 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
+import Container from './Container';
import InlineCode from './InlineCode';
const Cards = styled.dl`
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
- align-items: start;
- grid-gap: 1.25rem;
- margin-top: 0;
- margin-bottom: 0;
+ column-count: 3;
+ column-gap: 1.25rem;
+
+ ${media.small`
+ column-count: 1;
+ `}: ;
`;
const Card = styled.div`
background-color: ${colors.lightGray};
padding: 3.125rem;
padding-bottom: 2.5rem;
+ display: inline-block;
+ margin-bottom: 1.25rem;
+ width: 100%;
+
+ ${media.small`
+ padding: 1.875rem;
+ `};
`;
const Dt = styled.dt`
@@ -63,14 +71,16 @@ const cards = [
function Compiler() {
return (
- <Cards>
- {cards.map(card => (
- <Card key={card.title.split(' ').join('-')}>
- <Dt>{card.title}</Dt>
- <Dd>{card.body}</Dd>
- </Card>
- ))}
- </Cards>
+ <Container wide>
+ <Cards>
+ {cards.map(card => (
+ <Card key={card.title.split(' ').join('-')}>
+ <Dt>{card.title}</Dt>
+ <Dd>{card.body}</Dd>
+ </Card>
+ ))}
+ </Cards>
+ </Container>
);
}
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 597dddce0..29d1d36fe 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import styled from 'styled-components';
import { media, colors } from '../variables';
-import { Alpha, Beta } from './Typography';
-import Breakout from './Breakout';
+import { Alpha, Lead } from './Typography';
+import Container from './Container';
import Code from './Code';
const Main = styled.div`
@@ -29,6 +29,15 @@ const Content = styled.div`
display: flex;
flex-direction: column;
+ ${Lead} {
+ ${media.small`margin-bottom: 2.25rem;`};
+ }
+`;
+
+const StyledCode = styled(Code)`
+ width: 520px;
+ height: 350px;
+
${media.small`margin-bottom: 2.25rem;`};
`;
@@ -39,17 +48,15 @@ interface IntroProps {
function Intro(props: IntroProps) {
return (
- <Breakout>
+ <Container wide>
<Main>
<Content>
<Title>{props.title}</Title>
- <Beta as="div">{props.children}</Beta>
+ <Lead as="div">{props.children}</Lead>
</Content>
- <Breakout>
- <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
- </Breakout>
+ <StyledCode> Function execute transaction</StyledCode>
</Main>
- </Breakout>
+ </Container>
);
}
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 5e52ee154..62994a810 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { colors, media } from '../variables';
import { withContext, Props } from './withContext';
-import { Alpha, Beta, Gamma } from './Typography';
+import { Alpha, Lead, Gamma } from './Typography';
import Container from './Container';
import Code from './Code';
@@ -24,7 +24,7 @@ function Trace(props: Props) {
<Wrapper>
<Block>
<Alpha>The Issue</Alpha>
- <MainCopy as="p">
+ <MainCopy>
Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
line of code. The only hint you'll get is a generic error.
</MainCopy>
@@ -57,7 +57,7 @@ function Trace(props: Props) {
<Block background={colors.secondary}>
<Alpha>The Fix</Alpha>
- <MainCopy as="p">
+ <MainCopy>
Sol-trace will give you full stack traces, including contract names, line numbers and code
snippets, every time you encounter an error.
</MainCopy>
@@ -155,11 +155,10 @@ const Block =
`};
`;
-const MainCopy = styled(Beta)`
+const MainCopy = styled(Lead)`
margin-bottom: 3.1875rem;
${media.small`
margin-bottom: 1.125rem;
- font-size: 1rem;
`};
`;
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index deac8a976..de4b64457 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -19,8 +19,14 @@ const Gamma = styled.h4`
${media.small`font-size: 0.875rem;`};
`;
+const Lead = styled.p`
+ font-size: 1.25rem;
+
+ ${media.small`font-size: 1rem;`};
+`;
+
const Small = styled.p`
font-size: 0.875rem;
`;
-export { Alpha, Beta, Gamma, Small };
+export { Alpha, Beta, Gamma, Lead, Small };