From f2e511cbaed78c1bab2177bf15b36d5935c24e14 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Wed, 11 Oct 2023 02:48:06 +0100
Subject: [PATCH] TasksPage: re-code grip-bar (now grab-handle), add move
 upwards/downwards buttons

---
 .../lab-pages-editor/components/TasksPage.jsx    | 16 +++++++++++-----
 css/lab-pages-editor.styl                        |  5 ++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage.jsx
index 6e3f3414f4..573ce5f702 100644
--- a/app/pages/lab-pages-editor/components/TasksPage.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage.jsx
@@ -71,8 +71,14 @@ function StepItem({ task, taskKey }) {
 
   return (
     <li className="step-item">
-      <div className="grip-bar flex-row spacing-bottom-XS">
-        <GripIcon color="#A6A7A9" />
+      <div className="grab-handle flex-row spacing-bottom-XS">
+        <button aria-label={`Rearrange Page ${stepKey} upwards`} className="plain" type="button">
+          <span className="fa fa-caret-up" role="img" />
+        </button>
+        <GripIcon color="#A6A7A9" /> {/* TODO: add drag/drop functionality. Perhaps this needs to be wider, too. */}
+        <button aria-label={`Rearrange Page/Step ${stepKey} downwards`} className="plain" type="button">
+          <span className="fa fa-caret-down" role="img" />
+        </button>
       </div>
       <ul className="tasks-list" aria-label={`List of Tasks for Page/Step ${stepKey}`}>
         <li className="task-item">
@@ -87,13 +93,13 @@ function StepItem({ task, taskKey }) {
               />
             </span>
             <span className="task-text flex-item">{text}</span>
-            <button aria-label={`Delete Step ${stepKey}`} className="plain" type="button">
+            <button aria-label={`Delete Page/Step ${stepKey}`} className="plain" type="button">
               <span className="fa fa-trash" role="img" />
             </button>
-            <button aria-label={`Copy Step ${stepKey}`} className="plain" type="button">
+            <button aria-label={`Copy Page/Step ${stepKey}`} className="plain" type="button">
               <span className="fa fa-copy" role="img" />
             </button>
-            <button aria-label={`Edit Step ${stepKey}`} className="plain" type="button">
+            <button aria-label={`Edit Page/Step ${stepKey}`} className="plain" type="button">
               <span className="fa fa-pencil" role="img" />
             </button>
           </div>
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index cccc9377a4..4f297c63d2 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -269,9 +269,12 @@ $fontWeightBoldPlus = 700
         font-size: $fontSizeS
         font-weight: $fontWeightBold
       
-    .grip-bar
+    .grab-handle
       cursor: grab
       justify-content: center
 
       &:active
         cursor: grabbing
+      
+      .fa
+        color: $grey1