feat(layout): change the header/footer/background colors to match figma

Fixes #91
RTradeLtd · Oct 25, 2019 · 9bd57ad · 9bd57ad
1 parent af498e7
commit 9bd57ad
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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(