Skip to content

Commit

Permalink
styling touchups
Browse files Browse the repository at this point in the history
  • Loading branch information
moe-dev committed Dec 10, 2024
1 parent be23850 commit 58e39b4
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 63 deletions.
20 changes: 10 additions & 10 deletions packages/sdk-react/src/components/auth/Auth.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -134,7 +134,7 @@
position: relative;
z-index: 0;
font-size: 0.75rem;
background: var(--auth-card-bg);
background: var(--card-bg);
}

.separator::before {
Expand All @@ -145,7 +145,7 @@
left: 0;
right: 0;
height: 1px;
background: var(--auth-card-border);
background: var(--card-border);
z-index: 0;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -70,6 +70,8 @@
.verificationBold {
color: var(--text-primary);
font-weight: 600;
display: block;
margin-top: 8px;
}

.verificationIcon {
Expand Down
12 changes: 6 additions & 6 deletions packages/sdk-react/src/components/auth/OtpVerification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions packages/sdk-react/src/components/auth/PhoneInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -45,7 +45,7 @@ export const MuiPhone: React.FC<MUIPhoneProps> = ({

return (
<TextField
name="phoneInput"
name="phone-input"
variant="outlined"
color="primary"
autoComplete="off"
Expand All @@ -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)",
}}
Expand Down
18 changes: 9 additions & 9 deletions packages/sdk-react/src/components/export/Export.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.modalTitle {
.exportModalTitle {
font-size: 18px;
line-height: 24px;
font-weight: 600;
Expand All @@ -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 {
Expand Down Expand Up @@ -63,7 +63,7 @@
cursor: default;
}

.rowsContainer {
.rows-container {
font-family: Inter;
display: flex;
flex-direction: column;
Expand All @@ -81,11 +81,11 @@
align-items: center;
}

.rowIcon {
.row-icon {
padding-right: 8px;
}

.poweredBy {
.powered-by {
font-family: Inter;
display: flex;
align-items: center;
Expand All @@ -100,7 +100,7 @@
cursor: pointer;
}

.poweredBy span {
.powered-by span {
position: relative;
}

Expand Down
10 changes: 4 additions & 6 deletions packages/sdk-react/src/components/export/Export.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}>
Expand All @@ -172,7 +170,7 @@ const Export: React.FC<ExportProps> = ({
<Typography
variant="subtitle2"
sx={{
color: "#6C727E",
color: "var(--text-primary)",
mb: 2,
}}
>
Expand Down
14 changes: 7 additions & 7 deletions packages/sdk-react/src/components/import/Import.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.modalTitle {
.importModalTitle {
font-size: 18px;
line-height: 24px;
font-weight: 600;
Expand All @@ -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 {
Expand Down Expand Up @@ -59,7 +59,7 @@
cursor: default;
}

.poweredBy {
.powered-by {
font-family: Inter;
display: flex;
align-items: center;
Expand All @@ -74,7 +74,7 @@
cursor: pointer;
}

.poweredBy span {
.powered-by span {
position: relative;
}

Expand Down
16 changes: 7 additions & 9 deletions packages/sdk-react/src/components/import/Import.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
}}
>
Expand Down Expand Up @@ -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",
},
},
Expand Down
14 changes: 4 additions & 10 deletions packages/sdk-react/src/components/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 58e39b4

Please sign in to comment.