Dev lane r

src/components/Calendar.jsx

@@ -7,6 +7,7 @@ import { useCalendar } from "@/context/CalendarContext";
 import EventFormModal from "./EventFormModal";
 import DeleteEventModal from "./DeleteEventModal";
 import { useRouter } from "next/navigation";
+import Modal from "./Modal";
 
 const localizer = momentLocalizer(moment);
 
@@ -33,12 +34,13 @@ export default function UserCalendar() {
 
   const [modalStart, setModalStart] = useState(null);
   const [modalEnd, setModalEnd] = useState(null);
+  const [showLoginModal, setShowLoginModal] = useState(false);
 
   const router = useRouter();
 
   const handleSelectSlot = async ({ start, end }) => {
     if (!isLoggedIn) {
-      alert("You must be logged in to create an event.");
+      setShowLoginModal(true);
       return;
     }
     setModalStart(start);
@@ -125,6 +127,14 @@ export default function UserCalendar() {
                 }}
               />
             )}
+            <Modal
+              open={showLoginModal}
+              onClose={() => setShowLoginModal(false)}
+            >
+              <div style={{ fontSize: "1.2rem", marginBottom: "1rem" }}>
+                You must be logged in to create an event.
+              </div>
+            </Modal>
           </div>
         </div>
       </div>

src/components/Modal.jsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import Button from "./Button";
+
+export default function Modal({ open, onClose, children }) {
+  if (!open) return null;
+  return (
+    <div className="modal-style">
+      <div className="modal-style__container">
+        <div className="modal-style__inner-text">{children}</div>
+        <div className="modal-style__button-container">
+          <div className="modal-style__login-button">
+            <Link href={"/login"}>
+              <Button className="button__button-wrapper-2">Login</Button>
+            </Link>
+          </div>
+          <div className="modal-style__close-button">
+            <Button className="button__button-wrapper" onClick={onClose}>
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/styles/common/_button.scss

@@ -27,7 +27,7 @@
     justify-content: center;
     text-align: center;
     font-size: 1.1rem;
-    border: none;
+    border: 1px solid var(--color-header-text);
     background-color: var(--color-header-button);
     padding: 15px;
     border-radius: 15px;
@@ -41,4 +41,25 @@
       color: var(--color-header-text-hover);
     }
   }
+
+  &__button-wrapper-2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 1.1rem;
+    border: none;
+    background-color: var(--color-header-text);
+    padding: 15px;
+    border-radius: 15px;
+    cursor: pointer;
+    width: 100%;
+    color: var(--color-header-button);
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-header-button-hover);
+      color: var(--color-header-text-hover);
+    }
+  }
 }

src/styles/common/_contacts.scss

@@ -92,14 +92,14 @@
 
   &__component-wrapper {
     display: flex;
-    justify-content: space-between;
+    justify-content: top;
     align-items: center;
     height: 95%;
     flex-flow: column;
     width: 60%;
   }
 
-  &__contacts-section-wrapper {
+  &__section-wrapper {
     flex-flow: column nowrap;
     width: 100%;
     height: 100%;
@@ -114,7 +114,7 @@
     margin-bottom: 40px;
   }
 
-  &__contacts-section-wrapper::-webkit-scrollbar {
+  &__section-wrapper::-webkit-scrollbar {
     border-bottom-right-radius: 8px;
     border-top-right-radius: 8px;
   }
@@ -135,7 +135,7 @@
     text-align: center;
   }
 
-  &__contacts-empty-message {
+  &__empty-message {
     padding: 20px;
   }
 
@@ -147,11 +147,11 @@
     width: 100%;
   }
 
-  &__contacts-title {
+  &__title {
     padding-top: 20px;
   }
 
-  &__contacts-searchbar-container {
+  &__searchbar-container {
     width: 100%;
   }
 }

src/styles/common/_modal.scss

@@ -0,0 +1,48 @@
+.modal-style {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 1;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-toolbar-label);
+    padding: 40px;
+    border-radius: 24px;
+    color: black;
+    min-width: 320px;
+    min-height: 120px;
+    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
+  }
+
+  &__inner-text {
+    padding: 24px 0 32px;
+  }
+
+  &__button-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    gap: 8px;
+    width: 100%;
+  }
+
+  &__login-button {
+    width: 100%;
+  }
+
+  &__close-button {
+    width: 25%;
+  }
+}

src/styles/main.scss

@@ -8,3 +8,4 @@
 @import './common/_searchbar.scss';
 @import './common/_sidebar.scss';
 @import './_custom-calendar.scss';
+@import './common/_modal.scss';