Updating button styles

Co-authored-by: Christopher Lam <[email protected]>
CodeWithAloha · Sep 24, 2024 · 067b87c · 067b87c
1 parent a72e2a8
commit 067b87c
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 50 deletions.
diff --git a/src/components/AddressSearch.tsx b/src/components/AddressSearch.tsx
@@ -13,9 +13,9 @@ import * as turf from "@turf/turf";
 import { FeatureCollection, Feature, Polygon } from "geojson";
 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";
+import NextButton from "./NextButton";
+import PrevButton from "./PrevButton";
 
 declare global {
   interface Window {
@@ -320,25 +320,18 @@ const AddressSearch: React.FC = () => {
           <section className="py-2">
             <div className="flex flex-row items-center justify-center gap-5">
               <Link href={{ pathname: "./" }}>
-                <button className="btn-secondary btn">
-                  <IoMdArrowBack />
-                  Home
-                </button>
+                <PrevButton text="Home" />
               </Link>
               {complete ? (
                 <Link href={{ pathname: "./survey" }}>
-                  <button
-                    className="btn-primary btn "
+                  <NextButton
+                    text={"Next"}
                     onClick={() => handleSubmit()}
                     disabled={false}
-                  >
-                    Next <GrLinkNext />
-                  </button>
+                  />
                 </Link>
               ) : (
-                <button className="btn-primary btn" disabled={true}>
-                  Next <GrLinkNext />
-                </button>
+                <NextButton text={"Next"} disabled={true} />
               )}
             </div>
           </section>

diff --git a/src/components/NextButton.tsx b/src/components/NextButton.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import React from "react";
+
+interface NextButtonProps {
+  onClick?: () => void;
+  text: string;
+  disabled?: boolean;
+}
+
+const NextButton = ({ onClick, text, disabled }: NextButtonProps) => {
+  return (
+    <button onClick={onClick} className="btn" disabled={disabled}>
+      {text}
+    </button>
+  );
+};
+
+export default NextButton;
diff --git a/src/components/PrevButton.tsx b/src/components/PrevButton.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import React from "react";
+
+interface PrevButtonProps {
+  onClick?: () => void;
+  text: string;
+  disabled?: boolean;
+}
+
+const PrevButton = ({ onClick, text, disabled }: PrevButtonProps) => {
+  return (
+    <button onClick={onClick} className="btn" disabled={disabled}>
+      {text}
+    </button>
+  );
+};
+
+export default PrevButton;
diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx
@@ -2,9 +2,10 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 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 Infobox from "../Infobox";
+import NextButton from "../NextButton";
+import PrevButton from "../PrevButton";
 
 export interface SurveyData {
   questionId: string;
@@ -158,21 +159,14 @@ export default function DemographicsSurvey() {
         <Infobox message={completedSurveyMessage} greenCheck={true} />
         <div className="flex flex-row items-center justify-center gap-5">
           <Link href={{ pathname: "./address" }}>
-            <button className="btn-secondary btn">
-              <IoMdArrowBack />
-              Re-enter Address
-            </button>
+            <PrevButton text="Re-enter Address" />
           </Link>
-          <button
-            className="btn-secondary btn"
+          <PrevButton
             onClick={() => handleRetakeSurvey()}
-          >
-            Retake demographic survey
-          </button>
+            text="Retake demographic survey"
+          />
           <Link href={{ pathname: "./querysummary" }}>
-            <button className="btn-primary btn" onClick={() => handleSubmit()}>
-              Continue
-            </button>
+            <NextButton text="Next" onClick={() => handleSubmit()} />
           </Link>
         </div>
       </div>
@@ -207,10 +201,7 @@ export default function DemographicsSurvey() {
             <Infobox message={infoboxMessage} greenCheck={false} />
 
             <Link href={{ pathname: "./address" }}>
-              <button className="btn-secondary btn">
-                <IoMdArrowBack />
-                Re-enter Address
-              </button>
+              <PrevButton text="Re-enter Address" />
             </Link>
           </div>
         </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import LoggedInAs from "./loggedinas";
 import { TiInputChecked } from "react-icons/ti";
 import Link from "next/link";
 import Infobox from "../components/Infobox";
+import NextButton from "../components/NextButton";
 
 const Login: NextPage = () => {
   return (
@@ -40,7 +41,7 @@ const Login: NextPage = () => {
             Welcome to the HIERR Project
           </h1>
           <h2
-            className="mx-2 pb-20 text-center text-2xl font-bold leading-none 
+            className="mx-2 text-center text-2xl font-bold leading-none 
             tracking-tight
             text-white
             md:text-5xl lg:pb-16"
@@ -86,7 +87,7 @@ const AuthShowcase: React.FC = () => {
           <div>
             <Infobox message={loggedinText} greenCheck={true} />
             <Link href={href}>
-              <button className="btn-primary btn">Start the survey</button>
+              <NextButton text="Start the survey" />
             </Link>
           </div>
         ) : null}
@@ -95,7 +96,7 @@ const AuthShowcase: React.FC = () => {
         className="btn-secondary btn"
         onClick={sessionData ? () => void handleSignOut() : () => void signIn()}
       >
-        {sessionData ? "Sign out" : "Sign in to begin"}
+        {sessionData ? "SIGN OUT" : "SIGN IN"}
       </button>
       <LoggedInAs email={sessionData?.user?.email} />
     </div>

diff --git a/src/pages/polis.tsx b/src/pages/polis.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { api } from "../utils/api";
 import { useEffect, useState } from "react";
 import { IoMdArrowBack } from "react-icons/io";
+import PrevButton from "../components/PrevButton";
 
 interface PolisSurvey {
   id: string;
@@ -42,7 +43,7 @@ const Polis: NextPage = () => {
                       query: { surveyId: id },
                     }}
                   >
-                    <button className="btn-secondary btn">{title}</button>
+                    <PrevButton text={title} />
                   </Link>
                 </div>
               </div>
@@ -51,10 +52,7 @@ const Polis: NextPage = () => {
         </div>
         <div className="mt-20">
           <Link href={{ pathname: "./survey" }}>
-            <button className="btn-secondary btn">
-              <IoMdArrowBack />
-              Retake Demographic Survey
-            </button>
+            <PrevButton text={"Retake Demographic Survey"} />
           </Link>
         </div>
       </div>

diff --git a/src/pages/polissurvey.tsx b/src/pages/polissurvey.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import LoggedInAs from "./loggedinas";
 import { useSession } from "next-auth/react";
 import { IoMdArrowBack } from "react-icons/io";
+import PrevButton from "../components/PrevButton";
 
 const PolisSurvey: NextPage = () => {
   const router = useRouter();
@@ -53,11 +54,7 @@ const PolisSurvey: NextPage = () => {
       </div>
       <div className="mb-6 mt-6 flex justify-between align-middle">
         <Link href={"./polis"} className="">
-          {" "}
-          <button className="btn-secondary btn">
-            <IoMdArrowBack />
-            Select New Polis Survey
-          </button>
+          <PrevButton text="Select New Polis Survey" />
         </Link>
       </div>
     </div>

diff --git a/src/pages/querysummary.tsx b/src/pages/querysummary.tsx
@@ -4,6 +4,8 @@ import { SurveyData } from "../components/survey/demographicssurvey";
 import { api } from "../utils/api";
 import Link from "next/link";
 import SummaryQuestionAnswer from "../components/SummaryQuestionAnswer";
+import NextButton from "../components/NextButton";
+import PrevButton from "../components/PrevButton";
 
 const QuerySummary: NextPage = () => {
   const [userCensusTract, setUserCensusTract] = useState<string>("");
@@ -77,7 +79,7 @@ const QuerySummary: NextPage = () => {
           Demographic Information Summary
         </h1>
         <Link href={{ pathname: "./polis" }}>
-          <button className="btn-primary btn">Continue</button>
+          <NextButton text="Next" />
         </Link>
         <div className="mt-8 flex flex-col rounded-md bg-[#FFFFFF] px-8 py-8 shadow-xl sm:w-[300px] md:w-[500px] lg:w-[600px]">
           <div className="flex w-[80%] flex-col items-center">
@@ -133,17 +135,15 @@ const QuerySummary: NextPage = () => {
         <div className="grid grid-cols-1 gap-2 pb-[50px] md:grid-cols-2">
           <div className="flex flex-col justify-start py-2">
             <Link href={{ pathname: "./address" }}>
-              <button className="btn-secondary btn">Re-enter Address</button>
+              <PrevButton text="Re-enter Address" />
             </Link>
             <Link href={{ pathname: "./survey" }}>
-              <button className="btn-secondary btn">
-                Retake Demographic Survey
-              </button>
+              <PrevButton text="Retake Demographic Survey" />
             </Link>
           </div>
           <div className="flex justify-end py-2">
             <Link href={{ pathname: "./polis" }}>
-              <button className="btn-primary btn">Continue</button>
+              <NextButton text="Next" />
             </Link>
           </div>
         </div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -24,6 +24,20 @@ body,
   background-color: #f2f2f2;
 }
 
+.btn {
+  background-color: #32aea8;
+  border: none;
+}
+
+/* Chris' CSS edits */
+.btn-secondary {
+  color: white;
+}
+
+.bg-white\/90 {
+  color: black;
+}
+
 /* .btn {
   @apply mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full px-6 py-2 text-lg no-underline shadow-xl transition ease-in-out;
 }