From 710e654756fb5cef0a246478c5e6b740e9fa281a Mon Sep 17 00:00:00 2001
From: Jennifer Alexander <jenny_alexander@icloud.com>
Date: Thu, 28 Sep 2023 15:27:47 -0500
Subject: [PATCH] Update styling to use sx props

Use theme palette for white color instead of hard-coding
---
 .../SecurityAdminDashboard/SecurityTable.js   | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Account/SecurityAdminDashboard/SecurityTable.js b/client/src/components/Account/SecurityAdminDashboard/SecurityTable.js
index 24565f852..008cd0507 100644
--- 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>