beter add button

src/app/course/[courseName]/calendar/day/DayTitle.tsx

@@ -71,9 +71,34 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
         )}
       </ClientOnly>
       <Modal
+        buttonComponent={({ openModal }) => (
+          <svg
+            viewBox="0 0 24 24"
+            width={22}
+            height={22}
+            className="cursor-pointer hover:scale-125 hover:stroke-slate-300 stroke-slate-400 transition-all m-0.5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            onClick={openModal}
+          >
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></g>
+            <g id="SVGRepo_iconCarrier">
+              <path
+                d="M6 12H18M12 6V18"
+                className=" "
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </g>
+          </svg>
+        )}
         modalControl={modal}
-        buttonText="+"
-        buttonClass="unstyled hover:font-bold hover:scale-125 px-1 mb-auto mt-0 pt-0"
         modalWidth="w-135"
       >
         {({ closeModal }) => (

src/components/Modal.tsx

@@ -25,22 +25,28 @@ export function useModal() {
 
 export default function Modal({
   children,
-  buttonText,
+  buttonText = "",
   buttonClass = "",
   modalWidth = "w-1/3",
   modalControl,
+  buttonComponent,
 }: {
   children: (props: { closeModal: () => void }) => ReactNode;
-  buttonText: string;
+  buttonText?: string;
   buttonClass?: string;
   modalWidth?: string;
   modalControl: ModalControl;
+  buttonComponent?: (props: { openModal: () => void }) => ReactNode;
 }) {
   return (
     <>
+      {buttonComponent ? (
+        buttonComponent({ openModal: modalControl.openModal })
+      ) : (
         <button onClick={modalControl.openModal} className={buttonClass}>
           {buttonText}
         </button>
+      )}
 
       <div
         className={

src/components/icons/ExpandIcon.tsx

@@ -7,33 +7,14 @@ export default function ExpandIcon({
 }) {
   const size = "24px";
   return (
-    // <svg
-    //   style={style}
-
-    //   width={size}
-    //   height={size}
-    //   viewBox="0 0 17 17"
-    //   version="1.1"
-    //   className="si-glyph si-glyph-triangle-left transition-all ms-1 "
-    // >
-    //   <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-    //     <path
-    //       d="M3.446,10.052 C2.866,9.471 2.866,8.53 3.446,7.948 L9.89,1.506 C10.471,0.924 11.993,0.667 11.993,2.506 L11.993,15.494 C11.993,17.395 10.472,17.076 9.89,16.495 L3.446,10.052 L3.446,10.052 Z"
-    //       className="si-glyph-fill"
-    //       style={{
-    //         fill: "rgb(148 163 184 / var(--tw-text-opacity))",
-    //       }}
-    //     ></path>
-    //   </g>
-    // </svg>
     <svg
       style={style}
       width={size}
       height={size}
+      className="transition-all"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="transition-all"
     >
       <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
       <g
@@ -45,7 +26,6 @@ export default function ExpandIcon({
         <path
           className="stroke-slate-300"
           d="M9 6L15 12L9 18"
-          // stroke="#FFFFFF"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"