aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-rw-r--r--packages/dev-tools-pages/ts/components/animations/index.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/button.tsx49
-rw-r--r--packages/dev-tools-pages/ts/components/code.tsx12
-rw-r--r--packages/dev-tools-pages/ts/components/container.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/content.tsx5
-rw-r--r--packages/dev-tools-pages/ts/components/tabs.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/trace.tsx15
7 files changed, 35 insertions, 60 deletions
diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx
index 8e5421f5c..106acf707 100644
--- a/packages/dev-tools-pages/ts/components/animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/index.tsx
@@ -69,10 +69,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
}
}
-const Container =
- styled.div <
- AnimationProps >
- `
+const Container = styled.div<AnimationProps>`
width: 100%;
height: ${props => props.height}px;
position: absolute;
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
index d3b36ebfd..ae032eb05 100644
--- a/packages/dev-tools-pages/ts/components/button.tsx
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -6,40 +6,37 @@ interface ButtonProps {
large?: boolean;
}
-const Button =
- styled.button <
- ButtonProps >
- `
- font-family: inherit;
- line-height: 1;
- font-weight: 500;
- white-space: nowrap;
- vertical-align: middle;
- background-color: ${props => props.theme.colors.secondary};
- color: ${colors.black};
- border: 0;
- border-radius: 5rem;
- display: inline-flex;
- justify-content: space-between;
- align-items: center;
-
- ${props =>
- props.large
- ? `
+const Button = styled.button<ButtonProps>`
+ font-family: inherit;
+ line-height: 1;
+ font-weight: 500;
+ white-space: nowrap;
+ vertical-align: middle;
+ background-color: ${props => props.theme.colors.secondary};
+ color: ${colors.black};
+ border: 0;
+ border-radius: 5rem;
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
+
+ ${props =>
+ props.large
+ ? `
font-size: 1rem;
padding: 1.1875rem 2.375rem 1.0625rem;
`
- : `
+ : `
font-size: .875rem;
padding: .5625rem 1.25rem;
`}
- :hover, :focus {
- background-color: ${props => props.theme.colors.secondary_alt};
- outline: 0;
- }
+ :hover, :focus {
+ background-color: ${props => props.theme.colors.secondary_alt};
+ outline: 0;
+ }
- ${media.small`
+ ${media.small`
font-size: .875rem;
padding: .5625rem 1.25rem;
`}
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 71d7a7752..c4f9cee24 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -45,11 +45,8 @@ const Container = styled.div`
}
`;
-const Base =
- styled.div <
- CodeProps >
- `
- font-size: .875rem;
+const Base = styled.div<CodeProps>`
+ font-size: 0.875rem;
color: ${props => (_.isUndefined(props.language) ? colors.white : 'inherit')};
background-color: ${props =>
props.isLight ? 'rgba(255,255,255,.15)' : _.isUndefined(props.language) ? colors.black : '#F1F4F5'};
@@ -110,10 +107,7 @@ const StyledCodeDiff = styled(CodeDiff)`
}
`;
-const StyledPre =
- styled.pre <
- CodeProps >
- `
+const StyledPre = styled.pre<CodeProps>`
margin: 0;
${props =>
!props.isDiff
diff --git a/packages/dev-tools-pages/ts/components/container.tsx b/packages/dev-tools-pages/ts/components/container.tsx
index 1b9212ed2..192d82af8 100644
--- a/packages/dev-tools-pages/ts/components/container.tsx
+++ b/packages/dev-tools-pages/ts/components/container.tsx
@@ -4,10 +4,7 @@ interface ContainerProps {
wide?: boolean;
}
-const Container =
- styled.div <
- ContainerProps >
- `
+const Container = styled.div<ContainerProps>`
max-width: 77.5rem;
margin: 0 auto;
width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
diff --git a/packages/dev-tools-pages/ts/components/content.tsx b/packages/dev-tools-pages/ts/components/content.tsx
index f74e09af7..b3c353f8a 100644
--- a/packages/dev-tools-pages/ts/components/content.tsx
+++ b/packages/dev-tools-pages/ts/components/content.tsx
@@ -3,10 +3,7 @@ import styled from 'styled-components';
import { Container } from './container';
-const StyledMain =
- styled.div <
- MainProps >
- `
+const StyledMain = styled.div<MainProps>`
padding-top: 6.25rem;
padding-bottom: 6.25rem;
${props =>
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
index 1d26f2777..fa2145208 100644
--- a/packages/dev-tools-pages/ts/components/tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -48,7 +48,9 @@ const Tabs: React.StatelessComponent<{}> = props => (
})}
</StyledTabList>
- {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+ {React.Children.map(props.children, child => (
+ <TabPanel>{child}</TabPanel>
+ ))}
</ReactTabs>
</Breakout>
);
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
index 108154648..f41dac9b7 100644
--- a/packages/dev-tools-pages/ts/components/trace.tsx
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -108,10 +108,7 @@ interface TraceProps {
background?: string;
}
-const StyledSection =
- styled.section <
- TraceProps >
- `
+const StyledSection = styled.section<TraceProps>`
max-width: 90rem;
margin: 0 auto;
background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -138,10 +135,7 @@ const Wrapper = styled(Container)`
`};
`;
-const Block =
- styled.div <
- TraceProps >
- `
+const Block = styled.div<TraceProps>`
width: 50%;
background: ${props => (props.background ? props.background : colors.black)};
color: ${props => (props.background ? 'inherit' : colors.white)};
@@ -200,10 +194,7 @@ const Item = styled.li`
}
`;
-const Copy =
- styled.div <
- { dark: boolean } >
- `
+const Copy = styled.div<{ dark: boolean }>`
margin-right: 5.875rem;
${props =>
props.dark &&