From 19d942a070b7b9af3f2b72248cde6a8c53f44572 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Fri, 24 Jan 2025 04:14:31 +0800
Subject: [PATCH] Fix stop generation button UI (#3011)
* fix stop generation button ui
* keep action color theme and match rest of the UI
rescale button to be consistent with UI
---------
Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
.../PromptInput/StopGenerationButton/index.jsx | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
index 6d0f09193..bce3c6842 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
@@ -13,7 +13,7 @@ export default function StopGenerationButton() {
onClick={emitHaltEvent}
data-tooltip-id="stop-generation-button"
data-tooltip-content="Stop generating response"
- className="border-none text-white/60 cursor-pointer group"
+ className="border-none text-white/60 cursor-pointer group -mr-1.5 mt-1.5"
aria-label="Stop generating"
>
<svg
@@ -22,21 +22,23 @@ export default function StopGenerationButton() {
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
+ style={{ transform: "scale(1.3)" }}
+ className="opacity-60 group-hover:opacity-100 light:opacity-100 light:group-hover:opacity-60"
>
<circle
- className="group-hover:stroke-primary-button stroke-white"
cx="10"
cy="10.562"
r="9"
strokeWidth="2"
+ className="group-hover:stroke-primary-button stroke-white light:stroke-theme-text-secondary"
/>
<rect
- className="group-hover:fill-primary-button fill-white"
x="6.3999"
y="6.96204"
width="7.2"
height="7.2"
rx="2"
+ className="group-hover:fill-primary-button fill-white light:fill-theme-text-secondary"
/>
</svg>
</button>
@@ -44,7 +46,7 @@ export default function StopGenerationButton() {
id="stop-generation-button"
place="bottom"
delayShow={300}
- className="tooltip !text-xs invert"
+ className="tooltip !text-xs z-99 -ml-1"
/>
</>
);
--
GitLab