styles: basic styles for application

app/components/Layout.js

@@ -11,7 +11,7 @@ const Layout = styled.div`
   left: 200px;
   top: 0;
   height: 100vh;
-  background: #ccc;
+  background: ${props => props.theme.colors.secondary};
 `;
 
 type Props = {

app/components/Sidebar.js

@@ -13,11 +13,17 @@ const Wrapper = styled.div`
   left: 0;
   top: 0;
   height: 100vh;
-  background-color: ${props => props.theme.colors.secondary};
+  font-family: ${props => props.theme.fontFamily}
+  background-color: ${props => props.theme.colors.sidebarBg};
+  padding: 20px;
 `;
 
 const StyledLink = styled(Link)`
-  color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.colors.sidebarItem};
+  font-size: 16px;
+  text-decoration: none;
+  font-weight: 700;
+  padding: 5px 0;
 `;
 
 type MenuItem = {

app/theme.js

@@ -7,18 +7,26 @@ import { normalize } from 'polished'; // eslint-disable-line
 
 import { DARK } from './constants/themes';
 
+const darkOne = '#212124';
+const lightOne = '#ffffff';
+const brandOne = '#624cda';
+const brandTwo = '#a6ede2';
+
 const appTheme = {
   mode: DARK,
-  fontFamily: 'Open Sans',
+  fontFamily: 'PT Sans',
   colors: {
     primary: theme('mode', {
-      light: '#000',
-      dark: '#fff',
+      light: darkOne,
+      dark: lightOne,
     }),
     secondary: theme('mode', {
-      light: '#fff',
-      dark: '#000',
+      light: lightOne,
+      dark: darkOne,
     }),
+    sidebarBg: brandOne,
+    sidebarItem: brandTwo,
+    sidebarItemActive: lightOne,
   },
   size: {
     title: 18,