changed text font weight and color to match figma

0xsequence · Nov 29, 2024 · 9b663cb · 9b663cb
1 parent 8aa5748
commit 9b663cb
Show file tree

Hide file tree

Showing 23 changed files with 65 additions and 62 deletions.
diff --git a/src/components/PendingTxn.tsx b/src/components/PendingTxn.tsx
@@ -15,29 +15,29 @@ export default function PendingTxn({
 }) {
   return (
     <Box flexDirection="column" width="full" gap="5" paddingTop="7">
-      <Text variant="normal" fontWeight="bold" color="text100">
+      <Text variant="normal" fontWeight="bold" color="text80">
         Pending transactions
       </Text>
       <Box background="backgroundSecondary" borderRadius="sm" alignItems="center" padding="4" gap="5">
         <Spinner size="lg" />
 
         <Box flexDirection="column" gap="1">
           <Box flexDirection="row" alignItems="center" gap="1">
-            <Text variant="normal" fontWeight="semibold" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               Sending {amount} {symbol} on
             </Text>
 
             <NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
 
-            <Text variant="normal" fontWeight="semibold" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               to
             </Text>
-            <Text variant="normal" fontWeight="semibold" color="text80" style={{ fontFamily: 'monospace' }}>
+            <Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
               {to}
             </Text>
           </Box>
 
-          <Text variant="normal" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50">
             Your external wallet will prompt you to confirm the transaction
           </Text>
         </Box>

diff --git a/src/components/SelectProvider.tsx b/src/components/SelectProvider.tsx
@@ -60,12 +60,12 @@ export default function SelectProvider({
                 Attention
               </Text>
               {walletConnectDappsConnected ? (
-                <Text variant="normal" color="text80">
+                <Text variant="normal" fontWeight="medium" color="text80">
                   If you connect your external wallet using WalletConnect, you'll lose all Dapps connections
                   you already made using WalletConnect.
                 </Text>
               ) : (
-                <Text variant="normal" color="text80">
+                <Text variant="normal" fontWeight="medium" color="text80">
                   If you connect your external wallet using WalletConnect, you won't be able to connect to any
                   other Dapps during this session. <br /> <br />
                   If you need to connect Dapps, please consider using a different external wallet instead.
@@ -92,7 +92,7 @@ export default function SelectProvider({
           <Text variant="large" fontWeight="bold" color="text80">
             Connect external wallet
           </Text>
-          <Text variant="normal" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50">
             You need an external wallet to relay transactions
           </Text>
           <Box flexDirection="column" gap="3">

diff --git a/src/components/network/NetworkItem.tsx b/src/components/network/NetworkItem.tsx
@@ -73,7 +73,7 @@ export default function NetworkItem({ network }: { network: NetworkConfig }) {
               </Text>
 
               {(hasPreviousEdit || isUserAddition) && (
-                <Text variant="normal" color="text50">
+                <Text variant="normal" fontWeight="medium" color="text50">
                   {isUserAddition ? `(Chain Id "${network.chainId}", added by you)` : '(edited)'}
                 </Text>
               )}

diff --git a/src/components/recovery/RecoveryHeader.tsx b/src/components/recovery/RecoveryHeader.tsx
@@ -31,7 +31,7 @@ export default function RecoveryHeader({ handleNetworkModal }: { handleNetworkMo
               label={
                 <Box flexDirection="row" alignItems="center" gap="2">
                   <Image src={externalArrowIcon} height="5" />
-                  <Text variant="medium" lineHeight="5" color="text50">
+                  <Text variant="normal" fontWeight="bold" color="text50">
                     Docs
                   </Text>
                 </Box>
@@ -44,7 +44,7 @@ export default function RecoveryHeader({ handleNetworkModal }: { handleNetworkMo
               label={
                 <Box flexDirection="row" alignItems="center" gap="2">
                   <Image src={networkIcon} height="5" />
-                  <Text variant="medium" lineHeight="5" color="text50">
+                  <Text variant="normal" fontWeight="bold" color="text50">
                     Networks
                   </Text>
                 </Box>

diff --git a/src/components/recovery/WalletList.tsx b/src/components/recovery/WalletList.tsx
@@ -18,7 +18,7 @@ export default function WalletList({
 
   return (
     <Box flexDirection="column" gap={`${gapWidth}`}>
-      <Text variant="normal" color="text100">
+      <Text variant="normal" fontWeight="medium" color="text80">
         Wallets found
       </Text>
       {possibleWallets.map(wallet => {
@@ -40,7 +40,12 @@ export default function WalletList({
                     paddingX="4"
                     style={{ width: `${WALLET_WIDTH - ROUND_CHECKBOX_SIZE * 4 - gapWidth * 4}px` }}
                   >
-                    <Text variant="normal" color="text100" style={{ fontFamily: 'monospace' }}>
+                    <Text
+                      variant="normal"
+                      fontWeight="medium"
+                      color="text100"
+                      style={{ fontFamily: 'monospace' }}
+                    >
                       {wallet}
                     </Text>
                   </Box>

diff --git a/src/components/signing/ConnectDapp.tsx b/src/components/signing/ConnectDapp.tsx
@@ -60,11 +60,11 @@ export default function ConnectDapp({ onClose }: { onClose: () => void }) {
 
         <Box flexDirection="column" gap="3">
           <Card flexDirection="row" justifyContent="space-between" alignItems="center">
-            <Text variant="normal" fontWeight="semibold" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text100">
               Origin
             </Text>
             <Box flexDirection="row" alignItems="center" gap="2">
-              <Text variant="normal" fontWeight="semibold" color="text100">
+              <Text variant="normal" fontWeight="medium" color="text100">
                 {connectOptions?.origin?.split('//')[1]}
               </Text>
               <IconButton
@@ -76,10 +76,10 @@ export default function ConnectDapp({ onClose }: { onClose: () => void }) {
             </Box>
           </Card>
           <Card flexDirection="row" justifyContent="space-between">
-            <Text variant="normal" fontWeight="semibold" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text100">
               Network
             </Text>
-            <Text variant="normal" fontWeight="semibold" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text100">
               {getNetworkTitle(Number(connectOptions?.networkId))}
             </Text>
           </Card>

diff --git a/src/components/signing/ConnectionList.tsx b/src/components/signing/ConnectionList.tsx
@@ -17,7 +17,7 @@ export default function ConnectionList({ sessionList }: { sessionList: SessionTy
           <Box alignItems="center" gap="4">
             <ExternalIcon background="text80" src={session.peer.metadata.icons[0]} />
 
-            <Text variant="medium" color="text100">
+            <Text variant="normal" fontWeight="bold" color="text100">
               {!!!session.peer.metadata.name ? session.peer.metadata.url : session.peer.metadata.name}
             </Text>
           </Box>

diff --git a/src/components/signing/SignClientTransactionConfirm.tsx b/src/components/signing/SignClientTransactionConfirm.tsx
@@ -55,11 +55,11 @@ export default function SignClientTransactionConfirm({
 
             <Box flexDirection="column" gap="3">
               <Card flexDirection="row" justifyContent="space-between" alignItems="center">
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   Origin
                 </Text>
                 <Box flexDirection="row" alignItems="center" gap="2">
-                  <Text variant="normal" fontWeight="semibold" color="text100">
+                  <Text variant="normal" fontWeight="medium" color="text100">
                     {details?.origin?.split('//')[1]}
                   </Text>
                   <IconButton
@@ -71,21 +71,21 @@ export default function SignClientTransactionConfirm({
                 </Box>
               </Card>
               <Card flexDirection="row" justifyContent="space-between">
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   Network
                 </Text>
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   {getNetworkTitle(Number(details.chainId))}
                 </Text>
               </Card>
               <Card flexDirection="column" gap="4">
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   Signee
                 </Text>
                 <Card>
                   <Text
                     variant="normal"
-                    fontWeight="semibold"
+                    fontWeight="medium"
                     color="text100"
                     style={{ fontFamily: 'monospace' }}
                   >

diff --git a/src/components/signing/SignClientTransactionRelay.tsx b/src/components/signing/SignClientTransactionRelay.tsx
@@ -50,11 +50,11 @@ export default function SignClientTransactionRelay({
 
             <Box flexDirection="column" gap="3">
               <Card flexDirection="row" justifyContent="space-between" alignItems="center">
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   Origin
                 </Text>
                 <Box flexDirection="row" alignItems="center" gap="2">
-                  <Text variant="normal" fontWeight="semibold" color="text100">
+                  <Text variant="normal" fontWeight="medium" color="text100">
                     {details?.origin?.split('//')[1]}
                   </Text>
                   <IconButton
@@ -66,10 +66,10 @@ export default function SignClientTransactionRelay({
                 </Box>
               </Card>
               <Card flexDirection="row" justifyContent="space-between">
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   Network
                 </Text>
-                <Text variant="normal" fontWeight="semibold" color="text100">
+                <Text variant="normal" fontWeight="medium" color="text100">
                   {getNetworkTitle(Number(details.chainId))}
                 </Text>
               </Card>

diff --git a/src/components/wallet/ConfirmSignOut.tsx b/src/components/wallet/ConfirmSignOut.tsx
@@ -3,10 +3,10 @@ import { Box, Button, Text } from '@0xsequence/design-system'
 export default function ConfirmSignOut({ handleSignOut }: { handleSignOut: (signOut?: boolean) => void }) {
   return (
     <Box flexDirection="column" padding="6" gap="6">
-      <Text variant="large" color="text100" marginRight="8">
+      <Text variant="large" fontWeight="bold" color="text100" marginRight="8">
         Are you sure you want to sign out?
       </Text>
-      <Text variant="normal" color="text50">
+      <Text variant="normal" fontWeight="medium" color="text50">
         This will disconnect all Dapps, tokens, and relay wallet connections, and you’ll need to reconnect
         them manually.
       </Text>

diff --git a/src/components/wallet/DappList.tsx b/src/components/wallet/DappList.tsx
@@ -70,13 +70,13 @@ export default function DappList() {
           {provider?.info.name === 'WalletConnect' ? (
             <Box flexDirection="column" alignItems="center" gap="4">
               <Image src={WarningIcon} color="text50" width="8" height="8" />
-              <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
+              <Text textAlign="center" variant="normal" color="text50" padding="4">
                 To connect to Dapps, switch from WalletConnect to a different wallet as your External Wallet
                 connection method.
               </Text>
             </Box>
           ) : (
-            <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
+            <Text textAlign="center" variant="normal" color="text50" padding="4">
               Connect a Dapp with WalletConnect to sign actions
             </Text>
           )}

diff --git a/src/components/wallet/ExternalWallet.tsx b/src/components/wallet/ExternalWallet.tsx
@@ -96,7 +96,7 @@ export default function ExternalWallet() {
                 </Text>
 
                 <Box gap="1">
-                  <Text variant="normal" color="text50" width="full">
+                  <Text variant="normal" fontWeight="medium" color="text50" width="full">
                     {selectedExternalWalletAddress}
                   </Text>
 
@@ -112,7 +112,7 @@ export default function ExternalWallet() {
             <ButtonWithIcon icon={<CloseIcon color="text100" />} onClick={() => handleDisconnect()} />
           </Box>
         ) : (
-          <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
+          <Text textAlign="center" variant="normal" color="text50" padding="4">
             Connect an external wallet to relay transactions
           </Text>
         )}

diff --git a/src/components/wallet/WalletDropdownMenu.tsx b/src/components/wallet/WalletDropdownMenu.tsx
@@ -51,7 +51,7 @@ export default function SettingsDropdownMenu() {
           label={
             <Box flexDirection="row" alignItems="center" gap="2">
               <GradientAvatar address={walletAddress} size="sm" />
-              <Text variant="normal" fontWeight="bold" color="text100">
+              <Text variant="normal" fontWeight="medium" fontWeight="bold" color="text100">
                 {truncateMiddle(walletAddress!, 4, 4)}
               </Text>
             </Box>

diff --git a/src/components/wallet/collectibles/CollectibleBalanceItem.tsx b/src/components/wallet/collectibles/CollectibleBalanceItem.tsx
@@ -38,7 +38,7 @@ export default function CollectibleBalanceItem({
         </Box>
 
         <Box>
-          <Text variant="normal" fontWeight="bold" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50">
             {collectibleInfo.collectibleInfoParams.contractType === 'ERC1155'
               ? Number(
                   ethers.formatUnits(

diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -39,7 +39,7 @@ export default function CollectibleList({
         <Box alignItems="center" gap="2">
           <Image src={CollectionIcon} width="5" height="5" />
 
-          <Text variant="normal" fontWeight="bold" color="text100">
+          <Text variant="normal" fontWeight="medium" fontWeight="bold" color="text100">
             Collectibles
           </Text>
         </Box>
@@ -87,7 +87,7 @@ export default function CollectibleList({
               </>
             ) : (
               <Card flexDirection="column">
-                <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
+                <Text textAlign="center" variant="normal" color="text50" padding="4">
                   Import ERC721 or ERC1155 Collectibles
                 </Text>
               </Card>

diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -145,7 +145,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
 
               <Text
                 variant="normal"
-                fontWeight="medium"
                 color="text50"
                 underline={!!tokenDirectory}
                 cursor={tokenDirectory ? 'pointer' : 'default'}
@@ -230,7 +229,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
               <Text variant="medium" fontWeight="bold" color="text80">
                 {collectibleInfoResponse.name ?? ''}
               </Text>
-              <Text variant="small" fontWeight="medium" color="text80">
+              <Text variant="small" color="text80">
                 Your Balance:
               </Text>
               <Text variant="medium" fontWeight="bold" color="text80">

diff --git a/src/components/wallet/collectibles/SendCollectible.tsx b/src/components/wallet/collectibles/SendCollectible.tsx
@@ -112,7 +112,7 @@ export default function SendCollectible({
           label={
             <Box flexDirection="row" alignItems="center" gap="2">
               <FilledCheckBox checked={sendToExternalWallet} size="md" />
-              <Text variant="small" fontWeight="medium" color="text80">
+              <Text variant="small" color="text80">
                 Send to connected external wallet address
               </Text>
             </Box>

diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
@@ -126,7 +126,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               </Text>
               <Text
                 variant="normal"
-                fontWeight="medium"
                 color="text50"
                 underline={!!tokenDirectory}
                 cursor={tokenDirectory ? 'pointer' : 'default'}
@@ -161,7 +160,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             <Text variant="medium" fontWeight="bold" color="text80">
               {tokenInfo.symbol ?? ''}
             </Text>
-            <Text variant="small" fontWeight="medium" color="text80">
+            <Text variant="small" color="text80">
               Your Balance:
             </Text>
             <Text variant="medium" fontWeight="bold" color="text80">

diff --git a/src/components/wallet/tokens/SendToken.tsx b/src/components/wallet/tokens/SendToken.tsx
@@ -102,7 +102,7 @@ export default function SendToken({
           label={
             <Box flexDirection="row" alignItems="center" gap="2">
               <FilledCheckBox checked={sendToExternalWallet} size="md" />
-              <Text variant="small" fontWeight="medium" color="text80">
+              <Text variant="small" color="text80">
                 Send to connected external wallet address
               </Text>
             </Box>

diff --git a/src/components/wallet/tokens/TokenBalanceItem.tsx b/src/components/wallet/tokens/TokenBalanceItem.tsx
@@ -41,7 +41,7 @@ export default function TokenBalanceItem({
         </Box>
 
         <Box>
-          <Text variant="normal" fontWeight="bold" color="text50">
+          <Text variant="normal" fontWeight="medium" color="text50">
             {truncatedBalance}
           </Text>
         </Box>

diff --git a/src/components/wallet/tokens/TokenList.tsx b/src/components/wallet/tokens/TokenList.tsx
@@ -78,7 +78,7 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
           >
             <FilledCheckbox checked={filterZeroBalances} size="md" />
 
-            <Text variant="small" fontWeight="medium" color="text80">
+            <Text variant="small" color="text80">
               Filter zero balances
             </Text>
           </Box>
@@ -116,7 +116,7 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
               </>
             ) : (
               <Card flexDirection="column">
-                <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
+                <Text textAlign="center" variant="normal" color="text50" padding="4">
                   Import ERC 20 token address
                 </Text>
               </Card>
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ export default function TokenBalanceItem({ @@
             </Box>
             <Box>
-              <Text variant="normal" fontWeight="bold" color="text50">
+              <Text variant="normal" fontWeight="medium" color="text50">
                 {truncatedBalance}
               </Text>
             </Box>
@@ Expand Down @@