Consolidating button styles (#225)

Author: avenmia

src/components/AddressSearch.tsx

@@ -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" : ""}`;
@@ -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>

src/components/survey/demographicssurvey.tsx

@@ -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>
@@ -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>

src/components/survey/surveyquestion.tsx

@@ -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
@@ -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}
         >

src/pages/index.tsx

@@ -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"}

src/pages/polis.tsx

@@ -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>

src/pages/querysummary.tsx

@@ -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">
@@ -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>

src/styles/globals.css

@@ -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;
+}