tl-its-umich-edu#265 tl-its-umich-edu#75 creating theme and fixing th…

…e error icon color

ccm_web/client/src/components/CSVFileName.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import { makeStyles, Typography } from '@material-ui/core'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   fileNameContainer: {
     marginBottom: 15,
     paddingLeft: 10,
     paddingRight: 10,
     textAlign: 'left'
   },
   fileName: {
-    color: '#3F648E',
+    color: theme.palette.info.main,
     fontFamily: 'monospace'
   }
 }))

ccm_web/client/src/components/ConfirmDialog.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: 15
   },
   dialogIcon: {
-    color: '#3F648E'
+    color: theme.palette.info.main
   },
   dialogButton: {
     margin: 5

ccm_web/client/src/components/ErrorAlert.tsx

@@ -4,9 +4,9 @@ import ErrorIcon from '@material-ui/icons/Error'
 
 import Alert from './Alert'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   dialogIcon: {
-    color: '#3F648E'
+    color: theme.palette.error.main
   }
 }))
 

ccm_web/client/src/components/FileUpload.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
 
   },
   uploadIcon: {
-    color: '#3F648E'
+    color: theme.palette.info.main
   }
 }))
 

ccm_web/client/src/components/SuccessCard.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Card, CardContent, CardActions, makeStyles } from '@material-ui/core'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   card: {
     textAlign: 'center'
   },
@@ -15,7 +15,7 @@ const useStyles = makeStyles(() => ({
     textAlign: 'center'
   },
   icon: {
-    color: '#306430',
+    color: theme.palette.success.main,
     width: 100,
     height: 100
   }

ccm_web/client/src/components/WarningAlert.tsx

@@ -4,9 +4,9 @@ import ErrorIcon from '@material-ui/icons/Error'
 
 import Alert from './Alert'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   dialogIcon: {
-    color: '#E2CF2A'
+    color: theme.palette.warning.main
   },
   dialogButton: {
     margin: 5

ccm_web/client/src/index.tsx

@@ -1,18 +1,22 @@
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom' 
+import { ThemeProvider } from '@material-ui/core'
 
+import ccmTheme from './theme'
 import App from './App'
 import './index.css'
 
 ReactDOM.render(
   <React.StrictMode>
+   <ThemeProvider theme={ccmTheme}>
     <SnackbarProvider maxSnack={3}>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </SnackbarProvider>
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 )

ccm_web/client/src/pages/GradebookCanvas.tsx

@@ -37,7 +37,7 @@ const useConfirmationStyles = makeStyles((theme) => ({
     paddingRight: 10
   },
   dialogWarningIcon: {
-    color: '#E2CF2A'
+    color: theme.palette.warning.main
   }
 }))
 

ccm_web/client/src/theme.tsx

@@ -0,0 +1,20 @@
+import { createTheme } from '@material-ui/core/styles'
+
+const ccmTheme = createTheme({
+  palette: {
+    error: {
+      main: '#E31C3D'
+    },
+    warning: {
+      main: '#E2CF2A'
+    },
+    success: {
+      main: '#306430'
+    },
+    info: {
+      main: '#3F648E'
+    }
+  }
+})
+
+export default ccmTheme