Remove usage of legacy mui/styles

Signed-off-by: James Ketrenos <james@ketrenos.com>

client/src/PlayerColor.js

@@ -2,15 +2,11 @@
 import React from "react";
 import Avatar from '@mui/material/Avatar'
 
-import { useStyles } from './Styles.js';
-
 import "./PlayerColor.css";
 
 const PlayerColor = ({ color }) => {
-  const classes = useStyles();
-
   return (
-    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
+    <Avatar className={['PlayerColor', color].join(' ')}/>
   );
 };
 

client/src/Styles.js

@@ -1,30 +0,0 @@
-import { makeStyles } from '@mui/material/styles';
-import { orange, lightBlue, red, grey } from '@mui/material/colors';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  R: {
-    color: theme.palette.getContrastText(red[500]),
-    backgroundColor: red[500],
-  },
-  O: {
-    color: theme.palette.getContrastText(orange[500]),
-    backgroundColor: orange[500],
-  },
-  W: {
-    color: theme.palette.getContrastText(grey[50]),
-    backgroundColor: grey[50],
-  },
-  B: {
-    color: theme.palette.getContrastText(lightBlue[500]),
-    backgroundColor: lightBlue[500],
-  },
-}));
-
-
-export { useStyles };