refactoring styling

src/app/course/[courseName]/calendar/day/itemInDay/DayItemContextMenu.tsx

@@ -115,9 +115,12 @@ export const AssignmentDayItemContextMenu: FC<{
   const dangerClasses =
     "bg-rose-900/30 hover:bg-rose-950 disabled:opacity-50 text-rose-50";
   return (
-    <Modal modalControl={modalControl}>
+    <Modal modalControl={modalControl} backgroundCoverColor="bg-black/30">
       {() => (
         <>
+        <div className="text-center p-1 text-slate-200">
+          {item.name}
+        </div>
           {confirmingDelete ? (
             <>
               <button
@@ -147,7 +150,7 @@ export const AssignmentDayItemContextMenu: FC<{
                     href={canvasUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="unstyled block px-4 py-2 hover:bg-slate-700 cursor-pointer"
+                    className="unstyled font-bold block px-3 py-1 hover:bg-slate-700 cursor-pointer"
                     onClick={handleClose}
                   >
                     View in Canvas

src/components/Modal.tsx

@@ -42,6 +42,7 @@ export default function Modal({
   modalWidth = "w-1/3",
   modalControl,
   buttonComponent,
+  backgroundCoverColor = "bg-black/80",
 }: {
   children: (props: { closeModal: () => void }) => ReactNode;
   buttonText?: string;
@@ -49,6 +50,7 @@ export default function Modal({
   modalWidth?: string;
   modalControl: ModalControl;
   buttonComponent?: (props: { openModal: () => void }) => ReactNode;
+  backgroundCoverColor?: string;
 }) {
   return (
     <>
@@ -66,7 +68,7 @@ export default function Modal({
       <div
         className={
           modalControl.isOpen
-            ? `transition-all duration-400 fixed inset-0 ${modalControl.position ? "" : "flex items-center justify-center"} h-screen bg-black/80 z-50 w-screen`
+            ? `transition-all duration-400 fixed inset-0 ${modalControl.position ? "" : "flex items-center justify-center"} h-screen ${backgroundCoverColor} z-50 w-screen`
             : "hidden h-0 w-0 p-1 -z-50"
         }
         onClick={modalControl.closeModal}