UploadPhoto components added

frontend/src/components/Buttons/CLButtons.jsx

@@ -1,8 +1,12 @@
-import "./CLButtons.css"
+import "./CLButtons.css";
 
-const DEFAULT_HEIGHT = "54px"
-const DEFAULT_WIDTH = "fit-content"
-const DEFAULT_ON_CLICK = () => {}
+const DEFAULT_PRIMARY_CLASSNAME = "primary-variant-button";
+const DEFAULT_SECONDARY_CLASSNAME = "secondary-variant-button";
+
+const DEFAULT_HEIGHT = "54px";
+const DEFAULT_WIDTH = "fit-content";
+const DEFAULT_TYPE = "button";
+const DEFAULT_ON_CLICK = () => {};
 
 /**
  * PRIMARY variant of the clinical logging button.
@@ -11,24 +15,30 @@ const DEFAULT_ON_CLICK = () => {}
  */
 export const CLButtonPrimary = ({
   children,
+  className,
   height = DEFAULT_HEIGHT,
   width = DEFAULT_WIDTH,
-  onClick = DEFAULT_ON_CLICK
+  type = DEFAULT_TYPE,
+  onClick = DEFAULT_ON_CLICK,
 }) => {
+  const updatedClassName = className
+    ? DEFAULT_PRIMARY_CLASSNAME + " " + className
+    : DEFAULT_PRIMARY_CLASSNAME;
 
   return (
-    <button 
-      className="primary-variant-button"
+    <button
+      className={updatedClassName}
+      type={type}
       onClick={onClick}
       style={{
         height: height,
-        width: width
+        width: width,
       }}
     >
       {children}
     </button>
-  )
-}
+  );
+};
 
 /**
  * SECONDARY variant of the clinical logging button.
@@ -37,21 +47,27 @@ export const CLButtonPrimary = ({
  */
 export const CLButtonSecondary = ({
   children,
+  className,
   height = DEFAULT_HEIGHT,
   width = DEFAULT_WIDTH,
-  onClick = DEFAULT_ON_CLICK
+  type = DEFAULT_TYPE,
+  onClick = DEFAULT_ON_CLICK,
 }) => {
-
+  const updatedClassName = className
+    ? DEFAULT_SECONDARY_CLASSNAME + " " + className
+    : DEFAULT_SECONDARY_CLASSNAME;
+
   return (
-    <button 
-      className="secondary-variant-button"
+    <button
+      className={updatedClassName}
+      type={type}
       onClick={onClick}
       style={{
         height: height,
-        width: width
+        width: width,
       }}
     >
       {children}
     </button>
-  )
-}
+  );
+};

frontend/src/components/NewLogModal/NewLogModal.css

@@ -0,0 +1,81 @@
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 380px;
+    width: 640px;
+    background-color: #FBFCFE;
+    border-radius: 20px;
+    box-shadow: 24;
+  }
+
+  .close-modal-button {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    color: #244B94;
+    border-radius: 40px;
+  }
+
+  .close-modal-button:hover {
+    background-color: rgb(219, 219, 219);
+  }
+
+  .modal-description {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 1rem;
+  }
+
+  .new-log-modal-divider {
+    width: 60%;
+  }
+
+  .new-log-modal-buttons-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 2rem;
+    gap: 20px;
+  }
+
+  .upload-photo-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: #F7FAFF;
+    gap: 12px;
+  }
+
+.create-manually-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  align-items: center;
+  color: #4f607e;
+  gap: 12px;
+}
+
+.close-x-icon {
+  height: 34px;
+  width: 34px;
+  color: inherit;
+}
+
+.modal-icon {
+  height: 40px;
+  width: 40px;
+}

frontend/src/components/NewLogModal/NewLogModal.jsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CLButtonPrimary, CLButtonSecondary } from "../Buttons/CLButtons";
+import {
+  PhotoIcon,
+  PencilSquareIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Divider from "@mui/material/Divider";
+import "./NewLogModal.css";
+
+export const NewLogModal = () => {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const navigate = useNavigate();
+
+  const handleUploadPhoto = () => {
+    navigate("/upload-photo");
+  };
+
+  const handleCreateManually = () => {
+    navigate("/manualEntry");
+  };
+
+  return (
+    <div>
+      <CLButtonPrimary onClick={handleOpen} width={"230px"} height={"46px"}>
+        Create New Log
+      </CLButtonPrimary>
+      <Modal open={open} onClose={handleClose}>
+        <Box className="modal-content">
+          <button className="close-modal-button" onClick={handleClose}>
+            <XMarkIcon className="close-x-icon" />
+          </button>
+          <p className="modal-description">
+            How would you like to create a new log?
+          </p>
+          <Divider className="new-log-modal-divider" />
+          <div className="new-log-modal-buttons-container">
+            <CLButtonPrimary
+              className="upload-photo-button"
+              onClick={handleUploadPhoto}
+              width={"330px"}
+            >
+              <PhotoIcon className="modal-icon" />
+              <p>Upload Photo</p>
+            </CLButtonPrimary>
+            <CLButtonSecondary
+              className="create-manually-button"
+              onClick={handleCreateManually}
+              width={"330px"}
+            >
+              <PencilSquareIcon className="modal-icon" />
+              <p>Create Manually</p>
+            </CLButtonSecondary>
+          </div>
+        </Box>
+      </Modal>
+    </div>
+  );
+};