From bc4bbd32ab1a7dcaa7349a871202510d4b8e900a Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 27 Aug 2024 18:26:36 +0700
Subject: [PATCH] fix: wrong classname icon (#3474)

* fix: fix wrong classname icon

* fix: button flashing on chat input
---
 web/containers/ModelDropdown/index.tsx                   | 5 ++++-
 web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx | 6 +++++-
 web/screens/Thread/ThreadLeftPanel/index.tsx             | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index 07c2cba3a..f8920a6dd 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -299,7 +299,10 @@ const ModelDropdown = ({
           <Badge
             theme="secondary"
             variant={open ? 'solid' : 'outline'}
-            className="cursor-pointer"
+            className={twMerge(
+              'cursor-pointer',
+              open && 'border border-transparent'
+            )}
             onClick={() => setOpen(!open)}
           >
             <span className="line-clamp-1 ">{selectedModel?.name}</span>
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index ff3f19e16..e3d469a97 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -388,7 +388,11 @@ const ChatInput = () => {
               <ModelDropdown chatInputMode />
               <Badge
                 theme="secondary"
-                className="flex cursor-pointer items-center gap-x-1"
+                className={twMerge(
+                  'flex cursor-pointer items-center gap-x-1',
+                  activeTabThreadRightPanel === 'model' &&
+                    'border border-transparent'
+                )}
                 variant={
                   activeTabThreadRightPanel === 'model' ? 'solid' : 'outline'
                 }
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
index 0b866ea26..67bc5db0c 100644
--- a/web/screens/Thread/ThreadLeftPanel/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -164,9 +164,9 @@ const ThreadLeftPanel = () => {
                   >
                     <PencilIcon
                       size={16}
-                      className="text-[hsla(var(--secondary))]"
+                      className="text-[hsla(var(--text-secondary))]"
                     />
-                    <span className="text-bold text-[hsla(var(--secondary))]">
+                    <span className="text-bold text-[hsla(var(--app-text-primary))]">
                       Edit title
                     </span>
                   </div>