diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Trace.tsx | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 4b34ff145..db3846256 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -32,7 +32,7 @@ function Trace(props: Props) { <List> <Item> - <Copy> + <Copy dark> <Gamma as="h3">No location</Gamma> <p> The error basically says "anything could have gone wrong here", which keeps you @@ -43,7 +43,7 @@ function Trace(props: Props) { </Item> <Item> - <Copy> + <Copy dark> <Gamma as="h3">Time-consuming</Gamma> <p> Working with a large code-base that contains hundreds of smart contracts, finding @@ -94,8 +94,8 @@ function Trace(props: Props) { const StyledSection = styled.section < - TraceProps > - ` + TraceProps > + ` max-width: 90rem; margin: 0 auto; background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); @@ -126,8 +126,8 @@ const Wrapper = styled(Container)` const Block = styled.div < - TraceProps > - ` + TraceProps > + ` width: 50%; background: ${props => (props.background ? props.background : colors.black)}; color: ${props => (props.background ? 'inherit' : colors.white)}; @@ -181,9 +181,14 @@ const Item = styled.li` } `; -const Copy = styled.div` +const Copy = styled.div<{dark?: boolean;}>` max-width: 20rem; margin-right: 5.875rem; + ${props => props.dark && ` + p { + color: #ccc; + } + `} ${media.small`margin-right: 2.0625rem;`}; `; |