better border

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
 import Day from "./Day";
-import "./calendarMonth.css";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
@@ -24,22 +23,22 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   console.log(isCollapsed);
   return (
     <>
-      <h3
+      <div className="flex justify-center">
-        className={
+        <h3
-          "text-center text-2xl transition-all duration-500 hover:text-slate-50 underline hover:scale-105"
+          className={
-        }
+            "text-2xl transition-all duration-500 " +
-        onClick={toggleCollapse}
+            "hover:text-slate-50 underline hover:scale-105 "
-        role="button"
+          }
-      >
+          onClick={toggleCollapse}
-        {monthName}
+          role="button"
-      </h3>
+        >
+          {monthName}
+        </h3>
+      </div>
 
       <div
         id={monthName}
-        className={"panel"}
+        className={"collapsable " + (isCollapsed ? "" : "expand")}
-        style={{
-          maxHeight: isCollapsed ? "0" : "100vh",
-        }}
       >
         <div className="grid grid-cols-7 text-center fw-bold">
           {weekDaysList.map((day) => (

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -8,52 +8,36 @@ import { useCalendarItemsContext } from "../context/calendarItemsContext";
 import { useCourseContext } from "../context/courseContext";
 import Link from "next/link";
 import { IModuleItem } from "@/models/local/IModuleItem";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { DayOfWeek, getDayOfWeek } from "@/models/local/localCourse";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
     day,
     "calculating same month in day"
   );
-  const isInSameMonth = dayAsDate.getMonth() + 1 != month;
-  const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
 
+  const { data: settings } = useLocalCourseSettingsQuery();
   const itemsContext = useCalendarItemsContext();
   const { itemDrop } = useDraggingContext();
 
   const dateKey = getDateOnlyMarkdownString(dayAsDate);
   const todaysModules = itemsContext[dateKey];
 
-  const todaysAssignments = todaysModules
+  const { todaysAssignments, todaysQuizzes, todaysPages } =
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
+    getTodaysItems(todaysModules);
-        todaysModules[moduleName].assignments.map((assignment) => ({
-          moduleName,
-          assignment,
-        }))
-      )
-    : [];
 
-  const todaysQuizzes = todaysModules
+  const isInSameMonth = dayAsDate.getMonth() + 1 == month;
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].quizzes.map((quiz) => ({
-          moduleName,
-          quiz,
-        }))
-      )
-    : [];
 
-  const todaysPages = todaysModules
+  const classIsToday = settings.daysOfWeek.includes(getDayOfWeek(dayAsDate));
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
+
-        todaysModules[moduleName].pages.map((page) => ({
+  const todayClass = classIsToday ? " bg-slate-900 " : " ";
-          moduleName,
+  const monthClass = isInSameMonth ? " border border-slate-600 " : " "
-          page,
-        }))
-      )
-    : [];
 
   return (
     <div
       className={
-        "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
+        " rounded-lg p-2 pb-4 m-1 " + todayClass + monthClass
       }
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
@@ -89,6 +73,42 @@ export default function Day({ day, month }: { day: string; month: number }) {
   );
 }
 
+function getTodaysItems(todaysModules: {
+  [moduleName: string]: {
+    assignments: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/assignment/localAssignment").LocalAssignment[];
+    quizzes: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/quiz/localQuiz").LocalQuiz[];
+    pages: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/page/localCoursePage").LocalCoursePage[];
+  };
+}) {
+  const todaysAssignments = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].assignments.map((assignment) => ({
+          moduleName,
+          assignment,
+        }))
+      )
+    : [];
+
+  const todaysQuizzes = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].quizzes.map((quiz) => ({
+          moduleName,
+          quiz,
+        }))
+      )
+    : [];
+
+  const todaysPages = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].pages.map((page) => ({
+          moduleName,
+          page,
+        }))
+      )
+    : [];
+  return { todaysAssignments, todaysQuizzes, todaysPages };
+}
+
 function DraggableListItem({
   type,
   moduleName,

nextjs/src/app/course/[courseName]/calendar/calendarMonth.css

@@ -1,5 +0,0 @@
-.panel {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height .5s ease-out;
-}

nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx

@@ -66,20 +66,30 @@ export default function AssignmentGroupManagement() {
           />
         </div>
       ))}
