fix(react): update social button styling and behavior logic (#3867)

![Screenshot 2024-07-29 at 5.35.57 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/G5kV6fAq4H1wu10SVop6/b85da5cc-045e-47b9-bde4-e85321c2d802.png)

![Screenshot 2024-07-29 at 4.33.04 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/G5kV6fAq4H1wu10SVop6/36aa163a-2d6a-450f-879f-35a81078360a.png)

![Screenshot 2024-07-29 at 4.30.51 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/G5kV6fAq4H1wu10SVop6/587c10c8-ccd3-4578-a609-83842a037894.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR increases the minimum number of social logins displayed before switching to a different layout. It also adjusts the styling of the social login buttons.

### Detailed summary
- Increased minimum social logins displayed to 3
- Adjusted social login buttons layout based on the number of logins
- Updated styling for social login buttons to improve alignment and spacing

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

<!-- end pr-codex -->

Author: gregfromstl

.changeset/fluffy-snails-build.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix wallet social login button styling

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

@@ -15,6 +15,7 @@ export const WALLETS = [
         "passkey",
         "phone",
         "farcaster",
+        "facebook",
       ],
       mode: "redirect",
     },

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -234,7 +234,7 @@ export const ConnectWalletSocialOptions = (
     props.select();
   }
 
-  const showOnlyIcons = socialLogins.length > 1;
+  const showOnlyIcons = socialLogins.length > 2;
 
   return (
     <Container
@@ -247,22 +247,33 @@ export const ConnectWalletSocialOptions = (
       {/* Social Login */}
       {hasSocialLogins && (
         <Container
-          flex={showOnlyIcons ? "row" : "column"}
+          flex="row"
           center="x"
-          gap="sm"
+          gap={socialLogins.length > 4 ? "xs" : "sm"}
           style={{
             justifyContent: "space-between",
+            display: "grid",
+            gridTemplateColumns: `repeat(${socialLogins.length}, 1fr)`,
           }}
         >
           {socialLogins.map((loginMethod) => {
-            const imgIconSize = showOnlyIcons ? iconSize.lg : iconSize.md;
+            const imgIconSize = (() => {
+              if (!showOnlyIcons) {
+                return iconSize.md;
+              } else {
+                if (socialLogins.length > 4) {
+                  return iconSize.md;
+                }
+                return iconSize.lg;
+              }
+            })();
+
             return (
               <SocialButton
                 aria-label={`Login with ${loginMethod}`}
                 data-variant={showOnlyIcons ? "icon" : "full"}
                 key={loginMethod}
                 variant={"outline"}
-                fullWidth={!showOnlyIcons}
                 onClick={() => {
                   handleSocialLogin(loginMethod as SocialAuthOption);
                 }}
@@ -274,7 +285,7 @@ export const ConnectWalletSocialOptions = (
                   client={props.client}
                 />
                 {!showOnlyIcons &&
-                  loginMethodsLabel[loginMethod as SocialAuthOption]}
+                  `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
               </SocialButton>
             );
           })}
@@ -379,11 +390,12 @@ export const ConnectWalletSocialOptions = (
 };
 
 const SocialButton = /* @__PURE__ */ styled(Button)({
+  flexGrow: 1,
   "&[data-variant='full']": {
     display: "flex",
     justifyContent: "flex-start",
     padding: spacing.md,
-    gap: spacing.md,
+    gap: spacing.sm,
     fontSize: fontSize.md,
     fontWeight: 500,
     transition: "background-color 0.2s ease",
@@ -393,6 +405,5 @@ const SocialButton = /* @__PURE__ */ styled(Button)({
   },
   "&[data-variant='icon']": {
     padding: spacing.sm,
-    flexGrow: 1,
   },
 });