Lesson 05 complete. Lesson 06 - adding some styled components and add…

…ing a theme to Pages.js. Using ThemeProvider (which uses COntext) to pass values down to great grandchildren without having to prop drill.

sick-fits/frontend/components/Page.js

@@ -1,15 +1,39 @@
 import React, { Component } from 'react';
 import Header from './Header';
 import Meta from './Meta';
+import styled, { ThemeProvider } from 'styled-components';
+
+const theme = {
+  red: '#FF0000',
+  black: '#393939',
+  grey: '#3A3A3A',
+  lightgrey: '#E1E1E1',
+  offWhite: '#EDEDED',
+  maxWidth: '1000px',
+  bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)'
+};
+
+const StyledPage = styled.div`
+  background: white;
+  color: ${props => props.theme.black};
+`;
+
+const Inner = styled.div`
+  max-width: ${props => props.theme.maxWidth};
+  margin: 0 auto;
+  padding: 2rem;
+`;
 
 class Page extends Component {
   render() {
     return (
-      <div>
-        <Meta />
-        <Header />
-        {this.props.children}
-      </div>
+      <ThemeProvider theme={theme}>
+        <StyledPage>
+          <Meta />
+          <Header />
+          <Inner>{this.props.children}</Inner>
+        </StyledPage>
+      </ThemeProvider>
     );
   }
 }