standardizing settings styles

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx

@@ -3,15 +3,14 @@
 import Modal, { useModal } from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import { getCourseUrl } from "@/services/urlUtils";
-import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useCourseContext } from "../../context/courseContext";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useDeleteLectureMutation } from "@/hooks/localCourse/lectureHooks";
+import Link from "next/link";
 
 export default function LectureButtons({ lectureDay }: { lectureDay: string }) {
-  const queryClient = useQueryClient();
   const { courseName } = useCourseContext();
   const [settings] = useLocalCourseSettingsQuery();
   const router = useRouter();
@@ -58,8 +57,11 @@ export default function LectureButtons({ lectureDay }: { lectureDay: string }) {
             </div>
           )}
         </Modal>
-        {isLoading && <Spinner />}
       </div>
+      <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+        Go Back
+      </Link>
+      {isLoading && <Spinner />}
     </div>
   );
 }

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

@@ -8,11 +8,12 @@ import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentG
 import { useEffect, useState } from "react";
 import TextInput from "../../../../components/form/TextInput";
 import { useSetAssignmentGroupsMutation } from "@/hooks/canvas/canvasCourseHooks";
+import { settingsBox } from "./sharedSettings";
 
 export default function AssignmentGroupManagement() {
   const [settings] = useLocalCourseSettingsQuery();
   const updateSettings = useUpdateLocalCourseSettingsMutation();
-  // const applyInCanvas = useSetAssignmentGroupsMutation(settings.canvasId); // untested
+  const applyInCanvas = useSetAssignmentGroupsMutation(settings.canvasId); // untested
 
   const [assignmentGroups, setAssignmentGroups] = useState<
     LocalAssignmentGroup[]
@@ -39,7 +40,7 @@ export default function AssignmentGroupManagement() {
   }, [assignmentGroups, settings, updateSettings]);
 
   return (
-    <div>
+    <div className={settingsBox}>
       {assignmentGroups.map((group) => (
         <div key={group.id} className="flex flex-row gap-3">
           <TextInput

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

@@ -7,6 +7,7 @@ import {
 import { TimePicker } from "../../../../components/TimePicker";
 import { useState } from "react";
 import DefaultLockOffset from "./DefaultLockOffset";
+import { settingsBox } from "./sharedSettings";
 
 export default function DefaultDueTime() {
   const [settings] = useLocalCourseSettingsQuery();
@@ -15,7 +16,7 @@ export default function DefaultDueTime() {
     !!settings.defaultLockHoursOffset
   );
   return (
-    <div className="border w-fit p-3 m-3 rounded-md">
+    <div className={settingsBox}>
       <div className="text-center">Default Assignment Due Time</div>
       <hr className="m-1 p-0" />
       <TimePicker

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

@@ -5,6 +5,7 @@ import {
   useUpdateLocalCourseSettingsMutation,
 } from "@/hooks/localCourse/localCoursesHooks";
 import { useState, useEffect } from "react";
+import { settingsBox } from "./sharedSettings";
 
 export default function DefaultFileUploadTypes() {
   const [settings] = useLocalCourseSettingsQuery();
@@ -31,7 +32,7 @@ export default function DefaultFileUploadTypes() {
   }, [defaultFileUploadTypes, settings, updateSettings]);
 
   return (
-    <div className="border w-fit p-3 m-3 rounded-md">
+    <div className={settingsBox}>
       <div className="text-center">Default File Upload Types</div>
 
       {defaultFileUploadTypes.map((type, index) => (

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

@@ -12,6 +12,7 @@ import {
   holidaysToString,
   parseHolidays,
 } from "../../../../models/local/settingsUtils";
+import { settingsBox } from "./sharedSettings";
 
 const exampleString = `springBreak:
 - 10/12/2024
@@ -89,7 +90,7 @@ function InnerHolidayConfig() {
   }, [rawText, settings.holidays, settings, updateSettings]);
 
   return (
-    <div className=" border w-fit p-3 m-3 rounded-md">
+    <div className={settingsBox}>
       <div className="flex flex-row gap-3">
         <TextInput
           value={rawText}

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

@@ -2,15 +2,16 @@
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDateOnlyMarkdownString } from "@/models/local/timeUtils";
 import React from "react";
+import { settingsBox } from "./sharedSettings";
 
 export default function StartAndEndDate() {
   const [settings] = useLocalCourseSettingsQuery();
   const startDate = new Date(settings.startDate);
   const endDate = new Date(settings.endDate);
   return (
-    <div>
-      <div>Start: {getDateOnlyMarkdownString(startDate)}</div>
-      <div>End: {getDateOnlyMarkdownString(endDate)}</div>
+    <div className={settingsBox}>
+      <div>Semester Start: {getDateOnlyMarkdownString(startDate)}</div>
+      <div>Semester End: {getDateOnlyMarkdownString(endDate)}</div>
     </div>
   );
 }

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

@@ -9,6 +9,7 @@ import {
   AssignmentSubmissionTypeList,
 } from "@/models/local/assignment/assignmentSubmissionType";
 import React, { useEffect, useState } from "react";
+import { settingsBox } from "./sharedSettings";
 
 export default function SubmissionDefaults() {
   const [settings] = useLocalCourseSettingsQuery();
@@ -32,7 +33,7 @@ export default function SubmissionDefaults() {
   }, [defaultSubmissionTypes, settings, updateSettings]);
 
   return (
-    <div className="border w-fit p-3 m-3 rounded-md">
+    <div className={settingsBox}>
       <div className="text-center">Default Assignment Submission Type</div>
 
       {defaultSubmissionTypes.map((type, index) => (

nextjs/src/app/course/[courseName]/settings/sharedSettings.ts

@@ -0,0 +1 @@
+export const settingsBox = "border w-full p-3 m-3 rounded-md border-slate-500"

nextjs/src/app/newCourse/NewCourseForm.tsx

@@ -26,7 +26,7 @@ const sampleCompose = `services:
     image: alexmickelson/canvas_management:2 # pull this image regularly
     user: 1000:1000 # userid:groupid that matches file ownership on host system
     ports:
-      - 8080:8080 # hostPort:containerPort - you can change the first one if you like
+      - 8080:3000 # hostPort:containerPort - you can change the first one if you like
     env_file:
       - .env # needs to have your CANVAS_TOKEN set
     environment:
@@ -196,9 +196,9 @@ function OtherSettings({
         getOptionName={(d) => d}
         emptyOptionText="--- add a new folder to your docker compose to add more folders ---"
       />
-      <div>
+      <div className="px-5">
         New folders will not be created automatically, you are expected to mount
-        a docker volume for each coures.
+        a docker volume for each courses.
       </div>
       <br />
       <div className="flex justify-center">
@@ -222,6 +222,13 @@ function OtherSettings({
         options={allSettings}
         getOptionName={(c) => c.name}
       />
+      <div className="px-5">
+        Assignments, Quizzes, Pages, and Lectures will have their due dates
+        moved based on how far they are from the start of the semester.
+        <br />
+        You will still need to go through and re-order the course content, but
+        things will be within a few days of where they should be.
+      </div>
     </>
   );
 }