From 21c3513d494724d7262c746836dd3258e225b44f Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Mon, 16 Oct 2023 16:15:15 +0800
Subject: [PATCH] Improve dropdown button alignment and fix hover bug (#27632)
 (#27637)

Backport #27632 by @wxiaoguang

1. fix #27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/devtest/gitea-ui.tmpl | 9 +++++++++
 web_src/css/base.css            | 2 +-
 web_src/css/modules/button.css  | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index fa74ed7ce6..73293ddf48 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -250,6 +250,15 @@
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			</div>
 		</div>
+
+		<div>
+			<hr>
+			<div class="ui tiny button">Button align with ...</div>
+			<div class="ui dropdown tiny button">
+				<span class="text">... Dropdown Button</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+		</div>
 	</div>
 
 	<div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 1a4e9d16a1..87912179a4 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2194,7 +2194,7 @@ table th[data-sortt-desc] .svg {
   height: 15px;
 }
 
-.ui.dropdown {
+.ui.dropdown:not(.button) {
   line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
 }
 
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 0d30249c9c..36cb499aeb 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -128,11 +128,13 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.primary.button:focus,
 .ui.primary.buttons .button:focus {
   background: var(--color-primary);
+  color: var(--color-primary-contrast);
 }
 
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
   background: var(--color-primary-hover);
+  color: var(--color-primary-contrast);
 }
 
 .ui.primary.button:active,