StepItem: restyle step controls/header. Update icons.

zooniverse · Jan 31, 2025 · 6f8ce01 · 6f8ce01
1 parent cc427f3
commit 6f8ce01
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 64 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx
@@ -140,19 +140,18 @@ function StepItem({
             <div className="step-controls-center">
               <button
                 aria-label={`Rearrange Page ${stepKey} upwards`}
-                className="move-button plain"
+                className="control-button"
                 onClick={moveStepUp}
                 type="button"
               >
                 <MoveUpIcon />
               </button>
-              {/* TODO: add drag/drop functionality. Perhaps this needs to be wider, too. */}
               <GripIcon
                 className="grab-handle"
               />
               <button
                 aria-label={`Rearrange Page/Step ${stepKey} downwards`}
-                className="move-button plain"
+                className="control-button"
                 onClick={moveStepDown}
                 type="button"
               >

diff --git a/app/pages/lab-pages-editor/icons/GripIcon.jsx b/app/pages/lab-pages-editor/icons/GripIcon.jsx
@@ -1,35 +1,22 @@
-import PropTypes from 'prop-types';
-
-export default function GripIcon({
-  alt,
-  className = 'icon',
-  color = 'currentColor',
-  size = 16
-}) {
-  const x1 = (4 / 16) * size;
-  const x2 = (8 / 16) * size;
-  const x3 = (12 / 16) * size;
-  const y1 = (6 / 16) * size;
-  const y2 = (10 / 16) * size;
-  const r = (1.5 / 16) * size;
-
+export default function GripIcon({ alt, className = '', width = 40, height = 40 }) {
   return (
-    <svg aria-label={alt} width={size} height={size} className={className}>
-      <g fill={color}>
-        <circle r={r} cx={x1} cy={y1} />
-        <circle r={r} cx={x2} cy={y1} />
-        <circle r={r} cx={x3} cy={y1} />
-        <circle r={r} cx={x1} cy={y2} />
-        <circle r={r} cx={x2} cy={y2} />
-        <circle r={r} cx={x3} cy={y2} />
+    <svg
+      className={`icon ${className}`}
+      aria-label={alt}
+      role="img"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill="none"
+    >
+      <g
+        transform="translate(0 -2)"
+      >
+        <path
+          d="M28 23C28 23.55 27.804 24.021 27.412 24.413C27.02 24.805 26.5493 25.0007 26 25C25.45 25 24.979 24.804 24.587 24.412C24.195 24.02 23.9993 23.5493 24 23C24 22.45 24.196 21.979 24.588 21.587C24.98 21.195 25.4507 20.9993 26 21C26.55 21 27.021 21.196 27.413 21.588C27.805 21.98 28.0007 22.4507 28 23ZM28 17C28 17.55 27.804 18.021 27.412 18.413C27.02 18.805 26.5493 19.0007 26 19C25.45 19 24.979 18.804 24.587 18.412C24.195 18.02 23.9993 17.5493 24 17C24 16.45 24.196 15.979 24.588 15.587C24.98 15.195 25.4507 14.9993 26 15C26.55 15 27.021 15.196 27.413 15.588C27.805 15.98 28.0007 16.4507 28 17ZM22 23C22 23.55 21.804 24.021 21.412 24.413C21.02 24.805 20.5493 25.0007 20 25C19.45 25 18.979 24.804 18.587 24.412C18.195 24.02 17.9993 23.5493 18 23C18 22.45 18.196 21.979 18.588 21.587C18.98 21.195 19.4507 20.9993 20 21C20.55 21 21.021 21.196 21.413 21.588C21.805 21.98 22.0007 22.4507 22 23ZM22 17C22 17.55 21.804 18.021 21.412 18.413C21.02 18.805 20.5493 19.0007 20 19C19.45 19 18.979 18.804 18.587 18.412C18.195 18.02 17.9993 17.5493 18 17C18 16.45 18.196 15.979 18.588 15.587C18.98 15.195 19.4507 14.9993 20 15C20.55 15 21.021 15.196 21.413 15.588C21.805 15.98 22.0007 16.4507 22 17ZM16 23C16 23.55 15.804 24.021 15.412 24.413C15.02 24.805 14.5493 25.0007 14 25C13.45 25 12.979 24.804 12.587 24.412C12.195 24.02 11.9993 23.5493 12 23C12 22.45 12.196 21.979 12.588 21.587C12.98 21.195 13.4507 20.9993 14 21C14.55 21 15.021 21.196 15.413 21.588C15.805 21.98 16.0007 22.4507 16 23ZM16 17C16 17.55 15.804 18.021 15.412 18.413C15.02 18.805 14.5493 19.0007 14 19C13.45 19 12.979 18.804 12.587 18.412C12.195 18.02 11.9993 17.5493 12 17C12 16.45 12.196 15.979 12.588 15.587C12.98 15.195 13.4507 14.9993 14 15C14.55 15 15.021 15.196 15.413 15.588C15.805 15.98 16.0007 16.4507 16 17Z"
+          fill="currentColor"
+        />
       </g>
     </svg>
   );
 }
-
-GripIcon.propTypes = {
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  size: PropTypes.number
-};
diff --git a/app/pages/lab-pages-editor/icons/MoveDownIcon.jsx b/app/pages/lab-pages-editor/icons/MoveDownIcon.jsx
@@ -1,5 +1,19 @@
-export default function MoveDownIcon({ alt }) {
+export default function MoveDownIcon({ alt, className = '', width = 16, height = 16 }) {
   return (
-    <span className="icon fa fa-caret-down" aria-label={alt} role={!!alt ? 'img' : undefined} />
+    <svg
+      className={`icon ${className}`}
+      aria-label={alt}
+      role="img"
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M13.9194 3C14.7579 3 15.2241 3.96993 14.7002 4.6247L8.78087 12.0239C8.38054 12.5243 7.61946 12.5243 7.21913 12.0239L1.29976 4.6247C0.775946 3.96993 1.24212 3 2.08062 3H13.9194Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+    </svg>
   );
 }
diff --git a/app/pages/lab-pages-editor/icons/MoveUpIcon.jsx b/app/pages/lab-pages-editor/icons/MoveUpIcon.jsx
@@ -1,5 +1,26 @@
-export default function MoveUpIcon({ alt }) {
+export default function MoveUpIcon({ alt, className = '', width = 16, height = 16 }) {
   return (
-    <span className="icon fa fa-caret-up" aria-label={alt} role={!!alt ? 'img' : undefined} />
+    <svg
+      className={`icon ${className}`}
+      aria-label={alt}
+      role="img"
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_1767_3606)">
+        <path
+          d="M13.9194 13C14.7579 13 15.2241 12.0301 14.7003 11.3753L8.78088 3.97609C8.38056 3.47568 7.61947 3.47568 7.21915 3.97609L1.29977 11.3753C0.775961 12.0301 1.24213 13 2.08064 13H13.9194Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1767_3606">
+          <rect width="16" height="16" fill="white"/>
+        </clipPath>
+      </defs>
+    </svg>
   );
 }
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -11,6 +11,7 @@ $darkGreen = #005D69
 $greenBright = #1ED359
 $redBright = #E45950
 $yellow = #F0B200
+$lightYellow = #F6D885
 $orange = #D47811
 $darkOrange = #70481C
 $white = #FFFFFF
@@ -105,19 +106,24 @@ $fontWeightBoldPlus = 700
     &.plain
       background: none
       border: none
-
-  a.button-link
-    border: 1px solid $yellow
-    border-radius: $sizeXS
-    color: $black
-    cursor: pointer
-    display: inline-block
-    font-family: $fontFamilies
-    font-size: $fontSizeS
-    line-height: 1em
-    padding: $sizeSM
-    text-align: center
+
+    &.control-button
+      background: none
+      border: none
+      color: $grey3
+      width: 40px
+      height: 40px
+      border-radius: 40px
 
+      &:hover
+      &:focus
+        background: $lightYellow
+        color: $yellow
+
+      &:active
+        background: $yellow
+        color: $orange
+
   hr
     border-top: 1px solid $grey2
 
@@ -143,13 +149,20 @@ $fontWeightBoldPlus = 700
 
   .step-label
     border-radius: 8px 0px 16px 0px;
-    background: linear-gradient(276deg, rgba(240, 178, 0, 0.80) 0%, rgba(212, 120, 17, 0.80) 100%), #F6D885;
+    background: linear-gradient(276deg, rgba(240, 178, 0, 0.80) 0%, rgba(212, 120, 17, 0.80) 100%), $lightYellow;
     background: $yellow
     color: $black
     font-size: 10px
     font-weight: 500
     padding: 9px 29px
     text-transform: uppercase
+
+  .grab-handle
+    color: $grey3
+    cursor: grab
+
+    &:active
+      cursor: grabbing
 
   // General Layout
   // ---------------------------------------------------------------------------
@@ -620,7 +633,7 @@ $fontWeightBoldPlus = 700
         overflow: visible  // Required for StepItem's experimentalRestyleContainer(), which makes the "next step" arrows for branching tasks appear "outside" the step container.
 
         &:active
-        &:has(.move-button:focus)  // Note: :has() is experimental as of Nov 2023, and not supported on Firefox
+        &:has(.control-button:focus)  // Note: :has() is experimental as of Nov 2023, and not supported on Firefox
           outline: 2px solid $yellow
 
         .step-body-inner  // Redundant inner content is used for styling "branching next step extrudes from step-body"
@@ -634,18 +647,14 @@ $fontWeightBoldPlus = 700
         &:active
           cursor: grabbing
 
-        .move-button:focus
-          outline: 1px solid $yellow
-
         .step-controls-left
+          align-self: flex-start
           min-width: 5rem
 
         .step-controls-center
+          display: flex
           margin: auto
-
-          > *
-            vertical-align: middle
-            color: $grey1
+          align-items: center
 
         .step-controls-right
           text-align: right
@@ -686,12 +695,6 @@ $fontWeightBoldPlus = 700
       .task-text
         font-size: $fontSizeM
         font-weight: $fontWeightBold
-
-    .grab-handle
-      cursor: grab
-
-      &:active
-        cursor: grabbing
 
     .next-controls