Create/detail updates

packages/ui/components/List.tsx

@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { Grid, Box } from "@mui/material";
 import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
-import { typography } from "../styles/theme";
+import { typography, colors } from "../styles/theme";
 
 interface ListProps {
   title: string;
@@ -11,6 +11,7 @@ interface ListProps {
   columns: GridColDef<any>[];
   onRowClick?: (id: string) => void;
   buttons?: React.ReactNode;
+  paginate?: boolean;
 }
 
 export const List: FC<ListProps> = ({
@@ -19,49 +20,59 @@ export const List: FC<ListProps> = ({
   columns,
   onRowClick,
   buttons,
+  paginate = false,
 }) => {
   const { h3 } = typography;
+  const { mediumGray, lightGray, veryLightGray, mediumBlue, white, darkGray } =
+    colors;
 
   return (
-    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+    <Box sx={{ height: "100vh", backgroundColor: lightGray, p: 3 }}>
       <Grid container direction="column">
-        <Grid item container direction="row" justifyContent="space-between">
-          <Grid item>
+        <Grid
+          item
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Grid item xs="auto">
             <Box sx={h3}>{title}</Box>
           </Grid>
-          <Grid item>{buttons}</Grid>
+          <Grid item xs="auto">
+            {buttons}
+          </Grid>
         </Grid>
         <Grid item>
           <Box
             sx={{
               mt: 2,
-              backgroundColor: "#ddd",
+              backgroundColor: "transparent",
               border: 0,
               width: "100%",
               height: "calc(100vh - 100px)",
               ".MuiDataGrid-row": {
                 cursor: "pointer",
                 "&:hover": {
-                  backgroundColor: "#1982fc33 !important",
+                  backgroundColor: `${mediumBlue}22 !important`,
                   fontWeight: "bold",
                 },
               },
               ".MuiDataGrid-row:nth-of-type(1n)": {
-                backgroundColor: "#f3f3f3",
+                backgroundColor: white,
               },
               ".MuiDataGrid-row:nth-of-type(2n)": {
-                backgroundColor: "#fff",
+                backgroundColor: veryLightGray,
               },
               ".MuiDataGrid-columnHeaderTitle": {
-                color: "#333",
+                color: darkGray,
                 fontWeight: "bold",
                 fontSize: 11,
                 margin: "0 auto",
               },
               ".MuiDataGrid-columnHeader": {
-                backgroundColor: "#ccc",
+                backgroundColor: mediumGray,
                 border: 0,
-                borderBottom: "3px solid #ddd",
               },
             }}
           >
@@ -69,7 +80,9 @@ export const List: FC<ListProps> = ({
               rows={rows}
               columns={columns}
               density="compact"
-              pagination
+              pagination={paginate}
+              hideFooterRowCount={!paginate}
+              hideFooter={!paginate}
               initialState={{
                 pagination: { paginationModel: { pageSize: 25 } },
               }}