diff options
Diffstat (limited to 'packages/dev-tools-pages')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 2 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Compiler.tsx | 21 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/InlineCode.tsx | 2 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/List.tsx | 12 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Trace.tsx | 20 |
5 files changed, 33 insertions, 24 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index e9a503f0b..b883dcbf8 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -178,7 +178,7 @@ class Code extends React.Component<CodeProps, CodeState> { <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> ) : null} </Base> - {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null} + {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button> : null} </Container> ); } diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index 995a53e89..2ca340146 100644 --- a/packages/dev-tools-pages/ts/components/Compiler.tsx +++ b/packages/dev-tools-pages/ts/components/Compiler.tsx @@ -4,6 +4,7 @@ import { media, colors } from '../variables'; import Container from './Container'; import InlineCode from './InlineCode'; +import Breakout from './Breakout'; const Cards = styled.dl` column-count: 3; @@ -71,15 +72,17 @@ const cards = [ function Compiler() { return ( - <Container wide> - <Cards> - {cards.map(card => ( - <Card key={card.title.split(' ').join('-')}> - <Dt>{card.title}</Dt> - <Dd>{card.body}</Dd> - </Card> - ))} - </Cards> + <Container> + <Breakout> + <Cards> + {cards.map(card => ( + <Card key={card.title.split(' ').join('-')}> + <Dt>{card.title}</Dt> + <Dd>{card.body}</Dd> + </Card> + ))} + </Cards> + </Breakout> </Container> ); } diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx index 4b5afa95c..9f25927cd 100644 --- a/packages/dev-tools-pages/ts/components/InlineCode.tsx +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -9,7 +9,7 @@ interface InlineCodeProps { const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)` background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)}; - padding: 0.1875rem; + padding: 0.3125rem; `; export default InlineCode; diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx index ceb3bc108..b9bc4ab24 100644 --- a/packages/dev-tools-pages/ts/components/List.tsx +++ b/packages/dev-tools-pages/ts/components/List.tsx @@ -5,18 +5,24 @@ import { media } from '../variables'; const StyledList = styled.ul` list-style-type: none; margin: 0; - padding-inline-start: 0.2rem; + padding-inline-start: 0rem; + position: relative; `; const StyledItem = styled.li` + position: relative; + padding-left: 26px; + :before { content: ''; + position: absolute; + left: 0; border: 1px solid black; width: 0.6875rem; height: 0.6875rem; display: inline-block; - transform: rotate(45deg); - margin-right: 1.09375rem; + transform: rotate(45deg) translateY(-50%); + top: 12px; } :not(:last-child) { margin-bottom: 0.5625rem; diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 3b272ce98..d5f323775 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -28,7 +28,7 @@ function Trace(props: Props) { 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> - <Code light>Error: VM Exception while processing transaction: rever</Code> + <Code light>Error: VM Exception while processing transaction: revert</Code> <List> <Item> @@ -62,7 +62,7 @@ function Trace(props: Props) { snippets, every time you encounter an error. </MainCopy> <Code light language="javascript"> - {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8 + {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8 require( isValidSignature( hash, @@ -71,7 +71,7 @@ function Trace(props: Props) { ), "INVALID_SIGNATURE" )`} - </Code> + </Code> <List> <Item> @@ -104,13 +104,11 @@ function Trace(props: Props) { const StyledSection = styled.section < - TraceProps > - ` + TraceProps > + ` max-width: 90rem; margin: 0 auto; background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); - padding-top: 6.25rem; - padding-bottom: 5.25rem; ${media.small` background: none @@ -136,11 +134,13 @@ const Wrapper = styled(Container)` const Block = styled.div < - TraceProps > - ` + TraceProps > + ` width: 50%; background: ${props => (props.background ? props.background : colors.black)}; color: ${props => (props.background ? 'inherit' : colors.white)}; + padding-top: 6.25rem; + padding-bottom: 5.25rem; :first-of-type { padding-right: 6.25rem; @@ -191,7 +191,7 @@ const Item = styled.li` } `; -const Copy = styled.div<{dark?: boolean;}>` +const Copy = styled.div<{ dark?: boolean; }>` max-width: 20rem; margin-right: 5.875rem; ${props => props.dark && ` |