More styling and mocking

src/views/jobs/Jobs.jsx

@@ -1,10 +1,12 @@
-import { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import JobContext from "../../ctx/JobContext.jsx";
 import JobBox from "./JobBox.jsx";
 import JobView from "./JobView.jsx";
 import JobBuilder from "./builder/JobBuilder.jsx";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export default function Jobs() {
   const { state: jobState } = useContext(JobContext);
@@ -19,6 +21,26 @@ export default function Jobs() {
 
   return (
     <div className="jobs">
+      {jobState.jobs.length === 0? (
+      <React.Fragment>
+       <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >
+
+    <Typography variant="h4">No jobs found! </Typography> </Box>       
+      <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >  <Typography variant="h5">Click the '+' to start a new one!
+ </Typography>
+       </Box>
+        </React.Fragment>
+      ): null}
       <JobBuilder />
       {location.hash === "" &&
         jobState.jobs.map((v, i) => (