From 16224ebd33d251f9903407d648d82481527e3e1b Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Fri, 12 Jul 2024 11:12:51 +0000
Subject: [PATCH] ui: use alt bg color for labels in hovered menu items (#4458)

A followup for https://codeberg.org/forgejo/forgejo/pulls/2935.
Re-use the alt bg color for labels inside menu items that are hovered, to keep the label box visible.

Preview: https://codeberg.org/attachments/d649b2d9-0838-49af-be6a-766de2faf52e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4458
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
---
 web_src/css/base.css                        | 3 ++-
 web_src/js/components/DashboardRepoList.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 0fddf97c63..8f75a63cd0 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1185,7 +1185,8 @@ svg.text.purple,
   color: var(--color-label-text);
 }
 
-.ui.menu .active.item > .label {
+.ui.menu .active.item > .label,
+.ui.menu.tabs-with-labels .item:hover > .label {
   background: var(--color-label-bg-alt, var(--color-label-bg));
 }
 
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 4e79b2f28d..548324b4b8 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -339,7 +339,7 @@ export default sfc; // activate the IDE's Vue plugin
 </script>
 <template>
   <div>
-    <div v-if="!isOrganization" class="ui secondary stackable menu">
+    <div v-if="!isOrganization" class="ui secondary stackable menu tabs-with-labels">
       <a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textMyRepos }} <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span></a>
       <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textMyOrgs }} <span class="ui grey label tw-ml-2">{{ organizationsTotalCount }}</span></a>
     </div>