tweak: UX improvements to research

pages/research.js

@@ -293,13 +293,15 @@ export default function Home({ listOfElementsDefault }) {
                       //console.log(event.target.value)
                       setSliderValue(event.target.value)
                     }}
-                    className="text-center"
+                    className="text-center px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 m-2 "
                   />
                   <br />
                   {`times as valuable as ...`}
                 </label>
                 <br />
-                <br />
+
+
+
                 <SubmitSliderButton
                   posList={posList}
                   binaryComparisons={binaryComparisons}
@@ -309,6 +311,7 @@ export default function Home({ listOfElementsDefault }) {
                   nextStepSlider={nextStepSlider}
                 />
               </div>
+
             </div>
             <div
               className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5 "
@@ -320,6 +323,16 @@ export default function Home({ listOfElementsDefault }) {
               </div>
             </div>
           </div>
+          <br />
+          <label className="">
+            Reasoning (optional):
+            <br />
+            <textarea className="mt-2 px-3 py-4 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-base border-0 shadow outline-none focus:outline-none focus:ring w-full"
+              value={reasoning} 
+              onChange={(event) => setReasoning(event.target.value)} 
+            />
+          </label>
+          <br />
           <div>
           </div>
           {/*