diff options
Diffstat (limited to 'packages/dev-tools-pages/ts')
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 }; |