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>
   );
 }

nextjs/src/components/Spinner.tsx

@@ -3,8 +3,8 @@ import "./spinner.css"
 
 export const Spinner = () => {
   return (
-    <div className="text-center m-3">
-      <span className="loader"></span>
+    <div className="text-center h-full">
+      <span className="loader my-auto "></span>
     </div>
   );
 };

nextjs/src/components/spinner.css

@@ -1,17 +1,29 @@
+:root {
+  /* --spinner-size-1: 48px;
+  --spinner-size-2: 32px; */
+  --spinner-size-1: 33px;
+  --spinner-size-2: 22px;
+  /* --spinner-size-3: 40px; */
+
+  --spinner-color-1: #305576;
+  --spinner-color-2: #714199;
+}
+
 .loader {
-  width: 48px;
-  height: 48px;
+  width: var(--spinner-size-1);
+  height: var(--spinner-size-1);
   border-radius: 50%;
   display: inline-block;
   position: relative;
   border: 3px solid;
-  border-color: #6c757d #6c757d transparent transparent;
+  border-color: var(--spinner-color-1) var(--spinner-color-1) transparent
+    transparent;
   box-sizing: border-box;
   animation: rotation 2s linear infinite;
 }
 .loader::after,
 .loader::before {
-  content: '';  
+  content: "";
   box-sizing: border-box;
   position: absolute;
   left: 0;
@@ -20,23 +32,25 @@
   bottom: 0;
   margin: auto;
   border: 3px solid;
-  border-color: transparent transparent #092565 #092565;
-  width: 40px;
-  height: 40px;
+  border-color: transparent transparent var(--spinner-color-2)
+    var(--spinner-color-2);
+  /* width: var(--spinner-size-3);
+  height: var(--spinner-size-3); */
   border-radius: 50%;
   box-sizing: border-box;
   animation: rotationBack 1s linear infinite;
   transform-origin: center center;
 }
-/* #092565 */
+/* var(--spinner-color-2) */
 /* #3a0647 */
 .loader::before {
-  width: 32px;
-  height: 32px;
-  border-color: #6c757d #6c757d transparent transparent;
+  width: var(--spinner-size-2);
+  height: var(--spinner-size-2);
+  border-color: var(--spinner-color-1) var(--spinner-color-1) transparent
+    transparent;
   animation: rotation 3s linear infinite;
 }
-    
+
 @keyframes rotation {
   0% {
     transform: rotate(0deg);
@@ -44,7 +58,7 @@
   100% {
     transform: rotate(360deg);
   }
-} 
+}
 @keyframes rotationBack {
   0% {
     transform: rotate(0deg);
@@ -53,4 +67,3 @@
     transform: rotate(-360deg);
   }
 }
-