update icons for socials

tkhq · Nov 11, 2024 · 5f9387f · 5f9387f
1 parent 795e646
commit 5f9387f
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 39 deletions.
diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
@@ -60,15 +60,7 @@ export default function AuthPage({ turnkeyClientConfig }: AuthPageProps) {
     setConfig((prev) => {
       const newConfig = { ...prev };
 
-      if (key === "email") {
-        newConfig.email = !prev.email;
-        if (!newConfig.email) {
-          newConfig.passkey = false; // Ensure passkey is off if email is off
-        }
-      } else if (key === "passkey") {
-        newConfig.passkey = !prev.passkey;
-        newConfig.email = newConfig.passkey; // Sync email with passkey's state
-      } else if (key !== "socials") {
+      if (key !== "socials") {
         newConfig[key] = !prev[key];
       }
 

diff --git a/packages/sdk-react/src/components/auth/Apple.tsx b/packages/sdk-react/src/components/auth/Apple.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { sha256 } from "@noble/hashes/sha2";
 import { bytesToHex } from "@noble/hashes/utils";
 import AppleLogin from "react-apple-login";
-import { SiApple } from "@icons-pack/react-simple-icons";
 import styles from "./Socials.module.css";
 interface AppleAuthButtonProps {
   iframePublicKey: string;
@@ -52,9 +51,8 @@ const AppleAuthButton: React.FC<AppleAuthButtonProps> = ({
       responseMode="fragment"
       render={({ onClick }) => (
         <div onClick={onClick} className={styles.socialButton}>
-          {/* <SiApple /> */}
           <img src="/apple.svg" className = {styles.iconSmall}/>
-          <span> Apple</span>
+          <span>Continue with Apple</span>
         </div>
       )}
       callback={(response) => {

diff --git a/packages/sdk-react/src/components/auth/Auth.module.css b/packages/sdk-react/src/components/auth/Auth.module.css
@@ -45,8 +45,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 60px;
-  color: gray;
+  width: 60px;
+  height: 60px;
 }
 
 .authCard {

diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -9,14 +9,11 @@ import {
   oauth,
 } from "../../actions/";
 import { MuiPhone } from "./PhoneInput";
-import OTPInput from "./OtpInput";
+import OtpInput from "./OtpInput";
 import GoogleAuthButton from "./Google";
 import AppleAuthButton from "./Apple";
 import FacebookAuthButton from "./Facebook";
 import { CircularProgress } from "@mui/material";
-import GoogleIcon from "@mui/icons-material/Google";
-import FacebookIcon from "@mui/icons-material/Facebook";
-import AppleIcon from "@mui/icons-material/Apple";
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 interface AuthProps {
@@ -255,13 +252,13 @@ const Auth: React.FC<AuthProps> = ({ onHandleAuthSuccess, authConfig }) => {
               className={styles.circularProgress}
             />
             {oauthLoading === "Google" && (
-              <GoogleIcon className={styles.oauthIcon} />
+              <img src = "/google.svg" className = {styles.oauthIcon}/>
             )}
             {oauthLoading === "Facebook" && (
-              <FacebookIcon className={styles.oauthIcon} />
+                            <img src = "/facebook.svg" className = {styles.oauthIcon}/>
             )}
             {oauthLoading === "Apple" && (
-              <AppleIcon className={styles.oauthIcon} />
+                            <img src = "/apple.svg" className = {styles.oauthIcon}/>
             )}
           </div>
           <div className={styles.poweredBy}>
@@ -427,7 +424,7 @@ const Auth: React.FC<AuthProps> = ({ onHandleAuthSuccess, authConfig }) => {
                     {step === "otpEmail" ? email : formatPhoneNumber(phone)}
                   </div>
                 </span>
-                <OTPInput
+                <OtpInput
                   ref = {otpInputRef}
                   onComplete={handleValidateOtp}
                   hasError={!!otpError}

diff --git a/packages/sdk-react/src/components/auth/Facebook.tsx b/packages/sdk-react/src/components/auth/Facebook.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { SiFacebook } from "@icons-pack/react-simple-icons";
 import styles from "./Socials.module.css";
 import { exchangeCodeForToken, generateChallengePair } from "./facebook-utils";
 import { sha256 } from "@noble/hashes/sha256";
@@ -96,7 +95,7 @@ const FacebookAuthButton: React.FC<FacebookAuthButtonProps> = ({
     <div className={styles.socialButton} onClick={initiateFacebookLogin}>
       {/* <SiFacebook /> */}
       <img src="/facebook.svg" className = {styles.iconSmall}/>
-      <span>Facebook</span>
+      <span>Continue with Facebook</span>
     </div>
   );
 };

diff --git a/packages/sdk-react/src/components/auth/Google.tsx b/packages/sdk-react/src/components/auth/Google.tsx
@@ -34,9 +34,8 @@ const GoogleAuthButton: React.FC<GoogleAuthButtonProps> = ({
   return (
     <GoogleOAuthProvider clientId={clientId}>
     <div className={styles.socialButton} onClick={handleLogin}>
-      {/* <SiFacebook /> */}
       <img src="/google.svg" className = {styles.iconSmall}/>
-      <span>Google</span>
+      <span>Continue with Google</span>
     </div>
     </GoogleOAuthProvider>
   );

diff --git a/packages/sdk-react/src/components/auth/OTPInput.tsx b/packages/sdk-react/src/components/auth/OTPInput.tsx
@@ -1,12 +1,12 @@
 import React, { useState, forwardRef, useImperativeHandle } from "react";
 import { TextField, Box } from "@mui/material";
 
-interface OTPInputProps {
+interface OtpInputProps {
   onComplete: (otp: string) => void;
   hasError: boolean;
 }
 
-const OTPInput = forwardRef<unknown, OTPInputProps>(
+const OtpInput = forwardRef<unknown, OtpInputProps>(
   ({ onComplete, hasError }, ref) => {
     const [otp, setOtp] = useState<string[]>(Array(6).fill(""));
 
@@ -94,4 +94,4 @@ const OTPInput = forwardRef<unknown, OTPInputProps>(
   }
 );
 
-export default OTPInput;
+export default OtpInput;
diff --git a/packages/sdk-react/src/components/auth/Socials.module.css b/packages/sdk-react/src/components/auth/Socials.module.css
@@ -1,5 +1,5 @@
 .socialButton {
-  padding: 10px 16px 10px 16px;
+  padding: 10px 16px;
   gap: 8px;
   color: var(--Greyscale-900, #2b2f33);
   width: 100%;
@@ -8,21 +8,19 @@
   border: 1px solid var(--Greyscale-400, #a2a7ae);
   border-radius: 8px;
   cursor: pointer;
-  text-align: start;
+  text-align: center;
+  display: flex;
   align-items: center;
   justify-content: center;
-    display: flex;
-    align-items: center; 
-    justify-content: start; 
-    transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 .socialButton:hover {
-  background-color: #f0f8ff; 
+  background-color: #f0f8ff;
 }
 
 .iconSmall {
-  width: 24px;
-  height: 24px;
+  width: 20x;
+  height: 20px;
   margin-right: 4px;
-}
+}