diff options
| -rw-r--r-- | packages/dev-tools-pages/.gitignore | 3 | ||||
| -rw-r--r-- | packages/dev-tools-pages/assets/fonts/.gitkeep | 0 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Breakout.tsx | 12 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Button.tsx | 7 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 22 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/ContentBlock.tsx | 18 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Footer.tsx | 9 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Hero.tsx | 12 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Intro.tsx | 35 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/List.tsx | 6 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Tabs.tsx | 97 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Trace.tsx | 22 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/globalStyles.tsx | 122 |
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); |