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] 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