Light blue color scheme

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>
     );
   }
 }

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