From 8d51861e12fcd95c561d577889c2a15d35d4e2f0 Mon Sep 17 00:00:00 2001
From: LautaroPetaccio <lausuper@gmail.com>
Date: Thu, 10 Oct 2024 16:00:35 -0300
Subject: [PATCH 1/2] feat: Add Facebook Magic Provider

---
 src/assets/images/facebook.svg                | 49 +++++++++++++++++++
 .../Connection/Connection.module.css          | 23 +++++++--
 src/components/Connection/Connection.tsx      |  1 +
 src/components/Connection/Connection.types.ts |  6 ++-
 .../ConnectionOption.module.css               |  4 ++
 src/components/Pages/LoginPage/LoginPage.tsx  |  2 +-
 src/components/Pages/LoginPage/utils.ts       |  2 +
 7 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/facebook.svg

diff --git a/src/assets/images/facebook.svg b/src/assets/images/facebook.svg
new file mode 100644
index 0000000..c63c1ef
--- /dev/null
+++ b/src/assets/images/facebook.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg9"
+   width="666.66669"
+   height="666.66718"
+   viewBox="0 0 666.66668 666.66717"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs13">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath25">
+      <path
+         d="M 0,700 H 700 V 0 H 0 Z"
+         id="path23" />
+    </clipPath>
+  </defs>
+  <g
+     id="g17"
+     transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)">
+    <g
+       id="g19">
+      <g
+         id="g21"
+         clip-path="url(#clipPath25)">
+        <g
+           id="g27"
+           transform="translate(600,350)">
+          <path
+             d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0"
+             style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path29" />
+        </g>
+        <g
+           id="g31"
+           transform="translate(447.9175,273.6036)">
+          <path
+             d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path33" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/Connection/Connection.module.css b/src/components/Connection/Connection.module.css
index 662a5a0..668ea99 100644
--- a/src/components/Connection/Connection.module.css
+++ b/src/components/Connection/Connection.module.css
@@ -88,13 +88,21 @@
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 24px
+  gap: 24px;
 }
 
 .showMoreSecondaryOptions + .showMoreSecondaryOptions {
   margin-top: 24px;
 }
 
+.showMoreSecondaryOptions + .line {
+  margin-top: 14px;
+}
+
+.line + .showMoreSecondaryOptions {
+  margin-top: 14px;
+}
+
 /* Not showing? */
 
 .primaryOption {
@@ -107,9 +115,14 @@
 
 @media (max-width: 320px) {
   .showMoreSecondaryOptions {
-      grid-template-columns: repeat(1, 1fr);
-    }
+    grid-template-columns: repeat(1, 1fr);
+  }
   .secondaryOptionButton span :global(.ui.button.primary) {
-    margin: auto
+    margin: auto;
   }
-}
\ No newline at end of file
+}
+
+.line {
+  border: 1px solid white;
+  width: 80%;
+}
diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
index a9307be..67a2ae2 100644
--- a/src/components/Connection/Connection.tsx
+++ b/src/components/Connection/Connection.tsx
@@ -171,6 +171,7 @@ export const Connection = (props: ConnectionProps): JSX.Element => {
             loadingOption={loadingOption}
           />
         )}
