diff options
author | August Skare <post@augustskare.no> | 2018-10-25 17:54:53 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-25 17:54:53 +0800 |
commit | e5d3e3b33a88e2b08ed02cb39910fab28e130594 (patch) | |
tree | 6ab79e457f3e010ed00ce653442d5ffdce1cf123 /packages/dev-tools-pages/ts/components | |
parent | 1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (diff) | |
download | dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.gz dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.bz2 dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.lz dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.xz dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.zst dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.zip |
Feature/tweaks (#8)
* show copy button on focs
* change base link styling
* text-decoration underline on basic links
* basic hover and focus styles on button and tabs
* add links in footer
* change breakpoints vars
* medium breakpoint on footer
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-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 |
5 files changed, 45 insertions, 18 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 => { |