Merge pull request #1828 from hackforla/1760-update-styling-SecurityT…

…able Update styling in SecurityTable.js to use sx props
hackforla · Oct 2, 2023 · 7330424 · 7330424
2 parents ccbfab8 + 710e654
commit 7330424
Showing 1 changed file with 11 additions and 25 deletions.
diff --git a/client/src/components/Account/SecurityAdminDashboard/SecurityTable.js b/client/src/components/Account/SecurityAdminDashboard/SecurityTable.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import makeStyles from "@mui/styles/makeStyles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -12,20 +11,7 @@ import Checkbox from "@mui/material/Checkbox";
 import * as accountService from "../../../services/account-service";
 import { useUserContext } from "../../../contexts/userContext";
 
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  header: {
-    backgroundColor: "#000080",
-  },
-  text: {
-    color: "#fff",
-  },
-});
-
 export default function SecurityTable(props) {
-  const classes = useStyles();
   const { user } = useUserContext();
 
   // arg `roleType` is expected to be one of:
@@ -110,33 +96,33 @@ export default function SecurityTable(props) {
 
   return (
     <TableContainer component={Paper}>
-      <Table className={classes.table} aria-label="simple table">
-        <TableHead>
-          <TableRow className={classes.header}>
-            <TableCell className={classes.text}>Email</TableCell>
-            <TableCell align="right" className={classes.text}>
+      <Table sx={{minWidth: 650}} aria-label="simple table">
+        <TableHead sx={{backgroundColor: "#000080"}}>
+          <TableRow >
+            <TableCell sx={(theme) => ({color: theme.palette.common.white})}>Email</TableCell>
+            <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
               Name
             </TableCell>
             {user && user.isGlobalAdmin ? (
               <>
-                <TableCell align="right" className={classes.text}>
+                <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
                   Root
                 </TableCell>
-                <TableCell align="right" className={classes.text}>
+                <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
                   Reports
                 </TableCell>
               </>
             ) : null}
-            <TableCell align="right" className={classes.text}>
+            <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
               Admin
             </TableCell>
-            <TableCell align="right" className={classes.text}>
+            <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
               Coordinator
             </TableCell>
-            <TableCell align="right" className={classes.text}>
+            <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
               Security Admin
             </TableCell>
-            <TableCell align="right" className={classes.text}>
+            <TableCell align="right" sx={(theme) => ({color: theme.palette.common.white})}>
               Data Entry
             </TableCell>
           </TableRow>