feat: Make Mulsig Addresses's More button more intuitive (#3203)

nervosnetwork · Jul 9, 2024 · 79df3c0 · 79df3c0
1 parent 88859a3
commit 79df3c0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
@@ -29,6 +29,7 @@ import {
   Edit,
   Confirming,
   Question,
+  LineDownArrow,
 } from 'widgets/Icons/icon'
 import AttentionCloseDialog from 'widgets/Icons/Attention.png'
 import { HIDE_BALANCE, NetworkType } from 'utils/const'
@@ -400,6 +401,7 @@ const MultisigAddress = () => {
                       <div className={styles.action}>
                         <Tooltip
                           tipClassName={styles.tip}
+                          className={styles.tipContent}
                           tip={
                             <div className={styles.actionOptions}>
                               {(!multisigBanlances[item.fullPayload] || multisigBanlances[item.fullPayload] === '0'
@@ -422,7 +424,10 @@ const MultisigAddress = () => {
                           trigger="click"
                           showTriangle
                         >
-                          <div className={styles.hoverBtn}>{t('multisig-address.table.more')}</div>
+                          <div className={styles.hoverBtn}>
+                            {t('multisig-address.table.more')}
+                            <LineDownArrow className={styles.expand} />
+                          </div>
                         </Tooltip>
                       </div>
                     )

diff --git a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
@@ -144,8 +144,36 @@
     padding-right: 30px;
     &:hover {
       color: var(--primary-color);
+      .expand {
+        path {
+          stroke: var(--primary-color);
+        }
+      }
+    }
+  }
+
+  .expand {
+    margin-left: 2px;
+    width: 12px;
+    path {
+      stroke: var(--secondary-text-color);
     }
   }
+
+  .tipContent {
+    &[data-tip-show='true'] {
+      .hoverBtn {
+        color: var(--primary-color);
+      }
+      .expand {
+        transform: rotate(180deg);
+        path {
+          stroke: var(--primary-color);
+        }
+      }
+    }
+  }
+
   .action {
     padding-right: 20px;
     .tip {