Implements Lead typography

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>

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;
     `};
 `;
 

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 };