From 960ca3f583df4dcdbf30604f35b6873a3dbf6787 Mon Sep 17 00:00:00 2001 From: Alexandra <113944962+Alexandra-Haynes@users.noreply.github.com> Date: Thu, 13 Jul 2023 17:08:28 -1000 Subject: [PATCH] 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 * 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 Co-authored-by: Alexandra Haynes --- package-lock.json | 61 ++++++++------ package.json | 1 + src/UI/NextPageButtonLink.tsx | 51 ++++++++++-- src/components/AboutThisEngagement.tsx | 30 +++++++ src/components/CensusMapInfo.tsx | 21 +++++ src/components/InfoPopup.tsx | 62 ++++++++++++++ src/components/ProgressBar.tsx | 23 ++++++ src/components/WhatIsHierr.tsx | 86 ++++++++++++++++++++ src/components/WhyCreateAccount.tsx | 19 +++++ src/components/censusmap.tsx | 48 +++++++---- src/components/selectedzipcode.tsx | 28 +++++-- src/components/survey/demographicssurvey.tsx | 53 +++++++----- src/components/survey/surveyquestion.tsx | 22 +++-- src/components/zipcode.tsx | 57 +++++++++---- src/pages/api/auth/[...nextauth].ts | 1 + src/pages/index.tsx | 66 +++++++++++++-- src/pages/polis.tsx | 20 +++-- src/pages/polissurvey.tsx | 31 ++++--- src/server/auth.ts | 3 + src/styles/custom.css | 3 - src/styles/globals.css | 2 +- src/styles/output.css | 8 +- tailwind.config.cjs | 27 ++++++ 23 files changed, 590 insertions(+), 133 deletions(-) create mode 100644 src/components/AboutThisEngagement.tsx create mode 100644 src/components/CensusMapInfo.tsx create mode 100644 src/components/InfoPopup.tsx create mode 100644 src/components/ProgressBar.tsx create mode 100644 src/components/WhatIsHierr.tsx create mode 100644 src/components/WhyCreateAccount.tsx delete mode 100644 src/styles/custom.css diff --git a/package-lock.json b/package-lock.json index 6ea0aee..9fdc90a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,11 +25,12 @@ "next-connect": "0.13.0", "nodemailer": "^6.9.1", "objects-to-csv": "^1.3.6", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "18.2.0", + "react-dom": "18.2.0", "react-esri-leaflet": "^2.0.1", "react-hook-form": "^7.43.7", - "react-leaflet": "^4.2.1", + "react-icons": "^4.8.0", + "react-leaflet": "^4.2.0", "superjson": "1.9.1", "zod": "^3.20.2" }, @@ -497,9 +498,9 @@ } }, "node_modules/@prisma/engines": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.10.0.tgz", - "integrity": "sha512-ZPPo7q+nQZdTlPFedS7mFXPE3oZ2kWtTh3GO4sku0XQ8ikLqEyinuTPJbQCw/8qel2xglIEQicsK6yI4Jgh20A==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.15.0.tgz", + "integrity": "sha512-FTaOCGs0LL0OW68juZlGxFtYviZa4xdQj/rQEdat2txw0s3Vu/saAPKjNVXfIgUsGXmQ72HPgNr6935/P8FNAA==", "devOptional": true, "hasInstallScript": true }, @@ -4025,9 +4026,9 @@ } }, "node_modules/next-auth": { - "version": "4.20.1", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.20.1.tgz", - "integrity": "sha512-ZcTUN4qzzZ/zJYgOW0hMXccpheWtAol8QOMdMts+LYRcsPGsqf2hEityyaKyECQVw1cWInb9dF3wYwI5GZdEmQ==", + "version": "4.22.1", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.1.tgz", + "integrity": "sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -4771,13 +4772,13 @@ "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" }, "node_modules/prisma": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.10.0.tgz", - "integrity": "sha512-xUHcF3Glc8QGgW8x0rfPITvyyTo04fskUdG7pI4kQbvDX/rhzDP4046x/FvazYqYHXMLR5/KTIi2p2Gth5vKOQ==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.15.0.tgz", + "integrity": "sha512-iKZZpobPl48gTcSZVawLMQ3lEy6BnXwtoMj7hluoGFYu2kQ6F9LBuBrUyF95zRVnNo8/3KzLXJXJ5TEnLSJFiA==", "devOptional": true, "hasInstallScript": true, "dependencies": { - "@prisma/engines": "4.10.0" + "@prisma/engines": "4.15.0" }, "bin": { "prisma": "build/index.js", @@ -4918,6 +4919,14 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -6291,9 +6300,9 @@ } }, "@prisma/engines": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.10.0.tgz", - "integrity": "sha512-ZPPo7q+nQZdTlPFedS7mFXPE3oZ2kWtTh3GO4sku0XQ8ikLqEyinuTPJbQCw/8qel2xglIEQicsK6yI4Jgh20A==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.15.0.tgz", + "integrity": "sha512-FTaOCGs0LL0OW68juZlGxFtYviZa4xdQj/rQEdat2txw0s3Vu/saAPKjNVXfIgUsGXmQ72HPgNr6935/P8FNAA==", "devOptional": true }, "@prisma/engines-version": { @@ -8842,9 +8851,9 @@ } }, "next-auth": { - "version": "4.20.1", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.20.1.tgz", - "integrity": "sha512-ZcTUN4qzzZ/zJYgOW0hMXccpheWtAol8QOMdMts+LYRcsPGsqf2hEityyaKyECQVw1cWInb9dF3wYwI5GZdEmQ==", + "version": "4.22.1", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.22.1.tgz", + "integrity": "sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==", "requires": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -9274,12 +9283,12 @@ "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" }, "prisma": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.10.0.tgz", - "integrity": "sha512-xUHcF3Glc8QGgW8x0rfPITvyyTo04fskUdG7pI4kQbvDX/rhzDP4046x/FvazYqYHXMLR5/KTIi2p2Gth5vKOQ==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.15.0.tgz", + "integrity": "sha512-iKZZpobPl48gTcSZVawLMQ3lEy6BnXwtoMj7hluoGFYu2kQ6F9LBuBrUyF95zRVnNo8/3KzLXJXJ5TEnLSJFiA==", "devOptional": true, "requires": { - "@prisma/engines": "4.10.0" + "@prisma/engines": "4.15.0" } }, "prop-types": { @@ -9359,6 +9368,12 @@ "integrity": "sha512-38yehQkQQ5uufaPKFScs7jhLE8n3+LG9H/BZfFAiBL2+7piDmw/BrdNJV4irzMaPnWZGhmGLHVICHXNVGIuXZg==", "requires": {} }, + "react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 651a18d..af9d613 100644 --- a/package.json +++ b/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" diff --git a/src/UI/NextPageButtonLink.tsx b/src/UI/NextPageButtonLink.tsx index d6950bc..53410b1 100644 --- a/src/UI/NextPageButtonLink.tsx +++ b/src/UI/NextPageButtonLink.tsx @@ -1,10 +1,14 @@ 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 = ({ @@ -12,17 +16,52 @@ export const NextPageButtonLink = ({ msg, disabled, query, + text, + successMessage, + whiteDesignButton, }: NextPageButtonLinkProps) => { const href = { pathname: `./${pageName}`, query: query }; return (
- - + {text} +

