styling touchups

tkhq · Dec 10, 2024 · 48fa3aa · 48fa3aa
1 parent be23850
commit 48fa3aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/packages/sdk-react/src/components/auth/OtpVerification.module.css b/packages/sdk-react/src/components/auth/OtpVerification.module.css
@@ -70,6 +70,8 @@
 .verificationBold {
   color: var(--text-primary);
   font-weight: 600;
+  display: block;
+  margin-top: 8px;
 }
 
 .verificationIcon {

diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx
@@ -105,15 +105,15 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
             />
           )}
         </div>
-
-        <span className={styles.verificationText}>
-          Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"}{" "}
-          to{" "}
+        <div>
+          <span className={styles.verificationText}>
+            Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"}{" "}
+            to{" "}
+          </span>
           <span className={styles.verificationBold}>
             {type === "otpEmail" ? contact : formatPhoneNumber(contact)}
           </span>
-        </span>
-
+        </div>
         <div className={styles.otpInputWrapper}>
           <OtpInput
             ref={otpInputRef}

diff --git a/packages/sdk-react/src/components/auth/PhoneInput.tsx b/packages/sdk-react/src/components/auth/PhoneInput.tsx
@@ -15,7 +15,7 @@ import {
 } from "react-international-phone";
 import { FlagImage as OriginalFlagImage } from "react-international-phone";
 
-const FlagImage = OriginalFlagImage as React.ElementType; // fix for typecheck issue
+const FlagImage = OriginalFlagImage as React.ElementType;
 
 const countries = defaultCountries.filter((country) => {
   const { iso2 } = parseCountry(country);
@@ -62,15 +62,15 @@ export const MuiPhone: React.FC<MUIPhoneProps> = ({
             borderColor: "var(--input-border)",
           },
           "&:hover fieldset": {
-            borderColor: "var(--input-border-hover)",
+            borderColor: "var(--input-hover-border)",
           },
           "&.Mui-focused fieldset": {
-            borderColor: "var(--input-border-focus)",
+            borderColor: "var(--input-focus-border)",
             border: "1px solid",
           },
         },
         "& .MuiInputBase-input": {
-          padding: "10px 4px",
+          padding: "12px",
         },
         backgroundColor: "var(--input-bg)",
       }}