From 58e39b451b12c47462e985a744cb952878c4840f Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Tue, 10 Dec 2024 13:15:20 -0500 Subject: [PATCH] styling touchups --- .../src/components/auth/Auth.module.css | 20 +++++++++---------- .../auth/OtpVerification.module.css | 4 +++- .../src/components/auth/OtpVerification.tsx | 12 +++++------ .../src/components/auth/PhoneInput.tsx | 10 +++++----- .../src/components/export/Export.module.css | 18 ++++++++--------- .../src/components/export/Export.tsx | 10 ++++------ .../src/components/import/Import.module.css | 14 ++++++------- .../src/components/import/Import.tsx | 16 +++++++-------- packages/sdk-react/src/components/theme.css | 14 ++++--------- 9 files changed, 55 insertions(+), 63 deletions(-) diff --git a/packages/sdk-react/src/components/auth/Auth.module.css b/packages/sdk-react/src/components/auth/Auth.module.css index 2edfe94a..917f4916 100644 --- 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 index 135d687a..99d6560f 100644 --- 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 index e8fd8e31..00684dd1 100644 --- 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 = ({ /> )} - - - Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"}{" "} - to{" "} +
+ + Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"}{" "} + to{" "} + {type === "otpEmail" ? contact : formatPhoneNumber(contact)} - - +
{ const { iso2 } = parseCountry(country); @@ -45,7 +45,7 @@ export const MuiPhone: React.FC = ({ return ( = ({ 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 index 77c03ab8..ac802317 100644 --- 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 { @@ -63,7 +63,7 @@ cursor: default; } -.rowsContainer { +.rows-container { font-family: Inter; display: flex; flex-direction: column; @@ -81,11 +81,11 @@ align-items: center; } -.rowIcon { +.row-icon { padding-right: 8px; } -.poweredBy { +.powered-by { font-family: Inter; display: flex; align-items: center; @@ -100,7 +100,7 @@ cursor: pointer; } -.poweredBy span { +.powered-by span { position: relative; } diff --git a/packages/sdk-react/src/components/export/Export.tsx b/packages/sdk-react/src/components/export/Export.tsx index 1b7b62aa..ab0b13eb 100644 --- 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 = ({ 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 = ({ fontSize: "20px", fontWeight: "bold", cursor: "pointer", - color: "#6C727E", + color: "var(--text-primary)", }} > ×
- - Export wallet - +
Export wallet
{!isIframeVisible ? (
@@ -172,7 +170,7 @@ const Export: React.FC = ({ diff --git a/packages/sdk-react/src/components/import/Import.module.css b/packages/sdk-react/src/components/import/Import.module.css index 38b9a406..8555d8ff 100644 --- 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 { @@ -59,7 +59,7 @@ cursor: default; } -.poweredBy { +.powered-by { font-family: Inter; display: flex; align-items: center; @@ -74,7 +74,7 @@ cursor: pointer; } -.poweredBy span { +.powered-by span { position: relative; } diff --git a/packages/sdk-react/src/components/import/Import.tsx b/packages/sdk-react/src/components/import/Import.tsx index b91ace6a..97a05c17 100644 --- 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 = ({ 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 = ({ onHandleImportSuccess, onError }) => { fontSize: "20px", fontWeight: "bold", cursor: "pointer", - color: "#6C727E", + color: "var(--text-primary)", }} > ×
- - Import wallet - +
Import wallet
@@ -199,13 +197,13 @@ const Import: React.FC = ({ 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 index efd168c6..8287d2cd 100644 --- 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);