From aaaebb522031b97e30416c503dca7bc94ee145b1 Mon Sep 17 00:00:00 2001
From: bowen628 <bowen628@noreply.gitcode.com>
Date: Thu, 19 Mar 2026 11:40:42 +0800
Subject: [PATCH 1/2] feat: update bot verbose mode buttom ui

---
 .../RemoteConnectDialog.scss                  | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index 93abc55b..82929a89 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -460,27 +460,24 @@
 .bitfun-remote-connect__mode-selector {
   display: inline-flex;
   align-items: center;
-  gap: 0;
   padding: 3px;
-  background: var(--element-bg-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
+  background: $element-bg-subtle;
+  border-radius: 16px;
 }
 
 .bitfun-remote-connect__mode-btn {
-  padding: 6px 14px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-muted);
+  padding: 4px 10px;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  color: $color-text-muted;
   background: transparent;
   border: none;
-  border-radius: 6px;
+  border-radius: 13px;
   cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
+  transition: all $motion-fast $easing-standard;
 
-  &:hover:not(:disabled) {
-    color: var(--color-text-secondary);
+  &:hover:not(:disabled):not(.is-active) {
+    color: $color-text-secondary;
   }
 
   &:disabled {
@@ -488,13 +485,13 @@
   }
 
   &.is-active {
-    background: var(--color-accent-600, #2563eb);
-    color: #fff;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    color: #ffffff;
+    background: $color-success;
+    font-weight: $font-weight-medium;
   }
 
   &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--color-accent-500, #3b82f6) 55%, transparent);
+    outline: 2px solid rgba($color-success, 0.5);
     outline-offset: 1px;
   }
 }

From 16a25cace1bb2efc77ce555b4d5f1d018a130623 Mon Sep 17 00:00:00 2001
From: bowen628 <bowen628@noreply.gitcode.com>
Date: Thu, 19 Mar 2026 13:37:57 +0800
Subject: [PATCH 2/2] feat: update bot mode switch css

---
 .../RemoteConnectDialog.scss                  | 24 +++++++++----------
 .../RemoteConnectDialog.tsx                   |  6 ++---
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index 82929a89..84a8bd99 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -461,33 +461,33 @@
   display: inline-flex;
   align-items: center;
   padding: 3px;
-  background: $element-bg-subtle;
-  border-radius: 16px;
+  background: $element-bg-base;
+  border: 1px solid $border-subtle;
+  border-radius: 20px;
 }
 
 .bitfun-remote-connect__mode-btn {
-  padding: 4px 10px;
+  padding: 5px 14px;
   font-size: $font-size-xs;
   font-weight: $font-weight-medium;
   color: $color-text-muted;
   background: transparent;
   border: none;
-  border-radius: 13px;
+  border-radius: 17px;
   cursor: pointer;
   transition: all $motion-fast $easing-standard;
 
-  &:hover:not(:disabled):not(.is-active) {
-    color: $color-text-secondary;
-  }
-
-  &:disabled {
-    cursor: default;
+  &:hover:not(.is-active) {
+    color: $color-text-primary;
+    background: $element-bg-subtle;
   }
 
   &.is-active {
-    color: #ffffff;
+    color: #fff;
     background: $color-success;
-    font-weight: $font-weight-medium;
+    font-weight: $font-weight-semibold;
+    box-shadow: 0 1px 4px rgba(110, 184, 140, 0.35);
+    cursor: default;
   }
 
   &:focus-visible {
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
index 8dc572fe..36323e0d 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
@@ -524,16 +524,14 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
             <button
               type="button"
               className={`bitfun-remote-connect__mode-btn ${!botVerboseMode ? 'is-active' : ''}`}
-              onClick={handleToggleBotVerboseMode}
-              disabled={!botVerboseMode}
+              onClick={botVerboseMode ? handleToggleBotVerboseMode : undefined}
             >
               {t('remoteConnect.botConciseMode')}
             </button>
             <button
               type="button"
               className={`bitfun-remote-connect__mode-btn ${botVerboseMode ? 'is-active' : ''}`}
-              onClick={handleToggleBotVerboseMode}
-              disabled={botVerboseMode}
+              onClick={!botVerboseMode ? handleToggleBotVerboseMode : undefined}
             >
               {t('remoteConnect.botVerboseMode')}
             </button>