diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
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 && |