fix: 2px misalignment
feat: Improved readability of tabs and subheadings
This commit is contained in:
parent
091e542406
commit
7db0be0a6a
|
@ -44,10 +44,9 @@ const StyledDocumentMenu = styled(DocumentMenu)`
|
|||
|
||||
const DocumentLink = styled(Link)`
|
||||
display: block;
|
||||
margin: 8px -8px;
|
||||
margin: 10px -8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
max-height: 50vh;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -82,10 +82,9 @@ const ResultWrapper = styled.div`
|
|||
`;
|
||||
|
||||
const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
|
||||
margin: 0 -10px;
|
||||
margin: 0 -8px;
|
||||
padding: 8px 4px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
|
@ -1,16 +1,37 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Subheading = styled.h3`
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: ${props => props.theme.textTertiary};
|
||||
type Props = {
|
||||
children: React.Node,
|
||||
};
|
||||
|
||||
const H3 = styled.h3`
|
||||
border-bottom: 1px solid ${props => props.theme.divider};
|
||||
padding-bottom: 8px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
`;
|
||||
|
||||
const Underline = styled('span')`
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: ${props => props.theme.textSecondary};
|
||||
border-bottom: 3px solid ${props => props.theme.textSecondary};
|
||||
padding-bottom: 5px;
|
||||
`;
|
||||
|
||||
const Subheading = ({ children, ...rest }: Props) => {
|
||||
return (
|
||||
<H3 {...rest}>
|
||||
<Underline>{children}</Underline>
|
||||
</H3>
|
||||
);
|
||||
};
|
||||
|
||||
export default Subheading;
|
||||
|
|
|
@ -3,29 +3,32 @@ import * as React from 'react';
|
|||
import styled, { withTheme } from 'styled-components';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
const NavItem = styled(NavLink)`
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: ${props => props.theme.textTertiary};
|
||||
letter-spacing: 0.04em;
|
||||
margin-right: 24px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.text};
|
||||
color: ${props => props.theme.textSecondary};
|
||||
border-bottom: 3px solid ${props => props.theme.divider};
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
function Tab(props: *) {
|
||||
const activeStyle = {
|
||||
paddingBottom: '5px',
|
||||
borderBottom: `3px solid ${props.theme.divider}`,
|
||||
color: props.theme.textTertiary,
|
||||
borderBottom: `3px solid ${props.theme.textSecondary}`,
|
||||
color: props.theme.textSecondary,
|
||||
};
|
||||
|
||||
return <NavItem {...props} activeStyle={activeStyle} />;
|
||||
return <StyledNavLink {...props} activeStyle={activeStyle} />;
|
||||
}
|
||||
|
||||
export default withTheme(Tab);
|
||||
|
|
|
@ -4,7 +4,7 @@ import styled from 'styled-components';
|
|||
const Tabs = styled.nav`
|
||||
border-bottom: 1px solid ${props => props.theme.divider};
|
||||
margin-top: 22px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
`;
|
||||
|
||||
export default Tabs;
|
||||
|
|
|
@ -15,10 +15,9 @@ type Props = {
|
|||
|
||||
const DocumentLink = styled(Link)`
|
||||
display: block;
|
||||
margin: 0 -8px;
|
||||
margin: 2px -8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
max-height: 50vh;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
Reference in New Issue