From c04bf0649d108768be81cd10b40298145511db34 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@gmail.com>
Date: Thu, 25 Nov 2021 13:52:10 +0000
Subject: [PATCH] tweak: UX improvements

---
 pages/index.js    | 24 +++++++++++++++---------
 pages/research.js |  7 -------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 7700463..4265341 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -224,7 +224,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:`)
@@ -282,23 +282,18 @@ 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 />
-                <label>
-                  Reasoning (optional):
-                  <textarea value={reasoning} onChange={(event) => setReasoning(event.target.value)} />        
-                </label>
-                <br />
+
 
 
                 <SubmitSliderButton
@@ -310,6 +305,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 "
@@ -321,6 +317,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>
           {/*
diff --git a/pages/research.js b/pages/research.js
index d0a3a60..36ac5fe 100644
--- a/pages/research.js
+++ b/pages/research.js
@@ -300,13 +300,6 @@ export default function Home({ listOfElementsDefault }) {
                 </label>
                 <br />
                 <br />
-                <label>
-                  Reasoning (optional):
-                  <textarea value={reasoning} onChange={(event) => setReasoning(event.target.value)} />        
-                </label>
-                <br />
-
-
                 <SubmitSliderButton
                   posList={posList}
                   binaryComparisons={binaryComparisons}