From fc05d90640a026616843f62269c4ec5fe982a1e6 Mon Sep 17 00:00:00 2001 From: Mohammad Khalilzadeh <140876993+MuhammadKhalilzadeh@users.noreply.github.com> Date: Wed, 15 May 2024 08:17:05 +0330 Subject: [PATCH 1/5] Delete Client/src/components directory --- .../AnnouncementUpdateSubscription.jsx | 71 ------------- .../announcementUpdateSubscription.css | 99 ------------------- .../AnnouncementsDualButton.jsx | 55 ----------- .../announcementsDualButton.css | 38 ------- .../announcementsDualButtonWithIcon.css | 69 ------------- .../AnnouncementsMessageBar.jsx | 36 ------- .../announcementsMessageBar.css | 12 --- .../Charts/Servers/ServerStatus.jsx | 37 ------- .../Charts/Servers/serverStatus.css | 44 --------- .../Charts/Statistics/Statistic.jsx | 35 ------- .../Charts/Statistics/statistic.css | 31 ------ .../Icons/ComplexAlert/ComplexAlert.jsx | 36 ------- .../Icons/ComplexAlert/complexAlert.css | 44 --------- .../DualButtonPopupModal.jsx | 55 ----------- .../dualButtonPopupModal.css | 60 ----------- .../DualButtonPopupModalWithTextfields.jsx | 73 -------------- .../dualButtonPopupModalWithTextfields.css | 61 ------------ .../Description/DescriptionTextField.jsx | 47 --------- .../Description/descriptionTextField.css | 45 --------- .../TextFields/Email/EmailTextField.jsx | 88 ----------------- .../TextFields/Email/emailTextField.css | 41 -------- .../TextFields/Website/WebsiteTextField.jsx | 72 -------------- .../TextFields/Website/websiteTextField.css | 82 --------------- .../TooltipWithTail/TooltipWithTail.tsx | 54 ---------- .../TooltipWithTail/tooltipWithTail.css | 17 ---- 25 files changed, 1302 deletions(-) delete mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css delete mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css delete mode 100644 Client/src/components/Charts/Servers/ServerStatus.jsx delete mode 100644 Client/src/components/Charts/Servers/serverStatus.css delete mode 100644 Client/src/components/Charts/Statistics/Statistic.jsx delete mode 100644 Client/src/components/Charts/Statistics/statistic.css delete mode 100644 Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx delete mode 100644 Client/src/components/Icons/ComplexAlert/complexAlert.css delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css delete mode 100644 Client/src/components/TextFields/Description/DescriptionTextField.jsx delete mode 100644 Client/src/components/TextFields/Description/descriptionTextField.css delete mode 100644 Client/src/components/TextFields/Email/EmailTextField.jsx delete mode 100644 Client/src/components/TextFields/Email/emailTextField.css delete mode 100644 Client/src/components/TextFields/Website/WebsiteTextField.jsx delete mode 100644 Client/src/components/TextFields/Website/websiteTextField.css delete mode 100644 Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx delete mode 100644 Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx deleted file mode 100644 index f3363e866..000000000 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import "./announcementUpdateSubscription.css"; -import React from "react"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - Title text for the update subscription dialog (required) - * @param {string} props.text - Body text for the update subscription dialog (required) - * @param {string} props.cancel - Text for the negative (cancel) button (required) - * @param {string} props.positive - Text for the positive button (required) - * @param {string} props.header - Title text for the email subscription section (required) - * @param {string} props.button - Text for the subscribe button (required) - * @returns {JSX.Element} - Renders the announcement update subscription component - */ - -const AnnouncementUpdateSubscription = ({ - title, - text, - cancel, - positive, - header, - button, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{title}
-
-
{text}
-
-
- - -
-
-
-
-
{header}
-
- - -
-
-
- ); -}; - -AnnouncementUpdateSubscription.propTypes = { - title: PropTypes.string.isRequired, - text: PropTypes.string.isRequired, - cancel: PropTypes.string.isRequired, - positive: PropTypes.string.isRequired, - header: PropTypes.string.isRequired, - button: PropTypes.string.isRequired, -}; - -export default AnnouncementUpdateSubscription; diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css deleted file mode 100644 index 7974ee799..000000000 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ /dev/null @@ -1,99 +0,0 @@ -:root { - --update-subscription-color-0: #101828; - --update-subscription-color-1: #475467; - --update-subscription-color-2: #fff; - --update-subscription-color-3: #eaecf0; - --update-subscription-color-4: #7f56d9; - --update-subscription-color-5: #1570ef; - --update-subscription-color-6: #344054; - --update-subscription-color-7: #d0d5dd; - --update-subscription-padding-0: 12px 16px; - --update-subscription-margin-right: 12px; - --update-subscription-font-size: 13px; - --update-subscription-radius-0: 4px; - --spacing-1: 16px; - --spacing-2: 20px; -} - -.update-subscription, -.update-subscription-dialog { - max-width: 770px; - border-radius: 4px; - border: 1px solid #eaecf0; -} - -.update-subscription-dialog { - padding: 15px 30px; -} - -.subscription-dialog-title { - font-size: 1rem; - font-weight: 700; - color: var(--update-subscription-color-0); -} - -.v-spacing-small { - height: 10px; -} - -.v-spacing-medium { - height: 15px; -} - -.subscription-dialog-text { - font-size: 13px; - color: var(--update-subscription-color-1); -} - -.subscription-dialog-controls { - display: flex; -} - -.controls-negative { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-3); - background-color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); -} - -.controls-positive, -.subscribe-button { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-4); - background-color: var(--update-subscription-color-5); - color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); -} - -.update-subscription-title { - color: var(--update-subscription-color-6); - padding: 0 var(--spacing-2); - font-weight: 700; - font-size: 13px; - margin-bottom: 10px; -} - -.subscription-email { - display: flex; - padding: 0 var(--spacing-2); -} - -.subscription-email-field { - width: 290px; - height: 24px; - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-7); - box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); - padding: 5px 15px; - margin-right: var(--spacing-2); -} - -.subscribe-button { - width: 100px; - height: 34px; - padding: 2px 15px; -} diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx deleted file mode 100644 index 2abbadb1e..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./announcementsDualButton.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.subject - The announcement subject text - * @param {string} props.body - The announcement body text content - * @param {string} props.esc - The text for the escape button - * @param {string} props.primary - The text for the primary button - * @returns {JSX.Element} - Renders the announcement dual button component - */ - -const AnnouncementsDualButton = ({ subject, body, esc, primary }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{subject}
-
-
{body}
-
-
{esc}
-
{primary}
-
-
-
-
- -
-
- ); -}; - -AnnouncementsDualButton.propTypes = { - subject: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - primary: PropTypes.string.isRequired, -}; - -export default AnnouncementsDualButton; diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css deleted file mode 100644 index 837fd0bb5..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css +++ /dev/null @@ -1,38 +0,0 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - /* --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; */ - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; -} - -.announcement-without-tile { - max-width: 343px; - width: fit-content; - display: flex; - border: 1px solid var(--announcement-border-color); - /* font-family: var(--announcement-font-family); */ - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); -} - -.h-spacing { - width: 20px; -} - -.announcement-without-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-without-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); -} diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css deleted file mode 100644 index 80c6ae265..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css +++ /dev/null @@ -1,69 +0,0 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; -} - -.announcement-tile { - width: fit-content; - display: flex; - border: 1px solid var(--announcement-border-color); - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); -} - -.info-icon-frame { - display: flex; - width: 40px; - height: 40px; - border: 1px solid var(--info-icon-frame-color); - border-radius: var(--announcement-border-radius-2); - justify-content: center; - align-items: center; -} - -.announcement-content { - padding: 0 var(--announcement-padding); -} - -.announcement-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); - font-weight: 300; -} - -.announcement-content-controllers { - display: flex; - font-size: var(--announcement-font-size-0); - margin-top: 15px; -} - -.controllers-button-esc { - font-size: var(--announcement-font-size-0); - font-weight: 600; - margin-right: 12px; -} - -.controllers-button-primary { - font-size: var(--announcement-font-size-0); - font-weight: 600; - color: var(--announcement-font-color-2); -} - -.announcement-close { - width: 24px; - height: 24px; -} diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx deleted file mode 100644 index 20a179052..000000000 --- a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import "./announcementsMessageBar.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.message - The announcement message text content (required) - * @returns {JSX.Element} - Renders the announcement message bar component - */ -const AnnouncementsMessageBar = ({ message }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{message}
-
- -
-
- ); -}; - -AnnouncementsMessageBar.propTypes = { - message: PropTypes.string.isRequired, -}; - -export default AnnouncementsMessageBar; diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css deleted file mode 100644 index 2e9f95e83..000000000 --- a/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --announcement-font-size-0: 13px; - --announcement-padding: 16px; -} - -.announcement-messagebar-body { - font-size: var(--announcement-font-size-0); - padding: 0 var(--announcement-padding) 0 0; - justify-content: center; - align-items: center; - margin: auto; -} diff --git a/Client/src/components/Charts/Servers/ServerStatus.jsx b/Client/src/components/Charts/Servers/ServerStatus.jsx deleted file mode 100644 index f910abf27..000000000 --- a/Client/src/components/Charts/Servers/ServerStatus.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import "./serverStatus.css"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the server status (required) - * @param {string} props.value - The value text to be displayed (required) - * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required) - * @returns {JSX.Element} - Renders the server status component - */ -const ServerStatus = ({ title, value, state }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
-
{value}
-
- ); -}; - -ServerStatus.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - state: PropTypes.string.isRequired, -}; - -export default ServerStatus; diff --git a/Client/src/components/Charts/Servers/serverStatus.css b/Client/src/components/Charts/Servers/serverStatus.css deleted file mode 100644 index 9126d9b3b..000000000 --- a/Client/src/components/Charts/Servers/serverStatus.css +++ /dev/null @@ -1,44 +0,0 @@ -:root { - --spacing-general-0: 10px 25px; - --spacing-general-1: 20px; - --color-border-0: #eaecf0; - --border-radius-0: 4px; - --font-size-0: 1rem; - --font-size-2: 36px; - - --color-up: #17b26a; - --color-down: #f04438; - --color-pause: #fdb022; -} - -.server-status-tile { - width: 230px; - margin: var(--spacing-general-0); - margin-left: 10px; - padding: var(--spacing-general-1); - border: 1px solid var(--color-border-0); - border-radius: var(--border-radius-0); -} - -.server-status-tile-title { - font-size: var(--font-size-0); - font-weight: bold; - margin-bottom: 25px; -} - -.server-status-tile-value { - font-size: var(--font-size-2); - font-weight: bolder; -} - -.up { - color: var(--color-up); -} - -.down { - color: var(--color-down); -} - -.pause { - color: var(--color-pause); -} diff --git a/Client/src/components/Charts/Statistics/Statistic.jsx b/Client/src/components/Charts/Statistics/Statistic.jsx deleted file mode 100644 index 99ad2066f..000000000 --- a/Client/src/components/Charts/Statistics/Statistic.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import "./statistic.css"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the statistic (required) - * @param {string} props.value - The numerical or textual value for the statistic (required) - * @returns {JSX.Element} - Renders the statistic component - */ -const Statistic = ({ title, value }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
-
{value}
-
- ); -}; - -Statistic.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, -}; - -export default Statistic; diff --git a/Client/src/components/Charts/Statistics/statistic.css b/Client/src/components/Charts/Statistics/statistic.css deleted file mode 100644 index a8834199d..000000000 --- a/Client/src/components/Charts/Statistics/statistic.css +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --stats-spacing-general-0: 5px 10px; - --color-border-0: #eaecf0; - --border-radius-0: 4px; - --font-size-0: 1rem; - --font-size-1: 13px; - --font-color-0: #344054; - --margin-bottom-0: 10px; -} - -.statistic-tile { - margin: var(--stats-spacing-general-0); - padding: var(--stats-spacing-general-0); - border: 1px solid var(--color-border-0); - border-radius: var(--border-radius-0); - - width: 180px; -} - -.statistic-tile-title { - font-size: var(--font-size-0); - color: var(--font-color-0); - margin-bottom: var(--margin-bottom-0); -} - -.statistic-tile-value { - font-size: var(--font-size-1); - color: var(--font-color-0); - font-weight: 700; - margin-bottom: var(--margin-bottom-0); -} diff --git a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx deleted file mode 100644 index 67af3ab88..000000000 --- a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import "./complexAlert.css"; -import React from "react"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import PropTypes from "prop-types"; - -/** - * @component - * @param {Object} props - * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green" - * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme - */ -const ComplexAlert = ({ theme }) => { - if (theme === "red") { - return ( -
-
- -
-
- ); - } else if (theme === "green") { - return ( -
-
- -
-
- ); - } -}; - -ComplexAlert.propTypes = { - theme: PropTypes.string.isRequired, -}; - -export default ComplexAlert; diff --git a/Client/src/components/Icons/ComplexAlert/complexAlert.css b/Client/src/components/Icons/ComplexAlert/complexAlert.css deleted file mode 100644 index ab3cea714..000000000 --- a/Client/src/components/Icons/ComplexAlert/complexAlert.css +++ /dev/null @@ -1,44 +0,0 @@ -.icon-holder-outer-red { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #d92d2019; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-red { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #d92d204d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-outer-green { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #07945519; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-green { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #0794554d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-core { - width: 20px; - height: 20px; -} diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx deleted file mode 100644 index 42a3f2a8a..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./dualButtonPopupModal.css"; -import React from "react"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true) - * @param {string} props.subject - The title text for the modal (required) - * @param {string} props.description - The description text for the modal (required) - * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component - */ -const DualButtonPopupModal = ({ - open = true, - subject, - description, - esc, - save, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{subject}
-
{description}
-
-
- - -
-
- ); -}; - -DualButtonPopupModal.propTypes = { - open: PropTypes.bool, - subject: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModal; diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css deleted file mode 100644 index 92ac7f5d6..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css +++ /dev/null @@ -1,60 +0,0 @@ -:root { - --popup-color-border-0: #f2f2f2; - --popup-color-0: #101828; - --popup-color-1: #475467; - --color-0: #1570ef; - --color-1: #175cd3; -} - -.dual-button-popup-modal-holder { - width: 380px; - height: 130px; - margin: 10px 20px; - padding: 30px; - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); - border: 1px solid var(--popup-color-border-0); - border-radius: 4px; -} - -.dual-button-popup-modal-subject { - color: var(--popup-color-0); - font-weight: bolder; - font-size: 16px; -} - -.dual-button-popup-modal-description { - color: var(--popup-color-1); - font-size: 13px; - margin-top: 10px; -} - -.dual-modal-spacing { - height: 40px; -} - -.dual-button-popup-modal-controllers { - display: flex; - justify-content: end; -} - -.blue-save-button { - width: 145px; - height: 35px; - padding: 5px 20px; - background-color: var(--color-0); - border: 1px solid var(--color-1); - border-radius: 4px; - margin: 5px 0; - margin-left: 20px; - color: white; - cursor: pointer; - font-size: 13px; -} - -.transparent-discard-button { - border: none; - background-color: transparent; - margin: 5px 10px; - font-size: 13px; -} diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx deleted file mode 100644 index b8b424323..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import "./dualButtonPopupModalWithTextfields.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @returns {JSX.Element} - Renders a single text field component within a popup modal - */ -const PopupModalTextfield = ({ title }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
- -
- ); -}; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @param {string} props.esc - The text for the cancel button (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component with text fields - */ -const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{title}
-
- -
-
-
- -
-
-
- - -
-
- ); -}; - -DualButtonPopupModalWithTextfields.propTypes = { - title: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModalWithTextfields; diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css deleted file mode 100644 index a1be3cd3a..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css +++ /dev/null @@ -1,61 +0,0 @@ -:root { - --popup-color-with-input-border-0: #f2f2f2; - --popup-color-with-input-border-1: #d0d5dd; - --popup-modal-with-input-title-color: #344054; -} - -.popup-modal-holder { - width: 480px; - font-family: var(--popup-font-family-0); - padding: 50px 40px; - border-radius: 4px; - margin: 10px 20px; - border: 1px solid var(--popup-color-with-input-border-0); - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); -} - -.popup-modal-header { - display: flex; - justify-content: space-between; - font-weight: bold; -} - -.popup-modal-close { - cursor: pointer; -} - -.spacing-height { - height: 30px; -} - -.popup-modal-input-title { - margin-bottom: 15px; - color: var(--popup-modal-with-input-title-color); -} - -.popup-modal-text-field { - width: 100%; - height: 35px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; -} - -.popup-modal-controllers { - display: flex; - justify-content: end; -} - -.white-cancel-button { - border: none; - background-color: transparent; - font-family: var(--popup-font-family-0); - margin: 5px 10px; - width: 145px; - height: 35px; - padding: 5px 20px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; - cursor: pointer; - font-size: 13px; -} diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx deleted file mode 100644 index 7f3ba908a..000000000 --- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx +++ /dev/null @@ -1,47 +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 {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 = ({ 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 28616863e..000000000 --- a/Client/src/components/TextFields/Description/descriptionTextField.css +++ /dev/null @@ -1,45 +0,0 @@ -:root { - --color-title-1: #344054; - --text-field-margin-0: 10px 20px; - --description-color-0: #344054; -} - -.description-field-holder { - margin: var(--text-field-margin-0); - margin-top: 20px; -} - -.text-field-title { - color: var(--color-title-1); - font-weight: bold; - margin-bottom: 10px; - font-size: 13px; - color: var(--description-color-0); - font-weight: bold; -} - -.description-field-area { - min-width: 320px; - font-size: 13px; - border-radius: 8px; -} - -.description-field-label { - margin-top: 10px; - font-size: 11px; -} - -.with-error { - color: red; -} - -#description-field-area-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: 11px; -} - -#description-field-area { - min-width: 320px; - font-size: 13px; -} diff --git a/Client/src/components/TextFields/Email/EmailTextField.jsx b/Client/src/components/TextFields/Email/EmailTextField.jsx deleted file mode 100644 index b1428e1c5..000000000 --- a/Client/src/components/TextFields/Email/EmailTextField.jsx +++ /dev/null @@ -1,88 +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"; - -/** - * @component - * @param {Object} props - * @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) - * @returns {JSX.Element} - Renders the email text field component with dynamic icon display - */ -const EmailTextField = ({ - id, - label, - 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 ( -
-
Email
-
- -
- {error && showIcon && ( - - )} - {error && !showIcon && ( - - )} - {!error && showIcon && ( - - )} -
- - ), - }} - 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 ff38a29df..000000000 --- a/Client/src/components/TextFields/Email/emailTextField.css +++ /dev/null @@ -1,41 +0,0 @@ -:root { - --textfield-color-0: #344054; -} - -.email-text-field { - position: relative; - margin: 10px 20px; -} - -#outlined-basic { - width: 320px; - height: 14px; - font-size: 13px; - padding: 8px 12px; -} - -.email-text-field-title { - margin: 0 20px; - margin-top: 30px; - font-size: 13px; - color: var(--textfield-color-0); - font-weight: bold; -} - -#outlined-basic-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: 11px; -} - -.text-field-icon { - width: 16px; - height: 16px; -} - -.icon-holder { - width: 16px; - height: 16px; - padding: 0; - margin: 0; -} 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 66cdf4fa4..000000000 --- a/Client/src/components/TextFields/Website/websiteTextField.css +++ /dev/null @@ -1,82 +0,0 @@ -:root { - --website-color-0: #344054; - --border-color: #d0d5dd; - --label-font-color: #475467; - --icon-color: #98a2b3; - --text-field-margin-0: 10px 20px; - --text-field-margin-1: 10px 20px 5px; -} - -.website-textfield-title { - margin: 0 20px; - margin-top: 30px; - font-size: 13px; - color: var(--website-color-0); - font-weight: bold; -} - -.website-textfield { - display: flex; - align-items: center; - position: relative; - margin: var(--text-field-margin-1); -} - -.website-textfield-hint { - margin: var(--text-field-margin-0); - font-size: 11px; -} - -.website-label { - padding: 6px 20px 6px 10px; - border: solid 1px var(--border-color); - 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(--label-font-color); -} - -.website-url { - width: 248px; - height: 31.5px; - padding: 0px 15px; - border: solid 1px var(--border-color); -} - -.website-icon-holder { - width: 40px; - height: 33px; - padding: 5px; - border: solid 1px var(--border-color); - 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(--border-color); - 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(--label-font-color); - cursor: pointer; -} - -.copy-icon { - margin-right: 5px; -} - -.with-no-copy-button { - display: none; -} diff --git a/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx b/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx deleted file mode 100644 index 9d7f65122..000000000 --- a/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import "./tooltipWithTail.css"; -import React from "react"; -import { styled } from "@mui/material/styles"; -import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import { useTheme } from "@mui/material"; - -const CustomizedTooltip = styled( - ({ className, placement, arrow, ...props }: TooltipProps) => ( - - ) -)(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "black", - }, - [`& .${tooltipClasses.arrow}`]: { - color: "black", - }, -})); - -const TooltipWithTail = ({ placement, arrow = false, title, text }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
- - {title &&
{title}
} -
{text}
- - } - className="tooltip-holder" - > - -
-
- ); -}; - -export default TooltipWithTail; diff --git a/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css deleted file mode 100644 index 1b1adf507..000000000 --- a/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css +++ /dev/null @@ -1,17 +0,0 @@ -:root { - --tooltip-color-0: #d0d5dd; - --tooltip-margin: 5px; - --tooltip-font-size: 12px; -} - -.tooltip-title { - font-size: var(--tooltip-font-size); - font-weight: bold; - margin: var(--tooltip-margin); -} - -.tooltip-description { - font-size: var(--tooltip-font-size); - color: var(--tooltip-color-0); - margin: var(--tooltip-margin); -} From 3e265a03fc7d654c1a9430d5e627e45c542d329e Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 15 May 2024 08:18:33 +0330 Subject: [PATCH 2/5] syncings --- .gitignore | 1 + .../Tooltips/TooltipWithTail/TooltipWithTail.tsx | 15 +++------------ 2 files changed, 4 insertions(+), 12 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..9f1f131d6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vite \ No newline at end of file diff --git a/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx b/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx index 9d7f65122..b52d530b9 100644 --- a/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx +++ b/Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx @@ -3,7 +3,6 @@ import React from "react"; import { styled } from "@mui/material/styles"; import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import { useTheme } from "@mui/material"; const CustomizedTooltip = styled( ({ className, placement, arrow, ...props }: TooltipProps) => ( @@ -23,17 +22,9 @@ const CustomizedTooltip = styled( }, })); -const TooltipWithTail = ({ placement, arrow = false, title, text }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - +function TooltipWithTail({ placement, arrow = false, title, text }) { return ( -
+
{
); -}; +} export default TooltipWithTail; From 1e9e3e837cc296ff9fbdf004c87ccd4f41e56433 Mon Sep 17 00:00:00 2001 From: Mohammad Khalilzadeh <140876993+MuhammadKhalilzadeh@users.noreply.github.com> Date: Wed, 15 May 2024 08:26:24 +0330 Subject: [PATCH 3/5] Delete .vite directory --- .vite/deps_temp_6dcee04d/package.json | 3 --- .vite/deps_temp_abaf02bb/package.json | 3 --- 2 files changed, 6 deletions(-) delete mode 100644 .vite/deps_temp_6dcee04d/package.json delete mode 100644 .vite/deps_temp_abaf02bb/package.json diff --git a/.vite/deps_temp_6dcee04d/package.json b/.vite/deps_temp_6dcee04d/package.json deleted file mode 100644 index 3dbc1ca59..000000000 --- a/.vite/deps_temp_6dcee04d/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/.vite/deps_temp_abaf02bb/package.json b/.vite/deps_temp_abaf02bb/package.json deleted file mode 100644 index 3dbc1ca59..000000000 --- a/.vite/deps_temp_abaf02bb/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} From fb9318fd74ac09271729163cc9538071360ca588 Mon Sep 17 00:00:00 2001 From: Mohammad Khalilzadeh <140876993+MuhammadKhalilzadeh@users.noreply.github.com> Date: Wed, 15 May 2024 08:43:55 +0330 Subject: [PATCH 4/5] Delete Client/src/components directory --- .../AnnouncementUpdateSubscription.jsx | 71 ------------- .../announcementUpdateSubscription.css | 99 ------------------- .../AnnouncementsDualButton.jsx | 55 ----------- .../announcementsDualButton.css | 38 ------- .../announcementsDualButtonWithIcon.css | 69 ------------- .../AnnouncementsMessageBar.jsx | 36 ------- .../announcementsMessageBar.css | 12 --- .../Charts/Servers/ServerStatus.jsx | 37 ------- .../Charts/Servers/serverStatus.css | 44 --------- .../Charts/Statistics/Statistic.jsx | 35 ------- .../Charts/Statistics/statistic.css | 31 ------ .../Icons/ComplexAlert/ComplexAlert.jsx | 36 ------- .../Icons/ComplexAlert/complexAlert.css | 44 --------- .../DualButtonPopupModal.jsx | 55 ----------- .../dualButtonPopupModal.css | 60 ----------- .../DualButtonPopupModalWithTextfields.jsx | 73 -------------- .../dualButtonPopupModalWithTextfields.css | 61 ------------ .../Description/DescriptionTextField.jsx | 47 --------- .../Description/descriptionTextField.css | 45 --------- .../TextFields/Email/EmailTextField.jsx | 88 ----------------- .../TextFields/Email/emailTextField.css | 41 -------- .../TextFields/Website/WebsiteTextField.jsx | 72 -------------- .../TextFields/Website/websiteTextField.css | 82 --------------- .../TooltipWithTail/tooltipWithTail.css | 17 ---- 24 files changed, 1248 deletions(-) delete mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css delete mode 100644 Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css delete mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx delete mode 100644 Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css delete mode 100644 Client/src/components/Charts/Servers/ServerStatus.jsx delete mode 100644 Client/src/components/Charts/Servers/serverStatus.css delete mode 100644 Client/src/components/Charts/Statistics/Statistic.jsx delete mode 100644 Client/src/components/Charts/Statistics/statistic.css delete mode 100644 Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx delete mode 100644 Client/src/components/Icons/ComplexAlert/complexAlert.css delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx delete mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css delete mode 100644 Client/src/components/TextFields/Description/DescriptionTextField.jsx delete mode 100644 Client/src/components/TextFields/Description/descriptionTextField.css delete mode 100644 Client/src/components/TextFields/Email/EmailTextField.jsx delete mode 100644 Client/src/components/TextFields/Email/emailTextField.css delete mode 100644 Client/src/components/TextFields/Website/WebsiteTextField.jsx delete mode 100644 Client/src/components/TextFields/Website/websiteTextField.css delete mode 100644 Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx deleted file mode 100644 index f3363e866..000000000 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import "./announcementUpdateSubscription.css"; -import React from "react"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - Title text for the update subscription dialog (required) - * @param {string} props.text - Body text for the update subscription dialog (required) - * @param {string} props.cancel - Text for the negative (cancel) button (required) - * @param {string} props.positive - Text for the positive button (required) - * @param {string} props.header - Title text for the email subscription section (required) - * @param {string} props.button - Text for the subscribe button (required) - * @returns {JSX.Element} - Renders the announcement update subscription component - */ - -const AnnouncementUpdateSubscription = ({ - title, - text, - cancel, - positive, - header, - button, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{title}
-
-
{text}
-
-
- - -
-
-
-
-
{header}
-
- - -
-
-
- ); -}; - -AnnouncementUpdateSubscription.propTypes = { - title: PropTypes.string.isRequired, - text: PropTypes.string.isRequired, - cancel: PropTypes.string.isRequired, - positive: PropTypes.string.isRequired, - header: PropTypes.string.isRequired, - button: PropTypes.string.isRequired, -}; - -export default AnnouncementUpdateSubscription; diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css deleted file mode 100644 index 7974ee799..000000000 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ /dev/null @@ -1,99 +0,0 @@ -:root { - --update-subscription-color-0: #101828; - --update-subscription-color-1: #475467; - --update-subscription-color-2: #fff; - --update-subscription-color-3: #eaecf0; - --update-subscription-color-4: #7f56d9; - --update-subscription-color-5: #1570ef; - --update-subscription-color-6: #344054; - --update-subscription-color-7: #d0d5dd; - --update-subscription-padding-0: 12px 16px; - --update-subscription-margin-right: 12px; - --update-subscription-font-size: 13px; - --update-subscription-radius-0: 4px; - --spacing-1: 16px; - --spacing-2: 20px; -} - -.update-subscription, -.update-subscription-dialog { - max-width: 770px; - border-radius: 4px; - border: 1px solid #eaecf0; -} - -.update-subscription-dialog { - padding: 15px 30px; -} - -.subscription-dialog-title { - font-size: 1rem; - font-weight: 700; - color: var(--update-subscription-color-0); -} - -.v-spacing-small { - height: 10px; -} - -.v-spacing-medium { - height: 15px; -} - -.subscription-dialog-text { - font-size: 13px; - color: var(--update-subscription-color-1); -} - -.subscription-dialog-controls { - display: flex; -} - -.controls-negative { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-3); - background-color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); -} - -.controls-positive, -.subscribe-button { - padding: var(--update-subscription-padding-0); - margin-right: var(--update-subscription-margin-right); - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-4); - background-color: var(--update-subscription-color-5); - color: var(--update-subscription-color-2); - font-size: var(--update-subscription-font-size); -} - -.update-subscription-title { - color: var(--update-subscription-color-6); - padding: 0 var(--spacing-2); - font-weight: 700; - font-size: 13px; - margin-bottom: 10px; -} - -.subscription-email { - display: flex; - padding: 0 var(--spacing-2); -} - -.subscription-email-field { - width: 290px; - height: 24px; - border-radius: var(--update-subscription-radius-0); - border: 1px solid var(--update-subscription-color-7); - box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); - padding: 5px 15px; - margin-right: var(--spacing-2); -} - -.subscribe-button { - width: 100px; - height: 34px; - padding: 2px 15px; -} diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx deleted file mode 100644 index 2abbadb1e..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./announcementsDualButton.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.subject - The announcement subject text - * @param {string} props.body - The announcement body text content - * @param {string} props.esc - The text for the escape button - * @param {string} props.primary - The text for the primary button - * @returns {JSX.Element} - Renders the announcement dual button component - */ - -const AnnouncementsDualButton = ({ subject, body, esc, primary }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{subject}
-
-
{body}
-
-
{esc}
-
{primary}
-
-
-
-
- -
-
- ); -}; - -AnnouncementsDualButton.propTypes = { - subject: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - primary: PropTypes.string.isRequired, -}; - -export default AnnouncementsDualButton; diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css deleted file mode 100644 index 837fd0bb5..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css +++ /dev/null @@ -1,38 +0,0 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - /* --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; */ - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; -} - -.announcement-without-tile { - max-width: 343px; - width: fit-content; - display: flex; - border: 1px solid var(--announcement-border-color); - /* font-family: var(--announcement-font-family); */ - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); -} - -.h-spacing { - width: 20px; -} - -.announcement-without-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-without-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); -} diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css deleted file mode 100644 index 80c6ae265..000000000 --- a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css +++ /dev/null @@ -1,69 +0,0 @@ -:root { - --announcement-border-color: #d0d5dd; - --announcement-border-radius: 4px; - --announcement-border-radius-2: 8px; - --announcement-font-size-0: 13px; - --announcement-font-color-0: #344054; - --announcement-font-color-1: #475467; - --announcement-font-color-2: #1570ef; - --announcement-padding: 16px; - --info-icon-frame-color: #eaecf0; -} - -.announcement-tile { - width: fit-content; - display: flex; - border: 1px solid var(--announcement-border-color); - padding: var(--announcement-padding); - border-radius: var(--announcement-border-radius); -} - -.info-icon-frame { - display: flex; - width: 40px; - height: 40px; - border: 1px solid var(--info-icon-frame-color); - border-radius: var(--announcement-border-radius-2); - justify-content: center; - align-items: center; -} - -.announcement-content { - padding: 0 var(--announcement-padding); -} - -.announcement-content-subject { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-0); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-content-body { - font-size: var(--announcement-font-size-0); - color: var(--announcement-font-color-1); - font-weight: 300; -} - -.announcement-content-controllers { - display: flex; - font-size: var(--announcement-font-size-0); - margin-top: 15px; -} - -.controllers-button-esc { - font-size: var(--announcement-font-size-0); - font-weight: 600; - margin-right: 12px; -} - -.controllers-button-primary { - font-size: var(--announcement-font-size-0); - font-weight: 600; - color: var(--announcement-font-color-2); -} - -.announcement-close { - width: 24px; - height: 24px; -} diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx deleted file mode 100644 index 20a179052..000000000 --- a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import "./announcementsMessageBar.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.message - The announcement message text content (required) - * @returns {JSX.Element} - Renders the announcement message bar component - */ -const AnnouncementsMessageBar = ({ message }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{message}
-
- -
-
- ); -}; - -AnnouncementsMessageBar.propTypes = { - message: PropTypes.string.isRequired, -}; - -export default AnnouncementsMessageBar; diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css deleted file mode 100644 index 2e9f95e83..000000000 --- a/Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --announcement-font-size-0: 13px; - --announcement-padding: 16px; -} - -.announcement-messagebar-body { - font-size: var(--announcement-font-size-0); - padding: 0 var(--announcement-padding) 0 0; - justify-content: center; - align-items: center; - margin: auto; -} diff --git a/Client/src/components/Charts/Servers/ServerStatus.jsx b/Client/src/components/Charts/Servers/ServerStatus.jsx deleted file mode 100644 index f910abf27..000000000 --- a/Client/src/components/Charts/Servers/ServerStatus.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import "./serverStatus.css"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the server status (required) - * @param {string} props.value - The value text to be displayed (required) - * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required) - * @returns {JSX.Element} - Renders the server status component - */ -const ServerStatus = ({ title, value, state }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
-
{value}
-
- ); -}; - -ServerStatus.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - state: PropTypes.string.isRequired, -}; - -export default ServerStatus; diff --git a/Client/src/components/Charts/Servers/serverStatus.css b/Client/src/components/Charts/Servers/serverStatus.css deleted file mode 100644 index 9126d9b3b..000000000 --- a/Client/src/components/Charts/Servers/serverStatus.css +++ /dev/null @@ -1,44 +0,0 @@ -:root { - --spacing-general-0: 10px 25px; - --spacing-general-1: 20px; - --color-border-0: #eaecf0; - --border-radius-0: 4px; - --font-size-0: 1rem; - --font-size-2: 36px; - - --color-up: #17b26a; - --color-down: #f04438; - --color-pause: #fdb022; -} - -.server-status-tile { - width: 230px; - margin: var(--spacing-general-0); - margin-left: 10px; - padding: var(--spacing-general-1); - border: 1px solid var(--color-border-0); - border-radius: var(--border-radius-0); -} - -.server-status-tile-title { - font-size: var(--font-size-0); - font-weight: bold; - margin-bottom: 25px; -} - -.server-status-tile-value { - font-size: var(--font-size-2); - font-weight: bolder; -} - -.up { - color: var(--color-up); -} - -.down { - color: var(--color-down); -} - -.pause { - color: var(--color-pause); -} diff --git a/Client/src/components/Charts/Statistics/Statistic.jsx b/Client/src/components/Charts/Statistics/Statistic.jsx deleted file mode 100644 index 99ad2066f..000000000 --- a/Client/src/components/Charts/Statistics/Statistic.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import "./statistic.css"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the statistic (required) - * @param {string} props.value - The numerical or textual value for the statistic (required) - * @returns {JSX.Element} - Renders the statistic component - */ -const Statistic = ({ title, value }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
-
{value}
-
- ); -}; - -Statistic.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, -}; - -export default Statistic; diff --git a/Client/src/components/Charts/Statistics/statistic.css b/Client/src/components/Charts/Statistics/statistic.css deleted file mode 100644 index a8834199d..000000000 --- a/Client/src/components/Charts/Statistics/statistic.css +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --stats-spacing-general-0: 5px 10px; - --color-border-0: #eaecf0; - --border-radius-0: 4px; - --font-size-0: 1rem; - --font-size-1: 13px; - --font-color-0: #344054; - --margin-bottom-0: 10px; -} - -.statistic-tile { - margin: var(--stats-spacing-general-0); - padding: var(--stats-spacing-general-0); - border: 1px solid var(--color-border-0); - border-radius: var(--border-radius-0); - - width: 180px; -} - -.statistic-tile-title { - font-size: var(--font-size-0); - color: var(--font-color-0); - margin-bottom: var(--margin-bottom-0); -} - -.statistic-tile-value { - font-size: var(--font-size-1); - color: var(--font-color-0); - font-weight: 700; - margin-bottom: var(--margin-bottom-0); -} diff --git a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx deleted file mode 100644 index 67af3ab88..000000000 --- a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import "./complexAlert.css"; -import React from "react"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import PropTypes from "prop-types"; - -/** - * @component - * @param {Object} props - * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green" - * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme - */ -const ComplexAlert = ({ theme }) => { - if (theme === "red") { - return ( -
-
- -
-
- ); - } else if (theme === "green") { - return ( -
-
- -
-
- ); - } -}; - -ComplexAlert.propTypes = { - theme: PropTypes.string.isRequired, -}; - -export default ComplexAlert; diff --git a/Client/src/components/Icons/ComplexAlert/complexAlert.css b/Client/src/components/Icons/ComplexAlert/complexAlert.css deleted file mode 100644 index ab3cea714..000000000 --- a/Client/src/components/Icons/ComplexAlert/complexAlert.css +++ /dev/null @@ -1,44 +0,0 @@ -.icon-holder-outer-red { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #d92d2019; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-red { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #d92d204d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-outer-green { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2px solid #07945519; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-holder-inner-green { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid #0794554d; - display: flex; - justify-content: center; - align-items: center; -} - -.icon-core { - width: 20px; - height: 20px; -} diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx deleted file mode 100644 index 42a3f2a8a..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import "./dualButtonPopupModal.css"; -import React from "react"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true) - * @param {string} props.subject - The title text for the modal (required) - * @param {string} props.description - The description text for the modal (required) - * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component - */ -const DualButtonPopupModal = ({ - open = true, - subject, - description, - esc, - save, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{subject}
-
{description}
-
-
- - -
-
- ); -}; - -DualButtonPopupModal.propTypes = { - open: PropTypes.bool, - subject: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModal; diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css deleted file mode 100644 index 92ac7f5d6..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css +++ /dev/null @@ -1,60 +0,0 @@ -:root { - --popup-color-border-0: #f2f2f2; - --popup-color-0: #101828; - --popup-color-1: #475467; - --color-0: #1570ef; - --color-1: #175cd3; -} - -.dual-button-popup-modal-holder { - width: 380px; - height: 130px; - margin: 10px 20px; - padding: 30px; - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); - border: 1px solid var(--popup-color-border-0); - border-radius: 4px; -} - -.dual-button-popup-modal-subject { - color: var(--popup-color-0); - font-weight: bolder; - font-size: 16px; -} - -.dual-button-popup-modal-description { - color: var(--popup-color-1); - font-size: 13px; - margin-top: 10px; -} - -.dual-modal-spacing { - height: 40px; -} - -.dual-button-popup-modal-controllers { - display: flex; - justify-content: end; -} - -.blue-save-button { - width: 145px; - height: 35px; - padding: 5px 20px; - background-color: var(--color-0); - border: 1px solid var(--color-1); - border-radius: 4px; - margin: 5px 0; - margin-left: 20px; - color: white; - cursor: pointer; - font-size: 13px; -} - -.transparent-discard-button { - border: none; - background-color: transparent; - margin: 5px 10px; - font-size: 13px; -} diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx deleted file mode 100644 index b8b424323..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import "./dualButtonPopupModalWithTextfields.css"; -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @returns {JSX.Element} - Renders a single text field component within a popup modal - */ -const PopupModalTextfield = ({ title }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
- -
- ); -}; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the modal (required) - * @param {string} props.esc - The text for the cancel button (required) - * @param {string} props.save - The text for the save button (required) - * @returns {JSX.Element} - Renders the dual button popup modal component with text fields - */ -const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
-
{title}
-
- -
-
-
- -
-
-
- - -
-
- ); -}; - -DualButtonPopupModalWithTextfields.propTypes = { - title: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - save: PropTypes.string.isRequired, -}; - -export default DualButtonPopupModalWithTextfields; diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css deleted file mode 100644 index a1be3cd3a..000000000 --- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css +++ /dev/null @@ -1,61 +0,0 @@ -:root { - --popup-color-with-input-border-0: #f2f2f2; - --popup-color-with-input-border-1: #d0d5dd; - --popup-modal-with-input-title-color: #344054; -} - -.popup-modal-holder { - width: 480px; - font-family: var(--popup-font-family-0); - padding: 50px 40px; - border-radius: 4px; - margin: 10px 20px; - border: 1px solid var(--popup-color-with-input-border-0); - box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), - 0px 20px 24px -4px rgba(16, 24, 40, 0.08); -} - -.popup-modal-header { - display: flex; - justify-content: space-between; - font-weight: bold; -} - -.popup-modal-close { - cursor: pointer; -} - -.spacing-height { - height: 30px; -} - -.popup-modal-input-title { - margin-bottom: 15px; - color: var(--popup-modal-with-input-title-color); -} - -.popup-modal-text-field { - width: 100%; - height: 35px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; -} - -.popup-modal-controllers { - display: flex; - justify-content: end; -} - -.white-cancel-button { - border: none; - background-color: transparent; - font-family: var(--popup-font-family-0); - margin: 5px 10px; - width: 145px; - height: 35px; - padding: 5px 20px; - border: 1px solid var(--popup-color-with-input-border-1); - border-radius: 4px; - cursor: pointer; - font-size: 13px; -} diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx deleted file mode 100644 index 7f3ba908a..000000000 --- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx +++ /dev/null @@ -1,47 +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 {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 = ({ 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 28616863e..000000000 --- a/Client/src/components/TextFields/Description/descriptionTextField.css +++ /dev/null @@ -1,45 +0,0 @@ -:root { - --color-title-1: #344054; - --text-field-margin-0: 10px 20px; - --description-color-0: #344054; -} - -.description-field-holder { - margin: var(--text-field-margin-0); - margin-top: 20px; -} - -.text-field-title { - color: var(--color-title-1); - font-weight: bold; - margin-bottom: 10px; - font-size: 13px; - color: var(--description-color-0); - font-weight: bold; -} - -.description-field-area { - min-width: 320px; - font-size: 13px; - border-radius: 8px; -} - -.description-field-label { - margin-top: 10px; - font-size: 11px; -} - -.with-error { - color: red; -} - -#description-field-area-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: 11px; -} - -#description-field-area { - min-width: 320px; - font-size: 13px; -} diff --git a/Client/src/components/TextFields/Email/EmailTextField.jsx b/Client/src/components/TextFields/Email/EmailTextField.jsx deleted file mode 100644 index b1428e1c5..000000000 --- a/Client/src/components/TextFields/Email/EmailTextField.jsx +++ /dev/null @@ -1,88 +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"; - -/** - * @component - * @param {Object} props - * @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) - * @returns {JSX.Element} - Renders the email text field component with dynamic icon display - */ -const EmailTextField = ({ - id, - label, - 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 ( -
-
Email
-
- -
- {error && showIcon && ( - - )} - {error && !showIcon && ( - - )} - {!error && showIcon && ( - - )} -
- - ), - }} - 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 ff38a29df..000000000 --- a/Client/src/components/TextFields/Email/emailTextField.css +++ /dev/null @@ -1,41 +0,0 @@ -:root { - --textfield-color-0: #344054; -} - -.email-text-field { - position: relative; - margin: 10px 20px; -} - -#outlined-basic { - width: 320px; - height: 14px; - font-size: 13px; - padding: 8px 12px; -} - -.email-text-field-title { - margin: 0 20px; - margin-top: 30px; - font-size: 13px; - color: var(--textfield-color-0); - font-weight: bold; -} - -#outlined-basic-helper-text { - margin-left: 0; - margin-top: 10px; - font-size: 11px; -} - -.text-field-icon { - width: 16px; - height: 16px; -} - -.icon-holder { - width: 16px; - height: 16px; - padding: 0; - margin: 0; -} 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 66cdf4fa4..000000000 --- a/Client/src/components/TextFields/Website/websiteTextField.css +++ /dev/null @@ -1,82 +0,0 @@ -:root { - --website-color-0: #344054; - --border-color: #d0d5dd; - --label-font-color: #475467; - --icon-color: #98a2b3; - --text-field-margin-0: 10px 20px; - --text-field-margin-1: 10px 20px 5px; -} - -.website-textfield-title { - margin: 0 20px; - margin-top: 30px; - font-size: 13px; - color: var(--website-color-0); - font-weight: bold; -} - -.website-textfield { - display: flex; - align-items: center; - position: relative; - margin: var(--text-field-margin-1); -} - -.website-textfield-hint { - margin: var(--text-field-margin-0); - font-size: 11px; -} - -.website-label { - padding: 6px 20px 6px 10px; - border: solid 1px var(--border-color); - 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(--label-font-color); -} - -.website-url { - width: 248px; - height: 31.5px; - padding: 0px 15px; - border: solid 1px var(--border-color); -} - -.website-icon-holder { - width: 40px; - height: 33px; - padding: 5px; - border: solid 1px var(--border-color); - 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(--border-color); - 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(--label-font-color); - cursor: pointer; -} - -.copy-icon { - margin-right: 5px; -} - -.with-no-copy-button { - display: none; -} diff --git a/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css deleted file mode 100644 index 1b1adf507..000000000 --- a/Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css +++ /dev/null @@ -1,17 +0,0 @@ -:root { - --tooltip-color-0: #d0d5dd; - --tooltip-margin: 5px; - --tooltip-font-size: 12px; -} - -.tooltip-title { - font-size: var(--tooltip-font-size); - font-weight: bold; - margin: var(--tooltip-margin); -} - -.tooltip-description { - font-size: var(--tooltip-font-size); - color: var(--tooltip-color-0); - margin: var(--tooltip-margin); -} From 7888205375647a215030d0d245f26622af0ac41b Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Wed, 15 May 2024 09:40:50 +0330 Subject: [PATCH 5/5] tsx to jsx and components to Components --- .../AnnouncementUpdateSubscription.jsx | 71 +++++++++++++ .../announcementUpdateSubscription.css | 99 +++++++++++++++++++ .../AnnouncementsDualButton.jsx | 55 +++++++++++ .../announcementsDualButton.css | 38 +++++++ .../announcementsDualButtonWithIcon.css | 69 +++++++++++++ .../AnnouncementsMessageBar.jsx | 36 +++++++ .../announcementsMessageBar.css | 12 +++ .../Charts/Servers/ServerStatus.jsx | 37 +++++++ .../Charts/Servers/serverStatus.css | 44 +++++++++ .../Charts/Statistics/Statistic.jsx | 35 +++++++ .../Charts/Statistics/statistic.css | 31 ++++++ .../Icons/ComplexAlert/ComplexAlert.jsx | 36 +++++++ .../Icons/ComplexAlert/complexAlert.css | 44 +++++++++ .../DualButtonPopupModal.jsx | 55 +++++++++++ .../dualButtonPopupModal.css | 60 +++++++++++ .../DualButtonPopupModalWithTextfields.jsx | 73 ++++++++++++++ .../dualButtonPopupModalWithTextfields.css | 61 ++++++++++++ .../Description/DescriptionTextField.jsx | 47 +++++++++ .../Description/descriptionTextField.css | 45 +++++++++ .../TextFields/Email/EmailTextField.jsx | 88 +++++++++++++++++ .../TextFields/Email/emailTextField.css | 41 ++++++++ .../TextFields/Website/WebsiteTextField.jsx | 72 ++++++++++++++ .../TextFields/Website/websiteTextField.css | 82 +++++++++++++++ .../TooltipWithTail/tooltipWithTail.css | 17 ++++ 24 files changed, 1248 insertions(+) create mode 100644 Client/src/Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx create mode 100644 Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css create mode 100644 Client/src/Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx create mode 100644 Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css create mode 100644 Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css create mode 100644 Client/src/Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx create mode 100644 Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css create mode 100644 Client/src/Components/Charts/Servers/ServerStatus.jsx create mode 100644 Client/src/Components/Charts/Servers/serverStatus.css create mode 100644 Client/src/Components/Charts/Statistics/Statistic.jsx create mode 100644 Client/src/Components/Charts/Statistics/statistic.css create mode 100644 Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx create mode 100644 Client/src/Components/Icons/ComplexAlert/complexAlert.css create mode 100644 Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx create mode 100644 Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css create mode 100644 Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx create mode 100644 Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css create mode 100644 Client/src/Components/TextFields/Description/DescriptionTextField.jsx create mode 100644 Client/src/Components/TextFields/Description/descriptionTextField.css create mode 100644 Client/src/Components/TextFields/Email/EmailTextField.jsx create mode 100644 Client/src/Components/TextFields/Email/emailTextField.css create mode 100644 Client/src/Components/TextFields/Website/WebsiteTextField.jsx create mode 100644 Client/src/Components/TextFields/Website/websiteTextField.css create mode 100644 Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css diff --git a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx new file mode 100644 index 000000000..f3363e866 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx @@ -0,0 +1,71 @@ +import "./announcementUpdateSubscription.css"; +import React from "react"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.title - Title text for the update subscription dialog (required) + * @param {string} props.text - Body text for the update subscription dialog (required) + * @param {string} props.cancel - Text for the negative (cancel) button (required) + * @param {string} props.positive - Text for the positive button (required) + * @param {string} props.header - Title text for the email subscription section (required) + * @param {string} props.button - Text for the subscribe button (required) + * @returns {JSX.Element} - Renders the announcement update subscription component + */ + +const AnnouncementUpdateSubscription = ({ + title, + text, + cancel, + positive, + header, + button, +}) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
+
{title}
+
+
{text}
+
+
+ + +
+
+
+
+
{header}
+
+ + +
+
+
+ ); +}; + +AnnouncementUpdateSubscription.propTypes = { + title: PropTypes.string.isRequired, + text: PropTypes.string.isRequired, + cancel: PropTypes.string.isRequired, + positive: PropTypes.string.isRequired, + header: PropTypes.string.isRequired, + button: PropTypes.string.isRequired, +}; + +export default AnnouncementUpdateSubscription; diff --git a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css new file mode 100644 index 000000000..7974ee799 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css @@ -0,0 +1,99 @@ +:root { + --update-subscription-color-0: #101828; + --update-subscription-color-1: #475467; + --update-subscription-color-2: #fff; + --update-subscription-color-3: #eaecf0; + --update-subscription-color-4: #7f56d9; + --update-subscription-color-5: #1570ef; + --update-subscription-color-6: #344054; + --update-subscription-color-7: #d0d5dd; + --update-subscription-padding-0: 12px 16px; + --update-subscription-margin-right: 12px; + --update-subscription-font-size: 13px; + --update-subscription-radius-0: 4px; + --spacing-1: 16px; + --spacing-2: 20px; +} + +.update-subscription, +.update-subscription-dialog { + max-width: 770px; + border-radius: 4px; + border: 1px solid #eaecf0; +} + +.update-subscription-dialog { + padding: 15px 30px; +} + +.subscription-dialog-title { + font-size: 1rem; + font-weight: 700; + color: var(--update-subscription-color-0); +} + +.v-spacing-small { + height: 10px; +} + +.v-spacing-medium { + height: 15px; +} + +.subscription-dialog-text { + font-size: 13px; + color: var(--update-subscription-color-1); +} + +.subscription-dialog-controls { + display: flex; +} + +.controls-negative { + padding: var(--update-subscription-padding-0); + margin-right: var(--update-subscription-margin-right); + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-3); + background-color: var(--update-subscription-color-2); + font-size: var(--update-subscription-font-size); +} + +.controls-positive, +.subscribe-button { + padding: var(--update-subscription-padding-0); + margin-right: var(--update-subscription-margin-right); + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-4); + background-color: var(--update-subscription-color-5); + color: var(--update-subscription-color-2); + font-size: var(--update-subscription-font-size); +} + +.update-subscription-title { + color: var(--update-subscription-color-6); + padding: 0 var(--spacing-2); + font-weight: 700; + font-size: 13px; + margin-bottom: 10px; +} + +.subscription-email { + display: flex; + padding: 0 var(--spacing-2); +} + +.subscription-email-field { + width: 290px; + height: 24px; + border-radius: var(--update-subscription-radius-0); + border: 1px solid var(--update-subscription-color-7); + box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); + padding: 5px 15px; + margin-right: var(--spacing-2); +} + +.subscribe-button { + width: 100px; + height: 34px; + padding: 2px 15px; +} diff --git a/Client/src/Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx new file mode 100644 index 000000000..2abbadb1e --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx @@ -0,0 +1,55 @@ +import "./announcementsDualButton.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.subject - The announcement subject text + * @param {string} props.body - The announcement body text content + * @param {string} props.esc - The text for the escape button + * @param {string} props.primary - The text for the primary button + * @returns {JSX.Element} - Renders the announcement dual button component + */ + +const AnnouncementsDualButton = ({ subject, body, esc, primary }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
+
{subject}
+
+
{body}
+
+
{esc}
+
{primary}
+
+
+
+
+ +
+
+ ); +}; + +AnnouncementsDualButton.propTypes = { + subject: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + esc: PropTypes.string.isRequired, + primary: PropTypes.string.isRequired, +}; + +export default AnnouncementsDualButton; diff --git a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css new file mode 100644 index 000000000..837fd0bb5 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css @@ -0,0 +1,38 @@ +:root { + --announcement-border-color: #d0d5dd; + --announcement-border-radius: 4px; + --announcement-border-radius-2: 8px; + /* --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; */ + --announcement-font-size-0: 13px; + --announcement-font-color-0: #344054; + --announcement-font-color-1: #475467; + --announcement-font-color-2: #1570ef; + --announcement-padding: 16px; + --info-icon-frame-color: #eaecf0; +} + +.announcement-without-tile { + max-width: 343px; + width: fit-content; + display: flex; + border: 1px solid var(--announcement-border-color); + /* font-family: var(--announcement-font-family); */ + padding: var(--announcement-padding); + border-radius: var(--announcement-border-radius); +} + +.h-spacing { + width: 20px; +} + +.announcement-without-content-subject { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-0); + font-weight: 700; + margin-bottom: 10px; +} + +.announcement-without-content-body { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-1); +} diff --git a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css new file mode 100644 index 000000000..80c6ae265 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css @@ -0,0 +1,69 @@ +:root { + --announcement-border-color: #d0d5dd; + --announcement-border-radius: 4px; + --announcement-border-radius-2: 8px; + --announcement-font-size-0: 13px; + --announcement-font-color-0: #344054; + --announcement-font-color-1: #475467; + --announcement-font-color-2: #1570ef; + --announcement-padding: 16px; + --info-icon-frame-color: #eaecf0; +} + +.announcement-tile { + width: fit-content; + display: flex; + border: 1px solid var(--announcement-border-color); + padding: var(--announcement-padding); + border-radius: var(--announcement-border-radius); +} + +.info-icon-frame { + display: flex; + width: 40px; + height: 40px; + border: 1px solid var(--info-icon-frame-color); + border-radius: var(--announcement-border-radius-2); + justify-content: center; + align-items: center; +} + +.announcement-content { + padding: 0 var(--announcement-padding); +} + +.announcement-content-subject { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-0); + font-weight: 700; + margin-bottom: 10px; +} + +.announcement-content-body { + font-size: var(--announcement-font-size-0); + color: var(--announcement-font-color-1); + font-weight: 300; +} + +.announcement-content-controllers { + display: flex; + font-size: var(--announcement-font-size-0); + margin-top: 15px; +} + +.controllers-button-esc { + font-size: var(--announcement-font-size-0); + font-weight: 600; + margin-right: 12px; +} + +.controllers-button-primary { + font-size: var(--announcement-font-size-0); + font-weight: 600; + color: var(--announcement-font-color-2); +} + +.announcement-close { + width: 24px; + height: 24px; +} diff --git a/Client/src/Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx new file mode 100644 index 000000000..20a179052 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx @@ -0,0 +1,36 @@ +import "./announcementsMessageBar.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.message - The announcement message text content (required) + * @returns {JSX.Element} - Renders the announcement message bar component + */ +const AnnouncementsMessageBar = ({ message }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
{message}
+
+ +
+
+ ); +}; + +AnnouncementsMessageBar.propTypes = { + message: PropTypes.string.isRequired, +}; + +export default AnnouncementsMessageBar; diff --git a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css new file mode 100644 index 000000000..2e9f95e83 --- /dev/null +++ b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css @@ -0,0 +1,12 @@ +:root { + --announcement-font-size-0: 13px; + --announcement-padding: 16px; +} + +.announcement-messagebar-body { + font-size: var(--announcement-font-size-0); + padding: 0 var(--announcement-padding) 0 0; + justify-content: center; + align-items: center; + margin: auto; +} diff --git a/Client/src/Components/Charts/Servers/ServerStatus.jsx b/Client/src/Components/Charts/Servers/ServerStatus.jsx new file mode 100644 index 000000000..f910abf27 --- /dev/null +++ b/Client/src/Components/Charts/Servers/ServerStatus.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import "./serverStatus.css"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the server status (required) + * @param {string} props.value - The value text to be displayed (required) + * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required) + * @returns {JSX.Element} - Renders the server status component + */ +const ServerStatus = ({ title, value, state }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
{title}
+
{value}
+
+ ); +}; + +ServerStatus.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + state: PropTypes.string.isRequired, +}; + +export default ServerStatus; diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css new file mode 100644 index 000000000..9126d9b3b --- /dev/null +++ b/Client/src/Components/Charts/Servers/serverStatus.css @@ -0,0 +1,44 @@ +:root { + --spacing-general-0: 10px 25px; + --spacing-general-1: 20px; + --color-border-0: #eaecf0; + --border-radius-0: 4px; + --font-size-0: 1rem; + --font-size-2: 36px; + + --color-up: #17b26a; + --color-down: #f04438; + --color-pause: #fdb022; +} + +.server-status-tile { + width: 230px; + margin: var(--spacing-general-0); + margin-left: 10px; + padding: var(--spacing-general-1); + border: 1px solid var(--color-border-0); + border-radius: var(--border-radius-0); +} + +.server-status-tile-title { + font-size: var(--font-size-0); + font-weight: bold; + margin-bottom: 25px; +} + +.server-status-tile-value { + font-size: var(--font-size-2); + font-weight: bolder; +} + +.up { + color: var(--color-up); +} + +.down { + color: var(--color-down); +} + +.pause { + color: var(--color-pause); +} diff --git a/Client/src/Components/Charts/Statistics/Statistic.jsx b/Client/src/Components/Charts/Statistics/Statistic.jsx new file mode 100644 index 000000000..99ad2066f --- /dev/null +++ b/Client/src/Components/Charts/Statistics/Statistic.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import "./statistic.css"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the statistic (required) + * @param {string} props.value - The numerical or textual value for the statistic (required) + * @returns {JSX.Element} - Renders the statistic component + */ +const Statistic = ({ title, value }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
{title}
+
{value}
+
+ ); +}; + +Statistic.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, +}; + +export default Statistic; diff --git a/Client/src/Components/Charts/Statistics/statistic.css b/Client/src/Components/Charts/Statistics/statistic.css new file mode 100644 index 000000000..a8834199d --- /dev/null +++ b/Client/src/Components/Charts/Statistics/statistic.css @@ -0,0 +1,31 @@ +:root { + --stats-spacing-general-0: 5px 10px; + --color-border-0: #eaecf0; + --border-radius-0: 4px; + --font-size-0: 1rem; + --font-size-1: 13px; + --font-color-0: #344054; + --margin-bottom-0: 10px; +} + +.statistic-tile { + margin: var(--stats-spacing-general-0); + padding: var(--stats-spacing-general-0); + border: 1px solid var(--color-border-0); + border-radius: var(--border-radius-0); + + width: 180px; +} + +.statistic-tile-title { + font-size: var(--font-size-0); + color: var(--font-color-0); + margin-bottom: var(--margin-bottom-0); +} + +.statistic-tile-value { + font-size: var(--font-size-1); + color: var(--font-color-0); + font-weight: 700; + margin-bottom: var(--margin-bottom-0); +} diff --git a/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx new file mode 100644 index 000000000..67af3ab88 --- /dev/null +++ b/Client/src/Components/Icons/ComplexAlert/ComplexAlert.jsx @@ -0,0 +1,36 @@ +import "./complexAlert.css"; +import React from "react"; +import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; +import PropTypes from "prop-types"; + +/** + * @component + * @param {Object} props + * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green" + * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme + */ +const ComplexAlert = ({ theme }) => { + if (theme === "red") { + return ( +
+
+ +
+
+ ); + } else if (theme === "green") { + return ( +
+
+ +
+
+ ); + } +}; + +ComplexAlert.propTypes = { + theme: PropTypes.string.isRequired, +}; + +export default ComplexAlert; diff --git a/Client/src/Components/Icons/ComplexAlert/complexAlert.css b/Client/src/Components/Icons/ComplexAlert/complexAlert.css new file mode 100644 index 000000000..ab3cea714 --- /dev/null +++ b/Client/src/Components/Icons/ComplexAlert/complexAlert.css @@ -0,0 +1,44 @@ +.icon-holder-outer-red { + width: 38px; + height: 38px; + border-radius: 50%; + border: 2px solid #d92d2019; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-inner-red { + width: 28px; + height: 28px; + border-radius: 50%; + border: 2px solid #d92d204d; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-outer-green { + width: 38px; + height: 38px; + border-radius: 50%; + border: 2px solid #07945519; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-holder-inner-green { + width: 28px; + height: 28px; + border-radius: 50%; + border: 2px solid #0794554d; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-core { + width: 20px; + height: 20px; +} diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx new file mode 100644 index 000000000..42a3f2a8a --- /dev/null +++ b/Client/src/Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx @@ -0,0 +1,55 @@ +import "./dualButtonPopupModal.css"; +import React from "react"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true) + * @param {string} props.subject - The title text for the modal (required) + * @param {string} props.description - The description text for the modal (required) + * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required) + * @param {string} props.save - The text for the save button (required) + * @returns {JSX.Element} - Renders the dual button popup modal component + */ +const DualButtonPopupModal = ({ + open = true, + subject, + description, + esc, + save, +}) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
{subject}
+
{description}
+
+
+ + +
+
+ ); +}; + +DualButtonPopupModal.propTypes = { + open: PropTypes.bool, + subject: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + esc: PropTypes.string.isRequired, + save: PropTypes.string.isRequired, +}; + +export default DualButtonPopupModal; diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css new file mode 100644 index 000000000..92ac7f5d6 --- /dev/null +++ b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css @@ -0,0 +1,60 @@ +:root { + --popup-color-border-0: #f2f2f2; + --popup-color-0: #101828; + --popup-color-1: #475467; + --color-0: #1570ef; + --color-1: #175cd3; +} + +.dual-button-popup-modal-holder { + width: 380px; + height: 130px; + margin: 10px 20px; + padding: 30px; + box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), + 0px 20px 24px -4px rgba(16, 24, 40, 0.08); + border: 1px solid var(--popup-color-border-0); + border-radius: 4px; +} + +.dual-button-popup-modal-subject { + color: var(--popup-color-0); + font-weight: bolder; + font-size: 16px; +} + +.dual-button-popup-modal-description { + color: var(--popup-color-1); + font-size: 13px; + margin-top: 10px; +} + +.dual-modal-spacing { + height: 40px; +} + +.dual-button-popup-modal-controllers { + display: flex; + justify-content: end; +} + +.blue-save-button { + width: 145px; + height: 35px; + padding: 5px 20px; + background-color: var(--color-0); + border: 1px solid var(--color-1); + border-radius: 4px; + margin: 5px 0; + margin-left: 20px; + color: white; + cursor: pointer; + font-size: 13px; +} + +.transparent-discard-button { + border: none; + background-color: transparent; + margin: 5px 10px; + font-size: 13px; +} diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx new file mode 100644 index 000000000..b8b424323 --- /dev/null +++ b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx @@ -0,0 +1,73 @@ +import "./dualButtonPopupModalWithTextfields.css"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import PropTypes from "prop-types"; +import { useTheme } from "@mui/material"; + +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the modal (required) + * @returns {JSX.Element} - Renders a single text field component within a popup modal + */ +const PopupModalTextfield = ({ title }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
{title}
+ +
+ ); +}; + +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the modal (required) + * @param {string} props.esc - The text for the cancel button (required) + * @param {string} props.save - The text for the save button (required) + * @returns {JSX.Element} - Renders the dual button popup modal component with text fields + */ +const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => { + const theme = useTheme(); + + const fontLookup = { + default: theme.font.default.font, + }; + + const fontFamily = fontLookup["default"]; + + return ( +
+
+
{title}
+
+ +
+
+
+ +
+
+
+ + +
+
+ ); +}; + +DualButtonPopupModalWithTextfields.propTypes = { + title: PropTypes.string.isRequired, + esc: PropTypes.string.isRequired, + save: PropTypes.string.isRequired, +}; + +export default DualButtonPopupModalWithTextfields; diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css new file mode 100644 index 000000000..a1be3cd3a --- /dev/null +++ b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css @@ -0,0 +1,61 @@ +:root { + --popup-color-with-input-border-0: #f2f2f2; + --popup-color-with-input-border-1: #d0d5dd; + --popup-modal-with-input-title-color: #344054; +} + +.popup-modal-holder { + width: 480px; + font-family: var(--popup-font-family-0); + padding: 50px 40px; + border-radius: 4px; + margin: 10px 20px; + border: 1px solid var(--popup-color-with-input-border-0); + box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), + 0px 20px 24px -4px rgba(16, 24, 40, 0.08); +} + +.popup-modal-header { + display: flex; + justify-content: space-between; + font-weight: bold; +} + +.popup-modal-close { + cursor: pointer; +} + +.spacing-height { + height: 30px; +} + +.popup-modal-input-title { + margin-bottom: 15px; + color: var(--popup-modal-with-input-title-color); +} + +.popup-modal-text-field { + width: 100%; + height: 35px; + border: 1px solid var(--popup-color-with-input-border-1); + border-radius: 4px; +} + +.popup-modal-controllers { + display: flex; + justify-content: end; +} + +.white-cancel-button { + border: none; + background-color: transparent; + font-family: var(--popup-font-family-0); + margin: 5px 10px; + width: 145px; + height: 35px; + padding: 5px 20px; + border: 1px solid var(--popup-color-with-input-border-1); + border-radius: 4px; + cursor: pointer; + font-size: 13px; +} diff --git a/Client/src/Components/TextFields/Description/DescriptionTextField.jsx b/Client/src/Components/TextFields/Description/DescriptionTextField.jsx new file mode 100644 index 000000000..7f3ba908a --- /dev/null +++ b/Client/src/Components/TextFields/Description/DescriptionTextField.jsx @@ -0,0 +1,47 @@ +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 {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 = ({ 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 new file mode 100644 index 000000000..28616863e --- /dev/null +++ b/Client/src/Components/TextFields/Description/descriptionTextField.css @@ -0,0 +1,45 @@ +:root { + --color-title-1: #344054; + --text-field-margin-0: 10px 20px; + --description-color-0: #344054; +} + +.description-field-holder { + margin: var(--text-field-margin-0); + margin-top: 20px; +} + +.text-field-title { + color: var(--color-title-1); + font-weight: bold; + margin-bottom: 10px; + font-size: 13px; + color: var(--description-color-0); + font-weight: bold; +} + +.description-field-area { + min-width: 320px; + font-size: 13px; + border-radius: 8px; +} + +.description-field-label { + margin-top: 10px; + font-size: 11px; +} + +.with-error { + color: red; +} + +#description-field-area-helper-text { + margin-left: 0; + margin-top: 10px; + font-size: 11px; +} + +#description-field-area { + min-width: 320px; + font-size: 13px; +} diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx new file mode 100644 index 000000000..b1428e1c5 --- /dev/null +++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx @@ -0,0 +1,88 @@ +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"; + +/** + * @component + * @param {Object} props + * @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) + * @returns {JSX.Element} - Renders the email text field component with dynamic icon display + */ +const EmailTextField = ({ + id, + label, + 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 ( +
+
Email
+
+ +
+ {error && showIcon && ( + + )} + {error && !showIcon && ( + + )} + {!error && showIcon && ( + + )} +
+ + ), + }} + 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 new file mode 100644 index 000000000..ff38a29df --- /dev/null +++ b/Client/src/Components/TextFields/Email/emailTextField.css @@ -0,0 +1,41 @@ +:root { + --textfield-color-0: #344054; +} + +.email-text-field { + position: relative; + margin: 10px 20px; +} + +#outlined-basic { + width: 320px; + height: 14px; + font-size: 13px; + padding: 8px 12px; +} + +.email-text-field-title { + margin: 0 20px; + margin-top: 30px; + font-size: 13px; + color: var(--textfield-color-0); + font-weight: bold; +} + +#outlined-basic-helper-text { + margin-left: 0; + margin-top: 10px; + font-size: 11px; +} + +.text-field-icon { + width: 16px; + height: 16px; +} + +.icon-holder { + width: 16px; + height: 16px; + padding: 0; + margin: 0; +} diff --git a/Client/src/Components/TextFields/Website/WebsiteTextField.jsx b/Client/src/Components/TextFields/Website/WebsiteTextField.jsx new file mode 100644 index 000000000..d18e33dd9 --- /dev/null +++ b/Client/src/Components/TextFields/Website/WebsiteTextField.jsx @@ -0,0 +1,72 @@ +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 new file mode 100644 index 000000000..66cdf4fa4 --- /dev/null +++ b/Client/src/Components/TextFields/Website/websiteTextField.css @@ -0,0 +1,82 @@ +:root { + --website-color-0: #344054; + --border-color: #d0d5dd; + --label-font-color: #475467; + --icon-color: #98a2b3; + --text-field-margin-0: 10px 20px; + --text-field-margin-1: 10px 20px 5px; +} + +.website-textfield-title { + margin: 0 20px; + margin-top: 30px; + font-size: 13px; + color: var(--website-color-0); + font-weight: bold; +} + +.website-textfield { + display: flex; + align-items: center; + position: relative; + margin: var(--text-field-margin-1); +} + +.website-textfield-hint { + margin: var(--text-field-margin-0); + font-size: 11px; +} + +.website-label { + padding: 6px 20px 6px 10px; + border: solid 1px var(--border-color); + 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(--label-font-color); +} + +.website-url { + width: 248px; + height: 31.5px; + padding: 0px 15px; + border: solid 1px var(--border-color); +} + +.website-icon-holder { + width: 40px; + height: 33px; + padding: 5px; + border: solid 1px var(--border-color); + 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(--border-color); + 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(--label-font-color); + cursor: pointer; +} + +.copy-icon { + margin-right: 5px; +} + +.with-no-copy-button { + display: none; +} diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css new file mode 100644 index 000000000..1b1adf507 --- /dev/null +++ b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css @@ -0,0 +1,17 @@ +:root { + --tooltip-color-0: #d0d5dd; + --tooltip-margin: 5px; + --tooltip-font-size: 12px; +} + +.tooltip-title { + font-size: var(--tooltip-font-size); + font-weight: bold; + margin: var(--tooltip-margin); +} + +.tooltip-description { + font-size: var(--tooltip-font-size); + color: var(--tooltip-color-0); + margin: var(--tooltip-margin); +}