From 7db0be0a6ada25f9d6422d7e144e37844ef9186e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 7 Jul 2019 21:40:34 -0700
Subject: [PATCH] fix: 2px misalignment feat: Improved readability of tabs and
 subheadings

---
 .../DocumentPreview/DocumentPreview.js        |  3 +-
 app/components/PathToDocument.js              |  3 +-
 app/components/Subheading.js                  | 39 ++++++++++++++-----
 app/components/Tab.js                         | 19 +++++----
 app/components/Tabs.js                        |  2 +-
 app/scenes/Document/components/Backlink.js    |  3 +-
 6 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js
index e80bf4be5..370c51cef 100644
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/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;
diff --git a/app/components/PathToDocument.js b/app/components/PathToDocument.js
index 34d7b1fe3..bf62a2a61 100644
--- a/app/components/PathToDocument.js
+++ b/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,
diff --git a/app/components/Subheading.js b/app/components/Subheading.js
index 0339251f4..e1f8240bb 100644
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@@ -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;
diff --git a/app/components/Tab.js b/app/components/Tab.js
index ea4abfec2..d416a029f 100644
--- a/app/components/Tab.js
+++ b/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}`,
-    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);
diff --git a/app/components/Tabs.js b/app/components/Tabs.js
index 1f0860368..578f6615f 100644
--- a/app/components/Tabs.js
+++ b/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;
diff --git a/app/scenes/Document/components/Backlink.js b/app/scenes/Document/components/Backlink.js
index b44b56cb6..483e26468 100644
--- a/app/scenes/Document/components/Backlink.js
+++ b/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;