diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Button.tsx | 3 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 3 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Footer.tsx | 25 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Header.tsx | 4 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Tabs.tsx | 28 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/globalStyles.tsx | 7 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/variables.tsx | 5 |
7 files changed, 53 insertions, 22 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index eae6aaf54..90d991496 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -23,6 +23,9 @@ const Button = border-radius: 5rem; padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; display: inline-block; + :hover, :focus { + color: ${props => props.colors.main}; + } ${props => props.large && media.small` diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 02bd0382e..88cfba7f8 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -21,6 +21,9 @@ const Button = styled(BaseButton)` top: 1rem; right: 1rem; transition: opacity 0.2s; + :focus { + opacity: 1; + } `; const Base = diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx index df2d920ac..de479a81e 100644 --- a/packages/dev-tools-pages/ts/components/Footer.tsx +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -27,7 +27,11 @@ function Footer(props: Props) { <ListItem key={title}> <Icon as={icon} /> <div> - <Beta>{title}</Beta> + <Beta> + <StyledLink colors={colors} href="#"> + {title} + </StyledLink> + </Beta> <p>{subtitle}</p> </div> </ListItem> @@ -59,13 +63,13 @@ const Top = styled.div` justify-content: space-between; margin-bottom: 9.375rem; - ${media.small` + ${media.medium` display: block; margin-bottom: 5.3125rem; `}; ${Alpha} { - ${media.small`margin-bottom: 3.8125rem;`}; + ${media.medium`margin-bottom: 3.8125rem;`}; } `; @@ -92,9 +96,13 @@ const List = styled.ul` margin: 0; padding: 0; + ${media.medium` + + width: 100%; + `}; + ${media.small` display: block; - width: 100%; `}; `; @@ -123,4 +131,13 @@ const Small = styled.small` max-width: 37.5rem; `; +const StyledLink = + styled.a < + { colors: any } > + ` + :hover { + color: ${props => props.colors.main}; + } +`; + export default withContext(Footer); diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index aeefae3cc..44074cca3 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -62,7 +62,9 @@ const Title = styled.h1` `; const StyledLink = styled(Small)` - color: inherit; + :hover { + text-decoration: underline; + } `; const Link = StyledLink as any; diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index 5307483e8..4d436f519 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -24,23 +24,25 @@ const StyledTab = styled(Tab)` &:not(:first-of-type) { margin-left: 0.25rem; } - &:focus, - &:hover { - color: red; - outline: 0; - } `; const Root = styled.div < - { primaryColor: string } > + { colors: any } > ` - ${StyledTab} { - background-color: ${props => props.primaryColor}; - } - ${StyledTab}[aria-selected="true"] { - background-color: ${colors.gray}; - } + ${StyledTab} { + background-color: ${props => props.colors.secondary}; + &[aria-selected="true"] { + background-color: ${colors.gray}; + + } + + &[aria-selected="false"]:focus, + &[aria-selected="false"]:hover { + color: ${props => props.colors.main}; + cursor: pointer; + } + } `; interface TabsProps extends Props { @@ -50,7 +52,7 @@ interface TabsProps extends Props { function Tabs(props: TabsProps) { return ( <Breakout> - <Root primaryColor={props.colors.secondary}> + <Root colors={props.colors}> <ReactTabs> <StyledTabList> {React.Children.map(props.children, child => { diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx index 16adc61a7..270929123 100644 --- a/packages/dev-tools-pages/ts/globalStyles.tsx +++ b/packages/dev-tools-pages/ts/globalStyles.tsx @@ -50,11 +50,16 @@ const BaseStyles = createGlobalStyle` } a { + color: inherit; + text-decoration: none; + } + + a:not([class]) { color: ${(props: any) => props.colors.type}; text-decoration: none; &:hover { - color: red; //what should this be? + text-decoration: underline; } } diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index b23bb3e52..8f08d13eb 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -14,9 +14,8 @@ interface SizesInterface { } const sizes: SizesInterface = { - large: 992, - medium: 768, - small: 376, + medium: 900, + small: 650, }; const media = Object.keys(sizes).reduce((acc: any, label: string) => { |