Add back buttons to several pages

CodeWithAloha · Aug 20, 2024 · 29d7a2f · 29d7a2f
1 parent e994f71
commit 29d7a2f
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 1 deletion.
diff --git a/src/components/censusmap.tsx b/src/components/censusmap.tsx
@@ -23,6 +23,7 @@ import { TiInputChecked } from "react-icons/ti";
 import ProgressBar from "./ProgressBar";
 import InfoPopup from "./InfoPopup";
 import CensusMapInfo from "./CensusMapInfo";
+import { IoMdArrowBack } from "react-icons/io";
 
 interface LayerEventTarget {
   feature: {
@@ -129,6 +130,17 @@ const CensusTractMap: NextPage = () => {
       />
       {censusTractComplete ? (
         <div className="mb-5 mt-6 flex items-center">
+          <Link href={{ pathname: "./" }}>
+            <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 main page
+            </button>
+          </Link>
           <h1 className="mb-2 mr-5 flex flex-row items-center justify-center gap-1 font-thin text-white">
             <TiInputChecked className="text-2xl text-yellowGreen " />
             <strong>{`You selected track ${String(

diff --git a/src/components/selectedzipcode.tsx b/src/components/selectedzipcode.tsx
@@ -40,7 +40,7 @@ export default function SelectedZipCode({
         >
           {" "}
           <IoMdArrowBack />
-          Re-enter zip code
+          Re-enter ZIP Code
         </button>
         <Link href={{ pathname: "./survey" }}>
           <button

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/components/zipcode.tsx b/src/components/zipcode.tsx
@@ -8,7 +8,10 @@ import { useForm } from "react-hook-form";
 import stateZipCodes from "../data/2020_Zip_Code_Data.json";
 import { GrLinkNext } from "react-icons/gr";
 import { BiError } from "react-icons/bi";
+import { IoMdArrowBack } from "react-icons/io";
 import ProgressBar from "./ProgressBar";
+import Link from "next/link";
+
 interface ZipCodeData {
   zipCode: string;
 }
@@ -111,6 +114,17 @@ const ZipCode: NextPage = () => {
               Submit <GrLinkNext />
             </button>
           </form>
+          <Link href={{ pathname: "./censusmap" }}>
+            <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 Census Tract selection
+            </button>
+          </Link>
           <p
             className="mx-auto mt-4 w-[80%] border border-dashed border-white p-1
         text-center text-sm text-white md:m-4 md:w-1/2 md:p-4 xl:w-1/3 2xl:text-lg "

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>