Teamwork task: [ACTIONS] Add back button to action header

Specification

Description

With the introduction of action side panels, users can now use the ‘Create payment’ and ‘Manage colony’ menu items to open the new action side panels, where they can select a specific action.

However, once an action is selected, there is no quick way to navigate back to the main action side panel menus. Instead, users need to reselect the menu item.

The addition of an arrow allows users to quickly navigate back and forth between the main side panel menu and individual action types, enhancing the overall user experience (UX) of this feature.

Design

Figma desktop component: (https://the-link-to-the-design-on-figma)

Figma mobile component: https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=3008-525&t=4EIwZZ3r3LwAL5HX-4

Acceptance criteria

• Back arrow should be added for easier navigation back to action list view.

  • The arrow should return the user to the action list view category relevant to the action they are in.
  • NOTE: For agreements, there is currently no category page, so, the arrow should not be visible.

• Back arrow visibility

  • The arrow should appear only once an action has been selected.
  • The back arrow should not be visible on the action list view.
  • In a completed action, the back arrow should navigate the user to the list view category relevant to the action they are in.

• Browser back button

  • If the user is in an open action transaction and for example clicks out to the dashboard, clicking the back button should return to the previous action transaction.

• Hover State

  • For the desktop component, the hover state should match other icons in the action header and use the blue-400 colour.