+ )} + + {whiteDesignButton ? ( + + ) : ( + + )}
); diff --git a/src/components/AboutThisEngagement.tsx b/src/components/AboutThisEngagement.tsx new file mode 100644 index 0000000..8cda15d --- /dev/null +++ b/src/components/AboutThisEngagement.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +const AboutThisEngagementPortal = () => { + return ( + <> +

+ About this Engagement Portal +

+

+ This engagement portal is designed to help our project team understand:{" "} +

+ +
    +
  1. + Demographic information of those who participate in the project. +
    2. +
  2. + What Hawaiʻi residents value and envision for our State's + economic future. +
    3. +
  3. + Hardships faced by residents during the COVID-19 pandemic and economic + shutdown. +
    4. +
+ + ); +}; + +export default AboutThisEngagementPortal; diff --git a/src/components/CensusMapInfo.tsx b/src/components/CensusMapInfo.tsx new file mode 100644 index 0000000..73310b5 --- /dev/null +++ b/src/components/CensusMapInfo.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export default function CensusMapInfo() { + return ( + <> +

+ What do we use this information for? +

+

+ 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. +

+ + ); +} diff --git a/src/components/InfoPopup.tsx b/src/components/InfoPopup.tsx new file mode 100644 index 0000000..966efd6 --- /dev/null +++ b/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 ( + <> +
+

+ {title} +

+ {!showMore && ( +
+ +
+ )} +
+ + {showMore && ( +
+ + +
+ )} + + ); +}; + +export default InfoPopup; diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx new file mode 100644 index 0000000..d96c8e6 --- /dev/null +++ b/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 ( +
+
+
+ ); +}; + +export default ProgressBar; diff --git a/src/components/WhatIsHierr.tsx b/src/components/WhatIsHierr.tsx new file mode 100644 index 0000000..d0614c5 --- /dev/null +++ b/src/components/WhatIsHierr.tsx @@ -0,0 +1,86 @@ +import React from "react"; + +const Goals = () => { + return ( +
    +
  1. + Support competitive project proposals designed to address economic + hardships experienced by residents during the COVID-19 pandemic. +
    2. +
  2. + Recommend policies and programs to address economic vulnerabilities + revealed during the COVID-19 pandemic. +
    3. +
  3. + Build upon and operationalize Hawaiʻi's strategic framework + for economic resilience. +
    4. +
+ ); +}; + +const ByTheEndOfThisProject = () => { + return ( +
    +
  • + Develop a series of information products grounded in resident + experiences and values. +
    • +
  • + Identify projects, programs, and funding opportunities aimed to improve + economic resilience. +
    • +
  • + Cultivate communities of practice around Hawaiʻi's regional + economic development and resilience. +
    • +
+ ); +}; + +const WhatIsHierr = () => { + return ( + <> +

HIERR stands for

+

+ Hawaiʻi Economic Recovery and Resilience +

+ +
+

+ Project Overview +

+

+ The State of Hawaiʻi Office of Planning & Sustainable + Development's (OPSD) Special Plans Branch was awarded a Statewide + Planning Grant (SPG) funded by the U.S. Department of Commerce, Economic + Development Administration (EDA) to develop an economic recovery and + resiliency plan for Hawaiʻi. This project is designed to learn from + the economic impacts and experiences of hardship associated with the + COVID-19 pandemic to inform and enable actions toward a more resilient, + equitable, and sustainable economy. +

+ +

Goals:

+ +

+ By the end of this project, we will: +

+ +
+

+ Visit our{" "} + + project website{" "} + + to view recorded presentations, track progress, and discover engagement + opportunities. +

+ + ); +}; + +export default WhatIsHierr; diff --git a/src/components/WhyCreateAccount.tsx b/src/components/WhyCreateAccount.tsx new file mode 100644 index 0000000..a4938a6 --- /dev/null +++ b/src/components/WhyCreateAccount.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +const WhyCreateAccount = () => { + return ( + <> +

+ Why am I creating an account? +

+

+ Our engagement portal is set up to remember your progress by associating + your responses with your email address. This means you don't have + to complete everything in one sitting, but can come back to finish later + without having to start over. +

+ + ); +}; + +export default WhyCreateAccount; diff --git a/src/components/censusmap.tsx b/src/components/censusmap.tsx index 04af397..072ac47 100644 --- a/src/components/censusmap.tsx +++ b/src/components/censusmap.tsx @@ -17,6 +17,11 @@ import { Layer, LeafletMouseEvent } from "leaflet"; import EsriLeafletGeoSearch from "react-esri-leaflet/plugins/EsriLeafletGeoSearch"; import { api } from "../utils/api"; import Link from "next/link"; +import { GrLinkNext } from "react-icons/gr"; +import { TiInputChecked } from "react-icons/ti"; +import ProgressBar from "./ProgressBar"; +import InfoPopup from "./InfoPopup"; +import CensusMapInfo from "./CensusMapInfo"; interface LayerEventTarget { feature: { @@ -37,12 +42,12 @@ const CensusTractMap: NextPage = () => { const [userCensusTract, setUserCensusTract] = useState(null); const [censusTractComplete, setCensusTractComplete] = useState(false); const [disabled, setDisabled] = useState(true); - const selectedStyle = { weight: 2, color: "#00FFFF" }; + const selectedStyle = { weight: 3, color: "red", opacity: 1 }; const defaultStyle = { fillColor: "#CCCCCC", color: "#44475a", weight: 1, - opacity: 1, + opacity: 0.7, fillOpacity: 0.2, }; @@ -115,36 +120,43 @@ const CensusTractMap: NextPage = () => { const searchKey = process.env.NEXT_PUBLIC_SEARCH_API; return ( -
-

- Select Your Census Tract +
+

+ Step 1: Select Your Census Tract

-

- This information will be used for the purposes of reporting on - demographic representation. This reporting ensures that our process - seeks to hear from as many perspectives in our community as possible -

{censusTractComplete ? ( -
-

- {`You selected census tract is ${String( - userCensusTract + + ) : ( + + )} + + {censusTractComplete ? ( +
+

+ + {`You selected track ${String( + userCensusTract //we need to add a check for null )}`}

) : (
)} -
+
{ />
-

+

Use the ➕ and ➖ on the map to find the census tract area that contains your address

diff --git a/src/components/selectedzipcode.tsx b/src/components/selectedzipcode.tsx index c8f5a48..27857b5 100644 --- a/src/components/selectedzipcode.tsx +++ b/src/components/selectedzipcode.tsx @@ -1,5 +1,8 @@ +import { GrLinkNext } from "react-icons/gr"; +import { IoMdArrowBack } from "react-icons/io"; import { api } from "../utils/api"; import Link from "next/link"; +import ProgressBar from "./ProgressBar"; interface SelectedZipCodeProps { msg: string; @@ -21,23 +24,32 @@ export default function SelectedZipCode({ } return ( -
-

- {msg} +
+

+ Step 3: Confirm ZIP code

-
+ +

{msg}

+
diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx index d9dc434..84de77a 100644 --- a/src/components/survey/demographicssurvey.tsx +++ b/src/components/survey/demographicssurvey.tsx @@ -2,6 +2,8 @@ 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 ProgressBar from "../ProgressBar"; export interface SurveyData { questionId: string; @@ -127,20 +129,29 @@ export default function DemographicsSurvey() { const completedSurvey = () => { return ( -
-

- You have completed the demographics survey +
+

+ Step 4 complete!

-
+ +

+ Thank + you for completing the demographics survey! Please click continue to + start the last part of the HIERR survey. +

+
- - {surveyInfo.totalQuestions - surveyInfo.questionNumber} questions - remaining + + Question {surveyInfo.questionNumber + 1} /{surveyInfo.totalQuestions} +

+ This information will be used for the purposes of reporting on + demographic representation. This reporting ensures that our process + seeks to hear from as many perspectives in our community as + possible. +

) : ( { return ( <> @@ -28,13 +35,41 @@ const Login: NextPage = () => { async /> -
-
-

- Welcome to HIERR +
+
+

+ Welcome to the HIERR Project

-
- +

+ Engagement Portal +

+ + +
+ + +
@@ -56,14 +91,27 @@ const AuthShowcase: React.FC = () => {

{sessionData ? ( - + <> + + ) : null}

); diff --git a/src/pages/polis.tsx b/src/pages/polis.tsx index f1153e6..88e4796 100644 --- a/src/pages/polis.tsx +++ b/src/pages/polis.tsx @@ -1,5 +1,6 @@ import { type NextPage } from "next"; import { NextPageButtonLink } from "../UI/NextPageButtonLink"; +import ProgressBar from "../components/ProgressBar"; interface PolisSurvey { id: string; @@ -14,20 +15,27 @@ const Polis: NextPage = () => { ); return ( -
-
-

- Please select the Pol.is survey you wish to complete. +
+
+

+ Step 5: Please select the Pol.is survey you wish to complete.

-
+ +
{surveys?.map(({ id, title }, index) => { return ( -
+
); diff --git a/src/pages/polissurvey.tsx b/src/pages/polissurvey.tsx index bfad531..054a6eb 100644 --- a/src/pages/polissurvey.tsx +++ b/src/pages/polissurvey.tsx @@ -3,6 +3,7 @@ import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { api } from "../utils/api"; import Link from "next/link"; +import ProgressBar from "../components/ProgressBar"; const PolisSurvey: NextPage = () => { const router = useRouter(); @@ -39,25 +40,31 @@ const PolisSurvey: NextPage = () => { }; }, []); return ( -
-

- Please Fill Out The Pol.is Survey +
+

+ Step 6: Fill out the Pol.is survey

-
-

Return to polis survey selection

- - - -
-
+ + +
+
+ + {" "} + Return to polis survey selection + +
); }; diff --git a/src/server/auth.ts b/src/server/auth.ts index 1438ec1..af2b79c 100644 --- a/src/server/auth.ts +++ b/src/server/auth.ts @@ -60,6 +60,9 @@ export const authOptions: NextAuthOptions = { * @see https://next-auth.js.org/providers/github **/ ], + // pages: { + // signIn: "/auth/signIn", + // }, }; /** diff --git a/src/styles/custom.css b/src/styles/custom.css deleted file mode 100644 index 4979e5e..0000000 --- a/src/styles/custom.css +++ /dev/null @@ -1,3 +0,0 @@ -.blue-btn { - background-color: "#3276AE"; -} diff --git a/src/styles/globals.css b/src/styles/globals.css index 56b0904..dad4f80 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,7 +6,7 @@ html, body, #__next { height: 100%; - background-color: rgb(50 118 174); + background-color: #4682b4; } .geocoder-control-suggestions .geocoder-control-suggestion { diff --git a/src/styles/output.css b/src/styles/output.css index 0e19262..3d15ba8 100644 --- a/src/styles/output.css +++ b/src/styles/output.css @@ -223,9 +223,9 @@ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + /* -webkit-appearance: button; */ /* 1 */ - background-color: transparent; + /* background-color: transparent; */ /* 2 */ background-image: none; /* 2 */ @@ -270,7 +270,7 @@ Correct the cursor style of increment and decrement buttons in Safari. */ [type="search"] { - -webkit-appearance: textfield; + /* -webkit-appearance: textfield; */ /* 1 */ outline-offset: -2px; /* 2 */ @@ -403,7 +403,7 @@ embed, object { display: block; /* 1 */ - vertical-align: middle; + /* vertical-align: middle; */ /* 2 */ } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index be81099..4723d77 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -6,12 +6,38 @@ module.exports = { content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { + screens: { + sm: "375px", //mobile M + md: "768px", //tablet + lg: "1024px", //laptop + xl: "1280px", //laptop L + "2xl": "2560px", //4k + }, + backgroundImage: (theme) => ({ "farmer-working": "url('/State-CEDS-Shawn-Uehira-p29.png')", + spectrum: + "linear-gradient(orange, transparent), linear-gradient(to top left, cyan, transparent), linear-gradient(to top right, purple, transparent)", + spectrum2: + "linear-gradient( steelBlue, black, transparent), linear-gradient(to bottom left, cyan, transparent), linear-gradient(to top right, plum, transparent)", }), + backgroundSize: { + bgBig: "100% 110%", + }, + animation: { + "slide-in": "slide-in 0.7s ease-out", + }, + keyframes: { + "slide-in": { + "0%": { transform: "translateY(100%)", opacity: 0 }, + "100%": { transform: "translateY(0)", opacity: 100 }, + }, + }, }, colors: { green: "#1A9432", + lightGreen: "#1FCE1F", + yellowGreen: "#89E21D", blue: { lighter: "#COD8ED", default: "#3276AE", @@ -19,6 +45,7 @@ module.exports = { }, white: "#FFFFFF", gray: "#4C4C4C", + red: "#F52020", }, }, plugins: [require("@tailwindcss/forms")],