From 2536547c6396b303a2bd020994b9ec1fd68b4cdf Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Wed, 2 Oct 2019 23:21:30 -0400
Subject: [PATCH 1/2] Theming

---
 twistter-frontend/src/App.js        |  2 +
 twistter-frontend/src/util/theme.js | 90 +++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 twistter-frontend/src/util/theme.js

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 54c0997..ef684da 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -2,6 +2,8 @@
 import React, { Component } from 'react';
 
 import './App.css';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
diff --git a/twistter-frontend/src/util/theme.js b/twistter-frontend/src/util/theme.js
new file mode 100644
index 0000000..3af2712
--- /dev/null
+++ b/twistter-frontend/src/util/theme.js
@@ -0,0 +1,90 @@
+export default {
+palette: {
+        primary: {
+          main: '#1976d2',
+        },
+        secondary: blue,
+      },
+      typography: {
+        useNextVariants: true
+      },
+      form: {
+        textAlign: 'center'
+      },
+      image: {
+        margin: '20px auto 20px auto'
+      },
+      pageTitle: {
+        margin: '10px auto 10px auto'
+      },
+      textField: {
+        margin: '10px auto 10px auto'
+      },
+      button: {
+        marginTop: 20,
+        position: 'relative'
+      },
+      customError: {
+        color: 'red',
+        fontSize: '0.8rem',
+        marginTop: 10
+      },
+      progress: {
+        position: 'absolute'
+      },
+      invisibleSeparator: {
+        border: 'none',
+        margin: 4
+      },
+      visibleSeparator: {
+        width: '100%',
+        borderBottom: '1px solid rgba(0,0,0,0.1)',
+        marginBottom: 20
+      },
+      paper: {
+        padding: 20
+      },
+      profile: {
+        '& .image-wrapper': {
+          textAlign: 'center',
+          position: 'relative',
+          '& button': {
+            position: 'absolute',
+            top: '80%',
+            left: '70%'
+          }
+        },
+        '& .profile-image': {
+          width: 200,
+          height: 200,
+          objectFit: 'cover',
+          maxWidth: '100%',
+          borderRadius: '50%'
+        },
+        '& .profile-details': {
+          textAlign: 'center',
+          '& span, svg': {
+            verticalAlign: 'middle'
+          },
+          '& a': {
+            color: '#00bcd4'
+          }
+        },
+        '& hr': {
+          border: 'none',
+          margin: '0 0 10px 0'
+        },
+        '& svg.button': {
+          '&:hover': {
+            cursor: 'pointer'
+          }
+        }
+      },
+      buttons: {
+        textAlign: 'center',
+        '& a': {
+          margin: '20px 10px'
+        }
+      }
+    };
+}
\ No newline at end of file

From 9c0dac507f87551ca21bee5739c01912e8a45e72 Mon Sep 17 00:00:00 2001
From: Leon Liang <liang268@purdue.edu>
Date: Wed, 2 Oct 2019 23:29:05 -0400
Subject: [PATCH 2/2] Light blue color scheme

---
 twistter-frontend/src/App.js        |  7 ++-
 twistter-frontend/src/util/theme.js | 92 -----------------------------
 2 files changed, 6 insertions(+), 93 deletions(-)

diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 3438b32..f7c6c32 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -8,6 +8,7 @@ import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
 import Navbar from './components/layout/NavBar';
+import themeObject from './util/theme';
 
 import home from './pages/Home';
 import register from './pages/Register';
@@ -18,10 +19,13 @@ import writeMicroblog from './Writing_Microblogs.js';
 import edit from './pages/edit.js';
 import userLine from './Userline.js';
 
+const theme = createMuiTheme(themeObject);
+
 class App extends Component {
   render() {
     return (
-      <Router>
+      <MuiThemeProvider theme={theme}>
+        <Router>
         <div className='container' >
           <Navbar />
         </div>
@@ -36,6 +40,7 @@ class App extends Component {
         </div>
 
       </Router>
+      </MuiThemeProvider>
     );
   }
 }
diff --git a/twistter-frontend/src/util/theme.js b/twistter-frontend/src/util/theme.js
index 003eea8..38622a6 100644
--- a/twistter-frontend/src/util/theme.js
+++ b/twistter-frontend/src/util/theme.js
@@ -1,95 +1,4 @@
 export default {
-<<<<<<< HEAD
-palette: {
-        primary: {
-          main: '#1976d2',
-        },
-        secondary: blue,
-      },
-      typography: {
-        useNextVariants: true
-      },
-      form: {
-        textAlign: 'center'
-      },
-      image: {
-        margin: '20px auto 20px auto'
-      },
-      pageTitle: {
-        margin: '10px auto 10px auto'
-      },
-      textField: {
-        margin: '10px auto 10px auto'
-      },
-      button: {
-        marginTop: 20,
-        position: 'relative'
-      },
-      customError: {
-        color: 'red',
-        fontSize: '0.8rem',
-        marginTop: 10
-      },
-      progress: {
-        position: 'absolute'
-      },
-      invisibleSeparator: {
-        border: 'none',
-        margin: 4
-      },
-      visibleSeparator: {
-        width: '100%',
-        borderBottom: '1px solid rgba(0,0,0,0.1)',
-        marginBottom: 20
-      },
-      paper: {
-        padding: 20
-      },
-      profile: {
-        '& .image-wrapper': {
-          textAlign: 'center',
-          position: 'relative',
-          '& button': {
-            position: 'absolute',
-            top: '80%',
-            left: '70%'
-          }
-        },
-        '& .profile-image': {
-          width: 200,
-          height: 200,
-          objectFit: 'cover',
-          maxWidth: '100%',
-          borderRadius: '50%'
-        },
-        '& .profile-details': {
-          textAlign: 'center',
-          '& span, svg': {
-            verticalAlign: 'middle'
-          },
-          '& a': {
-            color: '#00bcd4'
-          }
-        },
-        '& hr': {
-          border: 'none',
-          margin: '0 0 10px 0'
-        },
-        '& svg.button': {
-          '&:hover': {
-            cursor: 'pointer'
-          }
-        }
-      },
-      buttons: {
-        textAlign: 'center',
-        '& a': {
-          margin: '20px 10px'
-        }
-      }
-    };
-}
-=======
     palette: {
       primary: {
         light: '#1da1f2',
@@ -186,4 +95,3 @@ palette: {
       }
     }
   };
->>>>>>> master