Improve unencrypted message indicator in e2e Rooms

[BillCarsonFr]

It is possible to receive clear messages in an e2e rooms.
It's not always an error/bug, for example several bots will always send clear messages in e2e room. But it could also be a normal user sending improperly clear messages.

So we need to make such messages more visible but still less errorish as it is currently.
For reference currently web will show a red shield (same as the one used for trust status):

Also there are inconsistency between web/mobile when displaying such messages.

Proposal:

• Clear messages in e2e room should be marked with this more neutral icon

• Also a more visible piece of UI should be shown upon the composer when a clear message is visible on screen

=> More details here https://www.figma.com/file/2aqj9A5WRvGY3tcdTrBek4/Unencrypted-message-warning-in-Timeline?node-id=33%3A5668

Implementation Note

This new upon text composer UI will be added to the design system. So should be made as such that it can be reused for other purposes.

Solved

Checked when merge on each component

• Improve unencrypted message indicator in e2e Rooms element-web#20248
• Improve unencrypted message indicator in e2e Rooms  element-android#4752
• iOS (link to issue TBD)

[daniellekirkwood]

I think this is related? #147