From 3670b23d2f445fa09b8a8a9064b56db6f9ae0ddd Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Fri, 5 Sep 2025 13:35:29 -0600
Subject: [PATCH] Changed Device Status Indicators to Pills

---
 .../WebUI/src/Devices/Device_Details.jsx      |  2 +-
 Data/Server/WebUI/src/Devices/Device_List.jsx | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Data/Server/WebUI/src/Devices/Device_Details.jsx b/Data/Server/WebUI/src/Devices/Device_Details.jsx
index 026039a..b12020f 100644
--- a/Data/Server/WebUI/src/Devices/Device_Details.jsx
+++ b/Data/Server/WebUI/src/Devices/Device_Details.jsx
@@ -627,7 +627,7 @@ export default function DeviceDetails({ device, onBack }) {
                   py: 0.25,
                   borderRadius: 999,
                   bgcolor: jobStatusColor(r.status),
-                  color: "#000",
+                  color: "#fff",
                   fontWeight: 600,
                   fontSize: "12px"
                 }}>
diff --git a/Data/Server/WebUI/src/Devices/Device_List.jsx b/Data/Server/WebUI/src/Devices/Device_List.jsx
index b6d2564..9b249f6 100644
--- a/Data/Server/WebUI/src/Devices/Device_List.jsx
+++ b/Data/Server/WebUI/src/Devices/Device_List.jsx
@@ -231,18 +231,18 @@ export default function DeviceList({ onSelectDevice }) {
                 />
               </TableCell>
               <TableCell>
-                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  <Box
-                    component="span"
-                    sx={{
-                      display: "inline-block",
-                      width: 10,
-                      height: 10,
-                      borderRadius: 10,
-                      bgcolor: statusColor(r.status),
-                      mr: 1,
-                    }}
-                  />
+                <Box
+                  sx={{
+                    display: "inline-block",
+                    px: 1.2,
+                    py: 0.25,
+                    borderRadius: 999,
+                    bgcolor: statusColor(r.status),
+                    color: "#fff",
+                    fontWeight: 600,
+                    fontSize: "12px",
+                  }}
+                >
                   {r.status}
                 </Box>
               </TableCell>