Merge pull request #2014 from Northeastern-Electric-Racing/#1928-fix-color-BOM

#1928 fix color bom

Author: RChandler234

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTable.tsx

@@ -4,6 +4,7 @@ import { Assembly, Material } from 'shared';
 import { BomRow, bomTableStyles, materialToRow, BomStyledDataGrid } from '../../../../utils/bom.utils';
 import { addMaterialCosts } from '../BOMTab';
 import { centsToDollar } from '../../../../utils/pipes';
+import { useTheme } from '@mui/material';
 import { useState } from 'react';
 
 interface BOMTableProps {
@@ -20,6 +21,7 @@ const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) =
   };
 
   const noAssemblyMaterials = materials.filter((material) => !material.assembly);
+  const theme = useTheme();
   const miscAssembly: BomRow = {
     id: `assembly-misc`,
     materialId: '',
@@ -82,7 +84,20 @@ const BOMTable: React.FC<BOMTableProps> = ({ columns, materials, assemblies }) =
   return (
     <Box
       sx={{
-        height: 'calc(100vh - 180px)'
+        height: 'calc(100vh - 180px)',
+        width: '100%',
+        '& .super-app-theme--header': {
+          backgroundColor: '#ef4345'
+        },
+        '& .super-app-theme--assembly': {
+          backgroundColor: theme.palette.grey[600],
+          '&:hover': {
+            backgroundColor: theme.palette.grey[700]
+          },
+          '&:focus': {
+            backgroundColor: '#997570'
+          }
+        }
       }}
     >
       <BomStyledDataGrid

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableCustomCells.tsx

@@ -11,22 +11,46 @@ export const renderLinkBOM = (params: GridRenderCellParams) =>
     </Link>
   );
 
+const getStatusColor = (status: MaterialStatus) => {
+  switch (status) {
+    case MaterialStatus.Ordered:
+      return '#dba63e';
+    case MaterialStatus.Unordered:
+      return '#a63737';
+    case MaterialStatus.Received:
+      return '#2a712a';
+    case MaterialStatus.Shipped:
+      return '#1b537a';
+    default:
+      return 'grey';
+  }
+};
+
+const bomStatusChipStyle = (status: MaterialStatus) => ({
+  backgroundColor: getStatusColor(status),
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '4px',
+  borderRadius: '6px',
+  minWidth: '85px',
+  height: '36px',
+  textAlign: 'center'
+});
+
 export const renderStatusBOM = (params: GridRenderCellParams) => {
   if (!params.value) return;
-  const status = params.value;
-  const color =
-    status === MaterialStatus.Ordered
-      ? 'orange'
-      : status === MaterialStatus.Unordered
-      ? 'red'
-      : status === MaterialStatus.Received
-      ? 'green'
-      : status === MaterialStatus.Shipped
-      ? 'yellow'
-      : 'grey';
+  const status = params.value as MaterialStatus;
+
   return (
-    <Box sx={{ backgroundColor: color, padding: '6px 10px 6px 10px', borderRadius: '6px' }}>
-      <Typography fontSize="14px" color="black">
+    <Box sx={bomStatusChipStyle(status)}>
+      <Typography
+        fontSize={{
+          xs: '11px',
+          sm: '14px'
+        }}
+        color="black"
+      >
         {displayEnum(status)}
       </Typography>
     </Box>

src/frontend/src/utils/bom.utils.ts

@@ -71,9 +71,9 @@ export const BomStyledDataGrid = styled(DataGrid)(({ theme }) => ({
     backgroundColor: '#ef4345'
   },
   '& .super-app-theme--assembly': {
-    backgroundColor: '#997570',
+    backgroundColor: theme.palette.grey[600],
     '&:hover': {
-      backgroundColor: '#997570'
+      backgroundColor: theme.palette.grey[700]
     },
     '&.Mui-selected': {
       backgroundColor: '#997570',