aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/dev-tools-pages/.gitignore3
-rw-r--r--packages/dev-tools-pages/assets/fonts/.gitkeep0
-rw-r--r--packages/dev-tools-pages/ts/components/Breakout.tsx12
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx7
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx22
-rw-r--r--packages/dev-tools-pages/ts/components/ContentBlock.tsx18
-rw-r--r--packages/dev-tools-pages/ts/components/Footer.tsx9
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx12
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx35
-rw-r--r--packages/dev-tools-pages/ts/components/List.tsx6
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx97
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx22
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx122
13 files changed, 222 insertions, 143 deletions
diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore
index 9e9db7dae..557b82311 100644
--- a/packages/dev-tools-pages/.gitignore
+++ b/packages/dev-tools-pages/.gitignore
@@ -1,2 +1,3 @@
public
-assets/fonts \ No newline at end of file
+assets/fonts/*.woff
+assets/fonts/*.woff2 \ No newline at end of file
diff --git a/packages/dev-tools-pages/assets/fonts/.gitkeep b/packages/dev-tools-pages/assets/fonts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/dev-tools-pages/assets/fonts/.gitkeep
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
new file mode 100644
index 000000000..fb76c8c29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+ ${media.small`
+ margin-left: -30px;
+ width: calc(100% + 60px);
+ `};
+`;
+
+export default Breakout;
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2d0fbc353..eae6aaf54 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,6 +1,7 @@
import styled from 'styled-components';
import { colors } from '../variables';
+import { media } from 'ts/variables';
import { withContext, Props } from './withContext';
interface ButtonProps extends Props {
@@ -22,6 +23,12 @@ const Button =
border-radius: 5rem;
padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
display: inline-block;
+ ${props =>
+ props.large &&
+ media.small`
+ font-size: 1rem;
+ padding: .875rem 1.5rem;
+ `}
`;
export default withContext(Button);
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 72b3e1af7..02bd0382e 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
+import { colors } from 'ts/variables';
import BaseButton from './Button';
interface CodeProps {
children: React.ReactNode;
language?: string;
+ light?: boolean;
}
interface CodeState {
@@ -26,13 +27,14 @@ const Base =
styled.div <
CodeProps >
`
- color: ${props => (props.language === undefined ? colors.white : 'inherit')};
- background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
- white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
- position: relative;
- &:hover ${Button} {
- opacity: 1;
- }
+ color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+ background-color: ${props =>
+ props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+ white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+ position: relative;
+ &:hover ${Button} {
+ opacity: 1;
+ }
`;
const StyledCode = styled.code`
@@ -92,10 +94,10 @@ class Code extends React.Component<CodeProps, CodeState> {
};
render() {
- const { language, children } = this.props;
+ const { language, light, children } = this.props;
return (
- <Base language={language}>
+ <Base language={language} light={light}>
<StyledPre>
{this.state.hlCode !== undefined ? (
<StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index fa558e9ab..39c99f6d9 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -3,18 +3,31 @@ import styled from 'styled-components';
import { withContext, Props } from './withContext';
import { Beta, Alpha } from './Typography';
+import { media } from 'ts/variables';
const Base = styled.div`
display: flex;
align-items: flex-start;
justify-content: space-between;
- &:not(:last-of-type) {
+ :not(:last-of-type) {
margin-bottom: 6.25rem;
}
+ ${Beta} {
+ margin-bottom: 2.5rem;
+ }
+ ${media.small`
+ display: block;
+ :not(:last-of-type) {
+ margin-bottom: 3.125rem;
+ }
+ `};
`;
const Content = styled.div`
width: 66.693548387%;
+ ${media.small`
+ width: 100%;
+ `};
`;
const Item = styled.div`
@@ -24,6 +37,9 @@ const Item = styled.div`
&:not(:last-of-type) {
margin-bottom: 2.5rem;
+ ${media.small`
+ margin-bottom: 1.875rem;
+ `};
}
`;
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 15e6a5b86..df2d920ac 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -71,7 +71,7 @@ const Top = styled.div`
const Icon = styled.div`
margin-right: 1.3125rem;
-
+ flex-shrink: 0;
${media.small`margin-right: 0.9375rem`};
`;
@@ -110,7 +110,12 @@ const ListItem = styled.li`
${media.small`margin-bottom: 1.875rem`};
}
- ${media.small`margin-bottom: 1.875rem`};
+ ${media.small`
+ margin-bottom: 1.875rem
+ :last-of-type {
+ margin-bottom: 0;
+ }
+ `};
`;
const Small = styled.small`
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 5ba469fca..f52ce5bc9 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
+import { media } from 'ts/variables';
import { withContext, Props } from './withContext';
import Button from './Button';
import { Beta } from './Typography';
@@ -23,6 +24,8 @@ const StyledHero = styled.section`
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;
@@ -33,10 +36,19 @@ const Subtitle = styled.h2`
font-size: 3.75rem;
line-height: 1.16;
margin-bottom: 1.5rem;
+
+ ${media.small`
+ font-size: 2.25rem;
+ line-height: 1.1;
+ margin-bottom: 1.375rem;
+ `};
`;
const Tagline = styled(Beta)`
margin-bottom: 2rem;
+ ${media.small`
+ margin-bottom: 1.25rem;
+ `};
`;
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 cddee5b6f..597dddce0 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,30 +1,35 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
const Main = styled.div`
background-color: ${colors.lightGray};
padding: 6.25rem;
display: flex;
justify-content: space-between;
+
+ ${media.small`
+ padding: 2.5rem 1.875rem
+ display: block;
+ `};
`;
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
+
+ ${media.small`margin-bottom: 2.25rem;`};
`;
const Content = styled.div`
max-width: 25.9375rem;
display: flex;
flex-direction: column;
-`;
-const Code = styled.div`
- background-color: ${colors.darkGray};
- width: 520px;
- height: 350px;
+ ${media.small`margin-bottom: 2.25rem;`};
`;
interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
function Intro(props: IntroProps) {
return (
- <Main>
- <Content>
- <Title>{props.title}</Title>
- <Beta as="div">{props.children}</Beta>
- </Content>
- <Code />
- </Main>
+ <Breakout>
+ <Main>
+ <Content>
+ <Title>{props.title}</Title>
+ <Beta as="div">{props.children}</Beta>
+ </Content>
+ <Breakout>
+ <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+ </Breakout>
+ </Main>
+ </Breakout>
);
}
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index df1fdc53b..3041fc475 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
+import { media } from '../variables';
const StyledList = styled.ul`
list-style-type: none;
@@ -17,6 +18,11 @@ const StyledItem = styled.li`
transform: rotate(45deg);
margin-right: 1.09375rem;
}
+ :not(:last-child) {
+ margin-bottom: 0.5625rem;
+
+ ${media.small`margin-bottom: 0.375rem`};
+ }
`;
interface ListProps {
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..5307483e8 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,37 +1,40 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
-
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
-
-import {withContext, Props} from './withContext';
+import { colors } from 'ts/variables';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
+import Breakout from './Breakout';
+import { withContext, Props } from './withContext';
const StyledTabList = styled(TabList)`
- text-transform: uppercase;
- list-style: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
+ text-transform: uppercase;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
`;
const StyledTab = styled(Tab)`
- height: 2.5rem;
- padding-left: 1rem;
- padding-right: 1rem;
- display: flex;
- justify-content: space-around;
- align-items: center;
- float: left;
- &:not(:first-of-type) {
- margin-left: .25rem;
- }
- &:focus, &:hover {
- color: red;
- outline: 0;
- }
+ height: 2.5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ float: left;
+ &:not(:first-of-type) {
+ margin-left: 0.25rem;
+ }
+ &:focus,
+ &:hover {
+ color: red;
+ outline: 0;
+ }
`;
-const Root = styled.div<{primaryColor: string;}>`
+const Root =
+ styled.div <
+ { primaryColor: string } >
+ `
${StyledTab} {
background-color: ${props => props.primaryColor};
}
@@ -41,41 +44,37 @@ const Root = styled.div<{primaryColor: string;}>`
`;
interface TabsProps extends Props {
- children: React.ReactNode;
+ children: React.ReactNode;
}
function Tabs(props: TabsProps) {
- return (
- <Root primaryColor={props.colors.secondary}>
- <ReactTabs>
- <StyledTabList>
- { React.Children.map(props.children, child => {
- const {props} = React.cloneElement(child as React.ReactElement<any>);
- return <StyledTab>{props.title}</StyledTab>
- }) }
- </StyledTabList>
+ return (
+ <Breakout>
+ <Root primaryColor={props.colors.secondary}>
+ <ReactTabs>
+ <StyledTabList>
+ {React.Children.map(props.children, child => {
+ const { props } = React.cloneElement(child as React.ReactElement<any>);
+ return <StyledTab>{props.title}</StyledTab>;
+ })}
+ </StyledTabList>
- { React.Children.map(props.children, child => (
- <TabPanel>{child}</TabPanel>
- )) }
- </ReactTabs>
- </Root>
- )
+ {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+ </ReactTabs>
+ </Root>
+ </Breakout>
+ );
}
interface TabBlockProps {
- title: string;
- children: React.ReactNode;
+ title: string;
+ children: React.ReactNode;
}
function TabBlock(props: TabBlockProps) {
- return (
- <React.Fragment>
- {props.children}
- </React.Fragment>
- )
+ return <React.Fragment>{props.children}</React.Fragment>;
}
const ContextTabs = withContext(Tabs);
-export {ContextTabs as Tabs, TabBlock}; \ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 545e87d53..5e52ee154 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>Error: VM Exception while processing transaction: rever</Code>
+ <Code light>Error: VM Exception while processing transaction: rever</Code>
<List>
<Item>
@@ -39,7 +39,7 @@ function Trace(props: Props) {
completely in the dark about its exact location.
</p>
</Copy>
- <NoLocation />
+ <Icon as={NoLocation} />
</Item>
<Item>
@@ -50,7 +50,7 @@ function Trace(props: Props) {
the failing line of code quickly becomes a daunting task.
</p>
</Copy>
- <TimeConsuming />
+ <Icon as={TimeConsuming} />
</Item>
</List>
</Block>
@@ -61,7 +61,7 @@ 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>Error: VM Exception while processing transaction: rever</Code>
+ <Code light>Error: VM Exception while processing transaction: rever</Code>
<List>
<Item>
@@ -72,7 +72,7 @@ function Trace(props: Props) {
from.
</p>
</Copy>
- <ExactLocation />
+ <Icon as={ExactLocation} />
</Item>
<Item>
@@ -83,7 +83,7 @@ function Trace(props: Props) {
on linen X of contract Y", it drastically improves the developer experience.
</p>
</Copy>
- <TimeSaving />
+ <Icon as={TimeSaving} />
</Item>
</List>
</Block>
@@ -102,7 +102,11 @@ const StyledSection =
padding-top: 6.25rem;
padding-bottom: 5.25rem;
- ${media.small`background: none`};
+ ${media.small`
+ background: none
+ padding-top: 0;
+ padding-bottom: 0;
+ `};
`;
const Wrapper = styled(Container)`
@@ -185,4 +189,8 @@ const Copy = styled.div`
${media.small`margin-right: 2.0625rem;`};
`;
+const Icon = styled.div`
+ flex-shrink: 0;
+`;
+
export default withContext(Trace);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 13ecde7aa..f51ea4b1d 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
import { withContext } from 'ts/components/withContext';
const BaseStyles = createGlobalStyle`
- ${styledNormalize}
- ${hljsStyles}
+ ${styledNormalize}
+ ${hljsStyles}
- @font-face {
- font-family: "Maison Neue";
- src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
- font-weight: 300;
- font-display: swap;
- unicode-range: U+20-7E;
- }
- @font-face {
- font-family: "Maison Neue";
- src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
- font-weight: 500;
- font-display: swap;
- unicode-range: U+20-7E;
- }
- @font-face {
- font-family: "Maison Neue Mono";
- src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
- font-weight: 300;
- font-display: optional;
- unicode-range: U+20-7E;
- }
-
- html {
- font-size: 100%;
- box-sizing: border-box;
- }
-
- *, *::before, *::after {
- box-sizing: inherit;
- }
-
- body {
- font-family: "Maison Neue", system-ui, sans-serif;
- font-weight: 300;
- font-size: 1rem;
- line-height: 1.8;
+ @font-face {
+ font-family: "Maison Neue";
+ src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+ font-weight: 300;
+ font-display: swap;
+ unicode-range: U+20-7E;
+ }
+ @font-face {
+ font-family: "Maison Neue";
+ src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+ font-weight: 500;
+ font-display: swap;
+ unicode-range: U+20-7E;
+ }
+ @font-face {
+ font-family: "Maison Neue Mono";
+ src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+ font-weight: 300;
+ font-display: optional;
+ unicode-range: U+20-7E;
+ }
- ${media.small`font-size: 0.875rem;`};
+ html {
+ font-size: 100%;
+ box-sizing: border-box;
+ }
+
+ *, *::before, *::after {
+ box-sizing: inherit;
+ }
+
+ body {
+ font-family: "Maison Neue", system-ui, sans-serif;
+ font-weight: 300;
+ font-size: 1rem;
+ line-height: 1.8;
- }
+ ${media.small`font-size: 0.875rem;`};
+ }
- a {
- color: ${(props: any) => props.colors.link};
- text-decoration: none;
+ a {
+ color: ${(props: any) => props.colors.link};
+ text-decoration: none;
- &:hover {
- color: red; //what should this be?
+ &:hover {
+ color: red; //what should this be?
+ }
+ }
+
+ h1, h2, h3, h4 {
+ font-weight: 500;
+ margin: 0;
}
- }
-
- h1, h2, h3, h4 {
- font-weight: 500;
- margin: 0;
- }
- p {
- margin-top: 0;
- margin-bottom: 1em;
- &:not([class]):last-of-type {
- margin-bottom: 0;
+ p {
+ margin-top: 0;
+ margin-bottom: 1em;
+ &:not([class]):last-of-type {
+ margin-bottom: 0;
+ }
}
- }
- code {
- font-family: "Maison Neue Mono", monospace;
- }
+ code {
+ font-family: "Maison Neue Mono", monospace;
+ ${media.small`
+ font-size: .75rem;
+ `}
+ }
`;
export default withContext(BaseStyles);