add coporate theme color variables

pkgs/ui/src/components/table/nodeTable.tsx

@@ -1,23 +1,22 @@
 "use client";
 
-import { useState, ChangeEvent, useMemo } from "react";
-import Box from "@mui/material/Box";
-import TablePagination from "@mui/material/TablePagination";
-import Paper from "@mui/material/Paper";
 import { CircularProgress, Grid, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import TablePagination from "@mui/material/TablePagination";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { ChangeEvent, useMemo, useState } from "react";
 
-import { EnhancedTableToolbar } from "./enhancedTableToolbar";
-import { StickySpeedDial } from "./stickySpeedDial";
-import { NodeTableContainer } from "./nodeTableContainer";
-import { SearchBar } from "./searchBar";
+import { Machine } from "@/api/model/machine";
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
 import { useMachines } from "../hooks/useMachines";
-import { Machine } from "@/api/model/machine";
+import { EnhancedTableToolbar } from "./enhancedTableToolbar";
+import { NodeTableContainer } from "./nodeTableContainer";
+import { SearchBar } from "./searchBar";
+import { StickySpeedDial } from "./stickySpeedDial";
 
 export function NodeTable() {
   const machines = useMachines();
-
   const theme = useTheme();
   const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
 
@@ -47,49 +46,51 @@ export function NodeTable() {
     return (
       <Grid
         container
-        style={{ height: "100vh" }} // make the container fill the screen height
-        alignItems="center" // center the items vertically
-        justifyContent="center" // center the items horizontally
+        sx={{
+          h: "100vh",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
         <CircularProgress size={80} color="secondary" />
       </Grid>
     );
-  } else {
-    return (
-      <Box sx={{ width: "100%" }}>
-        <Paper sx={{ width: "100%", mb: 2 }}>
-          <StickySpeedDial selected={selected} />
-          <EnhancedTableToolbar tableData={tableData}>
-            <Grid2 xs={12}>
-              <SearchBar
-                tableData={tableData}
-                setFilteredList={setFilteredList}
-              />
-            </Grid2>
-          </EnhancedTableToolbar>
-
-          <NodeTableContainer
-            tableData={filteredList}
-            page={page}
-            rowsPerPage={rowsPerPage}
-            dense={false}
-            selected={selected}
-            setSelected={setSelected}
-          />
-
-          {/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
-          <TablePagination
-            rowsPerPageOptions={[5, 10, 25]}
-            labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
-            component="div"
-            count={filteredList.length}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
-          />
-        </Paper>
-      </Box>
-    );
   }
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Paper sx={{ width: "100%", mb: 2 }}>
+        <StickySpeedDial selected={selected} />
+        <EnhancedTableToolbar tableData={tableData}>
+          <Grid2 xs={12}>
+            <SearchBar
+              tableData={tableData}
+              setFilteredList={setFilteredList}
+            />
+          </Grid2>
+        </EnhancedTableToolbar>
+
+        <NodeTableContainer
+          tableData={filteredList}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          dense={false}
+          selected={selected}
+          setSelected={setSelected}
+        />
+
+        {/* TODO: This creates the error Warning: Prop `id` did not match. Server: ":RspmmcqH1:" Client: ":R3j6qpj9H1:" */}
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          labelRowsPerPage={is_xs ? "Rows" : "Rows per page:"}
+          component="div"
+          count={filteredList.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </Box>
+  );
 }