+        {/* <div className={styles.line}></div> */}
         {showMore && hasWeb3SecondaryOptions && (
           <Secondary
             testId={WEB3_SECONDARY_TEST_ID}
diff --git a/src/components/Connection/Connection.types.ts b/src/components/Connection/Connection.types.ts
index c06a5b3..663e8fc 100644
--- a/src/components/Connection/Connection.types.ts
+++ b/src/components/Connection/Connection.types.ts
@@ -10,7 +10,8 @@ export enum ConnectionOptionType {
   GOOGLE = 'google',
   APPLE = 'apple',
   DISCORD = 'discord',
-  X = 'x'
+  X = 'x',
+  FACEBOOK = 'facebook'
 }
 
 export const connectionOptionTitles: { [key in ConnectionOptionType]: string } = {
@@ -25,7 +26,8 @@ export const connectionOptionTitles: { [key in ConnectionOptionType]: string } =
   [ConnectionOptionType.GOOGLE]: 'Google',
   [ConnectionOptionType.APPLE]: 'Apple',
   [ConnectionOptionType.DISCORD]: 'Discord',
-  [ConnectionOptionType.X]: 'X'
+  [ConnectionOptionType.X]: 'X',
+  [ConnectionOptionType.FACEBOOK]: 'Facebook'
 }
 
 export type MetamaskEthereumWindow = typeof window.ethereum & { isMetaMask?: boolean }
diff --git a/src/components/Connection/ConnectionOption/ConnectionOption.module.css b/src/components/Connection/ConnectionOption/ConnectionOption.module.css
index 8ceb29a..d7624b4 100644
--- a/src/components/Connection/ConnectionOption/ConnectionOption.module.css
+++ b/src/components/Connection/ConnectionOption/ConnectionOption.module.css
@@ -51,3 +51,7 @@
 .icon-x {
   background-image: url('../../../assets/images/x.svg');
 }
+
+.icon-facebook {
+  background-image: url('../../../assets/images/facebook.svg');
+}
diff --git a/src/components/Pages/LoginPage/LoginPage.tsx b/src/components/Pages/LoginPage/LoginPage.tsx
index d830240..89a8ee1 100644
--- a/src/components/Pages/LoginPage/LoginPage.tsx
+++ b/src/components/Pages/LoginPage/LoginPage.tsx
@@ -203,7 +203,7 @@ export const LoginPage = () => {
             loadingOption={currentConnectionType}
             socialOptions={{
               primary: ConnectionOptionType.GOOGLE,
-              secondary: [ConnectionOptionType.DISCORD, ConnectionOptionType.APPLE, ConnectionOptionType.X]
+              secondary: [ConnectionOptionType.DISCORD, ConnectionOptionType.APPLE, ConnectionOptionType.X, ConnectionOptionType.FACEBOOK]
             }}
             web3Options={
               isMobile
diff --git a/src/components/Pages/LoginPage/utils.ts b/src/components/Pages/LoginPage/utils.ts
index f2445cd..0146399 100644
--- a/src/components/Pages/LoginPage/utils.ts
+++ b/src/components/Pages/LoginPage/utils.ts
@@ -16,6 +16,7 @@ export function fromConnectionOptionToProviderType(connectionType: ConnectionOpt
     case ConnectionOptionType.X:
     case ConnectionOptionType.GOOGLE:
     case ConnectionOptionType.APPLE:
+    case ConnectionOptionType.FACEBOOK:
       return ProviderType.MAGIC
     case ConnectionOptionType.WALLET_CONNECT:
     case ConnectionOptionType.METAMASK_MOBILE:
@@ -64,6 +65,7 @@ export async function connectToProvider(connectionOption: ConnectionOptionType):
 
     const url = new URL(window.location.href)
     url.pathname = '/auth/callback'
+    console.log('Connecting to provider', connectionOption)
 
     await magic.oauth.loginWithRedirect({
       provider: connectionOption === ConnectionOptionType.X ? 'twitter' : (connectionOption as OAuthProvider),

From 8016fb8d4d5a5e65b3aeb418a00664816236b362 Mon Sep 17 00:00:00 2001
From: LautaroPetaccio <lausuper@gmail.com>
Date: Thu, 10 Oct 2024 16:04:30 -0300
Subject: [PATCH 2/2] fix: Add background image transition

---
 src/components/Pages/LoginPage/LoginPage.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/LoginPage/LoginPage.module.css b/src/components/Pages/LoginPage/LoginPage.module.css
index 5c08a01..0814e98 100644
--- a/src/components/Pages/LoginPage/LoginPage.module.css
+++ b/src/components/Pages/LoginPage/LoginPage.module.css
@@ -15,6 +15,7 @@
   background-size: cover;
   background-position: right;
   animation: move-background 10s linear infinite alternate;
+  transition: background-image 0.8s;
   z-index: -1;
 }
 
@@ -116,7 +117,7 @@
   from {
     transform: translateX(0);
   }
-  to { 
+  to {
     transform: translateX(10%);
   }
 }