From 919fd8b00d572ed97e2834452b2441357b0b3570 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 9 Apr 2024 17:28:19 +0800
Subject: [PATCH] refactor(console): improve switch button styles (#5655)

---
 .../SettingsSection/index.module.scss         | 21 ++++++++++++++++---
 .../TenantMembers/index.module.scss           | 18 +++++++++-------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss
index 194168eb7..15da6e3d6 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss
@@ -11,9 +11,12 @@
     display: flex;
     align-items: center;
     border-radius: 100px;
+    height: 34px;
     color: var(--color-text);
     background: var(--color-layer-1);
-    border: 1px solid var(--color-specific-selected-disabled);
+    border: 1px solid var(--color-surface-5);
+    padding: 0 _.unit(3);
+    transition: none;
 
     svg {
       width: 16px;
@@ -22,15 +25,27 @@
       color: var(--color-text-link);
     }
 
-    &.active,
-    &:hover {
+    &:active {
+      background: var(--color-overlay-primary-pressed);
+    }
+
+    &:not(:disabled):not(:active):hover {
+      background: var(--color-overlay-primary-hover);
+    }
+
+    &.active {
       background: var(--color-inverse-primary);
       color: var(--color-white);
       border-color: var(--color-inverse-primary);
+      cursor: default;
 
       svg {
         color: var(--color-button-icon);
       }
+
+      &:not(:disabled):not(:active):hover {
+        background: var(--color-inverse-primary);
+      }
     }
   }
 }
diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
index f90c51781..ab0e1e9a2 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
@@ -16,23 +16,25 @@
 
     .button {
       border-radius: 100px;
-      border-color: var(--color-specific-focused-inside);
-      background: none;
-      height: 32px;
+      border-color: var(--color-surface-5);
+      background: var(--color-layer-1);
+      height: 34px;
       padding: 0 _.unit(3);
+      transition: none;
 
       svg {
         color: var(--color-text-link);
       }
 
-      &:hover {
-        background: var(--color-overlay-primary-hover);
-      }
-
       &:active {
         background: var(--color-overlay-primary-pressed);
       }
 
+      &:not(:disabled):not(:active):hover {
+        background: var(--color-overlay-primary-hover);
+      }
+
+
       &.active {
         background: var(--color-specific-tag-upsell);
         border-color: var(--color-specific-tag-upsell);
@@ -43,7 +45,7 @@
           color: var(--color-specific-button-icon);
         }
 
-        &:hover {
+        &:not(:disabled):not(:active):hover {
           background: var(--color-specific-tag-upsell);
         }
       }