Merge pull request #584 from bluewave-labs/feat/login-page

Login Page
This commit is contained in:
Alexander Holliday authored and GitHub committed 2024-08-09 15:18:06 -07:00
commit f634683486
12 files changed
+563 -291

No files matched your search

+11 -13
View File
@@ -1,16 +1,14 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="./bluewave_favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlueWave Uptime</title>
</head>
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlueWave Uptime</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

+133 -122
View File
@@ -12,7 +12,7 @@ import Visibility from "@mui/icons-material/Visibility";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import Button from "../../Button";
import "./index.css";
import { useState } from "react";
import { forwardRef, useState } from "react";
/**
* @param {Object} props
@@ -30,140 +30,151 @@ import { useState } from "react";
* @param {function} props.onChange - Function called on input change.
* @param {string} [props.error] - Error message to display for the input field.
* @param {boolean} [props.disabled] - Indicates if the input field is disabled.
* @param {React.Ref} [ref] - Ref forwarded to the underlying `TextField` component. Allows for direct interactions such as focusing.
*/
const Field = ({
type = "text",
id,
label,
https,
isRequired,
isOptional,
optionalLabel,
hasCopy,
autoComplete,
placeholder,
value,
onChange,
error,
disabled,
}) => {
const theme = useTheme();
const Field = forwardRef(
(
{
type = "text",
id,
label,
https,
isRequired,
isOptional,
optionalLabel,
hasCopy,
autoComplete,
placeholder,
value,
onChange,
error,
disabled,
},
ref
) => {
const theme = useTheme();
// TODO - are we using this feature anywhere ?
const [copy, setCopy] = useState(false);
const handleCopy = () => {
setCopy(true);
setTimeout(() => setCopy(false), 1000);
};
// TODO - are we using this feature anywhere ?
const [copy, setCopy] = useState(false);
const handleCopy = () => {
setCopy(true);
setTimeout(() => setCopy(false), 1000);
};
const [isVisible, setVisible] = useState(false);
const [isVisible, setVisible] = useState(false);
return (
<Stack gap={theme.gap.xs} className={`field field-${type}`}>
{label && (
<Typography component="h3">
{label}
{isRequired ? <span className="field-required">*</span> : ""}
{isOptional ? (
<span className="field-optional">
{optionalLabel || "(optional)"}
</span>
) : (
""
)}
</Typography>
)}
<TextField
type={type === "password" ? (isVisible ? "text" : type) : type}
id={id}
autoComplete={autoComplete}
placeholder={placeholder}
multiline={type === "description"}
rows={type === "description" ? 4 : 1}
value={value}
onChange={onChange}
disabled={disabled}
sx={
type === "url"
? {
"& .MuiInputBase-root": { padding: 0 },
"& .MuiStack-root": {
borderTopLeftRadius: `${theme.shape.borderRadius}px`,
borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
},
}
: {}
}
InputProps={{
startAdornment: type === "url" && (
<Stack
direction="row"
alignItems="center"
height="100%"
sx={{
borderRight: `solid 1px ${theme.palette.section.borderColor}`,
backgroundColor: "#f9f9fa",
pl: theme.gap.medium,
}}
>
<Typography component="h5" sx={{ lineHeight: 1 }}>
{https ? "https" : "http"}://
</Typography>
</Stack>
),
endAdornment:
type === "password" ? (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setVisible((show) => !show)}
tabIndex={-1}
sx={{
color: theme.palette.section.borderColor,
padding: `calc(${theme.gap.xs} / 2)`,
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
>
{!isVisible ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
return (
<Stack gap={theme.gap.xs} className={`field field-${type}`}>
{label && (
<Typography component="h3">
{label}
{isRequired ? <span className="field-required">*</span> : ""}
{isOptional ? (
<span className="field-optional">
{optionalLabel || "(optional)"}
</span>
) : (
hasCopy && (
<InputAdornment className="copy" position="end">
<Button
level="tertiary"
label={copy ? "Copied" : "Copy"}
img={<ContentCopyIcon />}
onClick={handleCopy}
""
)}
</Typography>
)}
<TextField
type={type === "password" ? (isVisible ? "text" : type) : type}
id={id}
autoComplete={autoComplete}
placeholder={placeholder}
multiline={type === "description"}
rows={type === "description" ? 4 : 1}
value={value}
onChange={onChange}
disabled={disabled}
inputRef={ref}
sx={
type === "url"
? {
"& .MuiInputBase-root": { padding: 0 },
"& .MuiStack-root": {
borderTopLeftRadius: `${theme.shape.borderRadius}px`,
borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
},
}
: {}
}
InputProps={{
startAdornment: type === "url" && (
<Stack
direction="row"
alignItems="center"
height="100%"
sx={{
borderRight: `solid 1px ${theme.palette.section.borderColor}`,
backgroundColor: "#f9f9fa",
pl: theme.gap.medium,
}}
>
<Typography component="h5" sx={{ lineHeight: 1 }}>
{https ? "https" : "http"}://
</Typography>
</Stack>
),
endAdornment:
type === "password" ? (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setVisible((show) => !show)}
tabIndex={-1}
sx={{
borderLeft: `solid 1px ${theme.palette.section.borderColor}`,
lineHeight: 0,
color: theme.palette.section.borderColor,
padding: `calc(${theme.gap.xs} / 2)`,
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
>
{!isVisible ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
),
}}
/>
{error && (
<Typography component="span" className="input-error" mt={theme.gap.xs}>
{error}
</Typography>
)}
</Stack>
);
};
) : (
hasCopy && (
<InputAdornment className="copy" position="end">
<Button
level="tertiary"
label={copy ? "Copied" : "Copy"}
img={<ContentCopyIcon />}
onClick={handleCopy}
sx={{
borderLeft: `solid 1px ${theme.palette.section.borderColor}`,
lineHeight: 0,
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
</InputAdornment>
)
),
}}
/>
{error && (
<Typography
component="span"
className="input-error"
mt={theme.gap.xs}
>
{error}
</Typography>
)}
</Stack>
);
}
);
Field.propTypes = {
type: PropTypes.oneOf(["text", "password", "url", "email", "description"]),
-3
View File
@@ -1,6 +1,3 @@
.home-layout * {
box-sizing: border-box;
}
.home-layout {
display: grid;
position: relative;
+334 -126
View File
@@ -1,18 +1,221 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";
import Logomark from "../../assets/Images/bwl-logo-2.svg?react";
import Button from "../../Components/Button";
import background from "../../assets/Images/background_pattern_decorative.png";
import axiosInstance from "../../Utils/axiosConfig";
import { Box, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { credentials } from "../../Validation/validation";
import { login } from "../../Features/Auth/authSlice";
import { useDispatch } from "react-redux";
import { createToast } from "../../Utils/toastUtils";
import Button from "../../Components/Button";
import axiosInstance from "../../Utils/axiosConfig";
import Field from "../../Components/Inputs/Field";
import { Checkbox, FormControlLabel, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import background from "../../assets/Images/background_pattern_decorative.png";
import Logo from "../../assets/icons/bwu-icon.svg?react";
import Mail from "../../assets/icons/mail.svg?react";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import "./index.css";
/**
* Displays the initial landing page.
*
* @param {Object} props
* @param {Function} props.onContinue - Callback function to handle "Continue with Email" button click.
* @returns {JSX.Element}
*/
const LandingPage = ({ onContinue }) => {
const theme = useTheme();
return (
<>
<Stack gap={theme.gap.large} alignItems="center" textAlign="center">
<Box>
<Typography component="h1">Log In</Typography>
<Typography>We are pleased to see you again!</Typography>
</Box>
<Box width="100%">
<Button
level="secondary"
label="Continue with Email"
img={<Mail />}
onClick={onContinue}
sx={{
width: "100%",
"& svg": {
mr: theme.gap.small,
},
}}
/>
</Box>
<Box maxWidth={400}>
<Typography className="tos-p">
By continuing, you agree to our{" "}
<Typography component="span">Terms of Service</Typography> and{" "}
<Typography component="span">Privacy Policy.</Typography>
</Typography>
</Box>
</Stack>
</>
);
};
/**
* Renders the first step of the login process.
*
* @param {Object} props
* @param {Object} props.form - Form state object.
* @param {Object} props.errors - Object containing form validation errors.
* @param {Function} props.onSubmit - Callback function to handle form submission.
* @param {Function} props.onChange - Callback function to handle form input changes.
* @param {Function} props.onBack - Callback function to handle "Back" button click.
* @returns {JSX.Element}
*/
const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
const theme = useTheme();
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<>
<Stack gap={theme.gap.large} textAlign="center">
<Box>
<Typography component="h1">Log In</Typography>
<Typography>Enter your email address</Typography>
</Box>
<Box textAlign="left">
<form noValidate spellCheck={false} onSubmit={onSubmit}>
<Field
type="email"
id="login-email-input"
label="Email"
isRequired={true}
placeholder="john.doe@domain.com"
autoComplete="email"
value={form.email}
onChange={onChange}
error={errors.email}
ref={inputRef}
/>
</form>
</Box>
<Stack direction="row" justifyContent="space-between">
<Button
level="secondary"
label="Back"
animate="slideLeft"
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
mb: theme.gap.medium,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
},
}}
/>
<Button
level="primary"
label="Continue"
onClick={onSubmit}
disabled={errors.email && true}
sx={{ width: "30%" }}
/>
</Stack>
</Stack>
</>
);
};
/**
* Renders the second step of the login process, including a password input field.
*
* @param {Object} props
* @param {Object} props.form - Form state object.
* @param {Object} props.errors - Object containing form validation errors.
* @param {Function} props.onSubmit - Callback function to handle form submission.
* @param {Function} props.onChange - Callback function to handle form input changes.
* @param {Function} props.onBack - Callback function to handle "Back" button click.
* @returns {JSX.Element}
*/
const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
const theme = useTheme();
const navigate = useNavigate();
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<>
<Stack gap={theme.gap.large} textAlign="center">
<Box>
<Typography component="h1">Log In</Typography>
<Typography>Enter your password</Typography>
</Box>
<Box textAlign="left">
<form noValidate spellCheck={false} onSubmit={onSubmit}>
<Field
type="password"
id="login-password-input"
label="Password"
isRequired={true}
placeholder="••••••••••"
autoComplete="current-password"
value={form.password}
onChange={onChange}
error={errors.password}
ref={inputRef}
/>
</form>
</Box>
<Stack direction="row" justifyContent="space-between">
<Button
level="secondary"
label="Back"
animate="slideLeft"
img={<ArrowBackRoundedIcon />}
onClick={onBack}
sx={{
mb: theme.gap.medium,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
},
}}
/>
<Button
level="primary"
label="Continue"
onClick={onSubmit}
disabled={errors.password && true}
sx={{ width: "30%" }}
/>
</Stack>
<Box textAlign="center">
<Typography className="forgot-p" display="inline-block">
Forgot password?
</Typography>
<Typography
component="span"
ml={theme.gap.xs}
sx={{ userSelect: "none" }}
onClick={() => navigate("/forgot-password")}
>
Reset password
</Typography>
</Box>
</Stack>
</>
);
};
const Login = () => {
const dispatch = useDispatch();
@@ -29,6 +232,7 @@ const Login = () => {
password: "",
});
const [errors, setErrors] = useState({});
const [step, setStep] = useState(0);
useEffect(() => {
axiosInstance
@@ -43,47 +247,6 @@ const Login = () => {
});
}, [navigate]);
const handleSubmit = async (e) => {
e.preventDefault();
const { error } = credentials.validate(form, { abortEarly: false });
if (error) {
// validation errors
const newErrors = {};
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
setErrors(newErrors);
createToast({
body:
error.details && error.details.length > 0
? error.details[0].message
: "Error validating data.",
});
} else {
const action = await dispatch(login(form));
if (action.payload.success) {
navigate("/monitors");
createToast({
body: "Welcome back! You're successfully logged in.",
});
} else {
if (action.payload) {
// dispatch errors
createToast({
body: action.payload.msg,
});
} else {
// unknown errors
createToast({
body: "Unknown error.",
});
}
}
}
};
const handleChange = (event) => {
const { value, id } = event.target;
const name = idMap[id];
@@ -105,91 +268,136 @@ const Login = () => {
});
};
const handleSubmit = async (event) => {
event.preventDefault();
if (step === 1) {
const { error } = credentials.validate(
{ email: form.email },
{ abortEarly: false }
);
if (error) {
setErrors((prev) => ({ ...prev, email: error.details[0].message }));
createToast({ body: error.details[0].message });
} else {
setStep(2);
}
} else if (step === 2) {
const { error } = credentials.validate(form, { abortEarly: false });
if (error) {
// validation errors
const newErrors = {};
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
setErrors(newErrors);
createToast({
body:
error.details && error.details.length > 0
? error.details[0].message
: "Error validating data.",
});
} else {
const action = await dispatch(login(form));
if (action.payload.success) {
navigate("/monitors");
createToast({
body: "Welcome back! You're successfully logged in.",
});
} else {
setErrors({
password: "The password you provided does not match our records",
});
if (action.payload) {
// dispatch errors
createToast({
body: action.payload.msg,
});
} else {
// unknown errors
createToast({
body: "Unknown error.",
});
}
}
}
}
};
return (
<div className="login-page">
<Stack className="login-page" overflow="hidden">
<img
className="background-pattern-svg"
src={background}
alt="background pattern"
/>
<form className="login-form" onSubmit={handleSubmit}>
<Stack gap={theme.gap.small} alignItems="center">
<Logomark alt="BlueWave Uptime Icon" />
<Typography component="h1" sx={{ mt: theme.gap.xl }}>
Login to Your Account
</Typography>
</Stack>
<Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
<Field
type="email"
id="login-email-input"
label="Email"
isRequired={true}
placeholder="Enter your email"
autoComplete="email"
value={form.email}
<Stack
direction="row"
alignItems="center"
px={theme.gap.large}
gap={theme.gap.small}
>
<Logo style={{ borderRadius: theme.shape.borderRadius }} />
<Typography>BlueWave Uptime</Typography>
</Stack>
<Stack
width="100%"
maxWidth={600}
flex={1}
justifyContent="center"
p={theme.gap.xl}
pb={theme.gap.triplexl}
mx="auto"
sx={{
"& > .MuiStack-root": {
border: 1,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.otherColors.graishWhite,
backgroundColor: theme.palette.otherColors.white,
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
},
},
}}
>
{step === 0 ? (
<LandingPage onContinue={() => setStep(1)} />
) : step === 1 ? (
<StepOne
form={form}
errors={errors}
onSubmit={handleSubmit}
onChange={handleChange}
error={errors.email}
onBack={() => setStep(0)}
/>
<Field
type="password"
id="login-password-input"
label="Password"
isRequired={true}
placeholder="••••••••••"
autoComplete="current-password"
value={form.password}
onChange={handleChange}
error={errors.password}
/>
<Stack direction="row" justifyContent="space-between">
<FormControlLabel
control={
<Checkbox
size="small"
sx={{
padding: 0,
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
}
label="Remember me"
) : (
step === 2 && (
<StepTwo
form={form}
errors={errors}
onSubmit={handleSubmit}
onChange={handleChange}
onBack={() => setStep(1)}
/>
<Typography component="span" onClick={() => navigate("/forgot-password")}>
Forgot password
</Typography>
</Stack>
</Stack>
<Stack gap={theme.gap.ml} mt={theme.gap.large}>
<Button
type="submit"
level="primary"
label="Continue"
disabled={Object.keys(errors).length !== 0 && true}
/>
<Stack
direction="row"
justifyContent="center"
gap="5px"
mt={theme.gap.ml}
>
<Typography component="p" sx={{ alignSelf: "center" }}>
Don't have an account?
</Typography>
<Typography component="span"
onClick={() => {
navigate("/register");
}}
>
Sign up
</Typography>
</Stack>
</Stack>
</form>
</div>
)
)}
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Typography display="inline-block">Don't have an account? —</Typography>
<Typography
component="span"
ml={theme.gap.xs}
onClick={() => {
navigate("/register");
}}
sx={{ userSelect: "none" }}
>
Sign Up
</Typography>
</Box>
</Stack>
);
};
+70 -25
View File
@@ -2,7 +2,6 @@
/* SHARED */
/* ////// */
.register-page,
.login-page,
.set-new-password-page,
.password-confirmed-page,
.forgot-password-page,
@@ -12,7 +11,6 @@
height: var(--env-var-height-1);
}
.register-page h1.MuiTypography-root,
.login-page h1.MuiTypography-root,
.set-new-password-page h1.MuiTypography-root,
.password-confirmed-page h1.MuiTypography-root,
.forgot-password-page h1.MuiTypography-root,
@@ -24,8 +22,6 @@
.register-page p.MuiTypography-root,
.register-page span,
.register-page button,
.login-page p.MuiTypography-root,
.login-page span,
.login-page button,
.set-new-password-page p.MuiTypography-root,
.set-new-password-page button,
@@ -38,13 +34,11 @@
.check-email-page span.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
}
.register-page p.MuiTypography-root,
.login-page p.MuiTypography-root {
.register-page p.MuiTypography-root {
color: var(--env-var-color-2);
opacity: 0.8;
}
.register-page button:not(.MuiIconButton-root),
.login-page button:not(.MuiIconButton-root),
.set-new-password-page button:not(.MuiIconButton-root),
.password-confirmed-page button:not(.MuiIconButton-root),
.forgot-password-page button:not(.MuiIconButton-root),
@@ -54,12 +48,10 @@
line-height: 0;
}
.register-page svg rect,
.login-page svg rect {
.register-page svg rect {
fill: none;
}
.register-form,
.login-form {
.register-form {
margin-top: 95px;
}
@@ -77,7 +69,6 @@
color: var(--env-var-color-2);
}
.login-page .MuiFormControlLabel-root .MuiButtonBase-root,
.set-new-password-page button:not(.MuiIconButton-root) svg,
.password-confirmed-page button:not(.MuiIconButton-root) svg,
.forgot-password-page button svg,
@@ -108,19 +99,6 @@
cursor: pointer;
font-weight: 600;
}
.login-page .MuiFormControlLabel-root {
margin: 0;
}
.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg {
fill: var(--env-var-color-4);
}
.login-page .MuiFormControlLabel-root svg {
margin-bottom: 1px;
}
.login-page .MuiFormControlLabel-root .MuiTypography-root {
color: var(--env-var-color-5);
user-select: none;
}
/* /////////// */
/* Check Email */
@@ -128,3 +106,70 @@
.check-email-page span.MuiTypography-root {
font-weight: 600;
}
/* */
.login-page {
height: 100vh;
}
.login-page h1 {
font-size: 37px;
font-weight: 600;
color: var(--env-var-color-3);
}
.login-page button:not(.MuiIconButton-root),
.login-page .field h3.MuiTypography-root,
.login-page .field input,
.login-page .field .input-error,
.login-page p,
.login-page span {
font-size: var(--env-var-font-size-medium-plus);
}
.login-page p {
color: var(--env-var-color-2-light);
}
.login-page .field h3.MuiTypography-root,
.login-page .field input {
color: var(--env-var-color-5);
}
.login-page p + span {
color: var(--env-var-color-3);
opacity: 0.8;
cursor: pointer;
transition: opacity 300ms ease-in;
}
.login-page p > span {
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: all 200ms;
}
.login-page p > span:hover {
color: var(--env-var-color-2);
text-underline-offset: 4px;
}
.login-page p + span:hover {
opacity: 1;
}
.login-page button:not(.MuiIconButton-root) {
user-select: none;
border-radius: var(--env-var-radius-2);
line-height: 1;
}
.login-page button:not(.MuiIconButton-root),
.login-page .field .MuiInputBase-root:has(input) {
height: 38px;
}
.login-page .field svg {
width: 24px;
height: 24px;
}
.login-page > .MuiStack-root:nth-of-type(1) {
height: var(--env-var-nav-bar-height);
}
.login-page .background-pattern-svg {
top: 14%;
width: 100%;
max-width: 800px;
}
@@ -18,7 +18,7 @@
width: 90px;
}
.MuiInputAdornment-outlined .MuiIconButton-root svg {
.maintenance-options .MuiInputAdornment-outlined .MuiIconButton-root svg {
width: 20px;
}
+1
View File
@@ -98,6 +98,7 @@ const theme = createTheme({
large: "24px",
xl: "40px",
xxl: "60px",
triplexl: "120px"
},
alert: {
info: {
+4
View File
@@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="#1570EF"/>
<path d="M4.43466 24V9.45455H10.0028C11.054 9.45455 11.9276 9.62026 12.6236 9.9517C13.3243 10.2784 13.8475 10.7259 14.1932 11.294C14.5436 11.8622 14.7188 12.5062 14.7188 13.2259C14.7188 13.8177 14.6051 14.3243 14.3778 14.7457C14.1506 15.1624 13.8452 15.5009 13.4616 15.7614C13.0781 16.0218 12.6496 16.2088 12.1761 16.3224V16.4645C12.6922 16.4929 13.187 16.6515 13.6605 16.9403C14.1387 17.2244 14.5294 17.6269 14.8324 18.1477C15.1354 18.6686 15.2869 19.2983 15.2869 20.0369C15.2869 20.7898 15.1046 21.4669 14.7401 22.0682C14.3755 22.6648 13.8262 23.1359 13.0923 23.4815C12.3584 23.8272 11.4351 24 10.3224 24H4.43466ZM7.0696 21.7983H9.90341C10.8598 21.7983 11.5488 21.616 11.9702 21.2514C12.3963 20.8821 12.6094 20.4086 12.6094 19.831C12.6094 19.4001 12.5028 19.0118 12.2898 18.6662C12.0767 18.3158 11.7737 18.0412 11.3807 17.8423C10.9877 17.6387 10.5189 17.5369 9.97443 17.5369H7.0696V21.7983ZM7.0696 15.6406H9.67614C10.1307 15.6406 10.5402 15.5578 10.9048 15.392C11.2694 15.2216 11.5559 14.9825 11.7642 14.6747C11.9773 14.3622 12.0838 13.9929 12.0838 13.5668C12.0838 13.0033 11.8849 12.5393 11.4872 12.1747C11.0942 11.8101 10.5095 11.6278 9.73295 11.6278H7.0696V15.6406ZM25.5482 9.45455H28.1832V18.9574C28.1832 19.9991 27.937 20.9152 27.4445 21.706C26.9568 22.4967 26.2703 23.1146 25.3849 23.5597C24.4995 24 23.4649 24.2202 22.2812 24.2202C21.0927 24.2202 20.0558 24 19.1704 23.5597C18.285 23.1146 17.5984 22.4967 17.1107 21.706C16.623 20.9152 16.3792 19.9991 16.3792 18.9574V9.45455H19.0141V18.7372C19.0141 19.3433 19.1467 19.883 19.4119 20.3565C19.6817 20.83 20.0605 21.2017 20.5482 21.4716C21.0359 21.7367 21.6136 21.8693 22.2812 21.8693C22.9488 21.8693 23.5264 21.7367 24.0141 21.4716C24.5066 21.2017 24.8853 20.83 25.1505 20.3565C25.4156 19.883 25.5482 19.3433 25.5482 18.7372V9.45455Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5 18L14.8571 12M9.14286 12L2.50003 18M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z" stroke="#475467" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 876 B

+5
View File
@@ -1,5 +1,9 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
box-sizing: border-box;
}
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
@@ -20,6 +24,7 @@
--env-var-color-0: #fff;
--env-var-color-1: #101828;
--env-var-color-2: #475467;
--env-var-color-2-light: #838c99;
--env-var-color-3: #1570ef;
--env-var-color-4: #d0d5dd;