fix: Small visual adjustments

safe-global · Sep 14, 2023 · d0e7f09 · d0e7f09
1 parent 3f03923
commit d0e7f09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/src/components/common/TokenAmount/index.tsx b/src/components/common/TokenAmount/index.tsx
@@ -27,11 +27,11 @@ const TokenAmount = ({
   const amount = decimals ? formatVisualAmount(value, decimals) : value
 
   return (
-    <span className={classNames(css.container, { [css.verticalAlign]: logoUri, [hdCss.method]: logoUri })}>
+    <strong className={classNames(css.container, { [css.verticalAlign]: logoUri, [hdCss.method]: logoUri })}>
       {logoUri && <TokenIcon logoUri={logoUri} tokenSymbol={tokenSymbol} fallbackSrc={fallbackSrc} size={size} />}
       {sign}
       {amount} {tokenSymbol}
-    </span>
+    </strong>
   )
 }
 

diff --git a/src/components/transactions/HumanDescription/index.tsx b/src/components/transactions/HumanDescription/index.tsx
@@ -1,14 +1,14 @@
-import { Typography } from '@mui/material'
 import {
   type RichAddressFragment,
   type RichDecodedInfo,
   type RichTokenValueFragment,
   RichFragmentType,
 } from '@safe-global/safe-gateway-typescript-sdk/dist/types/human-description'
 import EthHashInfo from '@/components/common/EthHashInfo'
-import TokenIcon from '@/components/common/TokenIcon'
 import css from './styles.module.css'
 import useAddressBook from '@/hooks/useAddressBook'
+import TokenAmount from '@/components/common/TokenAmount'
+import React from 'react'
 
 const AddressFragment = ({ fragment }: { fragment: RichAddressFragment }) => {
   const addressBook = useAddressBook()
@@ -21,23 +21,20 @@ const AddressFragment = ({ fragment }: { fragment: RichAddressFragment }) => {
 }
 
 const TokenValueFragment = ({ fragment }: { fragment: RichTokenValueFragment }) => {
-  const address = (
-    <>
-      <TokenIcon logoUri={fragment.logoUri || undefined} tokenSymbol={fragment.symbol || undefined} size={20} />
-      {fragment.symbol}
-    </>
-  )
-
   return (
-    <Typography className={css.value}>
-      {fragment.value} {address}
-    </Typography>
+    <TokenAmount
+      value={fragment.value}
+      direction={undefined}
+      logoUri={fragment.logoUri || undefined}
+      tokenSymbol={fragment.symbol || undefined}
+      size={20}
+    />
   )
 }
 
 export const HumanDescription = ({ fragments }: RichDecodedInfo) => {
   return (
-    <div className={css.wrapper}>
+    <>
       {fragments.map((fragment) => {
         switch (fragment.type) {
           case RichFragmentType.Text:
@@ -48,6 +45,6 @@ export const HumanDescription = ({ fragments }: RichDecodedInfo) => {
             return <TokenValueFragment fragment={fragment} />
         }
       })}
-    </div>
+    </>
   )
 }
diff --git a/src/components/transactions/HumanDescription/styles.module.css b/src/components/transactions/HumanDescription/styles.module.css
@@ -18,7 +18,6 @@
 }
 
 .method {
-  font-weight: bold;
   display: inline-flex;
   align-items: center;
   gap: 0.5em;