From ca240811f290c0db39ea4a307e4014671d55dac1 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Fri, 20 Feb 2026 09:21:23 -0700
Subject: [PATCH] refactoring styling

---
 .../calendar/day/itemInDay/DayItemContextMenu.tsx          | 7 +++++--
 src/components/Modal.tsx                                   | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/course/[courseName]/calendar/day/itemInDay/DayItemContextMenu.tsx b/src/app/course/[courseName]/calendar/day/itemInDay/DayItemContextMenu.tsx
index 7585295..78e616b 100644
--- a/src/app/course/[courseName]/calendar/day/itemInDay/DayItemContextMenu.tsx
+++ b/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
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 2e56bce..2dbcc49 100644
--- a/src/components/Modal.tsx
+++ b/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}