aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Breakout.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx15
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx13
-rw-r--r--packages/dev-tools-pages/ts/components/Container.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/ContentBlock.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx59
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx15
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx36
-rw-r--r--packages/dev-tools-pages/ts/context/compiler.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/cov.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/profiler.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/trace.tsx2
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx2
13 files changed, 111 insertions, 50 deletions
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
index fb76c8c29..39998e9c7 100644
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -4,8 +4,8 @@ import { media } from 'ts/variables';
const Breakout = styled.div`
${media.small`
- margin-left: -30px;
- width: calc(100% + 60px);
+ margin-left: -2.5rem;
+ width: calc(100% + 5rem);
`};
`;
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 65f1fce74..97c08ad21 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,8 @@ const Button =
ButtonProps >
`
font-family: inherit;
- font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+ font-size: ${props => (props.large ? '1rem' : '.875rem')};
+ line-height: 1;
font-weight: 500;
white-space: nowrap;
vertical-align: middle;
@@ -21,16 +22,20 @@ const Button =
color: ${colors.black};
border: 0;
border-radius: 5rem;
- padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
- display: inline-block;
+ height: ${props => (props.large ? '3.25rem' : '2rem')};
+ padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')};
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
:hover, :focus {
background-color: ${props => props.colors.secondary_alt};
}
${props =>
props.large &&
media.small`
- font-size: 1rem;
- padding: .875rem 1.5rem;
+ font-size: .875rem;
+ height: 2rem;
+ padding: 0 1.25rem;
`}
`;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index b883dcbf8..d1aeaeeb0 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,9 +1,15 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from 'ts/variables';
+import { colors, media } from 'ts/variables';
import BaseButton from './Button';
+const touch = Boolean(
+ 'ontouchstart' in window ||
+ (window as any).navigator.maxTouchPoints > 0 ||
+ (window as any).navigator.msMaxTouchPoints > 0,
+);
+
interface CodeProps {
children: React.ReactNode;
language?: string;
@@ -19,7 +25,7 @@ interface CodeState {
}
const Button = styled(BaseButton)`
- opacity: 0;
+ opacity: ${touch ? '1' : '0'};
position: absolute;
top: 1rem;
right: 1rem;
@@ -80,9 +86,10 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
position: relative;
padding-right: 1.5rem;
padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+
::before {
content: attr(data-test);
- font-size: 0.875rem;
+
width: ${props => props.gutterLength};
padding-left: 0.375rem;
padding-right: 0.375rem;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index 53fb8427f..de2de383b 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,5 +1,7 @@
import styled from 'styled-components';
+import { media } from 'ts/variables';
+
interface ContainerProps {
wide?: boolean;
}
@@ -10,7 +12,7 @@ const Container =
`
max-width: 77.5rem;
margin: 0 auto;
- width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
+ width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
`;
export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 6db4c3994..c54930902 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -45,6 +45,11 @@ const Item = styled.div`
const StyledTitle = styled(Alpha)`
color: ${props => props.color};
+ ${media.small`
+ & + div {
+ margin-top: 1.5rem;
+ }
+ `};
`;
interface ContentBlockProps extends Props {
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index e045a7ad4..e92ab6e9d 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,40 +6,46 @@ import { withContext, Props } from './withContext';
import Button from './Button';
import { Beta } from './Typography';
-const IMAGE_WIDTH = 2560;
-const IMAGE_HEIGHT = 800;
-
function Hero(props: Props) {
const { subtitle, tagline, title } = props;
return (
<React.Fragment>
<StyledHero>
- <Subtitle>{subtitle}</Subtitle>
- <Tagline as="p">{tagline}</Tagline>
- <Button as="a" href="#" large>
- Read the Docs
- </Button>
- </StyledHero>
+ <HeroContainer>
+ <Subtitle>{subtitle}</Subtitle>
+ <Tagline as="p">{tagline}</Tagline>
+ <Button as="a" href="#" large>
+ Read the Docs
+ </Button>
+ </HeroContainer>
- <ImageContainer>
- <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
- </ImageContainer>
+ <ImageContainer>
+ <Image
+ src={`/images/${title}@1x.gif`}
+ srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`}
+ />
+ </ImageContainer>
+ </StyledHero>
</React.Fragment>
);
}
const StyledHero = styled.section`
text-align: center;
- margin: 0 auto;
padding-top: 9.375rem;
padding-bottom: 2rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
- max-width: 590px;
min-height: min-content;
max-height: 37.5rem;
height: 80vh;
+ position: relative;
+`;
+
+const HeroContainer = styled.div`
+ margin: 0 auto;
+ max-width: 590px;
`;
const Subtitle = styled.h2`
@@ -63,20 +69,37 @@ const Tagline = styled(Beta)`
const ImageContainer = styled.div`
width: 100%;
- height: ${IMAGE_HEIGHT}px;
+ height: 800px;
position: absolute;
- top: 6.875rem;
+ top: 100%;
left: 0;
overflow: hidden;
+ transform: translateY(-50%);
z-index: -1;
+ ${media.xlarge`
+ height: 533.333333334px;
+ transform: translateY(-60%);
+ `};
+ ${media.small`
+ height: 400px;
+ transform: translateY(-70%);
+ `};
`;
const Image = styled.img`
- width: ${IMAGE_WIDTH}px;
+ width: min-content;
+ height: 100%;
position: absolute;
top: 0;
left: 50%;
- transform: translate(-50%);
+ transform: translateX(-50%);
+ object-fit: contain;
+ ${media.small`
+ height: 100%;
+ width: auto;
+ left: 0;
+ transform: translateX(-15%);
+ `};
`;
export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 86d29e36d..7a30d05c7 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -12,8 +12,10 @@ const Main = styled.div`
display: flex;
justify-content: space-between;
- ${media.medium`
+ ${media.large`
padding: 2.5rem 1.875rem
+ `};
+ ${media.medium`
display: block;
`};
`;
@@ -21,17 +23,24 @@ const Main = styled.div`
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
- ${media.small`margin-bottom: 2.25rem;`};
+ ${media.medium`margin-bottom: 2.25rem;`};
`;
const StyledIntroLead = styled(Lead)`
max-width: 25.9375rem;
- ${media.small`margin-bottom: 1.5625rem;`};
+ margin-right: 2rem;
+ ${media.medium`
+ max-width: 100%;
+ margin-bottom: 1.5625rem;
+ `};
`;
const StyledIntroAside = styled.div`
max-width: 32.5rem;
position: relative;
+ ${media.medium`
+ max-width: 100%;
+ `};
`;
interface IntroProps {
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index d5f323775..74aef69b5 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -6,6 +6,7 @@ import { withContext, Props } from './withContext';
import { Alpha, Lead, Gamma } from './Typography';
import Container from './Container';
import Code from './Code';
+import Breakout from './Breakout';
import ExactLocation from 'ts/icons/exact-location.svg';
import NoLocation from 'ts/icons/no-location.svg';
@@ -28,7 +29,9 @@ 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: revert</Code>
+ <Breakout>
+ <Code light>Error: VM Exception while processing transaction: rever</Code>
+ </Breakout>
<List>
<Item>
@@ -61,7 +64,8 @@ function Trace(props: Props) {
Sol-trace will give you full stack traces, including contract names, line numbers and code
snippets, every time you encounter an error.
</MainCopy>
- <Code light language="javascript">
+ <Breakout>
+ <Code light language="javascript">
{`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
require(
isValidSignature(
@@ -71,7 +75,8 @@ function Trace(props: Props) {
),
"INVALID_SIGNATURE"
)`}
- </Code>
+ </Code>
+ </Breakout>
<List>
<Item>
@@ -110,7 +115,7 @@ const StyledSection =
margin: 0 auto;
background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
- ${media.small`
+ ${media.large`
background: none
padding-top: 0;
padding-bottom: 0;
@@ -126,7 +131,7 @@ const Wrapper = styled(Container)`
${media.small`padding-bottom: 1.875rem;`};
}
- ${media.small`
+ ${media.large`
display: block;
width: 100%;
`};
@@ -149,19 +154,22 @@ const Block =
padding-left: 6.25rem;
}
- ${media.small`
- width: 100%;
- padding-top: 2.5rem;
- padding-bottom: 3.4375rem;
-
+ ${media.xlarge`
:first-of-type {
- padding-left: 1.875rem;
- padding-right: 1.875rem;
+ padding-right: 2.5rem;
}
:last-of-type {
- padding-left: 1.875rem;
- padding-right: 1.875rem;
+ padding-left: 2.5rem;
}
+ `}
+ ${media.large`
+ width: 100%;
+ padding: 2.5rem;
+ `}
+
+ ${media.small`
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
`};
`;
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 06860b1e9..e14c1936e 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -12,6 +12,6 @@ export default {
secondary_alt: '#C4F2FC',
type: '#30C3E3',
type_alt: '#16A9C9',
- dark: '#00404E',
+ dark: '#4B818D',
},
};
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index bf3883920..47f115582 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -12,6 +12,6 @@ export default {
secondary_alt: '#F1D882',
type: '#D7AE1B',
type_alt: '#BD9406',
- dark: '#423300',
+ dark: '#817033',
},
};
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index d5dd2a394..9593c08ec 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -12,6 +12,6 @@ export default {
secondary_alt: '#FECEBE',
type: '#EB8666',
type_alt: '#D16745',
- dark: '#5F1700',
+ dark: '#985C49',
},
};
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index f001e570c..697a4263a 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -12,6 +12,6 @@ export default {
secondary_alt: '#BFCDFF',
type: '#7090FF',
type_alt: '#355CE5',
- dark: '#0127AB',
+ dark: '#2A4ABC',
},
};
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 76a675546..258e5d225 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -15,6 +15,8 @@ interface SizesInterface {
}
const sizes: SizesInterface = {
+ xlarge: 1420,
+ large: 1000,
medium: 900,
small: 650,
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 17:08:18 +0800