From 1180d167c93513f65b3eebb42eb0e37790e80312 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@gmail.com>
Date: Thu, 25 Nov 2021 13:54:21 +0000
Subject: [PATCH] tweak: UX improvements to research

---
 pages/research.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/pages/research.js b/pages/research.js
index 36ac5fe..0e6edd4 100644
--- a/pages/research.js
+++ b/pages/research.js
@@ -230,7 +230,7 @@ export default function Home({ listOfElementsDefault }) {
 
   let nextStepSlider = ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => {
     if (sliderValue < 1 && sliderValue > 0) {
-      sliderValue = 1/sliderValue;
+      sliderValue = 1 / sliderValue;
       [element1, element2] = [element2, element1]
     }
     console.log(`posList@nextStepSlider:`)
@@ -288,18 +288,20 @@ export default function Home({ listOfElementsDefault }) {
                   <input
                     type="number"
                     value={sliderValue}
-                    onChange={(event) =>{
+                    onChange={(event) => {
                       //console.log(event)
                       //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>
           {/*