From 067b87cc26662f0758aa7871947fa132181527b3 Mon Sep 17 00:00:00 2001 From: avenmia Date: Mon, 23 Sep 2024 20:45:06 -1000 Subject: [PATCH] Updating button styles Co-authored-by: Christopher Lam --- src/components/AddressSearch.tsx | 21 ++++++---------- src/components/NextButton.tsx | 18 ++++++++++++++ src/components/PrevButton.tsx | 18 ++++++++++++++ src/components/survey/demographicssurvey.tsx | 25 +++++++------------- src/pages/index.tsx | 7 +++--- src/pages/polis.tsx | 8 +++---- src/pages/polissurvey.tsx | 7 ++---- src/pages/querysummary.tsx | 12 +++++----- src/styles/globals.css | 14 +++++++++++ 9 files changed, 80 insertions(+), 50 deletions(-) create mode 100644 src/components/NextButton.tsx create mode 100644 src/components/PrevButton.tsx diff --git a/src/components/AddressSearch.tsx b/src/components/AddressSearch.tsx index fd35529..0e036fa 100644 --- 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 = () => {
- + {complete ? ( - + /> ) : ( - + )}
diff --git a/src/components/NextButton.tsx b/src/components/NextButton.tsx new file mode 100644 index 0000000..0dcab1d --- /dev/null +++ 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 ( + + ); +}; + +export default NextButton; diff --git a/src/components/PrevButton.tsx b/src/components/PrevButton.tsx new file mode 100644 index 0000000..4de2ac9 --- /dev/null +++ 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 ( + + ); +}; + +export default PrevButton; diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx index 70fe190..7bf9525 100644 --- 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() {
- + - + text="Retake demographic survey" + /> - + handleSubmit()} />
@@ -207,10 +201,7 @@ export default function DemographicsSurvey() { - + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ee1089e..d159413 100644 --- 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

{
- +
) : 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"} diff --git a/src/pages/polis.tsx b/src/pages/polis.tsx index 5b960d6..4d5ac23 100644 --- 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 }, }} > - + @@ -51,10 +52,7 @@ const Polis: NextPage = () => {
- +
diff --git a/src/pages/polissurvey.tsx b/src/pages/polissurvey.tsx index db732ec..f18b0db 100644 --- 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 = () => {
- {" "} - +
diff --git a/src/pages/querysummary.tsx b/src/pages/querysummary.tsx index fb5c955..9ea42a7 100644 --- 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(""); @@ -77,7 +79,7 @@ const QuerySummary: NextPage = () => { Demographic Information Summary

- +
@@ -133,17 +135,15 @@ const QuerySummary: NextPage = () => {
- + - +
- +
diff --git a/src/styles/globals.css b/src/styles/globals.css index ab7b992..74bfd3f 100644 --- 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; }