PagesEditor: add 'main-content' style. Update workflow header

zooniverse · Jan 8, 2025 · 2bc7dc9 · 2bc7dc9
1 parent 0050688
commit 2bc7dc9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/pages/lab-pages-editor/components/WorkflowHeader.jsx b/app/pages/lab-pages-editor/components/WorkflowHeader.jsx
@@ -48,7 +48,7 @@ export default function WorkflowHeader({
 
   return (
     <div className="workflow-header">
-      <div className="workflow-header-links flex-row">
+      <div className="workflow-header-top">
         <a href={returnUrl}> {/* Formerly <Link> from 'react-router', but React was throwing Legacy Context errors. */}
           <ReturnIcon />
           {strings.PagesEditor.components.WorkflowHeader.return}

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -141,15 +141,18 @@ $fontWeightBoldPlus = 700
   // ---------------------------------------------------------------------------
 
   main-content()
-    border: 2px dashed blue
+    border: 1px dashed blue
     max-width: 840px
     margin: 0 auto
 
-  .flex-row
+  flex-row()
     align-items: center
     display: flex
     flex-direction: row
     gap: $sizeS
+
+  .flex-row
+    flex-row()
 
   .flex-wrap
     flex-wrap: wrap
@@ -193,11 +196,16 @@ $fontWeightBoldPlus = 700
     a
       min-width: 40%
 
-    .workflow-header-links
+    .workflow-header-top
+      flex-row()
+      background: $teal
+      color: $white
       margin-bottom: $sizeM
+      padding: $sizeXS
 
       a
         display: inline-block
+        color: $white
         font-size: $fontSizeS
         text-decoration: none