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

thirdweb-dev · Jul 29, 2024 · 8e03dee · 8e03dee
1 parent 77b852a
commit 8e03dee
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/.changeset/fluffy-snails-build.md b/.changeset/fluffy-snails-build.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix wallet social login button styling
diff --git a/apps/playground-web/src/lib/constants.ts b/apps/playground-web/src/lib/constants.ts
@@ -15,6 +15,7 @@ export const WALLETS = [
         "passkey",
         "phone",
         "farcaster",
+        "facebook",
       ],
       mode: "redirect",
     },

diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/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,
   },
 });