Fix Text and Token Styling (#113)

* Fix BalanceItem * Fixing WalletLink text style * Fixing Coin details page * Fixing text variants
0xsequence · Aug 7, 2024 · 80a4008 · 80a4008
1 parent 70c02c6
commit 80a4008
Show file tree

Hide file tree

Showing 25 changed files with 87 additions and 104 deletions.
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
@@ -207,7 +207,7 @@ export const Connected = () => {
       <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4">
           <Box flexDirection="column" gap="2">
-            <Text color="text50" fontSize="small" fontWeight="medium">
+            <Text variant="small" color="text50" fontWeight="medium">
               Demos
             </Text>
             <CardButton
@@ -307,10 +307,10 @@ export const Connected = () => {
                 options={[
                   ...pendingFeeOptionConfirmation?.options?.map(option => ({
                     label: (
-                      <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
+                      <Box alignItems="flex-start" flexDirection="column">
                         <Box flexDirection="row">
-                          <Text>Fee (in {option.token.name}): </Text>{' '}
-                          <Text>{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
+                          <Text variant="xsmall">Fee (in {option.token.name}): </Text>{' '}
+                          <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </Box>
                         <Box flexDirection="row">
                           <Text>Wallet balance for {option.token.name}: </Text>{' '}

diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
@@ -292,7 +292,7 @@ export const Connected = () => {
       <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4" style={{ maxWidth: breakpoints.md }}>
           <Box flexDirection="column" gap="2">
-            <Text color="text50" fontSize="small" fontWeight="medium">
+            <Text variant="small" color="text50" fontWeight="medium">
               Demos
             </Text>
             {/* <CardButton
@@ -397,10 +397,10 @@ export const Connected = () => {
                 options={[
                   ...pendingFeeOptionConfirmation?.options?.map(option => ({
                     label: (
-                      <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
+                      <Box alignItems="flex-start" flexDirection="column">
                         <Box flexDirection="row">
-                          <Text>Fee (in {option.token.name}): </Text>{' '}
-                          <Text>{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
+                          <Text variant="xsmall">Fee (in {option.token.name}): </Text>{' '}
+                          <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </Box>
                         <Box flexDirection="row">
                           <Text>Wallet balance for {option.token.name}: </Text>{' '}

diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -36,7 +36,7 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
           <Box gap="1" alignItems="center">
             <TokenImage src={collectionLogoURI} size="xs" />
-            <Text marginLeft="1" fontSize="small" color="text80" fontWeight="bold">
+            <Text marginLeft="1" variant="small" color="text80" fontWeight="bold">
               {collectionName}
             </Text>
             <NetworkImage chainId={chainId} size="xs" />
@@ -49,15 +49,15 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
               width: '180px'
             }}
           >
-            <Text color="text100" fontSize="normal" fontWeight="normal">
+            <Text variant="normal" color="text100">
               {name}
             </Text>
-            <Text color="text50" fontSize="normal" fontWeight="normal">{`#${tokenId}`}</Text>
+            <Text variant="normal" color="text50">{`#${tokenId}`}</Text>
           </Box>
         </Box>
       </Box>
-      <Box height="full" fontSize="small" color="text50" fontWeight="bold">
-        {`x${formatDisplay(balanceFormatted)}`}
+      <Box height="full">
+        <Text variant="small" color="text50" fontWeight="bold">{`x${formatDisplay(balanceFormatted)}`}</Text>
       </Box>
     </Card>
   )

diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -107,7 +107,7 @@ export const CheckoutSelection = () => {
       {orderSummaryItems.length > 0 && (
         <>
           <Box flexDirection="row" gap="2" alignItems="center">
-            <Text fontWeight="normal" fontSize="normal" color="text50">
+            <Text variant="normal" color="text50">
               Order summary
             </Text>
             <Tooltip
@@ -143,15 +143,15 @@ export const CheckoutSelection = () => {
 
       {displayCryptoCheckout && (
         <Box justifyContent="space-between" alignItems="center">
-          <Text fontWeight="normal" fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             Total
           </Text>
           {isPending ? (
             <Skeleton style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <TokenImage src={coinImageUrl} size="xs" />
-              <Text fontWeight="normal" fontSize="normal" color="text100">
+              <Text variant="normal" color="text100">
                 {`${formatDisplay(requestAmount)} ${coinSymbol}`}
               </Text>
             </Box>
@@ -210,7 +210,7 @@ export const CheckoutSelection = () => {
           {isPending ? (
             <Skeleton style={{ width: '102px', height: '14px' }} />
           ) : (
-            <Text fontWeight="bold" fontSize="small" color="text50">
+            <Text variant="small" fontWeight="bold" color="text50">
               Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}
             </Text>
           )}

diff --git a/packages/checkout/src/views/TransactionError.tsx b/packages/checkout/src/views/TransactionError.tsx
@@ -26,8 +26,8 @@ export const TransactionError = () => {
         style={{ top: '50%', right: '50%', transform: 'translate(50%, -50%)' }}
       >
         <NotificationErrorIcon />
-        <Text fontSize="xlarge">Error</Text>
-        <Text textAlign="center" variant="normal" color="text80">
+        <Text variant="xlarge">Error</Text>
+        <Text variant="normal" textAlign="center" color="text80">
           An error occurred while processing the transaction.
         </Text>
       </Box>

diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx
@@ -30,8 +30,8 @@ export const TransactionSuccess = () => {
         style={{ top: '50%', right: '50%', transform: 'translate(50%, -50%)' }}
       >
         <NotificationSuccessIcon />
-        <Text fontSize="xlarge">Success!</Text>
-        <Text textAlign="center" variant="normal" color="text80">
+        <Text variant="xlarge">Success!</Text>
+        <Text variant="normal" textAlign="center" color="text80">
           Purchase was successful, item was sent to your wallet.
         </Text>
         {navigation.params.transactionHash && (

diff --git a/packages/kit/src/components/KitProvider/KitProvider.tsx b/packages/kit/src/components/KitProvider/KitProvider.tsx
@@ -214,7 +214,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
 
                               {pendingRequestConfirmation.type === 'signMessage' && (
                                 <Box flexDirection="column" width="full">
-                                  <Text fontSize="normal" color="text50">
+                                  <Text variant="normal" color="text50" fontWeight="medium">
                                     Message
                                   </Text>
                                   <Card marginTop="2" paddingY="6">

diff --git a/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx b/packages/kit/src/components/NetworkBadge/NetworkBadge.tsx
@@ -1,7 +1,6 @@
 import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import React from 'react'
 
-import { capitalize } from '../../utils/helpers'
 import { getNetwork, getNetworkBackgroundColor, getNetworkColor } from '../../utils/networks'
 
 interface NetworkBadgeProps {
@@ -16,28 +15,28 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
   return (
     <Box
       height="6"
-      paddingY="1"
-      paddingLeft="1.5"
-      paddingRight="2"
+      paddingX="2"
       gap="1"
-      style={{
-        background: chainBGColor
-      }}
       borderRadius="xs"
       flexDirection="row"
       justifyContent="center"
       alignItems="center"
       width="fit"
+      style={{
+        background: chainBGColor
+      }}
     >
       <NetworkImage chainId={chainId} size="xs" />
       <Text
+        variant="xsmall"
         fontWeight="bold"
-        fontSize="xsmall"
         style={{
           color: chainColor
         }}
+        capitalize
+        ellipsis
       >
-        {capitalize(network.title ?? network.name)}
+        {network.title ?? network.name}
       </Text>
     </Box>
   )

diff --git a/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx b/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
@@ -19,7 +19,7 @@ export const PoweredBySequence = () => {
       cursor="pointer"
       opacity={{ hover: '80' }}
     >
-      <Text fontSize="small" color="text100">
+      <Text variant="small" color="text100">
         Powered by Sequence
       </Text>
       <Box height="5" width="5">

diff --git a/packages/kit/src/components/TxnDetails/TxnDetails.tsx b/packages/kit/src/components/TxnDetails/TxnDetails.tsx
@@ -154,7 +154,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
 
       {toAddress !== undefined && (
         <Box>
-          <Text fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             To
           </Text>
           <Box
@@ -215,7 +215,7 @@ const AwardItemInfo = ({ awardItemProps }: AwardItemInfoProps) => {
 
       {awardItemProps.to !== undefined && (
         <Box>
-          <Text fontSize="normal" color="text50">
+          <Text variant="normal" color="text50">
             To
           </Text>
           <Box

diff --git a/packages/wallet/src/shared/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx
@@ -2,8 +2,6 @@ import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import { getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import React from 'react'
 
-import { capitalize } from '../utils'
-
 interface NetworkBadgeProps {
   chainId: number
 }
@@ -16,9 +14,7 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
   return (
     <Box
       height="6"
-      paddingY="1"
-      paddingLeft="1.5"
-      paddingRight="2"
+      paddingX="2"
       gap="1"
       style={{
         background: chainBGColor
@@ -31,13 +27,15 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
     >
       <NetworkImage chainId={chainId} size="xs" />
       <Text
+        variant="xsmall"
         fontWeight="bold"
-        fontSize="xsmall"
+        capitalize
+        ellipsis
         style={{
           color: chainColor
         }}
       >
-        {capitalize(network.title ?? network.name)}
+        {network.title ?? network.name}
       </Text>
     </Box>
   )

diff --git a/packages/wallet/src/shared/SendItemInfo.tsx b/packages/wallet/src/shared/SendItemInfo.tsx
@@ -57,7 +57,7 @@ export const SendItemInfo = ({
             <CollectibleTileImage imageUrl={imageUrl} />
           </Box>
         ) : (
-          <TokenImage src={imageUrl} size="xl" />
+          <TokenImage src={imageUrl} size="lg" />
         )}
         <Box flexDirection="column" alignItems="flex-start">
           <Box flexDirection="row" alignItems="center" gap="1">

diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -103,7 +103,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
       textColor = vars.colors.positive
     }
 
-    return <Text fontWeight="bold" fontSize="normal" style={{ color: textColor }}>{`${sign}${amount} ${symbol}`}</Text>
+    return <Text variant="normal" fontWeight="bold" style={{ color: textColor }}>{`${sign}${amount} ${symbol}`}</Text>
   }
 
   interface GetTransfer {
@@ -119,14 +119,14 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
         <Box flexDirection="row" justifyContent="space-between">
           <Box color="text50" gap="1" flexDirection="row" justifyContent="center" alignItems="center">
             {getTransactionIconByType(transfer.transferType)}
-            <Text fontWeight="medium" fontSize="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text100">
               {getTansactionLabelByType(transfer.transferType)}
             </Text>
             <NetworkImage chainId={transaction.chainId} size="xs" />
           </Box>
           {isFirstItem && (
             <Box>
-              <Text fontWeight="medium" fontSize="normal" color="text50">
+              <Text variant="normal" fontWeight="medium" color="text50">
                 {date}
               </Text>
             </Box>
@@ -159,7 +159,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
               </Box>
               {isPending && <Skeleton style={{ width: '35px', height: '20px' }} />}
               {fiatConversionRate && (
-                <Text fontWeight="medium" fontSize="normal" color="text50">
+                <Text variant="normal" fontWeight="medium" color="text50">
                   {`${fiatCurrency.sign}${(Number(amountValue) * fiatConversionRate * conversionRate).toFixed(2)}`}
                 </Text>
               )}

diff --git a/packages/wallet/src/shared/TransactionHistoryList/index.tsx b/packages/wallet/src/shared/TransactionHistoryList/index.tsx
@@ -99,7 +99,7 @@ export const TransactionHistoryList = ({ transactions, isPending, isFetchingNext
   const TimeLabel = ({ label }: TimeLabelProps) => {
     return (
       <Box>
-        <Text color="text50" fontWeight="medium" fontSize="normal">
+        <Text variant="normal" color="text50" fontWeight="medium">
           {label}
         </Text>
       </Box>

diff --git a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
@@ -87,7 +87,7 @@ export const WalletDropdownContent = forwardRef(({ setOpenWalletDropdown }: Wall
       <Box flexDirection="row" justifyContent="space-between" alignItems="flex-start">
         <Box flexDirection="row" justifyContent="center" alignItems="center" gap="3" marginLeft="2" color="text100">
           <GradientAvatar style={{ width: '28px' }} size="md" address={address || ''} />
-          <Text fontSize="large" style={{ fontWeight: '700' }} color="text100">
+          <Text variant="large" fontWeight="bold" color="text100">
             {formatAddress(address || '')}
           </Text>
           <CopyButton buttonVariant="icon" size="md" text={address || ''} color="text100" style={{ marginLeft: '-16px' }} />

diff --git a/packages/wallet/src/views/CoinDetails/Skeleton.tsx b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
@@ -19,7 +19,7 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
-          <Text fontWeight="medium" color="text50" fontSize="normal">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">

diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
+import { Box, Button, SendIcon, Text, TokenImage } from '@0xsequence/design-system'
 import {
   getNativeTokenInfoByChainId,
   useExchangeRate,
@@ -97,19 +97,19 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box flexDirection="column" gap="10" paddingBottom="5" paddingX="4" paddingTop="0" style={{ marginTop: '-20px' }}>
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
-          <Image width="8" src={logo} alt="logo" />
-          <Text color="text100" fontWeight="bold" fontSize="large">
+          <TokenImage src={logo} size="xl" />
+          <Text variant="large" color="text100" fontWeight="bold">
             {name}
           </Text>
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
-          <Text fontWeight="medium" color="text50" fontSize="normal">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-            <Text fontWeight="bold" color="text100" fontSize="xlarge">{`${balanceDisplayed} ${symbol}`}</Text>
-            <Text fontWeight="medium" color="text50" fontSize="normal">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
+            <Text variant="xlarge" fontWeight="bold" color="text100">{`${balanceDisplayed} ${symbol}`}</Text>
+            <Text variant="normal" fontWeight="medium" color="text50">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
           </Box>
         </Box>
         <Button width="full" variant="primary" leftIcon={SendIcon} color="text100" label="Send" onClick={onClickSend} />

diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -27,7 +27,7 @@ export const CollectibleDetailsSkeleton = () => {
         <Box>
           {/* balance */}
           <Box>
-            <Text fontWeight="medium" color="text50" fontSize="normal">
+            <Text variant="normal" fontWeight="medium" color="text50">
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
@@ -46,7 +46,7 @@ export const CollectibleDetailsSkeleton = () => {
           />
         </Box>
         <Box>
-          <Text fontSize="normal" color="text50" fontWeight="medium">
+          <Text variant="normal" color="text50" fontWeight="medium">
             This week
           </Text>
           <TransactionHistorySkeleton />