Add back buttons to several pages (#217)

CodeWithAloha · Aug 29, 2024 · 068bf86 · 068bf86
1 parent 0866561
commit 068bf86
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/src/components/AddressSearch.tsx b/src/components/AddressSearch.tsx
@@ -15,6 +15,7 @@ import ProgressBar from "./ProgressBar";
 import * as ELG from "esri-leaflet-geocoder";
 import Link from "next/link";
 import { GrLinkNext } from "react-icons/gr";
+import { IoMdArrowBack } from "react-icons/io";
 import { api } from "../utils/api";
 
 declare global {
@@ -297,6 +298,12 @@ const AddressSearch: React.FC = () => {
             )}
           </div>
           <div className="flex flex-row items-center justify-center gap-5">
+            <Link href={{ pathname: "./" }}>
+              <button className="mb-1 mt-4 flex flex-row items-center justify-center 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 />
+                Home
+              </button>
+            </Link>
             <Link href={{ pathname: "./survey" }}>
               <button
                 className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2 

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,8 +159,14 @@ 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: "./address" }}>
+            <button className="mb-1 mt-4 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 />
+              Re-enter Address
+            </button>
+          </Link>
           <button
-            className="mb-1 mt-4 rounded-full bg-white/80 px-6 py-2 text-blue-darker no-underline
+            className="mb-1 mt-4 flex flex-row items-center justify-center 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 "
             onClick={() => handleRetakeSurvey()}
           >
@@ -168,7 +175,7 @@ export default function DemographicsSurvey() {
           <Link href={{ pathname: "./polis" }}>
             <button
               className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2 
-              border-dashed border-lightGreen bg-yellowGreen px-6 py-1 text-right text-lg text-blue-darker  no-underline shadow-xl transition ease-in-out 
+              border-dashed border-lightGreen bg-yellowGreen px-6 py-1 text-right text-lg text-blue-darker  no-underline shadow-xl transition ease-in-out
            hover:translate-y-1  hover:bg-lightGreen"
               onClick={() => handleSubmit()}
             >
@@ -212,6 +219,13 @@ 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: "./address" }}>
+            <button className="mb-1 mt-4 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 />
+              Re-enter Address
+            </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,15 @@ const Polis: NextPage = () => {
               </div>
             );
           })}
+          <br />
+          <br />
+          <hr />
+          <Link href={{ pathname: "./survey" }}>
+            <button className="mb-1 mt-4 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 />
+              Retake 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,7 +59,8 @@ 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"
         >
           {" "}
-          Return to polis survey selection
+          <IoMdArrowBack />
+          Select New Polis Survey
         </Link>
       </div>
     </div>