From 2df7dd7be78a34c1970e63954879f02ba0d6cc9a Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Sat, 16 Sep 2023 04:34:55 +0800
Subject: [PATCH] PageEditor: restyle header to match design, add new layout
 stylings

---
 .../components/WorkflowHeader.jsx                | 16 +++++++++-------
 .../components/WorkflowSettingsPage.jsx          | 16 ++++++++--------
 css/lab-pages-editor.styl                        | 14 +++++++++++++-
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/WorkflowHeader.jsx b/app/pages/lab-pages-editor/components/WorkflowHeader.jsx
index 9a17969927..cb9e24825e 100644
--- a/app/pages/lab-pages-editor/components/WorkflowHeader.jsx
+++ b/app/pages/lab-pages-editor/components/WorkflowHeader.jsx
@@ -22,17 +22,19 @@ export default function WorkflowHeader({
   if (!workflow) return null;
 
   return (
-    <div className="workflow-header">
+    <div className="workflow-header flex-row">
       <Link to={returnUrl}>
         <ReturnIcon />
         {strings.PagesEditor.components.WorkflowHeader.return}
       </Link>
-      <button type="button" onClick={onClick}>
-        {strings.PagesEditor.components.WorkflowHeader.tasks}
-      </button>
-      <button type="button" onClick={onClick}>
-        {strings.PagesEditor.components.WorkflowHeader.workflow_settings}
-      </button>
+      <div className="flex-row flex-item justify-around">
+        <button className="unselected" type="button" onClick={onClick}>
+          {strings.PagesEditor.components.WorkflowHeader.tasks}
+        </button>
+        <button className="selected" type="button" onClick={onClick}>
+          {strings.PagesEditor.components.WorkflowHeader.workflow_settings}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage.jsx
index 7c35f2dfa1..0ac08e249a 100644
--- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage.jsx
+++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage.jsx
@@ -80,7 +80,7 @@ export default function WorkflowSettingsPage() {
             &quot;done.&quot; Once a subject has reached the retirement limit it
             will no longer be shown to volunteers.
           </p>
-          <div className="flex-row align-start">
+          <div className="flex-row align-start spacing-bottom">
             <select
               aria-label="Retirement criteria"
               className="flex-item"
@@ -121,7 +121,7 @@ export default function WorkflowSettingsPage() {
             Choose how to display your subjects.
             Refer to the Subject Viewer section of the Glossary for more info.
           </p>
-          <div className="flex-row align-start">
+          <div className="flex-row align-start spacing-bottom">
             <select
               aria-label="Subject viewer"
               className="flex-item"
@@ -159,7 +159,7 @@ export default function WorkflowSettingsPage() {
           <p>TEST: HTML and styling for checkbox input</p>
           <label
             htmlFor="placeholder-1"
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
           >
             <input
               type="checkbox"
@@ -171,7 +171,7 @@ export default function WorkflowSettingsPage() {
           </label>
           <label
             htmlFor="placeholder-2"
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
           >
             <input
               defaultChecked={true}
@@ -187,7 +187,7 @@ export default function WorkflowSettingsPage() {
           </label>
           <label
             htmlFor="placeholder-3"
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
           >
             <input
               type="checkbox"
@@ -208,7 +208,7 @@ export default function WorkflowSettingsPage() {
           <legend>Quicktalk</legend>
           <p>TEST: HTML and styling for radio options</p>
           <label
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
             htmlFor="placeholder-4-a"
           >
             <input
@@ -221,7 +221,7 @@ export default function WorkflowSettingsPage() {
             <span>Placeholder 4, Option A</span>
           </label>
           <label
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
             htmlFor="placeholder-4-b"
           >
             <input
@@ -235,7 +235,7 @@ export default function WorkflowSettingsPage() {
             <span>Placeholder 4, Option B</span>
           </label>
           <label
-            className="flex-row align-start"
+            className="flex-row align-start spacing-bottom"
             htmlFor="placeholder-4-c"
           >
             <input
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index e40b6d5c0c..5ef51282ce 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -89,13 +89,18 @@ $fontWeightBoldPlus = 700
   
   .align-start
     align-items: flex-start
+
+  .justify-around
+    justify-content: space-around
+  
+  .spacing-bottom
+    margin-bottom: $sizeXS
   
   // Component: Workflow Header
   // ---------------------------------------------------------------------------
 
   .workflow-header
     border-bottom: 0.5px solid $grey1
-    padding-bottom: $sizeS
 
     a
       display: inline-block
@@ -113,6 +118,13 @@ $fontWeightBoldPlus = 700
       font-weight: $fontWeightBoldPlus
       text-transform: uppercase
 
+      &.selected
+        border-bottom: 4px solid $teal
+      
+      &.unselected
+        color: $grey1
+        border-bottom: 4px solid transparent
+
   // Component: Workflow Settings Page
   // ---------------------------------------------------------------------------