mermaid ink image support

src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -45,10 +45,10 @@ export default function CourseCalendar() {
       className="
         min-h-0
         flex-grow
-        border-4
+        border-2
         border-gray-900
         rounded-lg
-        bg-slate-950
+        bg-slate-950/70
         sm:p-1
       "
     >

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx

@@ -2,6 +2,7 @@ import MarkdownDisplay from "@/components/MarkdownDisplay";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { rubricItemIsExtraCredit } from "@/models/local/assignment/rubricItem";
 import { assignmentPoints } from "@/models/local/assignment/utils/assignmentPointsUtils";
+import { formatHumanReadableDate } from "@/services/utils/dateFormat";
 import React, { Fragment } from "react";
 
 export default function AssignmentPreview({
@@ -19,11 +20,15 @@ export default function AssignmentPreview({
       <section>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Due Date</div>
-          <div className="flex-1">{assignment.dueAt}</div>
+          <div className="flex-1">
+            {formatHumanReadableDate(assignment.dueAt)}
+          </div>
         </div>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Lock Date</div>
-          <div className="flex-1">{assignment.lockAt}</div>
+          <div className="flex-1">
+            {assignment.lockAt && formatHumanReadableDate(assignment.lockAt)}
+          </div>
         </div>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Assignment Group Name</div>

src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageHeader.tsx

@@ -14,14 +14,14 @@ export default function EditPageHeader({
   return (
     <div className="py-1 flex flex-row justify-start gap-3">
       <Link
-        className="btn btn-thin"
+        className="btn"
         href={getCourseUrl(courseName)}
         shallow={true}
       >
         {courseName}
       </Link>
       <UpdatePageName pageName={pageName} moduleName={moduleName} />
-      <div>{pageName}</div>
+      <div className="my-auto">{pageName}</div>
     </div>
   );
 }

src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuizHeader.tsx

@@ -14,7 +14,7 @@ export default function EditQuizHeader({
   return (
     <div className="py-1 flex flex-row justify-start gap-3">
       <Link
-        className="btn btn-thin"
+        className="btn"
         href={getCourseUrl(courseName)}
         shallow={true}
       >