update colors in table to better reflect which row we are in.

src/components/download-pdf.tsx

@@ -230,10 +230,10 @@ const PdfDownloadButton = ({
   return (
     <div>
       <div className="mt-5 flex items-center justify-around gap-6">
-        <Link href="/survey/general" passHref>
+        <Link href="/" passHref>
           <Button className="bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover">
             <ArrowLeft />
-            Go back to Survey
+            Go back to home
           </Button>
         </Link>
         {/* Add a download link/button */}

src/components/progression-bar.tsx

@@ -19,6 +19,7 @@ const ProgressionBar = ({ roles }: { roles: Section[] }) => {
             <Fragment key={section.id}>
               {/* Circle with clickable area */}
               <Link
+                type="submit"
                 href={section.href}
                 className="relative flex items-center justify-center"
               >

src/components/survey-questionnaire.tsx

@@ -173,7 +173,6 @@ export function SurveyQuestionnaire({
 
   return (
     <div>
-      <ProgressionBarComponent roles={selectedRolesForProgressBar} />
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(
@@ -193,6 +192,7 @@ export function SurveyQuestionnaire({
           )}
           className="grid gap-4 md:grid-cols-1 lg:grid-cols-1"
         >
+          <ProgressionBarComponent roles={selectedRolesForProgressBar} />
           <QuestionsComponent
             session={session}
             filteredQuestions={filteredQuestions}

src/components/survey-questions.tsx

@@ -81,7 +81,7 @@ export function SurveyQuestions({
         </TableRow>
       </TableHeader>
       <TableBody>
-        {filteredQuestions?.map((question) => (
+        {filteredQuestions?.map((question, questionIndex) => (
           <FormField
             control={form.control}
             name={question.id}
@@ -90,18 +90,22 @@ export function SurveyQuestions({
               <TableRow
                 key={question.id}
                 id={question.id}
-                className={
+                className={`${
                   form.formState.errors[question.id]
                     ? "error !border-2 !border-dashed !border-red-500"
                     : ""
-                }
+                } ${
+                  questionIndex % 2 === 0
+                    ? "bg-slate-50 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600"
+                    : "bg-slate-100 hover:bg-slate-300 dark:bg-slate-900 dark:hover:bg-slate-700"
+                }`}
               >
                 <TableCell>
                   {question.questionText}
                   <FormMessage />
                 </TableCell>
                 {answerOptions.map((option) => (
-                  <TableCell key={option.id} className="w-[300px]">
+                  <TableCell key={option.id} className={`w-[300px] `}>
                     <label
                       className={`${
                         field.value === option.id ||

src/components/ui/table.tsx

@@ -60,10 +60,7 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className,
-    )}
+    className={cn("border-b transition-colors", className)}
     {...props}
   />
 ));

src/utils/submission-utils.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState, useRef } from "react";
-import { set } from "zod";
 import { toast } from "~/components/ui/use-toast";
 import type { SurveyResponse } from "~/models/types";
 import { api } from "~/trpc/react";
@@ -22,7 +21,7 @@ export const useSubmitAnswers = () => {
         variant: "destructive",
       });
     }
-  }, [submitResponse.isError]);
+  }, [submitResponse.isError, submitResponse.error]);
 
   useEffect(() => {
     submitAsyncRef.current = async () => {