updated new item creation

nextjs/src/app/course/[courseName]/calendar/day/Day.tsx

@@ -13,7 +13,8 @@ import DropTargetStyling from "../../../../../components/DropTargetStyling";
 import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 import { useState } from "react";
-import { DayContextMenu } from "./DayContextMenu";
+import Modal from "@/components/Modal";
+import NewItemForm from "../../modules/NewItemForm";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -54,11 +55,12 @@ export default function Day({ day, month }: { day: string; month: number }) {
       }}
     >
       <DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
-        <DayContextMenu
+        {/* <DayContextMenu
           day={day}
           coordinates={contextCoordinates}
           hideContextMenu={() => setContextCoordinates(undefined)}
-        />
+        /> */}
+
         <DayTitle day={day} dayAsDate={dayAsDate} />
         <div>
           {todaysAssignments.map(
@@ -102,8 +104,30 @@ export default function Day({ day, month }: { day: string; month: number }) {
 function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   const { courseName } = useCourseContext();
   return (
+    <div className="flex justify-between">
       <Link className="ms-1" href={getLectureUrl(courseName, day)}>
         {dayAsDate.getDate()}
       </Link>
+      <Modal buttonText="+" buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0">
+        {({ closeModal }) => (
+          <div>
+            <NewItemForm
+              creationDate={day}
+              onCreate={() => {
+                closeModal();
+              }}
+            />
+            <br />
+            <button
+              onClick={() => {
+                closeModal();
+              }}
+            >
+              close
+            </button>
+          </div>
+        )}
+      </Modal>
+    </div>
   );
 }

nextjs/src/app/course/[courseName]/calendar/day/DayContextMenu.tsx

@@ -1,70 +0,0 @@
-import Modal from "@/components/Modal";
-import React, { FC, useEffect, useRef } from "react";
-import NewItemForm from "../../modules/NewItemForm";
-
-export const DayContextMenu: FC<{
-  coordinates?: { x: number; y: number };
-  hideContextMenu: () => void;
-  day: string;
-}> = ({ coordinates, hideContextMenu, day }) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // const handleContextMenu = (event: MouseEvent) => {
-  //   event.preventDefault();
-  //   setPosition({ x: event.pageX, y: event.pageY });
-  //   setVisible(true);
-  // };
-
-  const handleClick = (event: MouseEvent) => {
-    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-      hideContextMenu();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClick);
-
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  }, []);
-  
-  return (
-    <div
-      className={
-        "absolute z-10 border bg-slate-900 border-slate-300 rounded shadow-lg w-48 " +
-        (!coordinates && "hidden")
-      }
-      style={{ top: coordinates?.y, left: coordinates?.x }}
-      onMouseDown={(e) => {
-        console.log(e.target);
-        e.stopPropagation();
-        hideContextMenu();
-      }}
-      ref={menuRef}
-    >
-      <Modal buttonText="Add Module Item">
-        {({ closeModal }) => (
-          <div>
-            <NewItemForm
-              creationDate={day}
-              onCreate={() => {
-                closeModal();
-                hideContextMenu();
-              }}
-            />
-            <br />
-            <button
-              onClick={() => {
-                closeModal();
-                hideContextMenu();
-              }}
-            >
-              close
-            </button>
-          </div>
-        )}
-      </Modal>
-    </div>
-  );
-};

nextjs/src/app/globals.css

@@ -21,7 +21,9 @@
   background-color: #020617 !important;
   /* background-color: #18181b !important; */
 }
-.monaco-editor { position: absolute !important; }
+.monaco-editor {
+  position: absolute !important;
+}
 
 .monaco-editor .mtk1 {
   @apply text-slate-300;
@@ -72,11 +74,11 @@ thead {
   @apply text-lg;
 }
 
-th, td {
+th,
+td {
   @apply px-2 py-1 border border-gray-700;
 }
 
-
 hr {
   @apply border-t border-gray-500 my-4;
 }
@@ -93,12 +95,14 @@ p {
   @apply mb-3;
 }
 
-button,
-.btn {
-  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+button, .btn {
   @apply font-bold py-1 px-3 rounded transition-all duration-200;
 }
 
+button:not(.unstyled), .btn:not(.unstyled) {
+  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+}
+
 .btn-danger {
   @apply bg-red-800 hover:bg-red-900 text-red-100;
 }
@@ -114,18 +118,16 @@ select {
   @apply bg-slate-800;
 }
 
-
 .collapsible {
   max-height: 0;
   overflow: hidden;
-  transition: max-height .5s ease-out;
+  transition: max-height 0.5s ease-out;
 }
 
 .collapsible.expand {
   max-height: 100vh;
 }
 
-
 .markdownQuizAnswerPreview p:last-child {
   @apply p-0 m-0;
 }

nextjs/src/components/ButtonSelect.tsx

@@ -12,13 +12,13 @@ export default function ButtonSelect<T>({
   selectedOption: T | undefined;
 }) {
   return (
-    <div className="flex flex-row gap-3 w-min">
+    <div className="flex flex-row gap-3">
       {options.map((o) => (
         <button
           type="button"
           key={getName(o)}
           className={
-            getName(o) === getName(selectedOption) ? "" : "btn-outline"
+            getName(o) === getName(selectedOption) ? "  " : "unstyled btn-outline"
           }
           onClick={() => setSelectedOption(o)}
         >