fix: use rem based font size for more predictable results

FuelLabs · Sep 19, 2024 · fb90831 · fb90831
1 parent e38c7f5
commit fb90831
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInputCoin/TxInputCoin.tsx
@@ -42,7 +42,11 @@ export const TxInputCoin = createComponent<
             </Badge>
 
             <Flex className="w-full items-start tablet:items-center flex flex-col tablet:flex-row gap-2 tablet:gap-4">
-              <AssetItem assetId={assetId} className="flex-1" prefix="Asset:">
+              <AssetItem
+                assetId={assetId}
+                className="flex-1 text-sm"
+                prefix="Asset:"
+              >
                 <Address
                   prefix="From:"
                   value={input.owner || ''}

diff --git a/packages/ui/src/components/Address/Address.tsx b/packages/ui/src/components/Address/Address.tsx
@@ -39,7 +39,7 @@ const AddressSpan = ({
   short: string;
   className?: string;
 }) => {
-  const baseClass = cx(['text-[1em]', className]);
+  const baseClass = cx(['text-sm', className]);
   return (
     <>
       {full && (
@@ -96,7 +96,7 @@ export const Address = createComponent<AddressProps, 'div'>({
                 {linkProps ? (
                   <Link
                     {...linkProps}
-                    className={cx('text-xs text-[1em]')}
+                    className={cx('text-xs text-sm')}
                     onClick={(e) => {
                       e.stopPropagation();
                     }}
@@ -128,7 +128,7 @@ export const Address = createComponent<AddressProps, 'div'>({
 const styles = tv({
   slots: {
     root: 'flex gap-1 text-sm font-mono',
-    prefix: 'mr-px text-[1em] text-secondary',
-    address: 'text-[1em] text-muted mt-px gap-3',
+    prefix: 'mr-px text-sm text-secondary',
+    address: 'text-sm text-muted mt-px gap-3',
   },
 });