Skip to content

Commit

Permalink
Consolidating button styles (#225)
Browse files Browse the repository at this point in the history
  • Loading branch information
@avenmia
avenmia authored Sep 14, 2024
1 parent 9081359 commit 1a95b73
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 64 deletions.
28 changes: 17 additions & 11 deletions src/components/AddressSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,9 @@ const AddressSearch: React.FC = () => {
};

const handleSubmit = () => {
console.log("Submitted!");
if (!complete) {
return;
}
const planningRegionDhhl = `${island ? island + "," : ""}${
county ? county + "," : ""
}${planningRegion ?? ""}${dhhlRegion === "Yes" ? "-DHHL" : ""}`;
Expand Down Expand Up @@ -313,22 +315,26 @@ 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">
<button className="btn btn-back">
<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
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:cursor-pointer hover:bg-lightGreen"
onClick={() => handleSubmit()}
disabled={!complete}
>
{complete ? (
<Link href={{ pathname: "./survey" }}>
<button
className="btn btn-next"
onClick={() => handleSubmit()}
disabled={false}
>
Next <GrLinkNext />
</button>
</Link>
) : (
<button className="btn btn-next" disabled={true}>
Next <GrLinkNext />
</button>
</Link>
)}
</div>
</div>
</div>
Expand Down
17 changes: 4 additions & 13 deletions src/components/survey/demographicssurvey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,25 +160,16 @@ export default function DemographicsSurvey() {
</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">
<button className="btn btn-back">
<IoMdArrowBack />
Re-enter Address
</button>
</Link>
<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 "
onClick={() => handleRetakeSurvey()}
>
<button className="btn btn-back" onClick={() => handleRetakeSurvey()}>
Retake demographic survey
</button>
<Link href={{ pathname: "./querysummary" }}>
<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
hover:translate-y-1 hover:bg-lightGreen"
onClick={() => handleSubmit()}
>
<button className="btn btn-next" onClick={() => handleSubmit()}>
Continue
</button>
</Link>
Expand Down Expand Up @@ -221,7 +212,7 @@ export default function DemographicsSurvey() {
</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">
<button className="btn btn-back">
<IoMdArrowBack />
Re-enter Address
</button>
Expand Down
11 changes: 2 additions & 9 deletions src/components/survey/surveyquestion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,7 @@ export default function SurveyQuestion({
{getAnswers(question.questionType, question.answers)}
<div className="mt-10 flex flex-row justify-between">
<button
className="mb-1 mt-4 flex flex-row items-center justify-center gap-1 rounded-full border-2
border-dashed border-blue-darker bg-white py-1 text-right text-lg text-blue-darker
no-underline shadow-xl transition ease-in-out hover:translate-y-1 hover:bg-blue-darker/20 sm:px-2
md:px-4 lg:px-6"
className="btn btn-survey-back"
onClick={() => updateQuestion("Prev")}
>
Back
Expand All @@ -94,11 +91,7 @@ export default function SurveyQuestion({
Question {surveyInfo.questionNumber + 1} /{surveyInfo.totalQuestions}
</span>
<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 py-1 text-right text-lg text-blue-darker
no-underline shadow-xl transition ease-in-out hover:translate-y-1 hover:bg-lightGreen sm:px-2
md:px-4 lg:px-6"
className="btn btn-next"
onClick={() => updateQuestion("Next", selectedAnswer)}
disabled={disabled}
>
Expand Down
3 changes: 1 addition & 2 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,7 @@ const AuthShowcase: React.FC = () => {
) : null}
</p>
<button
className="text-black text-md rounded-full bg-white/80 px-6 py-2
no-underline shadow-xl transition ease-in-out hover:translate-y-1 hover:bg-white "
className="btn btn-back"
onClick={sessionData ? () => void handleSignOut() : () => void signIn()}
>
{sessionData ? "Sign out" : "Sign in to begin"}
Expand Down
15 changes: 4 additions & 11 deletions src/pages/polis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,23 +44,16 @@ const Polis: NextPage = () => {
query: { surveyId: id },
}}
>
<button
className="mb-1 w-full 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 "
>
{title}
</button>
<button className="btn btn-polis">{title}</button>
</Link>
</div>
</div>
);
})}
<br />
<br />
<hr />
</div>
<div className="mt-20">
<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">
<button className="btn btn-back">
<IoMdArrowBack />
Retake Demographic Survey
</button>
Expand Down
22 changes: 4 additions & 18 deletions src/pages/querysummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,7 @@ const QuerySummary: NextPage = () => {
<ProgressBar completed={85} />
</div>
<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
hover:translate-y-1 hover:bg-lightGreen"
>
Continue
</button>
<button className="btn btn-next">Continue</button>
</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">
Expand Down Expand Up @@ -139,25 +133,17 @@ const QuerySummary: NextPage = () => {
<div className="grid grid-cols-1 pb-[50px] md:grid-cols-2">
<div className="flex flex-col justify-start">
<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">
Re-enter Address
</button>
<button className="btn btn-back">Re-enter Address</button>
</Link>
<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">
<button className="btn btn-back">
Retake Demographic Survey
</button>
</Link>
</div>
<div className="flex justify-end">
<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
hover:translate-y-1 hover:bg-lightGreen"
>
Continue
</button>
<button className="btn btn-next">Continue</button>
</Link>
</div>
</div>
Expand Down
40 changes: 40 additions & 0 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,43 @@ body,
.geocoder-control-suggestion:hover {
background-color: #f2f2f2;
}

.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;
}

.btn-next {
@apply bg-yellowGreen px-6 py-2 text-blue-darker;
}

.btn-next:hover {
@apply translate-y-1 cursor-pointer bg-lightGreen;
}

.btn-next:disabled {
@apply translate-y-0 cursor-not-allowed border-none transition-none;
}

.btn-back {
@apply bg-white/80 px-6 py-2 text-blue-darker;
}

.btn-back:hover {
@apply translate-y-1 bg-white;
}

.btn-survey-back {
@apply border-2 border-dashed border-blue-darker bg-white text-blue-darker sm:px-2 md:px-4 lg:px-6;
}

.btn-survey-back:hover {
@apply translate-y-1 bg-blue-darker/20;
}

.btn-polis {
@apply w-full rounded-full bg-white/80 text-blue-darker sm:px-2 md:px-4 lg:px-6;
}

.btn-polis:hover {
@apply translate-y-1 bg-white;
}

0 comments on commit 1a95b73

Please sign in to comment.