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 all platforms:

• 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 #4013 to handle the failed messages)
  
• In case of an attachment (image/video/file...), display a loading wheel at the bottom right during the media encryption and its upload (the media is slightly gray):
  
  On long Press the spinner icon > show dialog to cancel the upload
  

When this attachment is actually sending display a hollow tick, replaced by a filled tick when this is done:

Nice to have: Because we remove the pie-chart during these changes, we should try to display larger thumbnail for image and video