TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored pages styling 1/?

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-27 20:11:59 -04:00
1 parent edeaf2ede9
commit e5c19c2744
18 files changed
+404 -207
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Pages/Account/index.css
-14
View File
@@ -6,12 +6,6 @@
.account .MuiSelect-select {
font-size: var(--env-var-font-size-medium);
}
.account h1.MuiTypography-root,
.account p.MuiTypography-root,
.account input,
.account .MuiSelect-select {
color: var(--secondary-color-light);
}
.account h1.MuiTypography-root {
font-weight: 600;
}
@@ -19,10 +13,6 @@
padding: 0;
margin-top: 50px;
}
.account .MuiDivider-root,
.account .MuiButtonGroup-root button {
border-color: var(--border-color);
}
.account button:not(.MuiIconButton-root) {
height: 34px;
}
@@ -43,10 +33,6 @@
top: 100%;
}
.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root,
.account .MuiTable-root p + p {
color: var(--secondary-color-light-accent);
}
.account .MuiTableBody-root .MuiTableCell-root {
padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
}
Client/src/Pages/Account/index.jsx
+11 -11
View File
@@ -30,18 +30,18 @@ const Account = ({ open = "profile" }) => {
return (
<Box
className="account"
px={theme.gap.xl}
py={theme.gap.large}
px={theme.spacing(20)}
py={theme.spacing(12)}
border={1}
borderColor={theme.palette.otherColors.graishWhite}
borderRadius={`${theme.shape.borderRadius}px`}
backgroundColor={theme.palette.otherColors.white}
borderColor={theme.palette.border.light}
borderRadius={theme.shape.borderRadius}
backgroundColor={theme.palette.background.main}
>
<TabContext value={tab}>
<Box
sx={{
borderBottom: 1,
borderColor: "var(--env-var-color-16)",
borderColor: theme.palette.border.light,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
@@ -52,15 +52,15 @@ const Account = ({ open = "profile" }) => {
key={index}
value={label.toLowerCase()}
sx={{
fontSize: "13px",
color: theme.palette.secondary.main,
fontSize: 13,
color: theme.palette.text.tertiary,
textTransform: "none",
minWidth: "fit-content",
minHeight: 0,
paddingLeft: "0",
paddingY: theme.gap.small,
paddingLeft: 0,
paddingY: theme.spacing(4),
fontWeight: 400,
marginRight: theme.gap.ml,
marginRight: theme.spacing(8),
"&:focus": {
outline: "none",
},
Client/src/Pages/Auth/CheckEmail.jsx
+31 -16
View File
@@ -85,7 +85,21 @@ const CheckEmail = () => {
};
return (
<Stack className="check-email-page auth" overflow="hidden">
<Stack
className="check-email-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 26,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -93,8 +107,8 @@ const CheckEmail = () => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -104,31 +118,31 @@ const CheckEmail = () => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.xl}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(20)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
<Box>
<EmailIcon alt="email icon" />
<Typography component="h1">Check your email</Typography>
<Typography mt={theme.gap.xs}>
<Typography mt={theme.spacing(2)}>
We sent a password reset link to{" "}
<Typography className="email-sent-to" component="span">
{email || "username@email.com"}
@@ -144,13 +158,13 @@ const CheckEmail = () => {
maxWidth: 400,
}}
/>
<Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
<Typography sx={{ alignSelf: "center", mb: theme.spacing(6) }}>
Didn&apos;t receive the email?{" "}
<Typography
component="span"
onClick={resendToken}
sx={{
color: theme.palette.primary.main,
color: theme.palette.common.main,
userSelect: "none",
pointerEvents: disabled ? "none" : "auto",
cursor: disabled ? "default" : "pointer",
@@ -162,11 +176,12 @@ const CheckEmail = () => {
</Typography>
</Stack>
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
ml={theme.gap.xs}
ml={theme.spacing(2)}
color={theme.palette.common.main}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
>
Client/src/Pages/Auth/ForgotPassword.jsx
+28 -14
View File
@@ -87,7 +87,21 @@ const ForgotPassword = () => {
};
return (
<Stack className="forgot-password-page auth" overflow="hidden">
<Stack
className="forgot-password-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 24,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -95,8 +109,8 @@ const ForgotPassword = () => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -106,24 +120,24 @@ const ForgotPassword = () => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.xl}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(20)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
@@ -155,18 +169,18 @@ const ForgotPassword = () => {
sx={{
width: "100%",
fontWeight: 400,
mt: theme.gap.mlplus,
mt: theme.spacing(10),
}}
/>
</form>
</Box>
</Stack>
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
ml={theme.gap.xs}
ml={theme.spacing(2)}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
>
Client/src/Pages/Auth/Login.jsx
+54 -23
View File
@@ -30,7 +30,7 @@ const LandingPage = ({ onContinue }) => {
return (
<>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
@@ -47,7 +47,7 @@ const LandingPage = ({ onContinue }) => {
sx={{
width: "100%",
"& svg": {
mr: theme.gap.small,
mr: theme.spacing(4),
},
}}
/>
@@ -64,6 +64,11 @@ const LandingPage = ({ onContinue }) => {
"noreferrer"
);
}}
sx={{
"&:hover": {
color: theme.palette.text.tertiary,
},
}}
>
Terms of Service
</Typography>{" "}
@@ -77,6 +82,11 @@ const LandingPage = ({ onContinue }) => {
"noreferrer"
);
}}
sx={{
"&:hover": {
color: theme.palette.text.tertiary,
},
}}
>
Privacy Policy.
</Typography>
@@ -114,7 +124,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
return (
<>
<Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
<Stack
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
textAlign="center"
>
<Box>
<Typography component="h1">Log In</Typography>
<Typography>Enter your email address</Typography>
@@ -144,10 +157,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
mb: theme.gap.medium,
px: theme.gap.ml,
mb: theme.spacing(6),
px: theme.spacing(8),
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
mr: theme.spacing(2),
},
}}
props={{ tabIndex: -1 }}
@@ -204,7 +217,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
return (
<>
<Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
<Stack
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
textAlign="center"
>
<Box>
<Typography component="h1">Log In</Typography>
<Typography>Enter your password</Typography>
@@ -233,10 +249,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
mb: theme.gap.medium,
px: theme.gap.ml,
mb: theme.spacing(6),
px: theme.spacing(8),
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
mr: theme.spacing(2),
},
}}
props={{ tabIndex: -1 }}
@@ -255,7 +271,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
</Typography>
<Typography
component="span"
ml={theme.gap.xs}
ml={theme.spacing(2)}
sx={{ userSelect: "none" }}
onClick={handleNavigate}
>
@@ -393,7 +409,21 @@ const Login = () => {
};
return (
<Stack className="login-page auth" overflow="hidden">
<Stack
className="login-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 30,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -401,8 +431,8 @@ const Login = () => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -412,18 +442,18 @@ const Login = () => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.xl}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(20)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
@@ -450,13 +480,14 @@ const Login = () => {
)
)}
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">
Don&apos;t have an account? —
</Typography>
<Typography
component="span"
ml={theme.gap.xs}
color={theme.palette.common.main}
ml={theme.spacing(2)}
onClick={() => {
navigate("/register");
}}
Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+29 -14
View File
@@ -22,7 +22,21 @@ const NewPasswordConfirmed = () => {
};
return (
<Stack className="password-confirmed-page auth" overflow="hidden">
<Stack
className="password-confirmed-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 22,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -30,8 +44,8 @@ const NewPasswordConfirmed = () => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -41,31 +55,31 @@ const NewPasswordConfirmed = () => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.xl}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(20)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
<Box>
<ConfirmIcon alt="password confirm icon" />
<Typography component="h1">Password reset</Typography>
<Typography mt={theme.gap.xs}>
<Typography mt={theme.spacing(2)}>
Your password has been successfully reset. Click below to log in
magically.
</Typography>
@@ -81,11 +95,12 @@ const NewPasswordConfirmed = () => {
/>
</Stack>
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
ml={theme.gap.xs}
color={theme.palette.common.main}
ml={theme.spacing(2)}
onClick={handleNavigate}
sx={{ userSelect: "none" }}
>
Client/src/Pages/Auth/Register/Register.jsx
+58 -25
View File
@@ -33,7 +33,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
return (
<>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
@@ -52,7 +52,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
sx={{
width: "100%",
"& svg": {
mr: theme.gap.small,
mr: theme.spacing(4),
},
}}
/>
@@ -69,6 +69,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
"noreferrer"
);
}}
sx={{
"&:hover": {
color: theme.palette.text.tertiary,
},
}}
>
Terms of Service
</Typography>{" "}
@@ -82,6 +87,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
"noreferrer"
);
}}
sx={{
"&:hover": {
color: theme.palette.text.tertiary,
},
}}
>
Privacy Policy.
</Typography>
@@ -120,7 +130,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
return (
<>
<Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
<Stack
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
textAlign="center"
>
<Box>
<Typography component="h1">Sign Up</Typography>
<Typography>Enter your personal details</Typography>
@@ -160,9 +173,9 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
px: theme.gap.ml,
px: theme.spacing(8),
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
mr: theme.spacing(2),
},
}}
props={{ tabIndex: -1 }}
@@ -211,7 +224,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
return (
<>
<Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
<Stack
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
textAlign="center"
>
<Box>
<Typography component="h1">Sign Up</Typography>
<Typography>Enter your email address</Typography>
@@ -241,9 +257,9 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
px: theme.gap.ml,
px: theme.spacing(8),
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
mr: theme.spacing(2),
},
}}
props={{ tabIndex: -1 }}
@@ -292,7 +308,10 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
return (
<>
<Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
<Stack
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
textAlign="center"
>
<Box>
<Typography component="h1">Sign Up</Typography>
<Typography>Create your password</Typography>
@@ -327,7 +346,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
</form>
<Stack
gap={theme.gap.small}
mb={{ xs: theme.gap.ml, sm: theme.gap.large }}
mb={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
>
<Check
text={
@@ -394,9 +413,9 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
px: theme.gap.ml,
px: theme.spacing(8),
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
mr: theme.spacing(2),
},
}}
props={{ tabIndex: -1 }}
@@ -580,7 +599,21 @@ const Register = ({ isAdmin }) => {
};
return (
<Stack className="register-page auth" overflow="hidden">
<Stack
className="register-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 30,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -588,8 +621,8 @@ const Register = ({ isAdmin }) => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -599,18 +632,18 @@ const Register = ({ isAdmin }) => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.xl}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(20)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
@@ -645,17 +678,17 @@ const Register = ({ isAdmin }) => {
""
)}
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">
Already have an account? —
</Typography>
<Typography
component="span"
ml={theme.gap.xs}
ml={theme.spacing(2)}
onClick={() => {
navigate("/login");
}}
sx={{ userSelect: "none" }}
sx={{ userSelect: "none", color: theme.palette.common.main }}
>
Log In
</Typography>
Client/src/Pages/Auth/SetNewPassword.jsx
+29 -14
View File
@@ -104,7 +104,21 @@ const SetNewPassword = () => {
};
return (
<Stack className="set-new-password-page auth" overflow="hidden">
<Stack
className="set-new-password-page auth"
overflow="hidden"
sx={{
"& h1": {
color: theme.palette.common.main,
fontWeight: 600,
fontSize: 24,
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
},
}}
>
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
@@ -112,8 +126,8 @@ const SetNewPassword = () => {
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
px={theme.spacing(12)}
gap={theme.spacing(4)}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -123,24 +137,24 @@ const SetNewPassword = () => {
maxWidth={600}
flex={1}
justifyContent="center"
px={{ xs: theme.gap.large, lg: theme.gap.xl }}
pb={theme.gap.large}
px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
pb={theme.spacing(12)}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
borderRadius: theme.spacing(5),
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.background.main,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
xs: theme.spacing(12),
sm: theme.spacing(20),
},
},
}}
>
<Stack
gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
alignItems="center"
textAlign="center"
>
@@ -176,7 +190,7 @@ const SetNewPassword = () => {
error={errors.confirm}
/>
</form>
<Stack gap={theme.gap.small} mb={theme.gap.large}>
<Stack gap={theme.spacing(4)} mb={theme.spacing(12)}>
<Check
text={
<>
@@ -244,11 +258,12 @@ const SetNewPassword = () => {
/>
</Stack>
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Box textAlign="center" p={theme.spacing(12)}>
<Typography display="inline-block">Go back to —</Typography>
<Typography
component="span"
ml={theme.gap.xs}
color={theme.palette.common.main}
ml={theme.spacing(2)}
onClick={() => navigate("/login")}
sx={{ userSelect: "none" }}
>
Client/src/Pages/Auth/index.css
-10
View File
@@ -5,7 +5,6 @@
.auth h1 {
font-size: var(--env-var-font-size-xlarge);
font-weight: 600;
color: var(--theme-main);
}
.auth button:not(.MuiIconButton-root),
.auth p,
@@ -13,16 +12,8 @@
.auth span {
font-size: var(--env-var-font-size-medium-plus);
}
.auth p {
color: var(--secondary-color-light-accent);
}
.auth .field h3.MuiTypography-root,
.auth .field input {
color: var(--secondary-color);
}
.auth p + span {
color: var(--theme-main);
opacity: 0.8;
cursor: pointer;
transition: opacity 300ms ease-in;
@@ -34,7 +25,6 @@
transition: all 200ms;
}
.auth p > span:not(.email-sent-to):hover {
color: var(--secondary-color-light);
text-underline-offset: 4px;
}
.auth p + span:hover {
Client/src/Pages/Maintenance/index.jsx
+19 -2
View File
@@ -1,9 +1,26 @@
import { Box } from "@mui/material";
import { useTheme } from "@emotion/react";
import Fallback from "../../Components/Fallback";
import "./index.css";
const Maintenance = () => {
const theme = useTheme();
return (
<div className="maintenance">
<Box
className="maintenance"
sx={{
':has(> [class*="fallback__"])': {
position: "relative",
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
borderStyle: "dashed",
backgroundColor: theme.palette.background.main,
overflow: "hidden",
},
}}
>
<Fallback
title="maintenance window"
checks={[
@@ -13,7 +30,7 @@ const Maintenance = () => {
]}
link="/maintenance/create"
/>
</div>
</Box>
);
};
Client/src/Pages/PageSpeed/index.jsx
+15 -1
View File
@@ -145,7 +145,21 @@ const PageSpeed = () => {
let isActuallyLoading = isLoading && monitors.length === 0;
return (
<Box className="page-speed" pt={theme.gap.xl}>
<Box
className="page-speed"
pt={theme.gap.xl}
sx={{
':has(> [class*="fallback__"])': {
position: "relative",
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
borderStyle: "dashed",
backgroundColor: theme.palette.background.main,
overflow: "hidden",
},
}}
>
{isActuallyLoading ? (
<SkeletonLayout />
) : monitors?.length !== 0 ? (
Client/src/Pages/Status/index.jsx
+19 -2
View File
@@ -1,8 +1,25 @@
import { Box } from "@mui/material";
import { useTheme } from "@emotion/react";
import Fallback from "../../Components/Fallback";
const Status = () => {
const theme = useTheme();
return (
<div className="status">
<Box
className="status"
sx={{
':has(> [class*="fallback__"])': {
position: "relative",
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
borderStyle: "dashed",
backgroundColor: theme.palette.background.main,
overflow: "hidden",
},
}}
>
<Fallback
title="status page"
checks={[
@@ -11,7 +28,7 @@ const Status = () => {
"Build trust with your customers",
]}
/>
</div>
</Box>
);
};