updating spinner to be smaller and different colors

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

@@ -15,6 +15,9 @@ import {
 import { Spinner } from "@/components/Spinner";
 import { baseCanvasUrl, canvasApi } from "@/services/canvas/canvasServiceUtils";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getCourseUrl } from "@/services/urlUtils";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Link from "next/link";
 
 export default function EditQuiz({
   moduleName,
@@ -82,39 +85,48 @@ function QuizButtons({
   const { data: canvasQuizzes } = useCanvasQuizzesQuery();
   const { data: quiz } = useQuizQuery(moduleName, quizName);
   const { data: settings } = useLocalCourseSettingsQuery();
+  const { courseName } = useCourseContext();
   const addToCanvas = useAddQuizToCanvasMutation();
   const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
 
   const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
 
   return (
-    <div className="p-5">
-      {!quizInCanvas && (
-        <button
-          disabled={addToCanvas.isPending}
-          onClick={() => addToCanvas.mutate(quiz)}
-        >
-          Add to canvas....
-        </button>
-      )}
-      {quizInCanvas && (
-        <a
-          className="btn"
-          target="_blank"
-          href={`${baseCanvasUrl}/courses/${settings.canvasId}/quizzes/${quizInCanvas.id}`}
-        >
-          View in Canvas
-        </a>
-      )}
-      {quizInCanvas && (
-        <button
-          disabled={deleteFromCanvas.isPending}
-          onClick={() => deleteFromCanvas.mutate(quizInCanvas.id)}
-        >
-          Delete from Canvas
-        </button>
-      )}
-      {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
+    <div className="p-5 flex flex-row gap-3 justify-end">
+        {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
+        {quizInCanvas && !quizInCanvas.published && (
+          <div className="text-rose-300 my-auto">Not Published</div>
+        )}
+        {!quizInCanvas && (
+          <button
+            disabled={addToCanvas.isPending}
+            onClick={() => addToCanvas.mutate(quiz)}
+          >
+            Add to canvas....
+          </button>
+        )}
+        {quizInCanvas && (
+          <a
+            className="btn"
+            target="_blank"
+            href={`${baseCanvasUrl}/courses/${settings.canvasId}/quizzes/${quizInCanvas.id}`}
+          >
+            View in Canvas
+          </a>
+        )}
+        {quizInCanvas && (
+          <button
+            className="btn-danger"
+            disabled={deleteFromCanvas.isPending}
+            onClick={() => deleteFromCanvas.mutate(quizInCanvas.id)}
+          >
+            Delete from Canvas
+          </button>
+        )}
+
+        <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+          Go Back
+        </Link>
     </div>
   );
 }