aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-25 20:12:17 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-25 20:12:17 +0800
commit370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7 (patch)
treecbf6fe0381a5c21de582b8f32641395d19b9000d /packages/dev-tools-pages
parent43b792f307118e09a683f3f76f0e0f22ee2d898d (diff)
parentb8441265167b719db3db940b76fb4b3b0e0edecd (diff)
downloaddexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar.gz
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar.bz2
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar.lz
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar.xz
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.tar.zst
dexon-sol-tools-370d15ed1d5b5cdd1ab59f391f93a96ebb4d33e7.zip
Merge remote-tracking branch 'origin/dev-tools-pages' into dev-tools-pages
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx47
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx4
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx6
3 files changed, 35 insertions, 22 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index e5c95d4c2..a5a7e9dc4 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
import { Alpha, Lead } from './Typography';
import Container from './Container';
+import Breakout from './Breakout';
const Main = styled.div`
background-color: ${colors.lightGray};
@@ -17,12 +18,6 @@ const Main = styled.div`
`};
`;
-const Inner = styled.div`
- display: flex;
- flex-direction: column;
- width: 100%;
-`;
-
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
@@ -32,38 +27,56 @@ const Title = styled(Alpha)`
const Blocks = styled.div`
display: flex;
justify-content: space-between;
+ width: 100%;
${media.small`display: block;`};
`;
-const IntroLead = styled(Lead)`
+
+const StyledIntroLead = styled(Lead)`
max-width: 25.9375rem;
${media.small`margin-bottom: 1.5625rem;`};
`;
-const IntroAside = styled.div`
+
+const StyledIntroAside = styled.div`
max-width: 32.5rem;
position: relative;
-
- ${media.small`
- margin-left: -30px;
- width: calc(100% + 60px);
- `};
`;
interface IntroProps {
+ children?: React.ReactNode;
+}
+
+interface IntroLeadProps {
title: string;
children?: React.ReactNode;
}
+function IntroLead(props: IntroLeadProps) {
+ return (
+ <StyledIntroLead>
+ <Title>{props.title}</Title>
+ {props.children}
+ </StyledIntroLead>
+ )
+}
+
+function IntroAside(props: IntroProps) {
+ return (
+ <Breakout>
+ <StyledIntroAside>
+ {props.children}
+ </StyledIntroAside>
+ </Breakout>
+ )
+}
+
function Intro(props: IntroProps) {
return (
<Container wide>
<Main>
- <Inner>
- <Title>{props.title}</Title>
- <Blocks>{props.children}</Blocks>
- </Inner>
+ <Blocks>{props.children}</Blocks>
</Main>
</Container>
);
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 197ff174d..679cf6f62 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -15,8 +15,8 @@ import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
function Cov() {
return (
<Base context={context}>
- <Intro title="Measure your tests">
- <IntroLead>
+ <Intro>
+ <IntroLead title="Measure your tests">
When it comes to writing smart contracts, testing is one of the most important steps of the process.
In order to quantify the robustness of your Solidity testing suite, you need to measure its code
coverage.
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 462789a16..f147d9d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -5,18 +5,18 @@ import context from 'ts/context/profiler';
import Base from 'ts/components/Base';
import Content from 'ts/components/Content';
import ContentBlock from 'ts/components/ContentBlock';
+import Breakout from 'ts/components/Breakout';
import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
function Profiler() {
return (
<Base context={context}>
- <Intro title="Headline">
- <IntroLead>
+ <Intro>
+ <IntroLead title="Headline">
Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
This will help you find unexpected inefficiencies in parts of your smart contract, and take a
data-driven approach to optimizing it.