fix: Fix asset send styles, dialog style and enable enter signature

nervosnetwork · Oct 8, 2023 · 4b36eeb · 4b36eeb
1 parent fea5df2
commit 4b36eeb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/packages/neuron-ui/src/components/SUDTSend/index.tsx b/packages/neuron-ui/src/components/SUDTSend/index.tsx
@@ -353,11 +353,13 @@ const SUDTSend = () => {
           <div className={styles.left}>
             <div className={styles.info}>
               <SUDTAvatar type="logo" />
-              <div>
+              <div className={styles.infoDetails}>
                 <div className={styles.accountName}>{accountInfo?.accountName}</div>
                 <div className={styles.tokenName}>{displayTokenName}</div>
                 <div className={styles.balance}>
-                  {showBalance ? balance : HIDE_BALANCE} {displaySymbol}
+                  <span>
+                    {showBalance ? balance : HIDE_BALANCE} {displaySymbol}
+                  </span>
                   <Button className={styles.btn} type="text" onClick={() => setShowBalance(prev => !prev)}>
                     {showBalance ? <EyesOpen /> : <EyesClose />}
                   </Button>

diff --git a/packages/neuron-ui/src/components/SUDTSend/sUDTSend.module.scss b/packages/neuron-ui/src/components/SUDTSend/sUDTSend.module.scss
@@ -20,19 +20,25 @@ $bottomHeight: 186px;
   }
 }
 
+$right-min-width: 476px;
+
 .layout {
   display: flex;
 
   .left {
     flex: 1;
     position: relative;
+    max-width: calc(100% - $right-min-width);
 
     .info {
       padding: 20px 16px 16px;
       @include card;
       display: flex;
       gap: 16px;
       color: var(--main-text-color);
+      .infoDetails {
+        max-width: calc(100% - 48px);
+      }
       .accountName {
         font-weight: 500;
         font-size: 14px;
@@ -42,10 +48,9 @@ $bottomHeight: 186px;
         margin-top: 4px;
         font-size: 12px;
         line-height: 17px;
-        overflow: initial !important;
         position: relative;
         color: var(--input-second-color);
-        display: inline-flex;
+        @include text-overflow-ellipsis;
       }
       .balance {
         margin-top: 8px;
@@ -54,10 +59,14 @@ $bottomHeight: 186px;
         line-height: 22px;
         display: flex;
         align-items: center;
+        & > span {
+          @include text-overflow-ellipsis;
+        }
         .btn {
           height: 16px;
           min-width: 16px;
           padding: 0 8px;
+          flex-shrink: 0;
           svg {
             g,
             path {
@@ -106,6 +115,10 @@ $bottomHeight: 186px;
       }
       .amount {
         margin-top: 20px;
+
+        & > label {
+          @include text-overflow-ellipsis;
+        }
       }
       .max {
         border-left: var(--divide-line-color) solid 1px;
@@ -162,6 +175,7 @@ $bottomHeight: 186px;
   .right {
     margin-left: 16px;
     flex: 1;
+    min-width: $right-min-width;
     @include card;
 
     .rightContent {

diff --git a/packages/neuron-ui/src/components/SignAndVerify/index.tsx b/packages/neuron-ui/src/components/SignAndVerify/index.tsx
@@ -316,7 +316,6 @@ const SignAndVerify = () => {
             field="signature"
             value={signature}
             onChange={handleInputChange}
-            disabled={!signature}
             width="100%"
           />
 

diff --git a/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss b/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss
@@ -58,6 +58,7 @@
 
 .footerWrap {
   height: 104px;
+  position: relative;
 }
 
 .footer {