feat: cleanup ui (#4092)

- Reduced border radius on buttons
- Reduced connected button size
- Removed layout shift between connected and unconnected states
- Remove Rainbow from default wallets (replaced with Rabby)

https://github.com/user-attachments/assets/334f09d5-46d1-40e3-8b3a-5937771f277c

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on UI cosmetic improvements for wallet-related components.

### Detailed summary
- Added `io.rabby` wallet
- Adjusted padding and borderRadius in various components
- Modified button sizes and styles
- Updated wallet image sizes and text styles

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.changeset/gold-taxis-count.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+UI cosmetic improvements

apps/playground-web/src/lib/constants.ts

@@ -33,7 +33,6 @@ export const WALLETS = [
   }),
   createWallet("io.metamask"),
   createWallet("com.coinbase.wallet"),
-  createWallet("me.rainbow"),
   createWallet("io.rabby"),
   createWallet("com.trustwallet.app"),
 ];

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -290,7 +290,7 @@ export function ConnectButton(props: ConnectButtonProps) {
   const size = useMemo(() => {
     return !canFitWideModal() || wallets.length === 1
       ? "compact"
-      : props.connectModal?.size || "wide";
+      : props.connectModal?.size || "compact";
   }, [wallets.length, props.connectModal?.size]);
 
   const autoConnectComp = props.autoConnect !== false && (
@@ -318,7 +318,8 @@ export function ConnectButton(props: ConnectButtonProps) {
         variant="primary"
         type="button"
         style={{
-          minWidth: "140px",
+          minWidth: "150px",
+          minHeight: "52px",
           ...props.connectButton?.style,
         }}
       >
@@ -419,7 +420,9 @@ function ConnectButtonInner(
         variant="primary"
         type="button"
         style={{
-          minWidth: "140px",
+          minWidth: "150px",
+          minHeight: "52px",
+          fontSize: "16px",
           ...props.connectButton?.style,
         }}
         aria-label={
@@ -456,7 +459,8 @@ function ConnectButtonInner(
           variant="primary"
           type="button"
           style={{
-            minWidth: "140px",
+            minWidth: "150px",
+            minHeight: "52px",
             ...props.connectButton?.style,
           }}
         >
@@ -476,7 +480,8 @@ function ConnectButtonInner(
             }}
             className={props.signInButton?.className}
             style={{
-              minWidth: "140px",
+              minWidth: "150px",
+              minHeight: "52px",
               ...props.signInButton?.style,
             }}
           >

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -196,33 +196,33 @@ export const ConnectedWalletDetails: React.FC<{
       {ensAvatarQuery.data ? (
         <Img
           src={ensAvatarQuery.data}
-          width={iconSize.lg}
-          height={iconSize.lg}
+          width={iconSize.sm}
+          height={iconSize.sm}
           style={{
-            borderRadius: radius.sm,
+            borderRadius: radius.xs,
           }}
           client={client}
         />
       ) : activeWallet?.id ? (
-        <WalletImage size={iconSize.lg} id={activeWallet.id} client={client} />
+        <WalletImage size={iconSize.md} id={activeWallet.id} client={client} />
       ) : (
-        <GenericWalletIcon size={iconSize.lg} />
+        <GenericWalletIcon size={iconSize.md} />
       )}
 
-      <Container flex="column" gap="xxs">
+      <Container flex="column" gap="3xs">
         {/* Address */}
 
         {addressOrENS ? (
           <Text
-            size="sm"
+            size="xs"
             color="primaryText"
             weight={500}
             className={`${TW_CONNECTED_WALLET}__address`}
           >
             {addressOrENS}
           </Text>
         ) : (
-          <Skeleton height={fontSize.sm} width="88px" />
+          <Skeleton height={fontSize.sm} width="80px" />
         )}
 
         {/* Balance */}
@@ -236,7 +236,7 @@ export const ConnectedWalletDetails: React.FC<{
             {balanceQuery.data.symbol}
           </Text>
         ) : (
-          <Skeleton height={fontSize.xs} width="82px" />
+          <Skeleton height={fontSize.xs} width="70px" />
         )}
       </Container>
     </WalletInfoButton>
@@ -886,20 +886,21 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
     all: "unset",
     background: theme.colors.connectedButtonBg,
     border: `1px solid ${theme.colors.borderColor}`,
-    padding: `${spacing.sm} ${spacing.sm}`,
-    borderRadius: radius.lg,
+    padding: `${spacing.xs} ${spacing.sm}`,
+    borderRadius: radius.md,
     cursor: "pointer",
     display: "inline-flex",
     alignItems: "center",
-    minWidth: "180px",
-    gap: spacing.sm,
+    minWidth: "150px",
+    minHeight: "52px",
+    gap: spacing.xs,
     boxSizing: "border-box",
     WebkitTapHighlightColor: "transparent",
     lineHeight: "normal",
     animation: `${fadeInAnimation} 300ms ease`,
     [media.mobile]: {
       gap: spacing.sm,
-      padding: `${spacing.xs} ${spacing.sm}`,
+      padding: `${spacing.xs} ${spacing.xs}`,
       img: {
         width: `${iconSize.md}px`,
         height: `${iconSize.md}px`,

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -89,7 +89,7 @@ function AllWalletsUI(props: {
 
           <Input
             style={{
-              padding: `${spacing.sm} ${spacing.md} ${spacing.sm} ${spacing.xxl}`,
+              padding: `${spacing.sm} ${spacing.sm} ${spacing.sm} ${spacing.xxl}`,
             }}
             tabIndex={-1}
             variant="outline"

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx

@@ -24,13 +24,13 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
       style={{
         display: "flex",
         justifyContent: "flex-start",
-        padding: spacing.md,
+        padding: spacing.sm,
       }}
       onClick={() => {
         props.onClick();
       }}
     >
-      <Container flex="row" gap="md" center="y" color="accentText">
+      <Container flex="row" gap="sm" center="y" color="accentText">
         <Img
           client={props.client}
           src={props.icon}

packages/thirdweb/src/react/web/ui/components/Modal.tsx

@@ -171,7 +171,7 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
     background: theme.colors.modalBg,
     "--bg": theme.colors.modalBg,
     color: theme.colors.primaryText,
-    borderRadius: radius.xl,
+    borderRadius: radius.lg,
     position: "fixed",
     top: "50%",
     left: "50%",
@@ -196,7 +196,7 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
       transform: "none",
       width: "100vw",
       animation: `${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1)`,
-      borderRadius: radius.xxl,
+      borderRadius: radius.xl,
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0,
       maxWidth: "none !important",

packages/thirdweb/src/react/web/ui/components/buttons.tsx

@@ -27,9 +27,9 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     padding: `${fontSize.sm} ${fontSize.sm}`,
-    fontSize: fontSize.md,
+    fontSize: fontSize.sm,
     fontWeight: 500,
     boxSizing: "border-box",
     WebkitTapHighlightColor: "transparent",
@@ -90,7 +90,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     ...(() => {
       if (props.variant === "outline") {
         return {
-          border: `1.5px solid ${theme.colors.borderColor}`,
+          border: `1px solid ${theme.colors.borderColor}`,
           "&:hover": {
             borderColor: theme.colors.accentText,
           },
@@ -102,7 +102,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
 
       if (props.variant === "ghost") {
         return {
-          border: "1.5px solid transparent",
+          border: "1px solid transparent",
           "&:hover": {
             borderColor: theme.colors.accentText,
           },

packages/thirdweb/src/react/web/ui/components/formElements.tsx

@@ -43,7 +43,7 @@ export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
     width: "100%",
     outline: "none",
     border: "none",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     color: theme.colors.primaryText,
     WebkitAppearance: "none",
     appearance: "none",
@@ -109,7 +109,7 @@ export const InputContainer = /* @__PURE__ */ StyledDiv(() => {
   const theme = useCustomTheme();
   return {
     display: "flex",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     boxShadow: `0 0 0px 1.5px ${theme.colors.borderColor}`,
     "&:focus-within": {
       boxShadow: `0 0 0px 2px ${theme.colors.accentText}`,

packages/thirdweb/src/react/web/wallets/defaultWallets.ts

@@ -24,6 +24,7 @@ export function getDefaultWallets(options?: {
       chains: options?.chains,
     }),
     createWallet(RAINBOW),
+    createWallet("io.rabby"),
     createWallet(ZERION),
   ];
 }