From 2432e0408f3d28d682a30cfeab67e2a6cfccd6b9 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Tue, 15 Jul 2025 14:40:38 -0600
Subject: [PATCH] styling updates

---
 .../course/[courseName]/CourseNavigation.tsx  | 20 ++++++++++-
 .../[courseName]/calendar/CourseCalendar.tsx  | 16 +++++----
 .../course/[courseName]/calendar/day/Day.tsx  |  2 +-
 .../[assignmentName]/EditAssignment.tsx       | 22 ++++++++++--
 .../getAssignmentHelpString.tsx               | 35 +++++++++++++++++++
 5 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/src/app/course/[courseName]/CourseNavigation.tsx b/src/app/course/[courseName]/CourseNavigation.tsx
index 8914da7..97d50bb 100644
--- a/src/app/course/[courseName]/CourseNavigation.tsx
+++ b/src/app/course/[courseName]/CourseNavigation.tsx
@@ -32,7 +32,7 @@ export function CourseNavigation() {
   const canvasQuizzesQuery = useCanvasQuizzesQuery();
 
   return (
-    <div className="pb-1 ps-5 flex flex-row gap-3">
+    <div className="pb-1 flex flex-row gap-3">
       <Link href={"/"} className="btn" shallow={true}>
         Back to Course List
       </Link>
@@ -76,6 +76,24 @@ export function CourseNavigation() {
           Reload Canvas Data
         </button>
       )}
+      {settings?.startDate && (
+        <div className="my-auto text-slate-500">
+          {getSemesterName(settings.startDate)}
+        </div>
+      )}
     </div>
   );
 }
+function getSemesterName(startDate: string) {
+  const start = new Date(startDate);
+  const year = start.getFullYear();
+  const month = start.getMonth();
+
+  if (month < 4) {
+    return `Spring ${year}`;
+  } else if (month < 7) {
+    return `Summer ${year}`;
+  } else {
+    return `Fall ${year}`;
+  }
+}
\ No newline at end of file
diff --git a/src/app/course/[courseName]/calendar/CourseCalendar.tsx b/src/app/course/[courseName]/calendar/CourseCalendar.tsx
index 282aee5..e2c4164 100644
--- a/src/app/course/[courseName]/calendar/CourseCalendar.tsx
+++ b/src/app/course/[courseName]/calendar/CourseCalendar.tsx
@@ -43,13 +43,15 @@ export default function CourseCalendar() {
   return (
     <div
       className="
-        min-h-0
-        flex-grow
-        border-2
-        border-gray-900
-        rounded-lg
-        bg-slate-950/70
-        sm:p-1
+      min-h-0
+      flex-grow
+      border-2
+      border-gray-900
+      rounded-lg
+      bg-linear-to-br
+      from-blue-950/30
+      to-fuchsia-950/10 to-60%
+      sm:p-1
       "
     >
       <div
diff --git a/src/app/course/[courseName]/calendar/day/Day.tsx b/src/app/course/[courseName]/calendar/day/Day.tsx
index bd2dcc6..4dc0372 100644
--- a/src/app/course/[courseName]/calendar/day/Day.tsx
+++ b/src/app/course/[courseName]/calendar/day/Day.tsx
@@ -57,7 +57,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
   const meetingClasses =
     classOnThisDay && isInSemester && holidayNameToday.length === 0
       ? " bg-slate-900 "
-      : " ";
+      : " bg-gray-950";
 
   const todayClasses = isToday
     ? " border  border-blue-700 shadow-[0_0px_10px_0px] shadow-blue-500/50 "
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
index ef35643..135bf9e 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -131,9 +131,25 @@ export default function EditAssignment({
       Body={
         <>
           {showHelp && (
-            <pre className=" max-w-96">
-              <code>{getAssignmentHelpString(settings)}</code>
-            </pre>
+            <div className=" max-w-96">
+              <pre>
+                <code>{getAssignmentHelpString(settings)}</code>
+              </pre>
+              <a
+                href="https://www.markdownguide.org/cheat-sheet/"
+                target="_blank"
+                className="text-blue-400 underline"
+              >
+                Markdown Cheat Sheet
+              </a>
+              <a
+                href="https://mermaid.live/edit"
+                target="_blank"
+                className="text-blue-400 underline ps-3"
+              >
+                Mermaid Live Editor
+              </a>
+            </div>
           )}
           <div className="flex-1 h-full">
             <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx
index 080508c..39a5ff9 100644
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/getAssignmentHelpString.tsx
@@ -20,7 +20,42 @@ AllowedFileUploadExtensions:
 
 description goes here
 
+
+## Markdown
+You can use markdown to format your assignment description. For example, you can make lists like this:
+- Item 1
+- Item 2
+- Item 3
+
+**Bold text**
+
+*Italic text*
+
+[Link to Canvas](https://canvas.instructure.com)
+
+\`Inline code\`
+
+> Blockquote
+
+---
+
+1. First item
+2. Second item
+3. Third item
+
+you can make mermaid diagrams like this:
+
+\`\`\`mermaid
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+\`\`\`
+
 ## Rubric
+
 - 1pt: singular point
 - 1pts: plural points
 - 10pts: (extra credit) extra credit points