SigninSignupModal

frontend/src/Components/Signin_Signup/SigninSignupModal/SigninSignupModal.css

@@ -0,0 +1,61 @@
+/* Custom styles for the modal */
+.custom-modal .modal-dialog {
+  max-width: 400px; /* Adjust the width to make the modal smaller */
+}
+
+.modal-header-custom {
+  border-bottom: none; /* Remove the bottom border */
+  text-align: center;
+  justify-content: center; /* Center the header content */
+}
+
+.modal-title-custom {
+  width: 100%;
+  text-align: center;
+  font-weight: bold; /* Make the header text bold */
+}
+
+.modal-header-custom .btn-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
+
+.modal-body-custom {
+  border-top: none;
+  border-bottom: none; /* Remove the top and bottom border */
+  text-align: center;
+  font-size: 1.2rem;
+}
+
+.modal-body-text {
+  font-size: 0.875rem; /* Make the body text smaller */
+}
+
+.modal-footer-custom {
+  border-top: none !important; /* Remove the top border */
+  display: flex;
+  justify-content: space-between; /* Ensure buttons are spaced apart */
+  width: 100%;
+}
+
+.btn-left, .btn-right {
+  margin: 0 auto;
+  width: 35%; /* Make the buttons smaller */
+  text-align: center;
+  padding: 0.375rem 0.75rem; /* Adjust padding for smaller size */
+  font-size: 1rem; /* Adjust font size for smaller buttons */
+}
+
+.btn-custom {
+  background-color: #79A2D2;
+  border-color: #79A2D2;
+  color: white;
+}
+
+.btn-custom:hover {
+  background-color: #2560a2;
+  border-color: #2560a2;
+}
+

frontend/src/Components/Signin_Signup/SigninSignupModal/SigninSignupModal.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import './SigninSignupModal.css'; // Import the custom CSS file
+
+const SigninSignupModal = ({ show, handleClose }) => {
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    handleClose();
+    navigate('/signin'); // Navigate to the sign-in page
+  };
+
+  const handleSignup = () => {
+    handleClose();
+    navigate('/signup'); // Navigate to the sign-up page
+  };
+
+  return (
+    <Modal
+      show={show}
+      onHide={handleClose}
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      className="custom-modal" // Add a custom class for the modal
+    >
+      <Modal.Header closeButton className="modal-header-custom">
+        <Modal.Title id="contained-modal-title-vcenter" className="modal-title-custom">
+          Log In or Sign Up
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="modal-body-custom">
+        <h4 className="modal-body-text">To continue, please log in to your account or sign up if you don't have one yet.</h4>
+      </Modal.Body>
+      <Modal.Footer className="modal-footer-custom">
+        <Button variant="success" onClick={handleSignup} className="btn-left btn-custom">
+          Sign Up
+        </Button>
+        <Button variant="primary" onClick={handleLogin} className="btn-right btn-custom">
+          Log In
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default SigninSignupModal;
+