From 909c2bd7e680add5f7dc67562ae6a199fc327f31 Mon Sep 17 00:00:00 2001
From: avidrucker <avidrucker@gmail.com>
Date: Tue, 31 Oct 2023 17:32:53 -0400
Subject: [PATCH] resize btns, change btn layout on mobile

---
 src/App.js | 45 ++++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index 000fe05..1c306a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -135,28 +135,31 @@ function App() {
 
           {errMsg && <p className="lh-copy red ma0 pt3 ph3">{errMsg}</p>}
 
-          <div className="pv3 flex justify-center flex-wrap measure ml-auto mr-auto">
+          <div className="pv3 flex justify-center flex-wrap measure-wide ml-auto mr-auto">
             
-            <div className="ma1"><button type="submit" 
-              className={`br3 fw6 bn button-reset bg-moon-gray pa2 ${isPrioritizing ? 'o-50' : 'pointer grow'}`} 
-              disabled={isPrioritizing} 
-              onClick={handleAddTaskUI}>Add Task</button></div>
-            
-            <div className="ma1"><button type="button" 
-              className={`br3 fw6 bn button-reset bg-moon-gray pa2 ${tasks.length !== 0 ? 'pointer grow' : 'o-50'}`} 
-              disabled={isPrioritizing} 
-              onClick={handleDeleteUI}>Clear List</button></div>
-            
-            <div className="ma1"><button type="button" 
-              className={`br3 fw6 bn button-reset bg-moon-gray pa2 ${isPrioritizableList(tasks) ? 'pointer grow' : 'o-50'}`} 
-              disabled={isPrioritizing} 
-              onClick={handlePrioritizeUI}>Prioritize List</button></div>
+            <div className="dib">
+              <div className="ma1 dib"><button type="submit" 
+                className={`br3 w4 fw6 bn button-reset bg-moon-gray pa2 ${isPrioritizing ? 'o-50' : 'pointer grow'}`} 
+                disabled={isPrioritizing} 
+                onClick={handleAddTaskUI}>Add Task</button></div>
+              
+              <div className="ma1 dib"><button type="button" 
+                className={`br3 w4 fw6 bn button-reset bg-moon-gray pa2 ${tasks.length !== 0 ? 'pointer grow' : 'o-50'}`} 
+                disabled={isPrioritizing} 
+                onClick={handleDeleteUI}>Clear List</button></div>
+            </div>
             
-            <div className="ma1"><button type="button" 
-              className={`br3 fw6 bn button-reset bg-moon-gray pa2 ${isActionableList(tasks) ? 'pointer grow' : 'o-50'}`} 
-              disabled={isPrioritizing} 
-              onClick={handleTakeActionUI}>Take Action</button></div>
-
+            <div className="dib">
+              <div className="ma1 dib"><button type="button" 
+                className={`br3 w4 fw6 bn button-reset bg-moon-gray pa2 ${isPrioritizableList(tasks) ? 'pointer grow' : 'o-50'}`} 
+                disabled={isPrioritizing} 
+                onClick={handlePrioritizeUI}>Prioritize List</button></div>
+              
+              <div className="ma1 dib"><button type="button" 
+                className={`br3 w4 fw6 bn button-reset bg-moon-gray pa2 ${isActionableList(tasks) ? 'pointer grow' : 'o-50'}`} 
+                disabled={isPrioritizing} 
+                onClick={handleTakeActionUI}>Take Action</button></div>
+            </div>
           </div>
         </form>
         
@@ -187,7 +190,7 @@ function App() {
           <div className="absolute f4 top-0 w-100 h-100 bg-white-80">
             <p className="ph3 lh-copy">{cursor !== -1 && genQuestion(tasks, cursor)}</p>
             <button className="br3 w3 fw6 bn button-reset bg-moon-gray pa2 pointer ma1"
-                    onClick={handlePrioritizeUI}>Quit</button>
+                    onClick={handleQuitUI}>Quit</button>
             <button className="br3 w3 fw6 bn button-reset bg-moon-gray pa2 pointer ma1"
                     onClick={handleNoUI}>No</button>
             <button className="br3 w3 fw6 bn button-reset bg-moon-gray pa2 pointer ma1"