Fix floating modal content styles

dappforce · Jan 16, 2024 · 51b1ce1 · 51b1ce1
1 parent 58338a5
commit 51b1ce1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/txHistory/transactions/MobileTransferModal.tsx b/src/components/txHistory/transactions/MobileTransferModal.tsx
@@ -8,6 +8,7 @@ import { AccountPreview, AvatarOrSkeleton } from '@/components/table/utils'
 import { CopyAddress } from '../../homePage/address-views/utils/index'
 import { toShortAddress } from '../../utils/index'
 import Link from 'next/link'
+import clsx from 'clsx'
 
 type TransferInfo = {
   icon: string
@@ -64,11 +65,13 @@ const MobileTransferModal = ({
     >
       <div className={styles.ModalContent}>
         <div className={styles.TxContent}>
-          <div className={styles[`Tokens-${isRecieved ? 'Recieved' : 'Send'}`]}>
-            {isRecieved ? '+' : '-'}
-            {balance}
+          <div>
+            <div className={styles[`Tokens-${isRecieved ? 'Recieved' : 'Send'}`]}>
+              {isRecieved ? '+' : '-'}
+              {balance}
+            </div>
+            <div className={clsx(styles.BalanceInDollar, 'mt-1')}>{totalBalance}</div>
           </div>
-          <div className={styles.BalanceInDollar}>{totalBalance}</div>
           <div className={styles.SenderBlock}>
             <div>
               <span className={styles.GrayLabel}>Sender</span>
@@ -91,13 +94,13 @@ const MobileTransferModal = ({
             </div>
             <div>
               <span className={styles.GrayLabel}>Network</span>
-              <span>
+              <span className='d-flex align-items-center'>
                 <AvatarOrSkeleton
                   icon={icon}
                   size={24}
                   className='align-items-start flex-shrink-none'
                 />
-                <span className='ml-2 font-weight-semibold'>{networkName}</span>
+                <span className='ml-2 font-weight-semibold text-black'>{networkName}</span>
               </span>
             </div>
           </div>

diff --git a/src/components/txHistory/transactions/Transactions.module.sass b/src/components/txHistory/transactions/Transactions.module.sass
@@ -71,7 +71,6 @@
     width: 100%
     display: flex
     justify-content: space-between
-    gap: $space_mini
 
 .GrayLabel
   color: #888
@@ -100,16 +99,18 @@
 
 .BalanceInDollar
   font-size: $font_normal
-  color: #64748B
   line-height: 25.144px
 
+  span
+    color: #64748B
+
 .Date
   color: #64748B
   line-height: 25.144px
   margin-top: $space_tiny
 
 .EllipsisPreview
-  max-width: 168px 
+  max-width: 168px
   display: block
   white-space: nowrap
   overflow: hidden