Development (#492)

* update the authorization technique to check if user role matches ite priority

* include roles as a sign up property, add the history menu to the landing page

* fix build errors

* Add landing page background image

---------

Co-authored-by: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local>

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { ShoppingCartProvider } from "./contexts/shoppingCartContext";
 import { About, FoodMenu, Home, SignUp, Login } from "./pages";
 import { CheckOutOrAddToCart } from "./components/Utilities/Conditional";
 import { Navigation } from "./components/Utilities/Navbar";
+import { Landing } from "./pages/Landing";
 
 function App() {
   return (
@@ -21,7 +22,8 @@ function App() {
                   </>
                 }
               >
-                <Route index element={<Home />} />
+                <Route index element={<Landing />} />
+                <Route path="/menu" element={<Home />} />
                 <Route path="/about" element={<About />} />
                 <Route path="menu/:id" element={<FoodMenu />} />
                 <Route path="/register" element={<SignUp />} />

frontend/src/components/Utilities/Navbar.tsx

@@ -1,4 +1,4 @@
-import { faArrowLeftLong } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeftLong, faCircleUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 import { Button, Nav, Stack } from "react-bootstrap";
@@ -28,8 +28,10 @@ export const Navigation = () => {
   };
 
   const handleNavMenu = () => {
-    return location.pathname === "/" ? (
-      <span style={{ color: "#407c54" }}>history</span>
+    return location.pathname === "/menu" ? (
+      <span style={{ fontWeight: 600 }} onClick={previousPage}>
+        <FontAwesomeIcon icon={faCircleUser} size="xl" /> Profile
+      </span>
     ) : (
       <span style={{ fontWeight: 600 }} onClick={previousPage}>
         <FontAwesomeIcon icon={faArrowLeftLong} size="xl" /> Back

frontend/src/components/Utilities/modal.tsx

@@ -22,33 +22,31 @@ export const CallToAction = ({
   showCancelButton,
 }: ModalProps) => {
   return (
-    <>
-      <Modal show={show} onHide={handleClose} centered>
-        {header ? (
-          <Modal.Header closeButton>
-            <Modal.Title>{header}</Modal.Title>
-          </Modal.Header>
+    <Modal show={show} onHide={handleClose} centered>
+      {header ? (
+        <Modal.Header closeButton>
+          <Modal.Title>{header}</Modal.Title>
+        </Modal.Header>
+      ) : (
+        <></>
+      )}
+      <Modal.Body>{children}</Modal.Body>
+      <Modal.Footer>
+        {showCancelButton ? (
+          <Button variant="inline-secondary" onClick={handleClose}>
+            Cancel
+          </Button>
         ) : (
           <></>
         )}
-        <Modal.Body>{children}</Modal.Body>
-        <Modal.Footer>
-          {showCancelButton ? (
-            <Button variant="inline-secondary" onClick={handleClose}>
-              Cancel
-            </Button>
-          ) : (
-            <></>
-          )}
-          {action ? (
-            <Button variant="success" onClick={handleAction}>
-              {action}
-            </Button>
-          ) : (
-            <></>
-          )}
-        </Modal.Footer>
-      </Modal>
-    </>
+        {action ? (
+          <Button variant="success" onClick={handleAction}>
+            {action}
+          </Button>
+        ) : (
+          <></>
+        )}
+      </Modal.Footer>
+    </Modal>
   );
 };

frontend/src/pages/Landing.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties } from "react";
+import { Button, Stack } from "react-bootstrap";
+
+export const Landing = () => {
+  const pageStyle: CSSProperties = {
+    margin: 0,
+    padding: 0,
+    overflowY: "hidden",
+  };
+
+  const backgroundOverlayStyle: CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundImage: `url(public/food-background.jpg)`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    opacity: 0.5,
+  };
+
+  const buttonStyle: CSSProperties = {
+    width: "80%",
+    margin: "auto",
+    borderRadius: 0,
+  };
+  return (
+    <div className="d-flex flex-column" style={pageStyle}>
+      <div style={backgroundOverlayStyle}></div>
+      <Stack direction="vertical" gap={3} className="p-3 fixed-bottom">
+        <Button
+          className="w-10"
+          size="lg"
+          style={{ ...buttonStyle, backgroundColor: "#407c54", borderColor: "#407c54" }}
+        >
+          ORDER NOW
+        </Button>
+        <Button variant="dark" className="w-10" size="sm" style={buttonStyle}>
+          Order HISTORY
+        </Button>
+      </Stack>
+    </div>
+  );
+};