consoladating layouts

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

@@ -15,7 +15,7 @@ export default function AssignmentPreview({
     0
   );
   return (
-    <div className="h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto ">
       <section>
         <div className="flex">
           <div className="flex-1 text-end pe-3">Due Date</div>

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

@@ -21,6 +21,7 @@ import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuth
 import EditAssignmentHeader from "./EditAssignmentHeader";
 import { Spinner } from "@/components/Spinner";
 import { getAssignmentHelpString } from "./getAssignmentHelpString";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditAssignment({
   moduleName,
@@ -120,12 +121,15 @@ export default function EditAssignment({
   ]);
 
   return (
-    <div className="h-full flex flex-col align-middle px-1">
+    <EditLayout
+      Header={
         <EditAssignmentHeader
           moduleName={moduleName}
           assignmentName={assignmentName}
         />
-      <div className={"min-h-0 flex flex-row w-full flex-grow"}>
+      }
+      Body={
+        <>
           {showHelp && (
             <pre className=" max-w-96">
               <code>{getAssignmentHelpString(settings)}</code>
@@ -137,7 +141,7 @@ export default function EditAssignment({
           <div className="flex-1 h-full">
             <div className="text-red-300">{error && error}</div>
 
-          <div className="px-3 h-full">
+            <div className="px-3 h-full ">
               <ClientOnly>
                 <SuspenseAndErrorHandling showToast={false}>
                   {imageUpdateIsPending && (
@@ -151,7 +155,9 @@ export default function EditAssignment({
               </ClientOnly>
             </div>
           </div>
-      </div>
+        </>
+      }
+      Footer={
         <ClientOnly>
           <SuspenseAndErrorHandling>
             <AssignmentFooterButtons
@@ -161,6 +167,7 @@ export default function EditAssignment({
             />
           </SuspenseAndErrorHandling>
         </ClientOnly>
-    </div>
+      }
+    />
   );
 }

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

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

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

@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
 import EditPageHeader from "./EditPageHeader";
+import { EditLayout } from "@/components/EditLayout";
 
 export default function EditPage({
   moduleName,
@@ -67,17 +68,6 @@ export default function EditPage({
               previousPageName: pageName,
               courseName,
             });
-            // .then(() => {
-            //   if (updatedPage.name !== pageName)
-            //     router.replace(
-            //       getModuleItemUrl(
-            //         courseName,
-            //         moduleName,
-            //         "page",
-            //         updatedPage.name
-            //       )
-            //     );
-            // });
           } else {
             console.log(
               "client not authoritative, updating client with server page"
@@ -109,8 +99,9 @@ export default function EditPage({
   ]);
 
   return (
-    <div className="h-full flex flex-col">
+    <EditLayout
-      <EditPageHeader pageName={pageName} moduleName={moduleName} />
+      Header={<EditPageHeader pageName={pageName} moduleName={moduleName} />}
+      Body={
         <div className="columns-2 min-h-0 flex-1">
           <div className="flex-1 h-full">
             <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
@@ -123,11 +114,16 @@ export default function EditPage({
             </div>
           </div>
         </div>
+      }
+      Footer={
+        <>
           {settings.canvasId && (
             <ClientOnly>
               <EditPageButtons pageName={pageName} moduleName={moduleName} />
             </ClientOnly>
           )}
-    </div>
+        </>
-  );
+      }
+    />
+  )
 }

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

@@ -17,6 +17,7 @@ import { extractLabelValue } from "@/models/local/assignment/utils/markdownUtils
 import EditQuizHeader from "./EditQuizHeader";
 import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { EditLayout } from "@/components/EditLayout";
 
 const helpString = (settings: LocalCourseSettings) => {
   const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
@@ -148,9 +149,10 @@ export default function EditQuiz({
   ]);
 
   return (
-    <div className="h-full flex flex-col align-middle px-1">
+    <EditLayout
-      <EditQuizHeader moduleName={moduleName} quizName={quizName} />
+      Header={<EditQuizHeader moduleName={moduleName} quizName={quizName} />}
-      <div className={"min-h-96 h-full flex flex-row w-full"}>
+      Body={
+        <>
           {showHelp && (
             <pre className=" max-w-96">
               <code>{helpString(settings)}</code>
@@ -163,7 +165,9 @@ export default function EditQuiz({
             <div className="text-red-300">{error && error}</div>
             <QuizPreview moduleName={moduleName} quizName={quizName} />
           </div>
-      </div>
+        </>
+      }
+      Footer={
         <ClientOnly>
           <SuspenseAndErrorHandling>
             <QuizButtons
@@ -173,6 +177,7 @@ export default function EditQuiz({
             />
           </SuspenseAndErrorHandling>
         </ClientOnly>
-    </div>
+      }
+    />
   );
 }

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

@@ -11,7 +11,7 @@ export default async function CoursePage() {
       <div className="h-full flex flex-col">
         <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex sm:flex-row h-full flex-col">
+            <div className="flex sm:flex-row h-full flex-col max-w-[2400px] mx-auto">
               <div className="flex-1 h-full flex flex-col">
                 <CourseNavigation />
                 <CourseCalendar />

src/app/globals.css

@@ -83,6 +83,7 @@ p {
 button,
 .btn {
   @apply font-bold py-1 px-3 rounded transition-all duration-200;
+  @apply cursor-pointer;
 }
 
 .btn-thin {
@@ -91,11 +92,12 @@ button,
 
 button:not(.unstyled):not(.btn-danger),
 .btn:not(.unstyled):not(.btn-danger) {
-  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+  @apply bg-blue-900/80 hover:bg-blue-800/80 text-blue-50;
+  @apply cursor-pointer;
 }
 
 .btn-danger {
-  @apply bg-red-800 hover:bg-red-900 text-red-100;
+  @apply bg-red-800/60 hover:bg-red-900 text-red-100;
 }
 
 .btn-outline {

src/app/layout.tsx

@@ -26,7 +26,7 @@ export default async function RootLayout({
     <html lang="en">
       <head></head>
       <body className="flex justify-center">
-        <div className="bg-slate-900 h-screen text-slate-300 w-screen sm:p-1">
+        <div className="bg-gray-950 h-screen text-slate-300 w-screen sm:p-1">
           <MyToaster />
           <Suspense>
             <Providers>

src/components/EditLayout.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+export const EditLayout: FC<{
+  Header: ReactNode;
+  Body: ReactNode;
+  Footer: ReactNode;
+}> = ({ Header, Body, Footer }) => {
+  return (
+    <div className="h-full flex flex-col align-middle px-1 max-w-[2400px] mx-auto bg-gray-900 rounded">
+      {Header}
+      <div className="min-h-0 flex flex-row w-full flex-grow">
+        {Body}
+      </div>
+      {Footer}
+    </div>
+  );
+};

src/components/editor/MonacoEditor.css

@@ -5,8 +5,9 @@
 /* monaco editor */
 .monaco-editor-background,
 .monaco-editor .margin {
-  background-color: #020617 !important;
+  /* background-color: #020617 !important; */
-  /* background-color: #18181b !important; */
+  background-color: #030712 !important;
+  /* background-color: #101828 !important; */
 }
 .monaco-editor {
   position: absolute !important;