Merge pull request #29 from michacurri/b-workorder-display-sizing

workorder view height adjust, Button integration and color
michacurri · Feb 15, 2021 · b41066f · b41066f
2 parents e5fdd2a + 7755a45
commit b41066f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/root/Workorder.js b/src/components/root/Workorder.js
@@ -1,8 +1,28 @@
 import React, { Fragment, useState } from "react";
 import WorkorderDisplay from "./WorkorderDisplay";
 import WorkorderCreate from "../admin/WorkorderCreate";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    flexGrow: 1,
+    "& > *": {
+      margin: theme.spacing(1),
+    },
+  },
+  button: {
+    backgroundColor: "#558564",
+    color: "#E0E0E0",
+    padding: "2rem",
+  },
+}));
 
 const Workorder = ({ currentProfile, loadUserProfile, admin }) => {
+  const classes = useStyles();
   const [workView, setWorkView] = useState("display");
 
   function workorderClick() {
@@ -19,12 +39,16 @@ const Workorder = ({ currentProfile, loadUserProfile, admin }) => {
       <Fragment>
         {workView === "display" ? (
           <Fragment>
-            <button onClick={workorderClick}>Create new Workorder</button>
+            <Button className={classes.button} onClick={workorderClick}>
+              Create new Workorder
+            </Button>
             <WorkorderDisplay currentProfile={currentProfile} />
           </Fragment>
         ) : (
           <Fragment>
-            <button onClick={workorderClick}>View Workorders</button>
+            <Button className={classes.button} onClick={workorderClick}>
+              View Workorders
+            </Button>
             <WorkorderCreate
               currentProfile={currentProfile}
               loadUserProfile={loadUserProfile}

diff --git a/src/components/root/WorkorderDisplay.js b/src/components/root/WorkorderDisplay.js
@@ -222,7 +222,8 @@ export default function WorkorderDisplay({ currentProfile }) {
   const [orderBy, setOrderBy] = React.useState("calories");
   const [selected, setSelected] = React.useState([]);
   const [page, setPage] = React.useState(0);
-  const [dense, setDense] = React.useState(false);
+  // const [dense] = React.useState(false);
+  //? LEARN HOW TO UTILIZE DENSE
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const { workorders } = currentProfile;
 
@@ -308,9 +309,7 @@ export default function WorkorderDisplay({ currentProfile }) {
                   return (
                     <TableRow
                       hover
-                      onClick={(event) =>
-                        handleClick(event, workorder._id)
-                      }
+                      onClick={(event) => handleClick(event, workorder._id)}
                       role="checkbox"
                       aria-checked={isItemSelected}
                       tabIndex={-1}
@@ -338,7 +337,8 @@ export default function WorkorderDisplay({ currentProfile }) {
                   );
                 })}
               {emptyRows > 0 && (
-                <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
+                // <TableRow style={{ height: (dense ? 33 : 36.7) * emptyRows }}>
+                <TableRow style={{ height: "44.3vh" }}>
                   <TableCell colSpan={6} />
                 </TableRow>
               )}