From 7dc8fda7c565d042405338c346d0b988c627e09d Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 19 Jun 2024 22:01:22 +0200
Subject: [PATCH] Give the task bell the same hover state as the user menu
(#3992)
Fixes #3987
---
hypha/templates/base-apply.html | 6 +++---
hypha/templates/includes/user_menu.html | 4 ++--
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index bb5d7248b..30ca991e9 100644
--- a/hypha/templates/base-apply.html
+++ b/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>
diff --git a/hypha/templates/includes/user_menu.html b/hypha/templates/includes/user_menu.html
index bfec385a8..baf5a0bb3 100644
--- a/hypha/templates/includes/user_menu.html
+++ b/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">
--
GitLab