Differentiate between pending and queued transaction

## Background
Currently, we don't clearly indicate the difference between pending and queued transactions. If the transaction takes longer than expected, it would benefit the user to distinguish between pending and queued transactions.

## User Story
As a user I want to differentiate between pending and queued transaction.

Details:
- Improve the UI by including icons to better represent the states: using the same icon that is gray when tx is queued because user can’t speed it up and in primary color in pending when user can.
- Queued state has a different shade of gray so users can easily scan it and visually separate it from the address
- Keep orange as secondary color since it’s our only alternative to primary color and using our primary would make “processing” look like a link.
- Queued state has the position of the transaction in the queue(1/3) so users can easily know the order os the transactions queued.

- The subheader indicates the date of the transaction which is a basic need in any activity/history flow

## Designs
https://www.figma.com/file/rvlTPSEPP9qY5lVHz3ZU0w/Pending%2FQueued-Tx?node-id=3%3A906

Start with the linked Figma design and compare the requested queued and pending transaction states. Done means the UI distinguishes the states with the specified icon colors, queued shade, queue position, processing color, and transaction date subheader.

Written by the indexing model from the issue text.