Workflow Editor UI updates. Part 2: Tasks UI

[seanmiller26]

->

An overall polish to the UI, addition of a Page label, and unification of the interactive elements.

• Add a Page label. A new part of the overall header for a Task. Gradient overlay in our secondary brand colors: #F0B200 -> #D47811.
  Note: still to be confirmed, but a Starting Task delineation may not be needed.
• Rearrange buttons are unified, enlarged and the style is updated. New hover and clicked states.
• Task-key icon updated, NEW custom task icons(!) Note: assets to come soon.
• Edit, Copy, Delete icons enlarged and the style is more consistent with our brand. New hover and click states.
• Page style updates: 8pt corners, drop shadow, and new gradient overlay of #FFFFFF -> #EFF2F5. Max width unified to 800px.
• Both the choices and Next Task dropdown should have a minimum width of 110px. They should increase in width when the padding is <10px, at increments of 10px at a time, e.g. 120, 130, 140px. (It may help to chat with Mark for details here, as he just redesigned the Survey Task with the same rules)
• All internal components have 4pt corners.
• Check the Figma for detailed styling updates to each respective Task type, ie. form fields, tools, choices, etc.

Hover state

Clicked state

Question Task

Text Task

Drawing Task

Styling for the cases of: The last task is linear, the only task in a workflow is linear.

Details found here: https://www.figma.com/design/gNOcFdlskfEXmVIFPvx7Yj/Workflow-Editor?node-id=1484-10575&t=XwGyIBd6GqraxZxo-1