aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-29 16:13:03 +0800
committerGitHub <noreply@github.com>2018-10-29 16:13:03 +0800
commit3d4041ecd3d9384853514ea0cebc445e630b106e (patch)
tree6c242f914a2a0e2547f107656558618750c82a06 /packages/dev-tools-pages
parent89e439c521aed35be72bee1094d8a431e5fc1d68 (diff)
downloaddexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar.gz
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar.bz2
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar.lz
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar.xz
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.tar.zst
dexon-sol-tools-3d4041ecd3d9384853514ea0cebc445e630b106e.zip
Feature/feedbacktweaks (#11)
* Fix typo * Fix 1px line showing in middle of divs * Increase inline code padding by 2px * Make masonry block not full width on screens larger than mobile * Align list items * Change button text to copied if it's been copied
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx2
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx21
-rw-r--r--packages/dev-tools-pages/ts/components/InlineCode.tsx2
-rw-r--r--packages/dev-tools-pages/ts/components/List.tsx12
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx20
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 && `