diff options
18 files changed, 119 insertions, 58 deletions
diff --git a/packages/dev-tools-pages/assets/images/og-compiler.png b/packages/dev-tools-pages/assets/images/og-compiler.png Binary files differnew file mode 100644 index 000000000..59916f56e --- /dev/null +++ b/packages/dev-tools-pages/assets/images/og-compiler.png diff --git a/packages/dev-tools-pages/assets/images/og-cov.png b/packages/dev-tools-pages/assets/images/og-cov.png Binary files differnew file mode 100644 index 000000000..0ba09a6e6 --- /dev/null +++ b/packages/dev-tools-pages/assets/images/og-cov.png diff --git a/packages/dev-tools-pages/assets/images/og-profiler.png b/packages/dev-tools-pages/assets/images/og-profiler.png Binary files differnew file mode 100644 index 000000000..0a3c5e202 --- /dev/null +++ b/packages/dev-tools-pages/assets/images/og-profiler.png diff --git a/packages/dev-tools-pages/assets/images/og-trace.png b/packages/dev-tools-pages/assets/images/og-trace.png Binary files differnew file mode 100644 index 000000000..e82fdc4ea --- /dev/null +++ b/packages/dev-tools-pages/assets/images/og-trace.png diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js index 581904068..7609a07e9 100644 --- a/packages/dev-tools-pages/pages.js +++ b/packages/dev-tools-pages/pages.js @@ -11,9 +11,9 @@ const pages = [ 'og-title': { property: 'og:title', content: 'sol-compiler' }, 'og-description': { property: 'og:description', content: 'Solidity compilation that just works' }, 'og-type': { property: 'og:type', content: 'website' }, - 'og-image': { property: 'og:image', content: '' }, + 'og-image': { property: 'og:image', content: '/images/og-compiler' }, 'twitter:site': '@0xproject', - 'twitter:image': '', + 'twitter:image': '/images/og-compiler', }, }, { @@ -28,9 +28,9 @@ const pages = [ 'og-title': { property: 'og:title', content: 'sol-cov' }, 'og-description': { property: 'og:description', content: 'Solidity code coverage' }, 'og-type': { property: 'og:type', content: 'website' }, - 'og-image': { property: 'og:image', content: '' }, + 'og-image': { property: 'og:image', content: '/images/og-cov' }, 'twitter:site': '@0xproject', - 'twitter:image': '', + 'twitter:image': '/images/og-cov', }, }, { @@ -45,9 +45,9 @@ const pages = [ 'og-title': { property: 'og:title', content: 'sol-profiler' }, 'og-description': { property: 'og:description', content: 'Gas profiling for Solidity' }, 'og-type': { property: 'og:type', content: 'website' }, - 'og-image': { property: 'og:image', content: '' }, + 'og-image': { property: 'og:image', content: '/images/og-profiler' }, 'twitter:site': '@0xproject', - 'twitter:image': '', + 'twitter:image': '/images/og-profiler', }, }, { @@ -62,9 +62,9 @@ const pages = [ 'og-title': { property: 'og:title', content: 'sol-trace' }, 'og-description': { property: 'og:description', content: 'Human-readable stack traces' }, 'og-type': { property: 'og:type', content: 'website' }, - 'og-image': { property: 'og:image', content: '' }, + 'og-image': { property: 'og:image', content: '/images/og-trace' }, 'twitter:site': '@0xproject', - 'twitter:image': '', + 'twitter:image': '/images/og-trace', }, }, ]; 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, }; |
