Give the task bell the same hover state as the user menu (#3992)

Fixes #3987

hypha/templates/base-apply.html

@@ -108,7 +108,7 @@
                         x-init="$watch('open', value => { if (value) { document.getElementById('id-task-list').dispatchEvent(new Event('htmx:fetch')); } })"
                     >
                         <a href="{% url "todo:list" %}"
-                           class="p-2 flex items-center hover:opacity-70 transition-opacity"
+                           class="flex p-2 rounded-full text-black hover:bg-black hover:text-white transition-colors"
                            aria-label="{% trans "Task List" %}"
                            aria-haspopup="task_list"
                            aria-expanded="false"
@@ -116,11 +116,11 @@
                            title="{% trans "Click to open your task list" %}"
                            @click.prevent="open = ! open"
                         >
-                            {% heroicon_outline "bell-alert" class="inline me-1 text-black" aria_hidden="true" %}
+                            {% heroicon_outline "bell-alert" class="inline" aria_hidden="true" %}
                         </a>
                         <div x-cloak x-show="open" x-transition @click.outside="open = false">
                             <div class="relative z-999999">
-                                <div class="absolute end-4 bg-white border border-gray-200 min-w-[400px] shadow-md max-h-[500px] overflow-y-scroll zeta" role="task_list">
+                                <div class="absolute end-0 bg-white border border-gray-200 min-w-[400px] shadow-md max-h-[500px] overflow-y-scroll zeta" role="task_list">
                                     <div class="p-2 flex justify-between border-b border-gray-100 font-semibold bg-gray-100">
                                         <span>{% trans "Task List" %}</span>
                                     </div>

hypha/templates/includes/user_menu.html

@@ -2,11 +2,11 @@
 
 {% if request.user.is_authenticated %}
     <div x-data="{ show: false }" class="relative flex">
-        <button x-on:click="show = ! show" class="button button--narrow font-bold text-center flex items-center justify-center px-2 hover:bg-black hover:text-white active:bg-black active:text-white focus:bg-black focus:text-white" type="button">
+        <button x-on:click="show = ! show" class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm" type="button">
             {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 me-1" aria_hidden=true %}
             <span>{{ request.user }}</span>
         </button>
-        <div x-show="show" x-transition @click.outside="show = false" class="min-w-36 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10">
+        <div x-show="show" x-transition @click.outside="show = false" class="min-w-40 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10">
             <a href="{% url 'users:account' %}" title="Goto your account" class="pr-4 py-3 block text-black pl-3
                                                                                  focus-visible:outline-dashed outline-1 transition-colors border-r
                                                                                  hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">