Give the task bell the same hover state as the user menu

[frjo]

Fixes #3987

https://github.com/HyphaApp/hypha/assets/191392/2c99a3c4-130c-4cbb-b47a-945ef70bdcd9

[theskumar]

Probably unrelated to this PR, but noticed this whitespace, unexpected?

[theskumar]

The use of active css is causing some side-effects (see the video below), maybe try using the alpine variable to style the button while the dialog is open using :class=

• When the dialog is open, try hovering over the primary navigation.
• If you click on the bell icon itself, the black bg remain active.

I noticed some minor improvements that can be done.

• use standard ring-1 for active state, i.e. a border around to indicate the button is active or focused when you use keyboard or mouse.
• Remove the end-4 and use end-0 in the tasks list dialog, let it align similar to the dialog box alignment of the profile button.
• Use transition-colors on the buttons
• To close the dialog boxes you must click somewhere else, include a "close" botton in the dialog -> panel?
• I think using gap-4 instead of gap-5 is fine. gap-5 feels odd spacing, we rarely use it.

https://github.com/HyphaApp/hypha/assets/236356/9e78341f-a87d-44ba-a508-b072dc54324c

[wes-otf]

Works well in testing! The only thing I noticed is with the latest fixes the icons don't stay inverted when the menu is active. If this is intentional then all should be ready to go!