From 561f441a5bfc4822b0974169605d089b4f687bf5 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 09:37:14 +0200 Subject: Implements color variables and updates components --- packages/dev-tools-pages/ts/components/Trace.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 50bbd449a..98695177d 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -97,7 +98,7 @@ const StyledSection = ` max-width: 90rem; margin: 0 auto; - background: linear-gradient(to right, #000 50%, ${props => props.background} 50%); + background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; `; -- cgit From 585ca203b02e902b3dd5141bcacd0ffc5740e0c1 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:32:59 +0200 Subject: Changed name of export to colors and updates components --- packages/dev-tools-pages/ts/components/Trace.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 98695177d..f4b4e76a3 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -98,7 +98,7 @@ const StyledSection = ` max-width: 90rem; margin: 0 auto; - background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%); + background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; `; @@ -116,8 +116,8 @@ const Block = TraceProps > ` width: 50%; - background: ${props => (props.background ? props.background : '#000')}; - color: ${props => (props.background ? 'inherit' : '#fff')}; + background: ${props => (props.background ? props.background : colors.black)}; + color: ${props => (props.background ? 'inherit' : colors.white)}; :first-of-type { padding-right: 6.25rem; -- cgit From 135a623b1f783a24ff4885a3dd0209fcaeb85678 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 14:29:59 +0200 Subject: Responsive trace --- packages/dev-tools-pages/ts/components/Trace.tsx | 38 ++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index f4b4e76a3..fe1f357c7 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../variables'; +import { colors, media } from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -101,6 +101,8 @@ const StyledSection = background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; + + ${media.small`background: none`}; `; const Wrapper = styled(Container)` @@ -108,7 +110,14 @@ const Wrapper = styled(Container)` ${Alpha} { padding-bottom: 2.5rem; + + ${media.small`padding-bottom: 1.875rem;`}; } + + ${media.small` + display: block; + width: 100%; + `}; `; const Block = @@ -125,27 +134,52 @@ const Block = :last-of-type { padding-left: 6.25rem; } + + ${media.small` + width: 100%; + padding-top: 2.5rem; + padding-bottom: 3.4375rem; + + :first-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + :last-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + `}; `; const MainCopy = styled(Beta)` margin-bottom: 3.1875rem; + ${media.small`margin-bottom: 1.125rem;`}; `; const List = styled.ul` margin-top: 6.25rem; margin-bottom: 0; padding: 0; + + ${media.small`margin-top: 3.4375rem;`}; `; const Item = styled.li` display: flex; align-items: center; - margin-bottom: 4.4375rem; + + :not(:last-child) { + margin-bottom: 4.4375rem; + + ${media.small`margin-bottom: 3.4375rem;`}; + } `; const Copy = styled.div` max-width: 20rem; margin-right: 5.875rem; + + ${media.small`margin-right: 2.0625rem;`}; `; export default withContext(Trace); -- cgit From d6ac1a4f782c55407760d4502325b6aa2cf3730c Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 15:32:02 +0200 Subject: Remove font size adjustment for small screens from Beta --- packages/dev-tools-pages/ts/components/Trace.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index fe1f357c7..545e87d53 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -153,7 +153,10 @@ const Block = const MainCopy = styled(Beta)` margin-bottom: 3.1875rem; - ${media.small`margin-bottom: 1.125rem;`}; + ${media.small` + margin-bottom: 1.125rem; + font-size: 1rem; + `}; `; const List = styled.ul` -- cgit From d3c5c682968421de6a942e966b84d98d1b177338 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 22 Oct 2018 08:40:07 +0200 Subject: remove padding on Trace component on small breakpoint --- packages/dev-tools-pages/ts/components/Trace.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 545e87d53..0fbf27c5d 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -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)` -- cgit From 15a3c234c552c3e32e76411acaefa49f312c0aed Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 22 Oct 2018 09:05:07 +0200 Subject: dont shrink icons in trace component --- packages/dev-tools-pages/ts/components/Trace.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 0fbf27c5d..30fdb7066 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -39,7 +39,7 @@ function Trace(props: Props) { completely in the dark about its exact location.

- + @@ -50,7 +50,7 @@ function Trace(props: Props) { the failing line of code quickly becomes a daunting task.

- + @@ -72,7 +72,7 @@ function Trace(props: Props) { from.

- + @@ -83,7 +83,7 @@ function Trace(props: Props) { on linen X of contract Y", it drastically improves the developer experience.

- + @@ -189,4 +189,8 @@ const Copy = styled.div` ${media.small`margin-right: 2.0625rem;`}; `; +const Icon = styled.div` + flex-shrink: 0; +`; + export default withContext(Trace); -- cgit From 12087b6b70862a7b5d1954119ac5b5a06e6179f0 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 22 Oct 2018 09:11:37 +0200 Subject: ligt theme on code --- packages/dev-tools-pages/ts/components/Trace.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 30fdb7066..4d399daa5 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. - Error: VM Exception while processing transaction: rever + Error: VM Exception while processing transaction: rever -- cgit From 49beb6b7a3f924508a4169d12ab0aedcf1a51f15 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Mon, 22 Oct 2018 09:53:58 +0200 Subject: Add light prop to code --- packages/dev-tools-pages/ts/components/Trace.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx') diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 4d399daa5..5e52ee154 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -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. - Error: VM Exception while processing transaction: rever + Error: VM Exception while processing transaction: rever -- cgit