[UI] No hover effect on message box and icons in it

[ghulamghousdev]

Description:

In Omnichannel, when a user hovers over the message box, emoji picker icon, audio message icon, and on file upload icon, there is no hover effect. When hovering over the message box, the cursor is changed to text but the border color remains the same. Similarly, for the emoji picker icon, audio message icon, and file upload icon, the cursor changes to a pointer but the color of the icons remains the same.

Steps to reproduce:

1. Open any channel in the Omnichannel.
2. Hover on any one of the mentioned icons.

Expected behavior:

We can add a hover effect and change the color of the icons and border of the message box.

Actual behavior:

While hovering on the above-mentioned icons, the cursor changes but no change in the colors of the icon.

no.hover.effect.mp4

Server Setup Information:

• Version of Rocket.Chat Server: 3.14.0-develop
• Operating System: Windows 10
• NodeJS Version: 12.21.0 - x64
• MongoDB Version: 4.2.8

Client Setup Information

Desktop App or Browser Version: Chrome 88.0

[sumukhah]

Copy of #21068

[ghulamghousdev]

@sumukhah to be honest, I couldn't find that issue opened earlier. but I thanks for pointing out. But I think that was incomplete.