Refactored checks component

Client/src/Components/Check/Check.jsx

@@ -1,6 +1,8 @@
 import "./check.css";
-import React from "react";
-import CheckGrey from "../../assets/Images/Check-icon-grey.png";
+import PropTypes from "prop-types";
+import CheckGrey from "../../assets/icons/check.svg?react";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
 
 /**
  * `Check` is a functional React component that displays a check icon and a label.
@@ -8,6 +10,7 @@ import CheckGrey from "../../assets/Images/Check-icon-grey.png";
  * @component
  * @param {Object} props - The properties that define the `Check` component.
  * @param {string} props.text - The text to be displayed as the label next to the check icon.
+ * @param {'info' | 'error' | 'success'} [props.variant='info'] - The variant of the check component, affecting its styling.
  *
  * @example
  * // To use this component, import it and use it in your JSX like this:
@@ -15,14 +18,30 @@ import CheckGrey from "../../assets/Images/Check-icon-grey.png";
  *
  * @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop.
  */
-const Check = ({ text }) => {
+const Check = ({ text, variant = "info" }) => {
+  const theme = useTheme();
   return (
-    <div className="check">
-      <img className="check-icon" src={CheckGrey} alt="un-checked" />
-      <div className="check-h-spacing" />
-      <label className="check-label">{text}</label>
-    </div>
+    <Stack
+      direction="row"
+      gap={theme.gap.small}
+      className={`check${
+        variant === "error"
+          ? " check-error"
+          : variant === "success"
+          ? " check-success"
+          : " check-info"
+      }`}
+      alignItems="center"
+    >
+      <CheckGrey alt="form checks" />
+      <Typography component="span">{text}</Typography>
+    </Stack>
   );
 };
 
+Check.propTypes = {
+  text: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(["info", "error", "success"]),
+};
+
 export default Check;

Client/src/Components/Check/check.css

@@ -1,20 +1,17 @@
-.check {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-
-.check-icon {
-  width: var(--env-var-img-width-1);
-  height: var(--env-var-img-width-1);
-}
-
-.check-h-spacing {
-  margin-right: 8px;
-}
-
-.check-label {
-  font-size: var(--env-var-font-size-small);
-  font-weight: 600;
+.check span.MuiTypography-root {
+  font-size: var(--env-var-font-size-small-plus);
   color: var(--env-var-color-2);
+  opacity: 0.8;
+}
+.check-error span.MuiTypography-root {
+  color: var(--env-var-color-24);
+}
+.check-error svg > path {
+  fill: var(--env-var-color-19);
+}
+.check-success span.MuiTypography-root {
+  color: var(--env-var-color-17);
+}
+.check-success svg > path {
+  fill: var(--env-var-color-23);
 }

Client/src/Pages/Login/index.css

@@ -16,7 +16,7 @@
   color: var(--env-var-color-2);
   opacity: 0.8;
 }
-.login-page button {
+.login-page button:not(.MuiIconButton-root)  {
   height: 34px;
   border-radius: var(--env-var-radius-2);
   line-height: 0;

Client/src/Pages/Register/index.css

@@ -18,7 +18,7 @@
   color: var(--env-var-color-2);
   opacity: 0.8;
 }
-.register-page button {
+.register-page button:not(.MuiIconButton-root) {
   height: 34px;
   border-radius: var(--env-var-radius-2);
   line-height: 0;
@@ -26,6 +26,12 @@
 .register-page svg rect {
   fill: none;
 }
+.register-page
+  .MuiFormControl-root:has(#register-password-input)
+  + span.MuiTypography-root {
+    display: none;
+    visibility: hidden;
+}
 
 .register-form {
   margin-top: 102px;

Client/src/Pages/Register/index.jsx

@@ -199,9 +199,44 @@ const Register = () => {
             error={errors.confirm}
           />
           <Stack gap={theme.gap.small}>
-            <Check text="Must be at least 8 characters" />
-            <Check text="Must contain one special character" />
-            <Check text="Must contain at least one upper and lower character" />
+            <Check
+              text="Must be at least 8 characters long"
+              variant={
+                errors?.password === "Password is required"
+                  ? "error"
+                  : form.password === ""
+                  ? "info"
+                  : form.password.length < 8
+                  ? "error"
+                  : "success"
+              }
+            />
+            <Check
+              text="Must contain one special character and a number"
+              variant={
+                errors?.password === "Password is required"
+                  ? "error"
+                  : form.password === ""
+                  ? "info"
+                  : !/^(?=.*[!@#$%^&*(),.?":{}|])(?=.*\d).+$/.test(
+                      form.password
+                    )
+                  ? "error"
+                  : "success"
+              }
+            />
+            <Check
+              text="Must contain at least one upper and lower character"
+              variant={
+                errors?.password === "Password is required"
+                  ? "error"
+                  : form.password === ""
+                  ? "info"
+                  : !/^(?=.*[A-Z])(?=.*[a-z]).+$/.test(form.password)
+                  ? "error"
+                  : "success"
+              }
+            />
           </Stack>
           <Button
             type="submit"

Client/src/assets/icons/check.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10Z" fill="#D0D5DD"/>
+<path d="M6.25 10L8.75 12.5L13.75 7.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>