Tweak subheading colors

app/components/Divider.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-
-const Divider = () => {
-  return (
-    <Flex auto justify="center">
-      <Content />
-    </Flex>
-  );
-};
-
-const Content = styled.span`
-  display: flex;
-  width: 50%;
-  margin: 20px 0;
-  border-bottom: 1px solid #eee;
-`;
-
-export default Divider;

app/components/DocumentHistory/DocumentHistory.js

@@ -133,7 +133,7 @@ const Loading = styled.div`
 
 const Wrapper = styled(Flex)`
   min-width: ${props => props.theme.sidebarWidth};
-  border-left: 1px solid ${props => props.theme.slateLight};
+  border-left: 1px solid ${props => props.theme.divider};
   overflow: scroll;
   overscroll-behavior: none;
 `;

app/components/Subheading.js

@@ -5,9 +5,9 @@ const Subheading = styled.h3`
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
-  color: ${props => props.theme.textTertiary};
   letter-spacing: 0.04em;
-  border-bottom: 1px solid ${props => props.theme.textTertiary};
+  color: ${props => props.theme.divider};
+  border-bottom: 1px solid ${props => props.theme.divider};
   padding-bottom: 8px;
   margin-top: 30px;
   margin-bottom: 10px;

app/components/Tab.js

@@ -8,7 +8,7 @@ const NavItem = styled(NavLink)`
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
-  color: ${props => props.theme.textTertiary};
+  color: ${props => props.theme.divider};
   letter-spacing: 0.04em;
   margin-right: 24px;
   padding-bottom: 8px;
@@ -21,7 +21,7 @@ const NavItem = styled(NavLink)`
 function Tab(props: *) {
   const activeStyle = {
     paddingBottom: '5px',
-    borderBottom: `3px solid ${props.theme.textTertiary}`,
+    borderBottom: `3px solid ${props.theme.divider}`,
     color: props.theme.textTertiary,
   };
 

app/components/Tabs.js

@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 
 const Tabs = styled.nav`
-  border-bottom: 1px solid ${props => props.theme.textTertiary};
+  border-bottom: 1px solid ${props => props.theme.divider};
   margin-top: 22px;
   margin-bottom: 10px;
 `;

shared/components/TeamLogo.js

@@ -1,13 +1,12 @@
 // @flow
 import styled from 'styled-components';
-import { darken } from 'polished';
 
 const TeamLogo = styled.img`
   width: 38px;
   height: 38px;
   border-radius: 4px;
   background: ${props => props.theme.white};
-  border: 1px solid ${props => darken(0.1, props.theme.sidebarBackground)};
+  border: 1px solid ${props => props.theme.divider};
 `;
 
 export default TeamLogo;

shared/styles/theme.js

@@ -110,7 +110,7 @@ export const dark = {
   menuBackground: lighten(0.015, colors.almostBlack),
   menuShadow:
     '0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08)',
-  divider: colors.slate,
+  divider: darken(0.2, colors.slate),
   inputBorder: colors.slateDark,
   inputBorderFocused: colors.slate,