Merge pull request #96 from bunny-lab-io/codex/update-device_list.jsx-to-use-ag-grid

Data/Server/WebUI/package.json

@@ -10,10 +10,13 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@fontsource/ibm-plex-sans": "5.0.17",
     "@mui/icons-material": "7.0.2",
     "@mui/material": "7.0.2",
     "@mui/x-date-pickers": "8.11.3",
     "@mui/x-tree-view": "8.10.0",
+    "ag-grid-community": "34.2.0",
+    "ag-grid-react": "34.2.0",
     "dayjs": "1.11.18",
     "normalize.css": "8.0.1",
     "prismjs": "1.30.0",

Data/Server/WebUI/src/Borealis.css

@@ -1,5 +1,11 @@
 /* ///////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Borealis.css
 
+body {
+  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  background-color: #0b0f19;
+  color: #f5f7fa;
+}
+
 /* ======================================= */
 /* FLOW EDITOR                             */
 /* ======================================= */

Data/Server/WebUI/src/Flow_Editor/Node_Configuration_Sidebar.jsx

@@ -191,7 +191,13 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
             disabled={isReadOnly}
             InputProps={{
               readOnly: isReadOnly,
-              sx: { color: "#ccc" }
+              sx: {
+                color: "#ccc",
+                backgroundColor: "#1e1e1e",
+                "& fieldset": { borderColor: "#444" },
+                "&:hover fieldset": { borderColor: "#666" },
+                "&.Mui-focused fieldset": { borderColor: "#58a6ff" }
+              }
             }}
             onChange={(e) => {
               if (isReadOnly) return;
@@ -206,15 +212,6 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
               );
               window.BorealisValueBus[nodeId] = newValue;
             }}
-            InputProps={{
-              sx: {
-                backgroundColor: "#1e1e1e",
-                color: "#ccc",
-                "& fieldset": { borderColor: "#444" },
-                "&:hover fieldset": { borderColor: "#666" },
-                "&.Mui-focused fieldset": { borderColor: "#58a6ff" }
-              }
-            }}
           />
         </Box>
       );

Data/Server/WebUI/src/index.jsx

@@ -5,6 +5,9 @@ import ReactDOM from 'react-dom/client';
 
 // Global Styles
 import "normalize.css/normalize.css";
+import "@fontsource/ibm-plex-sans/400.css";
+import "@fontsource/ibm-plex-sans/500.css";
+import "@fontsource/ibm-plex-sans/600.css";
 import './Borealis.css'; // Global Theming for All of Borealis
 
 import App from './App.jsx';