ui updates in buy widget

Author: MananTank

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -150,7 +150,7 @@ export function FundWallet({
           style={{
             backgroundColor: theme.colors.tertiaryBg,
             border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.md,
+            borderRadius: radius.lg,
             flexWrap: "nowrap",
           }}
         >
@@ -251,11 +251,11 @@ export function FundWallet({
         {/* Quick Amount Buttons */}
         {presetOptions && (
           <>
-            <Spacer y="md" />
+            <Spacer y="sm" />
             <Container
               center="x"
               flex="row"
-              gap="xs"
+              gap="sm"
               style={{
                 justifyContent: "space-evenly",
               }}
@@ -268,6 +268,7 @@ export function FundWallet({
                     backgroundColor: theme.colors.tertiaryBg,
                     flex: 1,
                     fontSize: fontSize.sm,
+                    borderRadius: radius.lg,
                     padding: `${spacing.sm} ${spacing.md}`,
                   }}
                   variant="outline"
@@ -279,7 +280,7 @@ export function FundWallet({
           </>
         )}
 
-        <Spacer y="md" />
+        <Spacer y="sm" />
 
         <Container
           center="y"
@@ -291,7 +292,7 @@ export function FundWallet({
           style={{
             backgroundColor: theme.colors.tertiaryBg,
             border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.md,
+            borderRadius: radius.lg,
           }}
         >
           {receiver ? (
@@ -336,7 +337,7 @@ export function FundWallet({
           }}
           style={{
             fontSize: fontSize.md,
-            padding: `${spacing.sm} ${spacing.md}`,
+            borderRadius: radius.lg,
           }}
           variant="primary"
         >

packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx

@@ -60,7 +60,7 @@ export function TokenAndChain({
               height:
                 size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
               position: "absolute",
-              right: "-6px",
+              right: "-2px",
               width: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
             }}
           >
@@ -73,7 +73,7 @@ export function TokenAndChain({
         )}
       </Container>
 
-      <Container flex="column" gap="3xs" style={{ minWidth: 0 }}>
+      <Container flex="column" gap="4xs" style={{ minWidth: 0 }}>
         <Text
           color="primaryText"
           size={size === "xl" ? "lg" : "sm"}
@@ -83,6 +83,7 @@ export function TokenAndChain({
             whiteSpace: "nowrap",
           }}
           weight={600}
+          trackingTight
         >
           {token.name}
         </Text>

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -269,7 +269,7 @@ export function PaymentDetails({
     <Container flex="column" fullHeight p="md">
       <ModalHeader onBack={onBack} title={title || "Payment Details"} />
 
-      <Spacer y="xl" />
+      <Spacer y="lg" />
 
       <Container flex="column">
         {/* Quote Summary */}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -189,7 +189,7 @@ export function FiatProviderSelection({
         >
           <Spinner color="secondaryText" size="xl" />
           <Spacer y="lg" />
-          <Text center color="primaryText" size="lg" weight={500}>
+          <Text center color="primaryText" size="lg" weight={600} trackingTight>
             Searching Providers
           </Text>
           <Spacer y="xs" />