Workflow Editor UI updates. Part 1: Task funnel page layout

[seanmiller26]

->

We want to adjust the hierarchy and separate certain elements for better user orientation. Add a page header, similar in style to the new /users pages. As well as overall small tweaks and improvements to the styling and UI.

• Add a page header in #005D69 with a 'Back to all workflows' and Zooniverse word logo. Match styling from zooniverse.org/users.
• Workflow title now is the first element on the page (color #000000), in-line with the 'Preview Workflow" button. The Preview button styling has been de-emphasized.
• Tasks and Workflow Settings tab below Workflow title. New colors and styling.
• 'Add a New Task' button removed (will now live at the end of the funnel). Starting page dropdown now aligned with Status and Version. New colors and styling. UX improvement: increase timing of the loading icon to show for a longer duration after an update.

We should further discuss the styling of the Starting Page dropdown. Ideally we'd like to match the Page and Task icons in this dropdown.

Details found here: https://www.figma.com/design/gNOcFdlskfEXmVIFPvx7Yj/Workflow-Editor?node-id=1398-7225&m=dev

[seanmiller26]

Maybe this is the best place for these references:

The revised 'Next Task' indication (non-branching)

The revised positioning and styling for 'Add a Task'

Please see the components section of the Figma file for details on these hover and click states.

[shaunanoordin]

Dev Update:

• I've created a new PR (Workflow Editor phase 2, part 1: Task Funnel #7245) to address this issue.
  • Sean, I will ping you when that PR is actually ready for full review, but this does mean we now have a live preview whenever we want to discuss how things are going.
• Work on this PR started yesterday (Tue 7 Jan) and is still ongoing as of Wed 8 Jan, so ahhah, that optimistic 1-day roadmap plan needs to be updated.

(This dev update will also be copy-pasted to Slack)