Fix: style issue in balance module

.github/workflows/package.yml

@@ -4,8 +4,8 @@ on:
   push:
     branches:
       - master
-      - 'rc/**'
-      - 'hotfix/**'
+      - "rc/**"
+      - "hotfix/**"
 
 jobs:
   default:
@@ -35,7 +35,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: Restore
         uses: actions/cache@v3
@@ -49,7 +49,7 @@ jobs:
         if: matrix.os == 'windows-2019'
         uses: microsoft/setup-msbuild@v1.3.1
         env:
-          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: "true"
 
       - name: Install libudev
         if: matrix.os == 'ubuntu-20.04'
@@ -60,7 +60,7 @@ jobs:
       - name: Install Lerna
         run: yarn global add lerna
 
-      - name: Boostrap
+      - name: Bootstrap
         run: |
           yarn
         env:

.github/workflows/package_for_test.yml

@@ -1,6 +1,6 @@
 name: Package Neuron for Test
 
-on: 
+on:
   pull_request:
   push:
 
@@ -35,7 +35,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: Restore
         uses: actions/cache@v3
@@ -49,7 +49,7 @@ jobs:
         if: matrix.os == 'windows-2019'
         uses: microsoft/setup-msbuild@v1.3.1
         env:
-          ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: "true"
 
       - name: Install libudev
         if: matrix.os == 'ubuntu-20.04'
@@ -60,7 +60,7 @@ jobs:
       - name: Install Lerna
         run: yarn global add lerna
 
-      - name: Boostrap
+      - name: Bootstrap
         run: |
           yarn
         env:

.github/workflows/unit_tests.yml

@@ -51,7 +51,7 @@ jobs:
       - name: Install Lerna
         run: yarn global add lerna
 
-      - name: Boostrap
+      - name: Bootstrap
         run: |
           yarn
           yarn build

packages/neuron-ui/src/components/Overview/index.tsx

@@ -94,7 +94,7 @@ const TransactionStatus = ({
   }
   return (
     <div className={styles.txStatus} data-status={status}>
-      {status === 'confirming' ? <Confirming /> : null}
+      {status === 'confirming' ? <Confirming className={styles.confirming} /> : null}
       <span>{t(`overview.statusLabel.${status}`)}</span>
       {confirmations ? <span className={styles.confirmText}>{confirmations}</span> : null}
     </div>
@@ -255,9 +255,13 @@ const Overview = () => {
             {showBalance && <PasswordShow onClick={onChangeShowBalance} className={styles.balanceIcon} />}
             {!!showBalance || <PasswordHide onClick={onChangeShowBalance} className={styles.balanceIcon} />}
           </span>
-          <CopyZone content={shannonToCKBFormatter(balance, false, '')} className={styles.copyBalance}>
-            <span className={styles.balanceValue}>{showBalance ? shannonToCKBFormatter(balance) : HIDE_BALANCE}</span>
-          </CopyZone>
+          {showBalance ? (
+            <CopyZone content={shannonToCKBFormatter(balance, false, '')} className={styles.copyBalance}>
+              <span className={styles.balanceValue}>{shannonToCKBFormatter(balance)}</span>
+            </CopyZone>
+          ) : (
+            <span className={styles.balanceValue}>{HIDE_BALANCE}</span>
+          )}
           <span className={styles.balanceUnit}>CKB</span>
           <BalanceSyncIcon connectionStatus={connectionStatus} syncStatus={syncStatus} />
           <BalanceRight className={styles.backgroundImg} />

packages/neuron-ui/src/components/Overview/overview.module.scss

@@ -1,5 +1,6 @@
 @import '../../styles/mixin.scss';
 @import '../../styles/theme.scss';
+@import '../../styles/animation.scss';
 
 .mid {
   height: 200px;
@@ -23,12 +24,10 @@
       right: 0px;
     }
 
-    & > .copyBalance {
-      .balanceValue {
-        font-family: 'D-DIN-PRO';
-        font-weight: 500;
-        font-size: 36px;
-      }
+    .balanceValue {
+      font-family: 'D-DIN-PRO';
+      font-weight: 500;
+      font-size: 36px;
     }
 
     & > .balanceUnit {
@@ -89,6 +88,10 @@
   position: relative;
   align-items: center;
 
+  .confirming {
+    @include infinite-rotation;
+  }
+
   .confirmText {
     color: #999;
     font-size: 12px;

packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss

@@ -3,6 +3,7 @@
 .container {
   position: relative;
   display: inline-block;
+  padding: 0 5px;
 
   .hoverShow {
     position: absolute;
@@ -21,15 +22,21 @@
     white-space: nowrap;
     border-radius: 16px;
     z-index: 10;
-
-    & > svg {
-      margin-right: 4px;
-    }
   }
 
   &:hover {
     .hoverShow {
       display: flex;
+      container-type: inline-size;
+      container-name: tips;
+
+      .copytext {
+        margin-left: 4px;
+        @container tips  ( max-width : 72px ) {
+          display: none;
+        }
+      }
+
       .copyIcon {
         visibility: visible;
       }

packages/neuron-ui/src/widgets/CopyZone/index.tsx

@@ -36,7 +36,7 @@ const CopyZone = ({ children, content, name, style, className = '' }: CopyZonePr
       {children}
       <div className={styles.hoverShow}>
         {copied ? <SuccessNoBorder className={styles.copyIcon} /> : <Copy className={styles.copyIcon} />}
-        {prompt}
+        <span className={styles.copytext}>{prompt}</span>
       </div>
     </div>
   )