-      <button
+      <div className="flex gap-3 mt-3">
-        onClick={() => {
+        <button
-          setAssignmentGroups((oldGroups) => [
+          className="btn-danger"
-            ...oldGroups,
+          onClick={() => {
-            {
+            setAssignmentGroups((oldGroups) => oldGroups.slice(1));
-              id: Date.now().toString(),
+          }}
-              name: "",
+        >
-              weight: 0,
+          Remove Assignment Group
-            },
+        </button>
-          ]);
+        <button
-        }}
+          onClick={() => {
-      >
+            setAssignmentGroups((oldGroups) => [
-        Add Assignment Group
+              ...oldGroups,
-      </button>
+              {
+                id: Date.now().toString(),
+                name: "",
+                weight: 0,
+              },
+            ]);
+          }}
+        >
+          Add Assignment Group
+        </button>
+      </div>
     </div>
   );
 }

nextjs/src/app/course/[courseName]/settings/DaysOfWeekSelector.tsx

@@ -21,7 +21,7 @@ export default function DaysOfWeekSelector() {
               key={day}
               className={
                 hasDay
-                  ? "bg-blue-200 text-blue-900"
+                  ? "bg-blue-300 text-blue-950 border-blue-500 border"
                   : "bg-slate-900 border-blue-900 border "
               }
               onClick={() => {

nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx

@@ -4,5 +4,5 @@ import React from "react";
 
 export default function SettingsHeader() {
   const { data: settings } = useLocalCourseSettingsQuery();
-  return <div>Settings for {settings.name}</div>;
+  return <h3 className="text-center mb-3">{settings.name} <span className="text-slate-500 text-xl"> settings</span></h3>;
 }

nextjs/src/app/course/[courseName]/settings/page.tsx

@@ -8,12 +8,14 @@ import AssignmentGroupManagement from "./AssignmentGroupManagement";
 
 export default function page() {
   return (
-    <div>
+    <div className="flex justify-center">
-      <SettingsHeader />
+      <div className=" w-fit mt-5">
-      <DaysOfWeekSelector />
+        <SettingsHeader />
-      <StartAndEndDate />
+        <DaysOfWeekSelector />
-      <DefaultDueTime />
+        <StartAndEndDate />
-      <AssignmentGroupManagement />
+        <DefaultDueTime />
+        <AssignmentGroupManagement />
+      </div>
     </div>
   );
 }

nextjs/src/app/globals.css

@@ -73,12 +73,29 @@ p {
   @apply mb-3;
 }
 
-button {
+button,
-  @apply bg-blue-900 hover:bg-blue-700 text-blue-50 font-bold py-1 px-3 rounded transition-all duration-200;
+.btn {
+  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+  @apply font-bold py-1 px-3 rounded transition-all duration-200;
+}
+
+.btn-danger {
+  @apply bg-red-800 hover:bg-red-900 text-red-100;
 }
 
 select {
   @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm;
-  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500 ;
+  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500;
   @apply bg-slate-800;
 }
+
+
+.collapsable {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height .5s ease-out;
+}
+
+.collapsable.expand {
+  max-height: 100vh;
+}

nextjs/src/models/local/localCourse.ts

@@ -31,6 +31,12 @@ export enum DayOfWeek {
   Friday = "Friday",
   Saturday = "Saturday",
 }
+
+export function getDayOfWeek(date: Date): DayOfWeek {
+  const dayIndex = date.getDay(); // Returns 0 for Sunday, 1 for Monday, etc.
+  return DayOfWeek[Object.keys(DayOfWeek)[dayIndex] as keyof typeof DayOfWeek];
+}
+
 export const localCourseYamlUtils = {
   parseSettingYaml: (settingsString: string): LocalCourseSettings => {
     const settings = parse(settingsString);