partial: dangling components css migration

new-lamassu-admin/src/components/Status.jsx

@@ -1,59 +1,8 @@
 import Chip from '@mui/material/Chip'
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 
-import {
-  tomato,
-  mistyRose,
-  pumpkin,
-  secondaryColorDarker as spring4,
-  inputFontWeight,
-  spring3,
-  zircon,
-  primaryColor,
-  smallestFontSize,
-  inputFontFamily,
-  spacer,
-  linen
-} from '../styling/variables'
-
-const colors = {
-  error: tomato,
-  warning: pumpkin,
-  success: spring4,
-  neutral: primaryColor
-}
-
-const backgroundColors = {
-  error: mistyRose,
-  warning: linen,
-  success: spring3,
-  neutral: zircon
-}
-
-const useStyles = makeStyles({
-  root: {
-    borderRadius: spacer / 2,
-    marginTop: spacer / 2,
-    marginRight: spacer / 4,
-    marginBottom: spacer / 2,
-    marginLeft: spacer / 4,
-    height: spacer * 3,
-    backgroundColor: ({ type }) => backgroundColors[type]
-  },
-  label: {
-    fontSize: smallestFontSize,
-    fontWeight: inputFontWeight,
-    fontFamily: inputFontFamily,
-    paddingRight: spacer / 2,
-    paddingLeft: spacer / 2,
-    color: ({ type }) => colors[type]
-  }
-})
-
 const Status = ({ status }) => {
-  const classes = useStyles({ type: status.type })
-  return <Chip type={status.type} label={status.label} classes={classes} />
+  return <Chip color={status.type} label={status.label} />
 }
 
 const MainStatus = ({ statuses }) => {