Improve UX/UI (#127)

* improved UX/UI for landing page

* Address PR review feedback

* detele unused video

* replace unsupported characters

* adjust layout responsiveness

* fix unsupported character

* fix responsiveness issues

* add slide-in animation

* update What is HIERR textbox and add About this engagement and Why create an account #128 #70 #126

* fix unsupported character

* Fixing okinas in Hawaii

* add consistant page styling and improve UX

* Updating portal information

Co-authored-by: Alexandra Haynes <[email protected]>

* Updating cursor types on info links

* temporarily commenting out sign in page to keep email sign in functionality

* improve hover effect for info links

* improve UX for map interaction

* add cohesive styling across pages

* polis survey page title margin

* add progress bar on each step

* Fixing local responsive issues

* Removing sign in page to fix deployment

* Removing background gradient for now

* Updating progress bar to be 100% on the last step

* Refactoring to use info popup component

* Putting census map info in an info popup

* Fixing okinas

* Fixing info popup z-index

* Moving what do we use this data for to the top

* migrating progress bar to TypeScript

* change checkbox's color for consistency

---------

Co-authored-by: avenmia <[email protected]>
Co-authored-by: Alexandra Haynes <[email protected]>

package.json

@@ -33,6 +33,7 @@
     "react-dom": "18.2.0",
     "react-esri-leaflet": "^2.0.1",
     "react-hook-form": "^7.43.7",
+    "react-icons": "^4.8.0",
     "react-leaflet": "^4.2.0",
     "superjson": "1.9.1",
     "zod": "^3.20.2"

src/UI/NextPageButtonLink.tsx

@@ -1,28 +1,67 @@
 import Link from "next/link";
+import { TiInputChecked } from "react-icons/ti";
 
 interface NextPageButtonLinkProps {
   pageName: string;
   msg: string;
   disabled?: boolean;
   query?: { [key: string]: string };
+  text: string;
+  successMessage: boolean;
+  whiteDesignButton: boolean;
 }
 
 export const NextPageButtonLink = ({
   pageName,
   msg,
   disabled,
   query,
+  text,
+  successMessage,
+  whiteDesignButton,
 }: NextPageButtonLinkProps) => {
   const href = { pathname: `./${pageName}`, query: query };
   return (
     <div>
-      <Link href={href}>
-        <button
-          disabled={disabled}
-          className="rounded-full bg-white/90 px-10 py-3 text-blue-default no-underline transition hover:bg-white hover:text-blue-darker"
+      {successMessage ? (
+        <p
+          className="  mx-auto  w-[80%]  -translate-y-8
+        border border-dashed border-white p-2 text-center text-sm xl:w-1/2 2xl:text-lg"
+        >
+          {" "}
+          <span>
+            <TiInputChecked className="mx-auto text-4xl text-yellowGreen" />
+          </span>{" "}
+          {text}
+        </p>
+      ) : (
+        <p
+          className="  mx-auto  w-[80%]  -translate-y-8
+        p-2 text-center text-sm xl:w-1/2 2xl:text-lg"
         >
-          {msg}
-        </button>
+          {text}
+        </p>
+      )}
+      <Link href={href}>
+        {whiteDesignButton ? (
+          <button
+            disabled={disabled}
+            className="mb-1 rounded-full   bg-white/80 px-6
+          py-2 text-lg text-blue-darker  no-underline shadow-xl transition ease-in-out 
+           hover:translate-y-1  hover:bg-white "
+          >
+            {msg}
+          </button>
+        ) : (
+          <button
+            disabled={disabled}
+            className="mb-1 rounded-full border-2 border-dashed border-lightGreen bg-yellowGreen px-6
+          py-1 text-lg text-blue-darker  no-underline shadow-xl transition ease-in-out 
+           hover:translate-y-1  hover:bg-lightGreen "
+          >
+            {msg}
+          </button>
+        )}
       </Link>
     </div>
   );

src/components/AboutThisEngagement.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const AboutThisEngagementPortal = () => {
+  return (
+    <>
+      <h3 className="text-md p-4 pl-2 text-center font-semibold 2xl:text-xl">
+        About this Engagement Portal
+      </h3>
+      <p className="mb-2 mt-4 pb-4 2xl:text-lg">
+        This engagement portal is designed to help our project team understand:{" "}
+      </p>
+
+      <ol className="ml-4 mb-2 list-decimal pb-4 2xl:text-lg">
+        <li className="md:mb-2">
+          Demographic information of those who participate in the project.
+        </li>
+        <li className="md:mb-2">
+          What Hawai&#699;i residents value and envision for our State&apos;s
+          economic future.
+        </li>
+        <li className="md:mb-2">
+          Hardships faced by residents during the COVID-19 pandemic and economic
+          shutdown.
+        </li>
+      </ol>
+    </>
+  );
+};
+
+export default AboutThisEngagementPortal;

src/components/CensusMapInfo.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function CensusMapInfo() {
+  return (
+    <>
+      <h3 className="text-md pb-2 pl-2 text-center font-semibold 2xl:text-xl">
+        What do we use this information for?
+      </h3>
+      <p
+        className="mx-auto mt-4 w-[90%]  p-1
+        text-center text-sm md:m-4 2xl:text-lg"
+      >
+        We use this information to report on the diverse representation of
+        people in our community. By collecting and analyzing demographic data,
+        we aim to include perspectives from a wide range of individuals. This
+        helps us ensure that our processes are inclusive and reflect the voices
+        of our community as much as possible.
+      </p>
+    </>
+  );
+}

src/components/InfoPopup.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { BsChevronDown } from "react-icons/bs";
+import { IoCloseSharp } from "react-icons/io5";
+
+interface InfoPopupProps {
+  title: string;
+  PopupInfo: React.FC;
+}
+
+const InfoPopup = ({ title, PopupInfo }: InfoPopupProps) => {
+  const [showMore, setShowMore] = useState(false);
+
+  const toggleMoreInformation = () => {
+    setShowMore(!showMore);
+  };
+  return (
+    <>
+      <div
+        className="flex cursor-pointer flex-row items-center justify-center gap-2 
+         hover:scale-[102%]
+        "
+        onClick={toggleMoreInformation}
+      >
+        <p
+          className="text-md border-white py-1 text-white underline-offset-4 
+              hover:text-yellowGreen 2xl:text-xl"
+        >
+          {title}
+        </p>
+        {!showMore && (
+          <div className="text-lg text-white">
+            <BsChevronDown />
+          </div>
+        )}
+      </div>
+
+      {showMore && (
+        <div
+          className="md:bottom-22 lg:bottom-18 fixed bottom-2 z-[1500] w-[98%]
+               animate-slide-in rounded-md 
+              bg-white/90 p-1 text-sm 
+              shadow-xl
+              backdrop-blur-md ease-in-out sm:bottom-8 
+              sm:w-[94%]  sm:p-2
+              md:p-8 lg:w-[84%]
+              xl:bottom-12 xl:w-[80%]
+              2xl:bottom-20 2xl:w-[60%]"
+        >
+          <button
+            onClick={toggleMoreInformation}
+            className="absolute top-4 right-4 text-2xl lg:text-4xl"
+          >
+            <IoCloseSharp />
+          </button>
+          <PopupInfo />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default InfoPopup;

src/components/ProgressBar.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface ProgressBarProps {
+  completed: number;
+}
+
+const ProgressBar = ({ completed }: ProgressBarProps) => {
+  const fillerStyles = {
+    height: "100%",
+    width: `${completed}%`,
+    backgroundColor: "yellowGreen",
+    borderRadius: "inherit",
+    transition: "width 1s ease-in-out",
+  };
+
+  return (
+    <div className="border-radius-10 m-2 h-2 w-[400px] bg-white opacity-70">
+      <div style={fillerStyles}></div>
+    </div>
+  );
+};
+
+export default ProgressBar;