fix(ui): font styles in dapp tx summary LW-9887

input-output-hk · Mar 21, 2024 · d1cb93d · d1cb93d
1 parent 0dcd03b
commit d1cb93d
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 25 deletions.
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss
@@ -1,18 +1,23 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/_typography.scss';
 
-.address {
-  display: flex;
-  justify-content: space-between;
-  padding: size_unit(2.5) 0;
+.label {
+  color: var(--text-color-primary, #ffffff) !important;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.addressInfo {
+.value {
   color: var(--text-color-primary, #ffffff) !important;
-  font-size: medium;
+  font-size: 14px;
   font-weight: 500;
 }
 
+.address {
+  display: flex;
+  justify-content: space-between;
+  padding: size_unit(2.5) 0;
+}
 
 .summaryContent {
   padding-bottom: size_unit(2.5);

diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
@@ -9,6 +9,7 @@ import styles from './DappAddressSections.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 
 import { TransactionAssets, SummaryExpander, DappTransactionSummary } from '@lace/ui';
+import classNames from 'classnames';
 
 interface GroupedAddressAssets {
   nfts: Array<AssetInfoWithAmount>;
@@ -113,20 +114,20 @@ export const DappAddressSections = ({
           {[...groupedFromAddresses.entries()].map(([address, addressData]) => (
             <>
               <div key={address} className={styles.address}>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-from-address-title">
+                <Text className={styles.label} data-testid="dapp-transaction-from-address-title">
                   {t('package.core.dappTransaction.address')}
                 </Text>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-from-address-address">
+                <Text className={styles.value} data-testid="dapp-transaction-from-address-address">
                   {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                 </Text>
               </div>
               {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-tokens-title">
+                    <Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
                       {t('package.core.dappTransaction.tokens')}
                     </Title>
-                    <Title level={5}>
+                    <Title level={5} className={styles.value}>
                       -{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
                     </Title>
                   </div>
@@ -164,20 +165,20 @@ export const DappAddressSections = ({
           {[...groupedToAddresses.entries()].map(([address, addressData]) => (
             <>
               <div key={address} className={styles.address}>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-to-address-title">
+                <Text className={styles.label} data-testid="dapp-transaction-to-address-title">
                   {t('package.core.dappTransaction.address')}
                 </Text>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-to-address">
+                <Text className={styles.value} data-testid="dapp-transaction-to-address">
                   {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                 </Text>
               </div>
               {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-tokens-title">
+                    <Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
                       {t('package.core.dappTransaction.tokens')}
                     </Title>
-                    <Title level={5} className={styles.positiveAmount}>
+                    <Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
                       {getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
                     </Title>
                   </div>
@@ -195,10 +196,10 @@ export const DappAddressSections = ({
               {addressData.nfts.length > 0 && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-nfts-title">
+                    <Title level={5} className={styles.label} data-testid="dapp-transaction-nfts-title">
                       {t('package.core.dappTransaction.nfts')}
                     </Title>
-                    <Title level={5} className={styles.positiveAmount}>
+                    <Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
                       {addressData.nfts.length} {itemsCountCopy}
                     </Title>
                   </div>

diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss b/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss
@@ -11,7 +11,6 @@
 }
 
 .feeContainer {
-  opacity: 50%;
   padding-bottom: size_unit(2.5);
 }
 

diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx
@@ -78,7 +78,7 @@ export const TransactionAssets = ({
             alignItems="center"
             className={styles.balanceDetailContainer}
           >
-            <Typography.Body.Normal
+            <Typography.Body.Small
               className={classNames(styles.label, {
                 [styles.positiveBalance]: !isNegativeBalance,
                 [styles.negativeBalance]: isNegativeBalance,
@@ -87,7 +87,7 @@ export const TransactionAssets = ({
               <span data-testid={testId}>
                 {balance} {tokenName}
               </span>
-            </Typography.Body.Normal>
+            </Typography.Body.Small>
           </Flex>
         </Cell>
       </Grid>

diff --git a/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx b/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
@@ -39,15 +39,15 @@ export const TransactionSummary = ({
         </Cell>
         <Cell>
           <Flex justifyContent="flex-end">
-            <Typography.Body.Normal
+            <Typography.Body.Small
               className={classNames(styles.label, {
                 [styles.positiveBalance]: !transactionAmount.includes('-'),
                 [styles.negativeBalance]: transactionAmount.includes('-'),
               })}
               data-testId="dapp-transaction-amount-value"
             >
               {transactionAmount} {cardanoSymbol}
-            </Typography.Body.Normal>
+            </Typography.Body.Small>
           </Flex>
         </Cell>
       </Grid>

diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx b/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
+import classNames from 'classnames';
 
 import { Box } from '../box';
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { Tooltip } from '../tooltip';
 import * as Typography from '../typography';
-import classNames from 'classnames';
 
 import * as cx from './transaction-summary.css';
 

diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts b/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts
@@ -2,12 +2,13 @@ import { sx, style } from '../../design-tokens';
 
 export const label = sx({
   color: '$transaction_summary_label_color',
-  fontWeight: '$semibold',
+  fontWeight: '$bold',
 });
 
 export const text = style([
   sx({
-    fontWeight: '$medium',
+    color: '$transaction_summary_label_color',
+    fontWeight: '$semibold',
   }),
   {
     wordBreak: 'break-all',
@@ -17,7 +18,7 @@ export const text = style([
 export const secondaryText = style([
   sx({
     color: '$transaction_summary_secondary_label_color',
-    fontWeight: '$medium',
+    fontWeight: '$semibold',
   }),
   {
     wordBreak: 'break-all',
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ @@
     }
     .feeContainer {
-      opacity: 50%;
       padding-bottom: size_unit(2.5);
     }
@@ Expand Down @@