Improve unencrypted message indicator in e2e Rooms

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

- [ ] https://github.com/vector-im/element-web/issues/9114
- [ ] https://github.com/vector-im/element-android/issues/4752
- [ ] iOS (link to issue TBD)