fix: Click current network button to switch type.

nervosnetwork · Nov 8, 2023 · d127ac3 · d127ac3
1 parent 743fbd4
commit d127ac3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -105,19 +105,19 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
                 <p>{`${network.name} (${network.remote})`}</p>
                 <Tooltip
                   tip={
-                    <button type="button" onClick={onSwitchNetworkType} className={styles.switchBtn}>
+                    <div className={styles.tooltip}>
                       {t('settings.network.switch-network-type', {
                         type: network.chain === LIGHT_CLIENT_MAINNET ? 'testnet' : 'mainnet',
                       })}
-                    </button>
+                    </div>
                   }
                   placement="top"
                   showTriangle
                 >
-                  <div className={styles.tag}>
+                  <button type="button" className={styles.tag} onClick={onSwitchNetworkType}>
                     {t(getNetworkLabelI18nkey(network.chain))}
                     <Switch />
-                  </div>
+                  </button>
                 </Tooltip>
               </div>
             ) : (

diff --git a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
@@ -27,15 +27,27 @@
     border-radius: 40px;
     display: flex;
     align-items: center;
+    cursor: default;
 
     & > svg {
       margin-left: 4px;
     }
   }
-  .switchBtn {
-    border: none;
-    background-color: transparent;
+  button.tag {
     cursor: pointer;
+    &:hover {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+
+      & > svg {
+        path {
+          fill: var(--primary-color);
+        }
+      }
+    }
+  }
+  .tooltip {
+    background-color: transparent;
     color: var(--main-text-color);
   }
 }