add support for success status blocks

Author: geoffhouse

src/client/src/components/BugAlert.jsx

@@ -17,7 +17,16 @@ const StyledButton = styled(Button)({
     marginRight: "1rem",
 });
 
-export default function BugAlert({ title = null, type, message, flags = [], panel, square = false, width = null }) {
+export default function BugAlert({
+    title = null,
+    type,
+    message,
+    flags = [],
+    panel,
+    square = false,
+    width = null,
+    sx = {},
+}) {
     const navigate = useNavigate();
     const sendAlert = useAlert();
 
@@ -26,6 +35,7 @@ export default function BugAlert({ title = null, type, message, flags = [], pane
         warning: "Warning",
         info: "Info",
         error: "Error",
+        success: "Status",
     };
 
     const mappedSeverity = {
@@ -139,6 +149,7 @@ export default function BugAlert({ title = null, type, message, flags = [], pane
                 "& .MuiAlert-message": {
                     paddingRight: "4px",
                 },
+                ...sx,
             }}
             severity={mappedSeverity[type]}
         >

src/client/src/components/panels/PanelStatus.jsx

@@ -12,6 +12,7 @@ export default function PanelStatus({ statusItems, panel }) {
                     flags={eachItem.flags}
                     panel={panel}
                     square
+                    sx={{ borderBottomStyle: "solid", borderBottomWidth: "1px", borderBottomColor: "border.bold" }}
                 />
             ))}
         </div>

src/client/src/theme.js

@@ -63,6 +63,7 @@ const theme = (selectedTheme = "dark") => {
                 border: {
                     light: "#181818",
                     medium: "#3c3c3c",
+                    bold: "#505050",
                     heavy: "#a2a2a2",
                 },
 
@@ -407,6 +408,13 @@ const theme = (selectedTheme = "dark") => {
                             color: "#fff",
                         },
                     },
+                    standardSuccess: {
+                        color: "#dff7d6",
+                        backgroundColor: "#05990c",
+                        "& .MuiAlert-icon": {
+                            color: "#fff",
+                        },
+                    },
                 },
             },
             MuiPickersLayout: {