From f31f9eb24e5376f57d0b4b53a00fd44cf65e9448 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Mon, 22 Oct 2018 14:48:07 +0200 Subject: Implements Lead typography --- packages/dev-tools-pages/ts/components/Intro.tsx | 5 ++--- packages/dev-tools-pages/ts/components/Trace.tsx | 9 ++++----- packages/dev-tools-pages/ts/components/Typography.tsx | 8 +++++++- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'packages/dev-tools-pages/ts') 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) {
{props.title} - {props.children} + {props.children} Function execute transaction Function execute transaction Function execute transaction 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) { The Issue - + 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. @@ -57,7 +57,7 @@ function Trace(props: Props) { The Fix - + Sol-trace will give you full stack traces, including contract names, line numbers and code snippets, every time you encounter an error. @@ -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 }; -- cgit v1.2.3 From 614ca51cb130003f523209412ad7f8a70604ebf3 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Mon, 22 Oct 2018 15:20:25 +0200 Subject: Adds wide prop for full width sections --- packages/dev-tools-pages/ts/components/Container.tsx | 11 +++++++++-- packages/dev-tools-pages/ts/components/Intro.tsx | 5 +++-- 2 files changed, 12 insertions(+), 4 deletions(-) (limited to 'packages/dev-tools-pages/ts') 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 ( - +
{props.title} @@ -48,7 +49,7 @@ function Intro(props: IntroProps) { Function execute transaction Function execute transaction Function execute transaction
- + ); } -- cgit v1.2.3 From f0b9365ca9c3df6ab2a6ab8bd3c43713d1bbd0d3 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Mon, 22 Oct 2018 15:27:31 +0200 Subject: Responsive intro, again --- packages/dev-tools-pages/ts/components/Intro.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'packages/dev-tools-pages/ts') diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index 8bba2dbe5..29d1d36fe 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -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;`}; `; @@ -45,9 +54,7 @@ function Intro(props: IntroProps) { {props.title} {props.children} - - Function execute transaction Function execute transaction Function execute transaction - + Function execute transaction
); -- cgit v1.2.3 From 66848ef80ffc7d8d7566d8c9623198fd705ec0eb Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Mon, 22 Oct 2018 16:50:18 +0200 Subject: Responsive Compiler --- .../dev-tools-pages/ts/components/Compiler.tsx | 40 ++++++++++++++-------- 1 file changed, 25 insertions(+), 15 deletions(-) (limited to 'packages/dev-tools-pages/ts') diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index bda29dc1f..1c975e30d 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: 0 0 1.25rem; + width: 100%; + + ${media.small` + padding: 1.875rem; + `}; `; const Dt = styled.dt` @@ -63,14 +71,16 @@ const cards = [ function Compiler() { return ( - - {cards.map(card => ( - -
{card.title}
-
{card.body}
- - ))} - + + + {cards.map(card => ( + +
{card.title}
+
{card.body}
+ + ))} + + ); } -- cgit v1.2.3 From 0836ab370e179f197f654034e8e813c8617f73cb Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 23 Oct 2018 10:17:48 +0200 Subject: Update margin-bottom Co-Authored-By: mepearso --- packages/dev-tools-pages/ts/components/Compiler.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts') diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index 1c975e30d..a5b92da13 100644 --- a/packages/dev-tools-pages/ts/components/Compiler.tsx +++ b/packages/dev-tools-pages/ts/components/Compiler.tsx @@ -19,7 +19,7 @@ const Card = styled.div` padding: 3.125rem; padding-bottom: 2.5rem; display: inline-block; - margin: 0 0 1.25rem; + margin-bottom: 1.25rem; width: 100%; ${media.small` -- cgit v1.2.3