ThemeProvider (#677)

closes #655

app/components/Sidebar/components/Header.js

@@ -1,13 +1,12 @@
 // @flow
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color, fontWeight } from 'shared/styles/constants';
 
 const Header = styled(Flex)`
   font-size: 11px;
-  font-weight: ${fontWeight.semiBold};
+  font-weight: 600;
   text-transform: uppercase;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
   letter-spacing: 0.04em;
   margin-bottom: 4px;
 `;

app/components/Sidebar/components/HeaderBlock.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
 import { ExpandedIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
 import TeamLogo from './TeamLogo';
@@ -11,6 +10,7 @@ type Props = {
   subheading: string,
   showDisclosure?: boolean,
   logoUrl: string,
+  theme: Object,
 };
 
 function HeaderBlock({
@@ -18,6 +18,7 @@ function HeaderBlock({
   teamName,
   subheading,
   logoUrl,
+  theme,
   ...rest
 }: Props) {
   return (
@@ -26,7 +27,7 @@ function HeaderBlock({
       <Flex align="flex-start" column>
         <TeamName showDisclosure>
           {teamName}{' '}
-          {showDisclosure && <StyledExpandedIcon color={color.text} />}
+          {showDisclosure && <StyledExpandedIcon color={theme.text} />}
         </TeamName>
         <Subheading>{subheading}</Subheading>
       </Flex>
@@ -45,7 +46,7 @@ const Subheading = styled.div`
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
 `;
 
 const TeamName = styled.div`
@@ -53,7 +54,7 @@ const TeamName = styled.div`
   padding-left: 10px;
   padding-right: 24px;
   font-weight: 600;
-  color: ${color.text};
+  color: ${props => props.theme.text};
   text-decoration: none;
   font-size: 16px;
 `;
@@ -72,4 +73,4 @@ const Header = styled(Flex)`
   }
 `;
 
-export default HeaderBlock;
+export default withTheme(HeaderBlock);

app/components/Sidebar/components/SidebarLink.js

@@ -4,15 +4,9 @@ import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import { withRouter, NavLink } from 'react-router-dom';
 import { CollapsedIcon } from 'outline-icons';
-import { color, fontWeight } from 'shared/styles/constants';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';
 
-const activeStyle = {
-  color: color.black,
-  fontWeight: fontWeight.medium,
-};
-
 const StyledGoTo = styled(CollapsedIcon)`
   margin-bottom: -4px;
   margin-left: 1px;
@@ -34,12 +28,12 @@ const StyledNavLink = styled(NavLink)`
   text-overflow: ellipsis;
   padding: 4px 0;
   margin-left: ${({ icon }) => (icon ? '-20px;' : '0')};
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
   font-size: 15px;
   cursor: pointer;
 
   &:hover {
-    color: ${color.text};
+    color: ${props => props.theme.text};
   }
 `;
 
@@ -57,11 +51,22 @@ type Props = {
   hideExpandToggle?: boolean,
   iconColor?: string,
   active?: boolean,
+  theme: Object,
 };
 
 @observer
 class SidebarLink extends React.Component<Props> {
   @observable expanded: boolean = false;
+  activeStyle: Object;
+
+  constructor(props) {
+    super(props);
+
+    this.activeStyle = {
+      color: props.theme.black,
+      fontWeight: 500,
+    };
+  }
 
   componentDidMount() {
     if (this.props.expand) this.handleExpand();
@@ -104,8 +109,8 @@ class SidebarLink extends React.Component<Props> {
       <Wrapper menuOpen={menuOpen} column>
         <Component
           icon={showExpandIcon}
-          activeStyle={activeStyle}
-          style={active ? activeStyle : undefined}
+          activeStyle={this.activeStyle}
+          style={active ? this.activeStyle : undefined}
           onClick={onClick}
           to={to}
           exact
@@ -128,7 +133,7 @@ const Action = styled.span`
   position: absolute;
   right: 0;
   top: 2px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
   svg {
     opacity: 0.75;
   }
@@ -158,4 +163,4 @@ const Content = styled.div`
   width: 100%;
 `;
 
-export default withRouter(SidebarLink);
+export default withRouter(withTheme(SidebarLink));

app/components/Sidebar/components/TeamLogo.js

@@ -1,13 +1,12 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 
 const TeamLogo = styled.img`
   width: 38px;
   height: 38px;
   border-radius: 4px;
-  background: ${color.white};
-  border: 1px solid ${color.slateLight};
+  background: ${props => props.theme.white};
+  border: 1px solid ${props => props.theme.slateLight};
 `;
 
 export default TeamLogo;