aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-22 20:48:07 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-23 15:57:53 +0800
commitf31f9eb24e5376f57d0b4b53a00fd44cf65e9448 (patch)
tree8bdb7386e4fdc6411cd69936597237da4c12589d /packages/dev-tools-pages/ts
parentbc029df0820dfffe9e46bedaf1b42191c2cd70ed (diff)
downloaddexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar.gz
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar.bz2
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar.lz
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar.xz
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.tar.zst
dexon-sol-tools-f31f9eb24e5376f57d0b4b53a00fd44cf65e9448.zip
Implements Lead typography
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx9
-rw-r--r--packages/dev-tools-pages/ts/components/Typography.tsx8
3 files changed, 13 insertions, 9 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 597dddce0..50fa24c13 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -2,8 +2,7 @@ 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 Code from './Code';
const Main = styled.div`
@@ -43,7 +42,7 @@ function Intro(props: IntroProps) {
<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>
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 };