updated styling based on dec9 feedback

tkhq · Dec 9, 2024 · 07a03af · 07a03af
1 parent befb3cf
commit 07a03af
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 140 deletions.
diff --git a/examples/react-components/src/app/dashboard/dashboard.css b/examples/react-components/src/app/dashboard/dashboard.css
@@ -15,7 +15,13 @@
   src: url("../../../public/fonts/inter/Inter-SemiBold.woff2?v=3.19")
     format("woff2");
 }
+
+.MuiTypography-root {
+  font-family: "Inter", Arial, sans-serif !important;
+}
+
 body {
+  font-family: "Inter";
   margin: 0;
   padding: 0;
   width: 100vw;
@@ -77,6 +83,7 @@ body {
 }
 
 .socialsTitle {
+  font-family: "Inter";
   font-size: 1rem;
   font-weight: 700;
   line-height: 26px;
@@ -86,6 +93,7 @@ body {
 }
 
 .configTitle {
+  font-family: "Inter";
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 36px;

diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx
@@ -42,7 +42,6 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import Navbar from "../components/Navbar";
 import { Toaster, toast } from "sonner";
 
-
 export default function Dashboard() {
   const router = useRouter();
   const { turnkey, authIframeClient, passkeyClient } = useTurnkey();
@@ -436,9 +435,7 @@ export default function Dashboard() {
       <link rel="preload" href="/eth-hover.svg" as="image" />
       <link rel="preload" href="/solana-hover.svg" as="image" />
       <div className="dashboardCard">
-        <Typography variant="h6" className="configTitle">
-          Login methods
-        </Typography>
+        <div className="configTitle">Login methods</div>
         <div className="loginMethodContainer">
           <div className="loginMethodRow">
             <div className="labelContainer">
@@ -490,7 +487,7 @@ export default function Dashboard() {
             )}
           </div>
 
-          <Typography className="socialsTitle">Socials</Typography>
+          <div className="socialsTitle">Socials</div>
           <div className="loginMethodRow">
             <div className="labelContainer">
               <img src="/google.svg" className="iconSmall" />

diff --git a/examples/react-components/src/app/index.css b/examples/react-components/src/app/index.css
@@ -15,7 +15,14 @@
   src: url("../../public/fonts/inter/Inter-SemiBold.woff2?v=3.19")
     format("woff2");
 }
+.MuiTypography-root {
+  font-family: "Inter", Arial, sans-serif !important;
+}
+:root {
+  font-family: "Inter";
+}
 body {
+  font-family: "Inter";
   margin: 0;
   padding: 0;
   width: 100vw;
@@ -24,11 +31,10 @@ body {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
-  font-family: Inter, sans-serif;
 }
 
 .main {
-  font-family: Inter;
+  font-family: "Inter";
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,6 +67,7 @@ body {
 }
 
 .configTitle {
+  font-family: "Inter";
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 36px;

diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
@@ -141,9 +141,7 @@ export default function AuthPage() {
     <main className="main">
       <Navbar />
       <div className="authConfigCard">
-        <Typography variant="h6" className="configTitle">
-          Authentication config
-        </Typography>
+        <div className="configTitle">Authentication config</div>
 
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="configList">
@@ -180,7 +178,13 @@ export default function AuthPage() {
                               onChange={() => toggleSocials("enabled")}
                             />
                           </div>
-                          <div className="toggleSocialIndividualRow" style={{borderTopLeftRadius :"8px", borderTopRightRadius :"8px"}}>
+                          <div
+                            className="toggleSocialIndividualRow"
+                            style={{
+                              borderTopLeftRadius: "8px",
+                              borderTopRightRadius: "8px",
+                            }}
+                          >
                             <div className="labelContainer">
                               <img src="/google.svg" className="iconSmall" />
                               <Typography>Google</Typography>
@@ -200,7 +204,13 @@ export default function AuthPage() {
                               onChange={() => toggleSocials("apple")}
                             />
                           </div>
-                          <div className="toggleSocialIndividualRow" style={{borderBottomLeftRadius :"8px", borderBottomRightRadius :"8px"}}>
+                          <div
+                            className="toggleSocialIndividualRow"
+                            style={{
+                              borderBottomLeftRadius: "8px",
+                              borderBottomRightRadius: "8px",
+                            }}
+                          >
                             <div className="labelContainer">
                               <img src="/facebook.svg" className="iconSmall" />
                               <Typography>Facebook</Typography>

diff --git a/packages/sdk-react/src/components/auth/Auth.module.css b/packages/sdk-react/src/components/auth/Auth.module.css
@@ -1,5 +1,4 @@
 .authCardLoading {
-  font-family: Inter;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -61,7 +60,6 @@
 }
 
 .authCard {
-  font-family: Inter;
   position: relative;
   width: 100%;
   max-width: 450px;
@@ -94,6 +92,7 @@
 }
 
 .authButton {
+  font-family: "Inter";
   padding: 10px 16px;
   gap: 8px;
   color: var(--button-text);
@@ -130,7 +129,6 @@
 }
 
 .separator span {
-  font-family: Inter;
   color: var(--text-secondary);
   padding: 0 10px;
   position: relative;
@@ -253,7 +251,7 @@
 
 .noPasskeyLink {
   color: var(--accent-color);
-  font-size: 0.9rem;
+  font-size: 1rem;
   margin-top: 8px;
   cursor: pointer;
   align-items: center;

diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -200,7 +200,9 @@ const Auth: React.FC<AuthProps> = ({
       if (sessionResponse?.credentialBundle) {
         await handleAuthSuccess(sessionResponse.credentialBundle);
       } else {
-        setPasskeySignupError("Failed to login with passkey. Please try again.");
+        setPasskeySignupError(
+          "Failed to login with passkey. Please try again."
+        );
       }
     } catch {
       setPasskeySignupError(

diff --git a/packages/sdk-react/src/components/auth/OtpVerification.module.css b/packages/sdk-react/src/components/auth/OtpVerification.module.css
@@ -7,7 +7,6 @@
 }
 
 .verification {
-  font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 16px;
@@ -22,10 +21,10 @@
   align-items: center;
   position: relative;
   box-sizing: border-box;
-  max-width: 400px; 
+  max-width: 400px;
   padding: 8px;
-  margin: 0 auto; 
-  background-color: var(--card-background-color); 
+  margin: 0 auto;
+  background-color: var(--card-background-color);
   border-radius: 8px;
 }
 
@@ -34,15 +33,15 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%; 
+  width: 100%;
 }
 
 .otpInputWrapper {
-  width: 100%; 
+  width: 100%;
 }
 
 .loadingWrapper {
-  position: absolute; /* Ensure it overlays the content */
+  position: absolute;
   width: 100px;
   height: 100px;
   display: flex;
@@ -54,50 +53,44 @@
 .errorText {
   min-height: 16px;
   text-align: center;
-  margin-top: 12px;
+  margin-top: 8px;
   color: var(--error-color);
-  font-size: 12px;
-  max-width: 320px; /* Ensures error messages align with the OtpInput */
+  font-size: 14px;
+  margin-bottom: 8px;
+  max-width: 320px;
   word-wrap: break-word;
 }
 
+.verificationText {
+  font-size: 18px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
 
 .verificationBold {
-  font-family: Inter;
   color: var(--text-primary);
-  font-weight: 700;
-  margin-top: 8px;
+  font-weight: 600;
 }
 
 .verificationIcon {
   display: flex;
   justify-content: center;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
-
 .circularProgress {
   position: absolute;
   color: var(--accent-color);
 }
 .resendCode {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 14px;
   letter-spacing: -0.01em;
   text-align: center;
   color: var(--text-secondary);
 }
 
 .resendCodeBold {
-  font-family: Inter;
   color: var(--text-primary);
-  font-weight: 700;
+  font-weight: 600;
   cursor: pointer;
 }
-
-.phoneInput {
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-
diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx
@@ -35,7 +35,7 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
 
   const handleValidateOtp = async (otp: string) => {
     setOtpError(null);
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       const authResponse = await otpAuth({
         suborgID: suborgId,
@@ -53,7 +53,7 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
     } catch (error) {
       setOtpError("An error occurred. Please try again.");
     }
-    setIsLoading(false)
+    setIsLoading(false);
   };
 
   const handleResendCode = async () => {
@@ -84,7 +84,10 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
           />
         </div>
       )}
-      <div className={styles.contentWrapper} style={{ opacity: isLoading ? 0.5 : 1 }}>
+      <div
+        className={styles.contentWrapper}
+        style={{ opacity: isLoading ? 0.5 : 1 }}
+      >
         <div className={styles.verificationIcon}>
           {type === "otpEmail" ? (
             <EmailIcon
@@ -102,27 +105,30 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
             />
           )}
         </div>
-
-        <span>
-          Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"} to{" "}
+
+        <span className={styles.verificationText}>
+          Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"}{" "}
+          to{" "}
           <span className={styles.verificationBold}>
             {type === "otpEmail" ? contact : formatPhoneNumber(contact)}
           </span>
         </span>
-  
+
         <div className={styles.otpInputWrapper}>
           <OtpInput
             ref={otpInputRef}
             onComplete={handleValidateOtp}
             hasError={!!otpError}
           />
         </div>
-  
+
         <div className={styles.errorText}>{otpError ? otpError : " "}</div>
-  
+
         <div className={styles.resendCode}>
           <span
-            onClick={resendText === "Resend code" ? handleResendCode : undefined}
+            onClick={
+              resendText === "Resend code" ? handleResendCode : undefined
+            }
             style={{
               cursor: resendText === "Resend code" ? "pointer" : "not-allowed",
             }}
@@ -134,7 +140,6 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
       </div>
     </div>
   );
-
 };
 
 export default OtpVerification;
diff --git a/packages/sdk-react/src/components/auth/Socials.module.css b/packages/sdk-react/src/components/auth/Socials.module.css
@@ -1,4 +1,5 @@
 .socialButton {
+  font-family: "Inter";
   padding: 10px 16px;
   gap: 8px;
   color: var(--button-text);