styling touchups

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

Hide file tree

Showing 9 changed files with 49 additions and 57 deletions.
diff --git a/packages/sdk-react/src/components/auth/Auth.module.css b/packages/sdk-react/src/components/auth/Auth.module.css
@@ -9,10 +9,10 @@
   height: 200px;
   margin: 0 auto;
   padding: 20px;
-  background: var(--auth-card-bg);
-  border: 1px solid var(--auth-card-border);
-  border-radius: var(--auth-card-radius);
-  box-shadow: var(--auth-card-shadow);
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
   position: relative;
 }
 
@@ -66,10 +66,10 @@
   min-width: 375px;
   margin: 0 auto;
   padding: 20px;
-  background: var(--auth-card-bg);
-  border: 1px solid var(--auth-card-border);
-  border-radius: var(--auth-card-radius);
-  box-shadow: var(--auth-card-shadow);
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
 }
 
 .authCard h2 {
@@ -134,7 +134,7 @@
   position: relative;
   z-index: 0;
   font-size: 0.75rem;
-  background: var(--auth-card-bg);
+  background: var(--card-bg);
 }
 
 .separator::before {
@@ -145,7 +145,7 @@
   left: 0;
   right: 0;
   height: 1px;
-  background: var(--auth-card-border);
+  background: var(--card-border);
   z-index: 0;
 }
 

diff --git a/packages/sdk-react/src/components/auth/OtpVerification.module.css b/packages/sdk-react/src/components/auth/OtpVerification.module.css
@@ -24,7 +24,7 @@
   max-width: 400px;
   padding: 8px;
   margin: 0 auto;
-  background-color: var(--card-background-color);
+  background-color: var(--card-bg);
   border-radius: 8px;
 }
 
@@ -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);
@@ -45,7 +45,7 @@ export const MuiPhone: React.FC<MUIPhoneProps> = ({
 
   return (
     <TextField
-      name="phoneInput"
+      name="phone-input"
       variant="outlined"
       color="primary"
       autoComplete="off"
@@ -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)",
       }}

diff --git a/packages/sdk-react/src/components/export/Export.module.css b/packages/sdk-react/src/components/export/Export.module.css
@@ -1,4 +1,4 @@
-.modalTitle {
+.exportModalTitle {
   font-size: 18px;
   line-height: 24px;
   font-weight: 600;
@@ -15,10 +15,10 @@
   min-width: 375px;
   margin: 0 auto;
   padding: 20px;
-  background: var(--auth-card-bg);
-  border: 1px solid var(--auth-card-border);
-  border-radius: var(--auth-card-radius);
-  box-shadow: var(--auth-card-shadow);
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
 }
 
 .exportCard h2 {

diff --git a/packages/sdk-react/src/components/export/Export.tsx b/packages/sdk-react/src/components/export/Export.tsx
@@ -120,7 +120,7 @@ const Export: React.FC<ExportProps> = ({
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            bgcolor: "var(--Greyscale-20, #f5f7fb)",
+            bgcolor: "var(--card-bg)",
             boxShadow: 24,
             p: 4,
             borderRadius: 2,
@@ -138,15 +138,13 @@ const Export: React.FC<ExportProps> = ({
               fontSize: "20px",
               fontWeight: "bold",
               cursor: "pointer",
-              color: "#6C727E",
+              color: "var(--text-primary)",
             }}
           >
             &times;
           </div>
 
-          <Typography variant="h6" className="modalTitle">
-            Export wallet
-          </Typography>
+          <div className={styles.exportModalTitle}>Export wallet</div>
 
           {!isIframeVisible ? (
             <div className={styles.rowsContainer}>
@@ -172,7 +170,7 @@ const Export: React.FC<ExportProps> = ({
             <Typography
               variant="subtitle2"
               sx={{
-                color: "#6C727E",
+                color: "var(--text-primary)",
                 mb: 2,
               }}
             >

diff --git a/packages/sdk-react/src/components/import/Import.module.css b/packages/sdk-react/src/components/import/Import.module.css
@@ -1,4 +1,4 @@
-.modalTitle {
+.importModalTitle {
   font-size: 18px;
   line-height: 24px;
   font-weight: 600;
@@ -15,10 +15,10 @@
   min-width: 375px;
   margin: 0 auto;
   padding: 20px;
-  background: var(--auth-card-bg);
-  border: 1px solid var(--auth-card-border);
-  border-radius: var(--auth-card-radius);
-  box-shadow: var(--auth-card-shadow);
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
 }
 
 .importCard h2 {

diff --git a/packages/sdk-react/src/components/import/Import.tsx b/packages/sdk-react/src/components/import/Import.tsx
@@ -129,7 +129,7 @@ const Import: React.FC<ImportProps> = ({ onHandleImportSuccess, onError }) => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            bgcolor: "var(--Greyscale-20, #f5f7fb)",
+            bgcolor: "var(--card-bg)",
             boxShadow: 24,
             p: 4,
             borderRadius: 2,
@@ -148,19 +148,17 @@ const Import: React.FC<ImportProps> = ({ onHandleImportSuccess, onError }) => {
               fontSize: "20px",
               fontWeight: "bold",
               cursor: "pointer",
-              color: "#6C727E",
+              color: "var(--text-primary)",
             }}
           >
             &times;
           </div>
 
-          <Typography variant="h6" className="modalTitle">
-            Import wallet
-          </Typography>
+          <div className={styles.importModalTitle}>Import wallet</div>
           <Typography
             variant="subtitle2"
             sx={{
-              color: "#6C727E",
+              color: "var(--text-primary)",
               mb: 2,
             }}
           >
@@ -199,13 +197,13 @@ const Import: React.FC<ImportProps> = ({ onHandleImportSuccess, onError }) => {
             sx={{
               "& .MuiOutlinedInput-root": {
                 "& fieldset": {
-                  borderColor: "#D0D5DD",
+                  borderColor: "var(--input-border)",
                 },
                 "&:hover fieldset": {
-                  borderColor: "#8A929E",
+                  borderColor: "var(--input-hover-border)",
                 },
                 "&.Mui-focused fieldset": {
-                  borderColor: "#D0D5DD",
+                  borderColor: "var(--input-focus-border)",
                   border: "1px solid",
                 },
               },

diff --git a/packages/sdk-react/src/components/theme.css b/packages/sdk-react/src/components/theme.css
@@ -57,16 +57,10 @@
   --border-disabled: var(--Greyscale-100, #f5f7fb); /* Disabled border */
 
   /* Card Colors */
-  --auth-card-bg: var(
-    --Greyscale-20,
-    #f5f7fb
-  ); /* Default authCard background */
-  --auth-card-border: var(
-    --Greyscale-100,
-    #ebedf2
-  ); /* Default authCard border */
-  --auth-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Default authCard shadow */
-  --auth-card-radius: 15px; /* Default authCard border radius */
+  --card-bg: var(--Greyscale-20, #f5f7fb); /* Default auth-card background */
+  --card-border: var(--Greyscale-100, #ebedf2); /* Default auth-card border */
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Default auth-card shadow */
+  --card-radius: 15px; /* Default auth-card border radius */
 
   /* Accent Colors */
   --accent-color: var(--Blue-500, #4c48ff);