brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

improve survey UX

Browse Source
This commit is contained in:
Brandon Egger 2023-04-11 01:54:12 -05:00
parent 2f284ac882
commit 76e21326e5
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Survey.tsx
View File

@ -125,8 +125,8 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
<section className=""> <section className="">
{!isLastPage ? {!isLastPage ?
<div className="space-x-4"> <div className="space-x-4">
<button onClick={backClick} className="inline mx-auto bottom-0 mt-8 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">back</button> <button onClick={backClick} className="inline mx-auto bottom-0 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">back</button>
<button onClick={nextClick} className="inline mx-auto bottom-0 mt-8 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">next</button> <button onClick={nextClick} className="inline mx-auto bottom-0 py-2 px-4 bg-yellow-100 mx-auto rounded-md border border-neutral-900 ease-out duration-200 shadow-lg hover:shadow-md hover:bg-yellow-300">next</button>
</div> </div>
: :
<div className="flex flex-col space-y-2 mt-4"> <div className="flex flex-col space-y-2 mt-4">
@ -139,10 +139,11 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
}; };
return ( return (
<div className="p-8 h-full flex flex-col justify-between text-center"> <div className="h-full flex flex-col justify-between text-center">
<section> <section className="mt-4">
<h2></h2> <h2 className="text-neutral-400 italic text-xl">{question.header}</h2>
<h1>{question.question}</h1> <h1 className="text-neutral-900 font-bold text-xl">{question.question}</h1>
<h3 className="text-neutral-600 text-sm">Select all that apply from below</h3>
</section> </section>
<section className="flex flex-col space-y-1 justify-center"> <section className="flex flex-col space-y-1 justify-center">
@ -157,7 +158,9 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
No Preference No Preference
</button> </button>
: undefined} : undefined}
<AdvanceButtons /> <div className="mb-4">
<AdvanceButtons />
</div>
</div> </div>
) )
} }