WIP: change font sizes

0xsequence · Nov 29, 2024 · 39ef549 · 39ef549
1 parent 5e39ad2
commit 39ef549
Show file tree

Hide file tree

Showing 21 changed files with 125 additions and 108 deletions.
diff --git a/src/components/SelectProvider.tsx b/src/components/SelectProvider.tsx
@@ -51,12 +51,12 @@ export default function SelectProvider({
     <Box>
       {isConfirmingWalletConnect ? (
         <Box flexDirection="column" padding="6" gap="6">
-          <Text variant="large" color="text100">
+          <Text variant="large" fontWeight="bold" color="text80">
             Use WalletConnect for External Wallet?
           </Text>
           <Card alignItems="center" gap="3" style={{ background: 'rgba(176, 126, 30, 0.3)' }}>
             <Box flexDirection="column" gap="2">
-              <Text variant="medium" color="text100">
+              <Text variant="medium" fontWeight="bold" color="text100">
                 Attention
               </Text>
               {walletConnectDappsConnected ? (
@@ -89,7 +89,7 @@ export default function SelectProvider({
         </Box>
       ) : (
         <Box flexDirection="column" padding="6" gap="6">
-          <Text variant="large" color="text100">
+          <Text variant="large" fontWeight="bold" color="text80">
             Connect external wallet
           </Text>
           <Text variant="normal" color="text50">

diff --git a/src/components/helpers/FilledCheckBox.tsx b/src/components/helpers/FilledCheckBox.tsx
@@ -10,7 +10,12 @@ export default function FilledCheckBox({ checked, size = 'lg' }: { checked: bool
       height={size === 'lg' ? '7' : '5'}
       justifyContent="center"
       alignItems="center"
-      style={{ borderRadius: size === 'lg' ? '6px' : '3px', background: checked ? '#4F4F4F' : 'inherit' }}
+      style={{
+        width: size === 'lg' ? '28px' : '22px',
+        height: size === 'lg' ? '28px' : '22px',
+        borderRadius: size === 'lg' ? '6px' : '3px',
+        background: checked ? '#4F4F4F' : 'inherit'
+      }}
     >
       {checked ? (
         <img

diff --git a/src/components/network/NetworkHeader.tsx b/src/components/network/NetworkHeader.tsx
@@ -11,11 +11,11 @@ export default function NetworkHeader({
   return (
     <Box flexDirection="column" width="full" position="absolute" background="backgroundPrimary">
       <Box paddingTop="6" paddingX="6">
-        <Text variant="xlarge" color="text100">
+        <Text variant="large" fontWeight="bold" color="text80">
           Networks
         </Text>
         <TabsPrimitive.TabsList style={{ marginTop: '24px' }}>
-          <Box flexDirection="row" style={{ height: '36px' }}>
+          <Box flexDirection="row" style={{ height: '32px' }}>
             <NetworkTab value={NetworkType.MAINNET} selectedNetworkType={selectedNetworkType} />
 
             <NetworkTab value={NetworkType.TESTNET} selectedNetworkType={selectedNetworkType} />

diff --git a/src/components/network/NetworkItem.tsx b/src/components/network/NetworkItem.tsx
@@ -65,8 +65,8 @@ export default function NetworkItem({ network }: { network: NetworkConfig }) {
               <FilledCheckBox checked={!disabled} />
 
               <Text
-                variant="medium"
-                fontWeight="semibold"
+                variant="normal"
+                fontWeight="medium"
                 color={validRpcUrl ? (isUnsaved ? 'warning' : 'text80') : 'negative'}
               >
                 {network.title} {!validRpcUrl && '(Invalid RPC URL)'} {isUnsaved && '*'}
@@ -93,7 +93,7 @@ export default function NetworkItem({ network }: { network: NetworkConfig }) {
           }}
         >
           <Box flexDirection="row" justifyContent="space-between" alignItems="center">
-            <Text variant="medium" fontWeight="bold" color={disabled ? 'borderNormal' : 'text50'}>
+            <Text variant="normal" fontWeight="bold" color={disabled ? 'borderNormal' : 'text50'}>
               Network Settings
             </Text>
 

diff --git a/src/components/network/NetworkTab.tsx b/src/components/network/NetworkTab.tsx
@@ -22,7 +22,7 @@ export default function NetworkTab({
       }}
     >
       <Text
-        variant="medium"
+        variant="normal"
         fontWeight="semibold"
         color={selectedNetworkType === value ? 'text100' : 'text50'}
         paddingX="4"

diff --git a/src/components/network/NetworkTag.tsx b/src/components/network/NetworkTag.tsx
@@ -21,7 +21,7 @@ export default function NetworkTag({
       paddingBottom={paddingBottom}
       paddingX="2"
     >
-      <Text variant="xsmall" color="text100">
+      <Text variant="xsmall" color="text80">
         {getNetworkTitle(chainId)}
       </Text>
     </Box>

diff --git a/src/components/network/Networks.tsx b/src/components/network/Networks.tsx
@@ -35,7 +35,7 @@ export default function Networks() {
           >
             <NetworkHeader selectedNetworkType={selectedNetworkType} />
 
-            <Box paddingX="6" style={{ marginTop: '120px', marginBottom: '85px' }}>
+            <Box paddingX="6" style={{ marginTop: '108px', marginBottom: '85px' }}>
               <TabsContent value={NetworkType.MAINNET}>
                 <NetworkList networks={sortedMainnets} />
               </TabsContent>

diff --git a/src/components/recovery/RecoveryHeader.tsx b/src/components/recovery/RecoveryHeader.tsx
@@ -9,6 +9,8 @@ import networkIcon from '~/assets/icons/chain.svg'
 import externalArrowIcon from '~/assets/icons/external-link-arrow.svg'
 import SequenceRecoveryLogo from '~/assets/images/sequence-wallet-recovery.svg'
 
+export const RECOVERY_HEADER_HEIGHT = 60
+
 export default function RecoveryHeader({ handleNetworkModal }: { handleNetworkModal: () => void }) {
   const authStore = useStore(AuthStore)
 
@@ -21,7 +23,7 @@ export default function RecoveryHeader({ handleNetworkModal }: { handleNetworkMo
           flexDirection="row"
           justifyContent="space-between"
           alignItems="center"
-          style={{ height: '59px' }}
+          style={{ height: RECOVERY_HEADER_HEIGHT - 1 }}
         >
           <Image src={SequenceRecoveryLogo} paddingLeft="5" />
           <Box flexDirection="row" alignItems="center" gap="5" style={{ marginRight: '80px' }}>

diff --git a/src/components/signing/ConnectDapp.tsx b/src/components/signing/ConnectDapp.tsx
@@ -54,7 +54,7 @@ export default function ConnectDapp({ onClose }: { onClose: () => void }) {
   return (
     <Box style={{ minWidth: isMobile ? '100vw' : '500px' }}>
       <Box flexDirection="column" gap="6" padding="6">
-        <Text variant="large" fontWeight="bold" color="text100">
+        <Text variant="large" fontWeight="bold" color="text80">
           Would you like to connect to this dapp?
         </Text>
 

diff --git a/src/components/signing/WalletScan.tsx b/src/components/signing/WalletScan.tsx
@@ -28,7 +28,7 @@ export default function WalletScan({ onQrUri }: { onQrUri: (isPaired: boolean) =
   return (
     <Box flexDirection="column">
       <Box flexDirection="column" justifyContent="space-between" padding="6" gap="6">
-        <Text variant="large" fontWeight="bold" color="text100">
+        <Text variant="large" fontWeight="bold" color="text80">
           Connect a Dapp
         </Text>
 
@@ -48,7 +48,7 @@ export default function WalletScan({ onQrUri }: { onQrUri: (isPaired: boolean) =
           />
         </Box>
         <Box flexDirection="column" gap="1">
-          <Text variant="normal" color="text100">
+          <Text variant="normal" fontWeight="medium" color="text80">
             Paste connection string
           </Text>
 

diff --git a/src/components/wallet/DappList.tsx b/src/components/wallet/DappList.tsx
@@ -44,9 +44,9 @@ export default function DappList() {
     <Box flexDirection="column">
       <Box justifyContent="space-between" alignItems="center" gap="2">
         <Box alignItems="center" gap="2">
-          <Image src={LinkConnectionIcon} width="7" height="7" />
+          <Image src={LinkConnectionIcon} width="5" height="5" />
 
-          <Text variant="large" fontWeight="bold" color="text100">
+          <Text variant="normal" fontWeight="bold" color="text100">
             Connected Dapps
           </Text>
         </Box>
@@ -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="large" color="text50" padding="4">
+              <Text textAlign="center" variant="normal" fontWeight="medium" 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="medium" color="text50" padding="4">
+            <Text textAlign="center" variant="normal" fontWeight="medium" 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
@@ -63,9 +63,9 @@ export default function ExternalWallet() {
     <Box flexDirection="column" width="full">
       <Box justifyContent="space-between" alignItems="center" gap="2">
         <Box alignItems="center" gap="2">
-          <WalletIcon color="text100" style={{ width: '28px', height: '28px' }} />
+          <WalletIcon color="text100" width="5" height="5" />
 
-          <Text variant="large" fontWeight="bold" color="text100">
+          <Text variant="normal" fontWeight="bold" color="text100">
             External Wallet
           </Text>
         </Box>
@@ -91,7 +91,7 @@ export default function ExternalWallet() {
               <ExternalIcon background="text80" src={selectedExternalProvider.info.icon} />
 
               <Box flexDirection="column" gap="1">
-                <Text variant="medium" color="text100">
+                <Text variant="normal" fontWeight="bold" color="text80">
                   {selectedExternalProvider.info.name}
                 </Text>
 
@@ -112,7 +112,7 @@ export default function ExternalWallet() {
             <ButtonWithIcon icon={<CloseIcon color="text100" />} onClick={() => handleDisconnect()} />
           </Box>
         ) : (
-          <Text textAlign="center" variant="medium" color="text50" padding="4">
+          <Text textAlign="center" variant="normal" fontWeight="medium" color="text50" padding="4">
             Connect an external wallet to relay transactions
           </Text>
         )}

diff --git a/src/components/wallet/collectibles/CollectibleBalanceItem.tsx b/src/components/wallet/collectibles/CollectibleBalanceItem.tsx
@@ -19,40 +19,39 @@ export default function CollectibleBalanceItem({
   onRemoveClick?: () => void
 }) {
   return (
-    <Card flexDirection="row" justifyContent="space-between">
-      <Box flexDirection="row" gap="3">
-        {collectibleInfo.collectibleInfoResponse.image && (
-          <Box>
-            <ExternalIcon background="text80" src={collectibleInfo.collectibleInfoResponse.image} />
-          </Box>
-        )}
-        <Box flexDirection="column">
-          <Box gap="2" alignItems="center">
-            <Text variant="large" fontWeight="bold" color="text100">
-              {collectibleInfo.collectibleInfoResponse.name ?? 'Collectible'}
-            </Text>
-            <Text variant="small" fontWeight="bold" color="text50">
-              #{collectibleInfo.collectibleInfoParams.tokenId}
-            </Text>
-            <NetworkTag chainId={collectibleInfo.collectibleInfoParams.chainId} />
-          </Box>
+    <Card flexDirection="row" alignItems="center" gap="3">
+      {collectibleInfo.collectibleInfoResponse.image && (
+        <Box>
+          <ExternalIcon background="buttonGlass" src={collectibleInfo.collectibleInfoResponse.image} />
+        </Box>
+      )}
+
+      <Box flexDirection="column">
+        <Box gap="2" alignItems="center">
+          <Text variant="normal" fontWeight="bold" color="text80">
+            {collectibleInfo.collectibleInfoResponse.name ?? 'Collectible'}
+          </Text>
+          <Text variant="small" fontWeight="bold" color="text50">
+            #{collectibleInfo.collectibleInfoParams.tokenId}
+          </Text>
+          <NetworkTag chainId={collectibleInfo.collectibleInfoParams.chainId} />
+        </Box>
 
-          <Box>
-            <Text variant="normal" fontWeight="bold" color="text50">
-              {collectibleInfo.collectibleInfoParams.contractType === 'ERC1155'
-                ? Number(
-                    ethers.formatUnits(
-                      collectibleInfo.collectibleInfoResponse.balance as BigNumberish,
-                      collectibleInfo.collectibleInfoResponse.decimals ?? 0
-                    )
+        <Box>
+          <Text variant="normal" fontWeight="bold" color="text50">
+            {collectibleInfo.collectibleInfoParams.contractType === 'ERC1155'
+              ? Number(
+                  ethers.formatUnits(
+                    collectibleInfo.collectibleInfoResponse.balance as BigNumberish,
+                    collectibleInfo.collectibleInfoResponse.decimals ?? 0
                   )
-                : 1}
-            </Text>
-          </Box>
+                )
+              : 1}
+          </Text>
         </Box>
       </Box>
 
-      <Box flexDirection="row" alignItems="center" gap="2">
+      <Box marginLeft="auto" gap="3">
         <ButtonWithIcon icon={<Image src={SendIcon} />} disabled={false} onClick={onSendClick} />
 
         {onRemoveClick && (

diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -36,10 +36,10 @@ export default function CollectibleList({
   return (
     <Box width="full">
       <Box justifyContent="space-between" alignItems="center">
-        <Box gap="2">
-          <Image src={CollectionIcon} width="7" height="7" />
+        <Box alignItems="center" gap="2">
+          <Image src={CollectionIcon} width="5" height="5" />
 
-          <Text variant="large" fontWeight="bold" color="text100">
+          <Text variant="normal" fontWeight="bold" color="text100">
             Collectibles
           </Text>
         </Box>
@@ -87,7 +87,7 @@ export default function CollectibleList({
               </>
             ) : (
               <Card flexDirection="column">
-                <Text textAlign="center" variant="medium" color="text50" padding="4">
+                <Text textAlign="center" variant="normal" fontWeight="medium" 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
@@ -116,13 +116,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   return (
     <Box flexDirection="column">
       <Box flexDirection="column" padding="6" gap="6">
-        <Text variant="large" fontWeight="bold" color="text100">
+        <Text variant="large" fontWeight="bold" color="text80">
           Import ERC721 or ERC1155 Collectible
         </Text>
 
         <Box flexDirection="column" gap="3">
           <Box flexDirection="column" gap="1">
-            <Text variant="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               Collectible Network
             </Text>
 
@@ -134,17 +134,18 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
           </Box>
 
           <Box flexDirection="column" gap="0.5">
-            <Text variant="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               Collectible Address
             </Text>
 
             <Box flexDirection="row" gap="1" paddingBottom="0.5">
-              <Text variant="normal" color="text50">
+              <Text variant="normal" fontWeight="medium" color="text50">
                 See addresses on network's
               </Text>
 
               <Text
                 variant="normal"
+                fontWeight="medium"
                 color="text50"
                 underline={!!tokenDirectory}
                 cursor={tokenDirectory ? 'pointer' : 'default'}
@@ -168,7 +169,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
           </Box>
 
           <Box flexDirection="column" gap="1">
-            <Text variant="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               Collectible Type
             </Text>
 
@@ -183,7 +184,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
           </Box>
 
           <Box flexDirection="column" gap="0.5">
-            <Text variant="normal" color="text100">
+            <Text variant="normal" fontWeight="medium" color="text80">
               Collectible Token ID
             </Text>
 
@@ -226,13 +227,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             <Image src={collectibleInfoResponse.image} style={{ width: '120px', height: 'auto' }} />
 
             <Box flexDirection="column" gap="2">
-              <Text variant="medium" color="text100">
+              <Text variant="medium" fontWeight="bold" color="text80">
                 {collectibleInfoResponse.name ?? ''}
               </Text>
-              <Text variant="small" color="text80">
+              <Text variant="small" fontWeight="medium" color="text80">
                 Your Balance:
               </Text>
-              <Text variant="medium" color="text100">
+              <Text variant="medium" fontWeight="bold" color="text80">
                 {Number(
                   ethers.formatUnits(
                     collectibleInfoResponse.balance as BigNumberish,