PageEditor: restyle header to match design, add new layout stylings

zooniverse · Sep 15, 2023 · 2df7dd7 · 2df7dd7
1 parent c672175
commit 2df7dd7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
   // ---------------------------------------------------------------------------