fix: 2px misalignment

feat: Improved readability of tabs and subheadings

app/components/DocumentPreview/DocumentPreview.js

@@ -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;

app/components/PathToDocument.js

@@ -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,

app/components/Subheading.js

@@ -1,16 +1,37 @@
 // @flow
+import * as React from 'react';
 import styled from 'styled-components';
 
-const Subheading = styled.h3`
+type Props = {
-  font-size: 11px;
+  children: React.Node,
-  font-weight: 500;
+};
-  text-transform: uppercase;
+
-  letter-spacing: 0.04em;
+const H3 = styled.h3`
-  color: ${props => props.theme.textTertiary};
   border-bottom: 1px solid ${props => props.theme.divider};
-  padding-bottom: 8px;
+  margin-top: 22px;
-  margin-top: 30px;
+  margin-bottom: 12px;
-  margin-bottom: 10px;
+  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;

app/components/Tab.js

@@ -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}`,
+    borderBottom: `3px solid ${props.theme.textSecondary}`,
-    color: props.theme.textTertiary,
+    color: props.theme.textSecondary,
   };
 
-  return <NavItem {...props} activeStyle={activeStyle} />;
+  return <StyledNavLink {...props} activeStyle={activeStyle} />;
 }
 
 export default withTheme(Tab);

app/components/Tabs.js

@@ -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;

app/scenes/Document/components/Backlink.js

@@ -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;