From 55f5af54ca1d9f9495a50203f94691a1a886ac9e Mon Sep 17 00:00:00 2001
From: ShirayukiRin <ShirashimiLin@gmail.com>
Date: Sat, 8 Feb 2025 10:41:48 +0800
Subject: [PATCH 1/2] update the highlight effect display for the confirm popup

---
 src/ts/component/popup/confirm.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/ts/component/popup/confirm.tsx b/src/ts/component/popup/confirm.tsx
index 848529045e..b30739bfba 100644
--- a/src/ts/component/popup/confirm.tsx
+++ b/src/ts/component/popup/confirm.tsx
@@ -7,7 +7,7 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 
 	refButtons: any = null;
 	refCheckbox: any = null;
-	n = 0;
+	n: number = null;
 
 	constructor (props: I.Popup) {
 		super(props);
@@ -16,6 +16,7 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 		this.onConfirm = this.onConfirm.bind(this);
 		this.onCancel = this.onCancel.bind(this);
 		this.onMouseEnter = this.onMouseEnter.bind(this);
+		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.setHighlight = this.setHighlight.bind(this);
 	};
 
@@ -50,8 +51,8 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 				) : ''}
 
 				<div ref={ref => this.refButtons = ref} className="buttons">
-					{canConfirm ? <Button text={textConfirm} color={colorConfirm} className="c36" onClick={this.onConfirm} onMouseEnter={this.onMouseEnter} /> : ''}
-					{canCancel ? <Button text={textCancel} color={colorCancel} className="c36" onClick={this.onCancel} onMouseEnter={this.onMouseEnter} /> : ''}
+					{canConfirm ? <Button text={textConfirm} color={colorConfirm} className="c36" onClick={this.onConfirm} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} /> : ''}
+					{canCancel ? <Button text={textCancel} color={colorCancel} className="c36" onClick={this.onCancel} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} /> : ''}
 				</div>
 
 				<Error text={error} />
@@ -104,6 +105,12 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 				return;
 			};
 
+			if (this.n === null) {
+				this.n = 0;
+				this.setHighlight();
+				return;
+			}
+
 			this.n += dir;
 			if (this.n < 0) {
 				this.n = buttons.length - 1;
@@ -160,6 +167,17 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 		this.setHighlight();
 	};
 
+	onMouseLeave (e: any) {
+		const buttons = $(this.refButtons).find('.button');
+		this.n = $(buttons).index(e.currentTarget);
+
+		if (buttons[this.n]) {
+			$(this.refButtons).find('.hover').removeClass('hover');
+		};
+
+		this.n = null;
+	}
+
 	setHighlight () {
 		const buttons = $(this.refButtons).find('.button');
 

From 5606587ea88793db6c313330c9fa1ac5836e242b Mon Sep 17 00:00:00 2001
From: ShirayukiRin <ShirashimiLin@gmail.com>
Date: Sat, 8 Feb 2025 22:04:38 +0800
Subject: [PATCH 2/2] refactoring

---
 src/ts/component/popup/confirm.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/ts/component/popup/confirm.tsx b/src/ts/component/popup/confirm.tsx
index b30739bfba..9b152718c8 100644
--- a/src/ts/component/popup/confirm.tsx
+++ b/src/ts/component/popup/confirm.tsx
@@ -168,12 +168,7 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 	};
 
 	onMouseLeave (e: any) {
-		const buttons = $(this.refButtons).find('.button');
-		this.n = $(buttons).index(e.currentTarget);
-
-		if (buttons[this.n]) {
-			$(this.refButtons).find('.hover').removeClass('hover');
-		};
+		$(e.currentTarget).removeClass('hover');
 
 		this.n = null;
 	}