diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/Inputs/Field/index.css similarity index 90% rename from Client/src/Components/TextFields/Field/index.css rename to Client/src/Components/Inputs/Field/index.css index 802eff6b0..e4f53147f 100644 --- a/Client/src/Components/TextFields/Field/index.css +++ b/Client/src/Components/Inputs/Field/index.css @@ -80,6 +80,10 @@ .register-page .field .MuiOutlinedInput-root fieldset, .register-page .field input, .login-page .field .MuiOutlinedInput-root fieldset, -.login-page .field input { +.login-page .field input, +.forgot-password-page .field .MuiOutlinedInput-root fieldset, +.forgot-password-page .field input, +.set-new-password-page .field .MuiOutlinedInput-root fieldset, +.set-new-password-page .field input { border-radius: var(--env-var-radius-2); } diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx similarity index 100% rename from Client/src/Components/TextFields/Field/index.jsx rename to Client/src/Components/Inputs/Field/index.jsx diff --git a/Client/src/Components/TextFields/Image/index.css b/Client/src/Components/Inputs/Image/index.css similarity index 100% rename from Client/src/Components/TextFields/Image/index.css rename to Client/src/Components/Inputs/Image/index.css diff --git a/Client/src/Components/TextFields/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx similarity index 100% rename from Client/src/Components/TextFields/Image/index.jsx rename to Client/src/Components/Inputs/Image/index.jsx diff --git a/Client/src/Components/TextFields/Search/SearchTextField.jsx b/Client/src/Components/Inputs/Search/SearchTextField.jsx similarity index 100% rename from Client/src/Components/TextFields/Search/SearchTextField.jsx rename to Client/src/Components/Inputs/Search/SearchTextField.jsx diff --git a/Client/src/Components/TextFields/Search/searchTextField.css b/Client/src/Components/Inputs/Search/searchTextField.css similarity index 100% rename from Client/src/Components/TextFields/Search/searchTextField.css rename to Client/src/Components/Inputs/Search/searchTextField.css diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 1ef7a07e3..a19ec4552 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -3,7 +3,7 @@ import React, { useState } from "react"; import { useTheme } from "@emotion/react"; import { Box, Divider, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; -import Field from "../../TextFields/Field"; +import Field from "../../Inputs/Field"; import { editPasswordValidation } from "../../../Validation/validation"; import Alert from "../../Alert"; import { update } from "../../../Features/Auth/authSlice"; diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index d56bd5f4e..346ea76b8 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -5,7 +5,8 @@ import { Box, Divider, Modal, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; import Button from "../../Button"; import Avatar from "../../Avatar"; -import Field from "../../TextFields/Field"; +import Field from "../../Inputs/Field"; +import ImageField from "../../Inputs/Image"; import { editProfileValidation, imageValidation, @@ -16,7 +17,6 @@ import { deleteUser, update, } from "../../../Features/Auth/authSlice"; -import ImageField from "../../TextFields/Image"; import ImageIcon from "@mui/icons-material/Image"; import ProgressUpload from "../../ProgressBars"; import { formatBytes } from "../../../Utils/fileUtils"; diff --git a/Client/src/Components/TextFields/Description/DescriptionTextField.jsx b/Client/src/Components/TextFields/Description/DescriptionTextField.jsx deleted file mode 100644 index dd4011da9..000000000 --- a/Client/src/Components/TextFields/Description/DescriptionTextField.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import "./descriptionTextField.css"; -import { TextField } from "@mui/material"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {function} props.onChange - The function to call when the text field changes (optional) - * @param {string} props.hintText - The hint text displayed within the text field (required) - * @param {boolean} props.hasError - A flag indicating if the text field has an error (required) - * @returns {JSX.Element} - Renders the description text field component - */ -const DescriptionTextField = ({ onChange, hintText, hasError }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
Description
- -
- ); -}; - -DescriptionTextField.propTypes = { - hintText: PropTypes.string.isRequired, - hasError: PropTypes.bool.isRequired, -}; - -export default DescriptionTextField; diff --git a/Client/src/Components/TextFields/Description/descriptionTextField.css b/Client/src/Components/TextFields/Description/descriptionTextField.css deleted file mode 100644 index e86727452..000000000 --- a/Client/src/Components/TextFields/Description/descriptionTextField.css +++ /dev/null @@ -1,77 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} - -.description-field-holder { - margin: 10px 20px; - margin-top: 20px; -} - -.text-field-title { - color: var(--env-var-color-5); - font-weight: bold; - margin-bottom: 10px; - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: bold; -} - -.description-field-area { - min-width: 320px; - font-size: var(--env-var-font-size-medium); - border-radius: 8px; -} - -.description-field-label { - margin-top: 10px; - font-size: var(--env-var-font-size-small); -} - -.with-error { - color: red; -} - -#description-field-area-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: var(--env-var-font-size-small); -} - -#description-field-area { - min-width: 320px; - font-size: var(--env-var-font-size-medium); -} diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx deleted file mode 100644 index 1e199e7da..000000000 --- a/Client/src/Components/TextFields/Email/EmailTextField.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useState } from "react"; -import "./emailTextField.css"; -import { InputAdornment, TextField } from "@mui/material"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import { useTheme } from "@mui/material"; - -/** - * `EmailTextField` is a functional React component that renders a text field for email input. - * - * @component - * @param {Object} props - The properties that define the `EmailTextField` component. - * @param {function} props.onChange - The function to call when the text field changes. - * @param {string} props.id - The id of the text field. - * @param {string} [props.label="Email"] - The label of the text field. - * @param {string} props.value - The value of the text field. - * @param {string} props.variant - The variant of the text field. - * @param {string} props.placeholder - The placeholder of the text field. - * @param {React.Element} props.icon - The icon to be displayed in the text field. - * @param {string} props.helperText - The helper text to be displayed below the text field. - * @param {boolean} props.error - If true, the text field will indicate an error state. - * @param {boolean} props.disabled - If true, the text field will be disabled and cannot be interacted with. - * - * @example - * // To use this component, import it and use it in your JSX like this: - * - * - * @returns {React.Element} The `EmailTextField` component with a text field for email input. - */ - -const EmailTextField = ({ - onChange, - id, - label = "Email", - value = undefined, - variant, - placeholder, - autoComplete, - icon, - helperText, - error, - disabled -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - const [showIcon, setShowIcon] = useState(false); - - const handleMouseEnter = () => setShowIcon(true); - const handleMouseLeave = () => setShowIcon(false); - - return ( -
-
{label}
-
- -
- {error && showIcon && ( - - )} - {error && !showIcon && ( - - )} - {!error && showIcon && !disabled && ( - - )} -
- - ), - }} - helperText={helperText} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - /> -
-
- ); -}; - -export default EmailTextField; diff --git a/Client/src/Components/TextFields/Email/emailTextField.css b/Client/src/Components/TextFields/Email/emailTextField.css deleted file mode 100644 index e89ef8ffc..000000000 --- a/Client/src/Components/TextFields/Email/emailTextField.css +++ /dev/null @@ -1,77 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} - -.email-text-field { - position: relative; - margin-top: 10px; -} - -#outlined-basic { - width: 320px; - height: 14px; - font-size: var(--env-var-font-size-medium); - padding: 8px 12px; -} - -.email-text-field-title { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: bold; -} - -.email-text-field-input { - font-size: var(--env-var-font-size-medium); -} - -#outlined-basic-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: var(--env-var-font-size-small); -} - -.text-field-icon { - width: 16px; - height: 16px; -} - -.icon-holder { - width: 16px; - height: 16px; - padding: 0; - margin: 0; -} diff --git a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx b/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx deleted file mode 100644 index 66b1743c5..000000000 --- a/Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import PropTypes from "prop-types"; -import { Stack, Typography } from "@mui/material"; -import "./flexibileTextField.css"; -import { useTheme } from "@emotion/react"; - -/** - * @param {Object} props - The component props. - * @param {string} props.id - The ID of the input field. - * @param {string} props.title - The title or label for the input field. - * @param {string} props.type - The type of the input field (e.g., 'text', 'password'). - * @param {string} props.placeholder - The placeholder text for the input field. - * @param {string} props.value - The current value of the input field. - * @param {function} props.onChange - The function to call when the input field value changes. - * @param {string} [props.error] - Optional. Error message to display if there's an error with the input. - * @returns {JSX.Element} JSX Element representing the flexible text input field. - */ - -const FlexibileTextField = ({ - id, - title, - type, - placeholder, - value, - onChange, - error, -}) => { - const theme = useTheme(); - return ( - - {title} - - {error ? ( - - {error} - - ) : ( - "" - )} - - ); -}; - -FlexibileTextField.propTypes = { - id: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - placeholder: PropTypes.string, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - onChange: PropTypes.func.isRequired, - error: PropTypes.string, -}; - -export default FlexibileTextField; diff --git a/Client/src/Components/TextFields/Flexibile/flexibileTextField.css b/Client/src/Components/TextFields/Flexibile/flexibileTextField.css deleted file mode 100644 index 2c5dcc988..000000000 --- a/Client/src/Components/TextFields/Flexibile/flexibileTextField.css +++ /dev/null @@ -1,30 +0,0 @@ -.flexible-textfield{ - position: relative; -} -.flexible-textfield h2.MuiTypography-root{ - color: var(--env-var-color-5); - font-size: var(--env-var-font-size-medium); - font-weight: 400; -} -.flexible-textfield h2.MuiTypography-root span{ - opacity: 0.6; -} -.flexible-textfield input { - min-width: 300px; - height: 34px; - padding: 0 var(--env-var-spacing-1); - border: 1px solid var(--env-var-color-4); - border-radius: var(--env-var-radius-1); -} -.flexible-textfield p.MuiTypography-root.input-error { - color: var(--env-var-color-24); - opacity: 0.8; - position: absolute; - top: calc(100% + 5px); -} -.flexible-textfield:has(p.MuiTypography-root.input-error) input{ - border-color: var(--env-var-color-24); -} -.flexible-textfield input:focus { - outline: none; -} \ No newline at end of file diff --git a/Client/src/Components/TextFields/Password/PasswordTextField.jsx b/Client/src/Components/TextFields/Password/PasswordTextField.jsx deleted file mode 100644 index 99bf16424..000000000 --- a/Client/src/Components/TextFields/Password/PasswordTextField.jsx +++ /dev/null @@ -1,119 +0,0 @@ -import "./passwordTextField.css"; -import React, { useState } from "react"; -import { IconButton, InputAdornment, TextField } from "@mui/material"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import { useTheme } from "@mui/material"; -import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import Visibility from "@mui/icons-material/Visibility"; - -/** - * @component - * @param {Object} props - * @param {string} props.value - The current value of the text field - * @param {function} props.onChange - The function to call when the text field changes (optional) - * @param {string} props.id - Unique ID for the text field (optional) - * @param {string} props.label - The label text displayed above the text field (optional) - * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional) - * @param {string} props.placeholder - The placeholder text displayed within the text field (optional) - * @param {"error" | "help"} [props.icon] - The type of icon to display (error or help) (optional) - * @param {string} props.helperText - The helper text displayed below the text field (optional) - * @param {boolean} props.error - A flag indicating if the text field has an error (required) - * @param {boolean} props.visibility - A flag indicating if the password visibility is toggled (optional) - * @param {function} props.setVisibility - Function to toggle password visibility (optional) - * @returns {JSX.Element} - Renders the password text field component with dynamic icon display - */ -const PasswordTextField = ({ - value, - onChange, - id, - label = "Password", - autoComplete, - variant, - placeholder, - icon, - helperText, - error, - visibility, - setVisibility, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - const [showIcon, setShowIcon] = useState(false); - - const handleMouseEnter = () => setShowIcon(true); - const handleMouseLeave = () => setShowIcon(false); - - return ( -
-
{label}
-
- - {visibility !== undefined ? ( - setVisibility((show) => !show)} - tabIndex={-1} - sx={{ - width: "30px", - height: "30px", - "&:focus": { - outline: "none", - }, - }} - > - {!visibility ? : } - - ) : ( -
- {error && showIcon && ( - - )} - {error && !showIcon && ( - - )} - {!error && showIcon && ( - - )} -
- )} - - ), - }} - helperText={helperText} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - /> -
-
- ); -}; - -export default PasswordTextField; diff --git a/Client/src/Components/TextFields/Password/passwordTextField.css b/Client/src/Components/TextFields/Password/passwordTextField.css deleted file mode 100644 index 99efdc12b..000000000 --- a/Client/src/Components/TextFields/Password/passwordTextField.css +++ /dev/null @@ -1,73 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} - -.password-text-field { - position: relative; - margin-top: 10px; -} - -#outlined-basic { - width: 320px; - height: 14px; - font-size: var(--env-var-font-size-medium); - padding: 8px 12px; -} - -.password-text-field-title { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: bold; -} - -#outlined-basic-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: var(--env-var-font-size-small); -} - -.text-field-icon { - width: 16px; - height: 16px; -} - -.icon-holder { - width: 16px; - height: 16px; - padding: 0; - margin: 0; -} diff --git a/Client/src/Components/TextFields/Text/TextField.jsx b/Client/src/Components/TextFields/Text/TextField.jsx deleted file mode 100644 index 06f290739..000000000 --- a/Client/src/Components/TextFields/Text/TextField.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import "./textField.css"; -import React, { useState } from "react"; -import { InputAdornment, TextField } from "@mui/material"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import { useTheme } from "@mui/material"; - -/** - * @param {Object} props - The component props. - * @param {function} props.onChange - The function to call when the text field changes. - * @param {string} props.id - The ID of the text field. - * @param {string} props.label - The label text for the text field. - * @param {string} props.value - The value of the text field. - * @param {string} props.variant - The variant of the text field. - * @param {string} props.placeholder - The placeholder text for the text field. - * @param {ReactNode} props.icon - The icon to display in the text field. - * @param {string} props.helperText - The helper text for the text field. - * @param {boolean} props.error - Whether the text field has an error. - * @returns {JSX.Element} The rendered component. - */ -const StringTextField = ({ - onChange, - autoComplete, - id, - label, - value = undefined, - variant, - placeholder, - icon, - helperText, - error, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - const [showIcon, setShowIcon] = useState(false); - - const handleMouseEnter = () => setShowIcon(true); - const handleMouseLeave = () => setShowIcon(false); - - return ( -
-
{label}
-
- -
- {error && showIcon && ( - - )} - {error && !showIcon && ( - - )} - {!error && showIcon && ( - - )} -
- - ), - }} - helperText={helperText} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - /> -
-
- ); -}; - -export default StringTextField; diff --git a/Client/src/Components/TextFields/Text/textField.css b/Client/src/Components/TextFields/Text/textField.css deleted file mode 100644 index 79d7ecec1..000000000 --- a/Client/src/Components/TextFields/Text/textField.css +++ /dev/null @@ -1,37 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} diff --git a/Client/src/Components/TextFields/Website/WebsiteTextField.jsx b/Client/src/Components/TextFields/Website/WebsiteTextField.jsx deleted file mode 100644 index d18e33dd9..000000000 --- a/Client/src/Components/TextFields/Website/WebsiteTextField.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useState } from "react"; -import "./websiteTextField.css"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {boolean} [props.showHelp=true] - Controls the visibility of the help icon (defaults to true) - * @param {boolean} [props.hasCopyButton=false] - Controls the visibility of the copy button (defaults to false) - * @param {string} props.hintText - The hint text displayed below the text field (required) - * @returns {JSX.Element} - Renders the website text field component with optional help and copy features - */ -const WebsiteTextField = ({ - showHelp = true, - hasCopyButton = false, - hintText, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - const [copied, setCopied] = useState(false); - - const handleCopy = () => { - setCopied(true); - setTimeout(() => setCopied(false), 1000); - }; - - return ( -
-
Website
-
- - - {showHelp && ( -
- -
- )} - {hasCopyButton && ( -
- - {copied ? " Copied " : " Copy "} -
- )} -
- -
- ); -}; - -export default WebsiteTextField; diff --git a/Client/src/Components/TextFields/Website/websiteTextField.css b/Client/src/Components/TextFields/Website/websiteTextField.css deleted file mode 100644 index b1004695c..000000000 --- a/Client/src/Components/TextFields/Website/websiteTextField.css +++ /dev/null @@ -1,111 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} - -.website-textfield-title { - margin: 0 20px; - margin-top: 30px; - font-size: 13px; - color: var(--env-var-color-5); - font-weight: bold; -} - -.website-textfield { - display: flex; - align-items: center; - position: relative; - margin: 10px 20px 5px; -} - -.website-textfield-hint { - margin: 10px 20px; - font-size: 11px; -} - -.website-label { - padding: 6px 20px 6px 10px; - border: solid 1px var(--env-var-color-4); - border-right: none; - border-radius: 4px 0 0 4px; - font-size: 13px; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - color: var(--env-var-color-2); -} - -.website-url { - width: 248px; - height: 31.5px; - padding: 0px 15px; - border: solid 1px var(--env-var-color-4); -} - -.website-icon-holder { - width: 40px; - height: 33px; - padding: 5px; - border: solid 1px var(--env-var-color-4); - border-left: none; - text-align: center; - display: flex; - justify-content: center; - align-items: center; -} - -.copy-to-clipboard-button { - padding: 5.5px 20px 6px 10px; - border: solid 1px var(--env-var-color-4); - border-left: none; - border-radius: 0 8px 8px 0; - font-size: 13px; - text-align: center; - display: flex; - justify-content: space-evenly; - align-items: center; - color: var(--env-var-color-2); - cursor: pointer; -} - -.copy-icon { - margin-right: 5px; -} - -.with-no-copy-button { - display: none; -} diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index 9860d879d..cb10a49e1 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/Client/src/Pages/CreateNewMonitor/index.jsx @@ -11,7 +11,7 @@ import { createMonitor } from "../../Features/Monitors/monitorsSlice"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; import WestRoundedIcon from "@mui/icons-material/WestRounded"; -import Field from "../../Components/TextFields/Field"; +import Field from "../../Components/Inputs/Field"; const CreateNewMonitor = () => { const MS_PER_MINUTE = 60000; diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index c95dcc7a1..408df416d 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -37,11 +37,11 @@ import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; import { getMonitors } from "../../Features/Monitors/monitorsSlice"; import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice"; -import ImageField from "../../Components/TextFields/Image"; +import ImageField from "../../Components/Inputs/Image"; import ProgressUpload from "../../Components/ProgressBars"; import Alert from "../../Components/Alert"; import { createToast } from "../../Utils/toastUtils"; -import Field from "../../Components/TextFields/Field"; +import Field from "../../Components/Inputs/Field"; const cols = [ { diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx index 5012b9d67..839e6a882 100644 --- a/Client/src/Pages/ForgotPassword/index.jsx +++ b/Client/src/Pages/ForgotPassword/index.jsx @@ -2,13 +2,13 @@ import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPatt import "./index.css"; import React from "react"; import Logomark from "../../assets/Images/key-password.png"; -import EmailTextField from "../../Components/TextFields/Email/EmailTextField"; import Button from "../../Components/Button"; import LeftArrow from "../../assets/Images/arrow-left.png"; import { useState, useEffect } from "react"; import { recoveryValidation } from "../../Validation/validation"; import axiosInstance from "../../Utils/axiosConfig"; import { useNavigate } from "react-router-dom"; +import Field from "../../Components/Inputs/Field"; const ForgotPassword = () => { const navigate = useNavigate(); @@ -76,12 +76,14 @@ const ForgotPassword = () => {
-