#265 #75 creating theme and fixing the error icon color (#282)

tl-its-umich-edu · Dec 16, 2021 · 7a71dc7 · 7a71dc7
1 parent 5131506
commit 7a71dc7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 11 deletions.
diff --git a/ccm_web/client/src/components/CSVFileName.tsx b/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'
   }
 }))

diff --git a/ccm_web/client/src/components/ConfirmDialog.tsx b/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

diff --git a/ccm_web/client/src/components/ErrorAlert.tsx b/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
   }
 }))
 

diff --git a/ccm_web/client/src/components/FileUpload.tsx b/ccm_web/client/src/components/FileUpload.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
 
   },
   uploadIcon: {
-    color: '#3F648E'
+    color: theme.palette.info.main
   }
 }))
 

diff --git a/ccm_web/client/src/components/SuccessCard.tsx b/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
   }

diff --git a/ccm_web/client/src/components/WarningAlert.tsx b/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

diff --git a/ccm_web/client/src/index.tsx b/ccm_web/client/src/index.tsx
@@ -2,17 +2,21 @@ import { SnackbarProvider } from 'notistack'
 import React from 'react'
 import ReactDOM from 'react-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')
 )
diff --git a/ccm_web/client/src/pages/GradebookCanvas.tsx b/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
   }
 }))
 

diff --git a/ccm_web/client/src/theme.ts b/ccm_web/client/src/theme.ts
@@ -0,0 +1,23 @@
+import { createTheme } from '@material-ui/core/styles'
+
+const ccmTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#00274C'
+    },
+    error: {
+      main: '#E31C3D'
+    },
+    warning: {
+      main: '#E2CF2A'
+    },
+    success: {
+      main: '#306430'
+    },
+    info: {
+      main: '#3F648E'
+    }
+  }
+})
+
+export default ccmTheme
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({ @@
       },
       uploadIcon: {
-        color: '#3F648E'
+        color: theme.palette.info.main
       }
     }))
@@ Expand Down @@