From 9bd57ad0ce165426e20d2ed27388eca767236a81 Mon Sep 17 00:00:00 2001
From: John Kane <john@kanej.me>
Date: Fri, 25 Oct 2019 16:38:32 +0100
Subject: [PATCH] feat(layout): change the header/footer/background colors to
 match figma

Fixes #91
---
 src/Layout.tsx                   | 8 +++++++-
 src/components/GroupsSidebar.tsx | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Layout.tsx b/src/Layout.tsx
index 17c51dd..5d033f8 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -8,6 +8,7 @@ import GroupsSidebar from './components/GroupsSidebar'
 const DRAWER_WIDTH = 240
 const HEADER_HEIGHT = 80
 const FOOTER_HEIGHT = 60
+const PRIMARY = '#4267b2'
 const BACKGROUND = '3578E5'
 
 export interface LayoutProps {
@@ -79,7 +80,8 @@ const Footer = styled.footer`
   display: grid;
   grid-template-columns: ${DRAWER_WIDTH}px 1fr;
   height: ${FOOTER_HEIGHT}px;
-  background: ${BACKGROUND};
+  background: ${PRIMARY};
+  color: white;
 `
 
 /* header */
@@ -90,6 +92,8 @@ const Title = styled.h1`
   align-items: center;
   height: ${HEADER_HEIGHT}px;
   padding: 0 20px;
+  background: ${PRIMARY};
+  color: white;
 `
 
 const Bar = styled.div`
@@ -98,6 +102,8 @@ const Bar = styled.div`
   align-items: center;
   height: ${HEADER_HEIGHT}px;
   padding: 0 10px;
+  background: ${PRIMARY};
+  color: white;
 `
 
 const Info = styled.div`
diff --git a/src/components/GroupsSidebar.tsx b/src/components/GroupsSidebar.tsx
index baa4bb0..a9df81c 100644
--- a/src/components/GroupsSidebar.tsx
+++ b/src/components/GroupsSidebar.tsx
@@ -10,6 +10,8 @@ import { withRouter } from 'react-router-dom'
 // @ts-ignore
 import { alert, prompt } from 'smalltalk'
 
+const BACKGROUND = '#f0f0f0'
+
 const GroupsSidebar = observer(
   ({
     createGroup,
@@ -64,6 +66,8 @@ const Nav = styled.nav`
   display: grid;
   grid-template-rows: 1fr auto;
   padding: 0 5px;
+  background: ${BACKGROUND};
+  color: #696a77;
 `
 
 const WrappedGroupsSidebar = observer(