Add back buttons to several pages

CodeWithAloha · Aug 25, 2024 · 66f280e · 66f280e
1 parent bb7ec8a
commit 66f280e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx
@@ -3,6 +3,7 @@ import SurveyQuestion from "./surveyquestion";
 import { api } from "../../utils/api";
 import Link from "next/link";
 import { TiInputChecked } from "react-icons/ti";
+import { IoMdArrowBack } from "react-icons/io";
 import ProgressBar from "../ProgressBar";
 
 export interface SurveyData {
@@ -158,6 +159,15 @@ export default function DemographicsSurvey() {
           start the last part of the HIERR survey.
         </h2>
         <div className="flex flex-row items-center justify-center gap-5">
+          <Link href={{ pathname: "./zipcode" }}>
+            <button
+              className="mb-1 mt-4 rounded-full bg-white/80 px-6 py-2 text-blue-darker no-underline
+              transition hover:translate-y-1 hover:bg-white hover:text-blue-darker "
+            >
+              <IoMdArrowBack />
+              Go back to ZIP Code entry
+            </button>
+          </Link>
           <button
             className="mb-1 mt-4 rounded-full bg-white/80 px-6 py-2 text-blue-darker no-underline
              transition hover:translate-y-1 hover:bg-white hover:text-blue-darker "
@@ -212,6 +222,18 @@ export default function DemographicsSurvey() {
             diversity of our community. This helps us make sure that we hear
             from as many different perspectives as possible during our process.
           </p>
+
+          <Link href={{ pathname: "./zipcode" }}>
+            <button
+              className="mb-1 flex flex-row items-center justify-center gap-1 
+              rounded-full bg-white/70 px-4
+             py-1 text-lg text-blue-darker  no-underline shadow-xl transition ease-in-out 
+              hover:translate-y-1  hover:bg-white"
+            >
+              <IoMdArrowBack />
+              Go back to ZIP Code entry
+            </button>
+          </Link>
         </>
       )}
     </div>

diff --git a/src/pages/polis.tsx b/src/pages/polis.tsx
@@ -3,6 +3,7 @@ import ProgressBar from "../components/ProgressBar";
 import Link from "next/link";
 import { api } from "../utils/api";
 import { useEffect, useState } from "react";
+import { IoMdArrowBack } from "react-icons/io";
 
 interface PolisSurvey {
   id: string;
@@ -55,6 +56,18 @@ const Polis: NextPage = () => {
               </div>
             );
           })}
+          <br />
+          <br />
+          <hr />
+          <Link href={{ pathname: "./survey" }}>
+            <button
+              className="mb-1 mt-4 rounded-full bg-white/80 px-6 py-2 text-blue-darker no-underline
+              transition hover:translate-y-1 hover:bg-white hover:text-blue-darker "
+            >
+              <IoMdArrowBack />
+              Go back to Demographic Survey
+            </button>
+          </Link>
         </div>
       </div>
     </div>

diff --git a/src/pages/polissurvey.tsx b/src/pages/polissurvey.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import ProgressBar from "../components/ProgressBar";
 import LoggedInAs from "./loggedinas";
 import { useSession } from "next-auth/react";
+import { IoMdArrowBack } from "react-icons/io";
 
 const PolisSurvey: NextPage = () => {
   const router = useRouter();
@@ -58,6 +59,7 @@ const PolisSurvey: NextPage = () => {
           className="rounded-full bg-white/90 px-10 py-2 text-blue-default no-underline transition hover:bg-white hover:text-blue-darker"
         >
           {" "}
+          <IoMdArrowBack />
           Return to polis survey selection
         </Link>
       </div>