Feat: Enhanced the Display of Text, Image, Audio & Video Attachments

[dhairyashiil]

Brief Title

Feat: Enhanced the Display of Text, Image, Audio & Video Attachments

Acceptance Criteria fulfillment

• [X] For Text, Image, Audio, and Video attachments, adjust the background to lighten or darken based on the light and dark themes.
• [X] For the Light theme, make the background darker.
• [X] For the Dark theme, make the background lighter.
• [X] Make sure the hover effect is still visible on these attachments

Fixes #816

Video/Screenshots:

Stormy Seas Dark Theme:

https://github.com/user-attachments/assets/35e7eaab-7e04-44fe-8bb4-f69efe916abf

Default Light Theme:

https://github.com/user-attachments/assets/21e9f2a9-4488-4ad8-b071-b6242e0338a9

Rose Amber Variant Light Theme:

https://github.com/user-attachments/assets/d5602420-d49d-4b3e-ae44-78bed6881d3e

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-817 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[Spiral-Memory]

Hi @dhairyashiil I think this need to be uniform, this is not looking consistent

[Spiral-Memory]

This change in color is looking a bit odd to me

[dhairyashiil]

Hello @Spiral-Memory, I think this color change is necessary for quote messages. Currently, we only have a border, but this background color is also needed. I referred to RC for this.

I understand that you want Embedded Chat to have a plain UI with subtle colors, but perhaps if we find colors or shades that you like and that align with the desired UI behavior, we can implement this.