(signin): 💄 Social login colored logos

apps/builder/assets/icons.tsx

@@ -347,23 +347,6 @@ export const SendEmailIcon = (props: IconProps) => (
   </Icon>
 )
 
-export const FacebookIcon = (props: IconProps) => (
-  <Icon viewBox="0 0 512 512" {...props}>
-    <title>Logo Facebook</title>
-    <path
-      d="M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z"
-      fillRule="evenodd"
-    />
-  </Icon>
-)
-
-export const GoogleIcon = (props: IconProps) => (
-  <Icon viewBox="0 0 512 512" {...props}>
-    <title>{'Logo Google'}</title>
-    <path d="M473.16 221.48l-2.26-9.59H262.46v88.22H387c-12.93 61.4-72.93 93.72-121.94 93.72-35.66 0-73.25-15-98.13-39.11a140.08 140.08 0 01-41.8-98.88c0-37.16 16.7-74.33 41-98.78s61-38.13 97.49-38.13c41.79 0 71.74 22.19 82.94 32.31l62.69-62.36C390.86 72.72 340.34 32 261.6 32c-60.75 0-119 23.27-161.58 65.71C58 139.5 36.25 199.93 36.25 256s20.58 113.48 61.3 155.6c43.51 44.92 105.13 68.4 168.58 68.4 57.73 0 112.45-22.62 151.45-63.66 38.34-40.4 58.17-96.3 58.17-154.9 0-24.67-2.48-39.32-2.59-39.96z" />
-  </Icon>
-)
-
 export const GithubIcon = (props: IconProps) => (
   <Icon viewBox="0 0 512 512" {...props}>
     <title>{'Logo Github'}</title>

apps/builder/assets/logos/FacebookLogo.tsx

@@ -0,0 +1,11 @@
+import { IconProps, Icon } from '@chakra-ui/react'
+
+export const FacebookLogo = (props: IconProps) => (
+  <Icon viewBox="0 0 14222 14222" {...props}>
+    <circle cx="7111" cy="7112" r="7111" fill="#1977f3" />
+    <path
+      d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z"
+      fill="#fff"
+    />
+  </Icon>
+)

apps/builder/assets/logos/GoogleLogo.tsx

@@ -0,0 +1,24 @@
+import { IconProps, Icon } from '@chakra-ui/react'
+
+export const GoogleLogo = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...props}>
+    <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+      <path
+        fill="#4285F4"
+        d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+      />
+      <path
+        fill="#34A853"
+        d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+      />
+      <path
+        fill="#EA4335"
+        d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+      />
+    </g>
+  </Icon>
+)

apps/builder/assets/logos/index.tsx

@@ -12,3 +12,5 @@ export * from './TypebotLogo'
 export * from './WebflowLogo'
 export * from './WordpressLogo'
 export * from './WixLogo'
+export * from './GoogleLogo'
+export * from './FacebookLogo'

apps/builder/components/auth/SocialLoginButtons.tsx

@@ -1,9 +1,10 @@
 import { Stack, Button } from '@chakra-ui/react'
-import { FacebookIcon, GithubIcon, GoogleIcon } from 'assets/icons'
+import { GithubIcon } from 'assets/icons'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { stringify } from 'qs'
+import { FacebookLogo, GoogleLogo } from 'assets/logos'
 
 export const SocialLoginButtons = () => {
   const { query } = useRouter()
@@ -35,7 +36,7 @@ export const SocialLoginButtons = () => {
         Continue with GitHub
       </Button>
       <Button
-        leftIcon={<GoogleIcon />}
+        leftIcon={<GoogleLogo />}
         onClick={handleGoogleClick}
         data-testid="google"
         isLoading={['loading', 'authenticated'].includes(status)}
@@ -43,7 +44,7 @@ export const SocialLoginButtons = () => {
         Continue with Google
       </Button>
       <Button
-        leftIcon={<FacebookIcon />}
+        leftIcon={<FacebookLogo />}
         onClick={handleFacebookClick}
         data-testid="facebook"
         isLoading={['loading', 'authenticated'].includes(status)}