Fixing styling

CodeWithAloha · Sep 25, 2024 · 09112c4 · 09112c4
1 parent c398208
commit 09112c4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx
@@ -160,7 +160,7 @@ export default function DemographicsSurvey() {
             Step 2 complete!
           </h1>
           <Infobox message={completedSurveyMessage} greenCheck={true} />
-          <div className="flex flex-row items-center justify-center gap-5">
+          <div className="flex flex-row items-center justify-center gap-5 sm:flex-wrap md:flex-nowrap">
             <Link href={{ pathname: "./address" }}>
               <PrevButton text="Re-enter Address" />
             </Link>

diff --git a/src/components/survey/multiSelectAnswers.tsx b/src/components/survey/multiSelectAnswers.tsx
@@ -101,7 +101,7 @@ export default function MultiSelectAnswers({
           value={a.answer}
           onClick={() => handleClick(a.id)}
         />
-        <label htmlFor={`a-${index}`}>&nbsp;{a.answer}</label>
+        <label htmlFor={`a-${index}-option`}>&nbsp;{a.answer}</label>
         <br />
       </>
     );

diff --git a/src/pages/querysummary.tsx b/src/pages/querysummary.tsx
@@ -6,6 +6,8 @@ import Link from "next/link";
 import SummaryQuestionAnswer from "../components/SummaryQuestionAnswer";
 import NextButton from "../components/NextButton";
 import PrevButton from "../components/PrevButton";
+import PageHeader from "../components/PageHeader";
+import PageLayout from "../components/PageLayout";
 
 const QuerySummary: NextPage = () => {
   const [userCensusTract, setUserCensusTract] = useState<string>("");
@@ -73,11 +75,9 @@ const QuerySummary: NextPage = () => {
   }, {} as Record<string, string>);
 
   return (
-    <div className="flex h-screen flex-col items-center justify-center">
-      <div className="flex h-full flex-col items-center">
-        <h1 className="mb-8 text-lg font-semibold text-white md:mt-6 md:text-3xl">
-          Demographic Information Summary
-        </h1>
+    <>
+      <PageLayout>
+        <PageHeader title="Demographic Information Summary" />
         <PageLinkButtons />
         <div className="mt-2 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">
@@ -131,23 +131,23 @@ const QuerySummary: NextPage = () => {
           </div>
         </div>
         <PageLinkButtons />
-      </div>
-    </div>
+      </PageLayout>
+    </>
   );
 };
 
 const PageLinkButtons = () => {
   return (
-    <div className="m-4 flex gap-20">
-      <div className="flex gap-5 self-start">
+    <div className="m-4 flex sm:flex-col sm:items-center sm:gap-5 md:flex-row md:gap-20">
+      <div className="flex sm:flex-col sm:items-center sm:gap-2 md:flex-row md:gap-5 md:self-start">
         <Link href={{ pathname: "./address" }}>
           <PrevButton text="Re-enter Address" />
         </Link>
         <Link href={{ pathname: "./survey" }}>
           <PrevButton text="Retake Demographic Survey" />
         </Link>
       </div>
-      <div className="flex self-end">
+      <div className="flex sm:flex-col sm:items-center md:self-end">
         <Link href={{ pathname: "./polis" }}>
           <NextButton text="Next" />
         </Link>