From 70f9707273afa72d512412314cae7f857e0cd6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <me@andreneves.me>
Date: Tue, 4 Dec 2018 23:26:03 -0500
Subject: [PATCH] styles: basic styles for application

---
 app/components/Layout.js  |  2 +-
 app/components/Sidebar.js | 10 ++++++++--
 app/theme.js              | 18 +++++++++++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/components/Layout.js b/app/components/Layout.js
index 277bff1..ab8f39f 100644
--- a/app/components/Layout.js
+++ b/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 = {
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 65aec62..9307af1 100644
--- a/app/components/Sidebar.js
+++ b/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 = {
diff --git a/app/theme.js b/app/theme.js
index 245b114..ec678d8 100644
--- a/app/theme.js
+++ b/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,