Improve the status of send messages (sending, sent, received, failed)

[giomfo]

When sending a message in Element, it’s possible for the sent message to be in several states such as sending, sent, received, failed to send. Today, we have different implementations across web, iOS & Android and we’d like to make them consistent across all platforms.

We present here the new design to expose progress states on Element-Web:

• When sending or encrypting a message: Display a hollow tick at the bottom right of the message (In case of a multi-line message, the tick is aligned with the last line)

• The text color is always black (we remove the light grey color (and other colors) for local echos)

• When a message is sent: Display a filled tick

• When a message has been read: Overlay the read receipt, also ‘clearing’ the tick states. In effect, this means that once a message has been sent & read, it doesn’t need to be decorated any more
  

• When a message failed to sent: Display an exclamation mark (on a red background) where the tick lived. (see Retrying & deleting failed messages #16423 to handle the failed messages)
  

• In case of an attachment (image/video/file...), display a progress bar above the composer during the media encryption and its upload.
  When this attachment is actually sending display a hollow tick, replaced by a filled tick when this is done:
  
  Compare to the existing code:

  • Change the way attachments are visually represented
  • Modify uploading visual style and string placements
  • Respect default text style for the uploading states ( Only keep the person’s name. Currently it shows the person’s name + action e.g: Steve is uploading. Ideally this should be removed and only the name should be kept.

[turt2live]

Approximate updated design (figma pending):

[turt2live]

This portion is done - closing in favour of #16423 to cover the remaining half