From 4b9c0b86c46d9c96684d4137b2087e2bb7ae717e Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 11 Jul 2024 18:23:49 -0400 Subject: [PATCH] Removed files --- .../AnnouncementUpdateSubscription.jsx | 71 --------------- .../announcementUpdateSubscription.css | 86 ------------------- .../AnnouncementsDualButton.jsx | 55 ------------ .../announcementsDualButton.css | 25 ------ .../AnnouncementsDualButtonWithIcon.jsx | 71 --------------- .../announcementsDualButtonWithIcon.css | 58 ------------- .../AnnouncementsMessageBar.jsx | 36 -------- .../announcementsMessageBar.css | 8 -- Client/src/Components/Toast/index.css | 3 - Client/src/Components/Toast/index.jsx | 52 ----------- Client/src/Pages/PlayGround/PlayGround.jsx | 57 ------------ 11 files changed, 522 deletions(-) delete mode 100644 Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx delete mode 100644 Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css delete mode 100644 Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx delete mode 100644 Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css delete mode 100644 Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx delete mode 100644 Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css delete mode 100644 Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx delete mode 100644 Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css delete mode 100644 Client/src/Components/Toast/index.css delete mode 100644 Client/src/Components/Toast/index.jsx diff --git a/Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx deleted file mode 100644 index f3363e866..000000000 --- a/Client/src/Components/Toast/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/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css deleted file mode 100644 index 6064a86cd..000000000 --- a/Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ /dev/null @@ -1,86 +0,0 @@ -.update-subscription { - margin: 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(--env-var-color-1); -} - -.v-spacing-small { - height: 10px; -} - -.v-spacing-medium { - height: 15px; -} - -.subscription-dialog-text { - font-size: 13px; - color: var(--env-var-color-2); -} - -.subscription-dialog-controls { - display: flex; -} - -.controls-negative { - padding: 12px 16px; - margin-right: 12px; - border-radius: var(--env-var-radius-1); - border: 1px solid var(--env-var-color-6); - background-color: var(--env-var-color-8); - font-size: var(--env-var-font-size-medium); -} - -.controls-positive, -.subscribe-button { - padding: 12px 16px; - margin-right: 12px; - border-radius: var(--env-var-radius-1); - border: 1px solid var(--env-var-color-7); - background-color: var(--env-var-color-3); - color: var(--env-var-color-8); - font-size: var(--env-var-font-size-medium); -} - -.update-subscription-title { - color: var(--env-var-color-5); - padding: 0 20px; - font-weight: 700; - font-size: 13px; - margin-bottom: 10px; -} - -.subscription-email { - display: flex; - padding: 0 20px; -} - -.subscription-email-field { - width: 290px; - height: 24px; - border-radius: var(--env-var-radius-1); - border: 1px solid var(--env-var-color-4); - box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05); - padding: 5px 15px; - margin-right: 20px; -} - -.subscribe-button { - width: 100px; - height: 34px; - padding: 2px 15px; -} diff --git a/Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx deleted file mode 100644 index 2abbadb1e..000000000 --- a/Client/src/Components/Toast/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/Toast/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css deleted file mode 100644 index aff02ab46..000000000 --- a/Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css +++ /dev/null @@ -1,25 +0,0 @@ -.announcement-without-tile { - margin: 20px; - max-width: 343px; - width: fit-content; - display: flex; - border: 1px solid var(--env-var-color-4); - padding: 16px; - border-radius: var(--env-var-radius-1); -} - -.h-spacing { - width: 20px; -} - -.announcement-without-content-subject { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-without-content-body { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); -} diff --git a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx b/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx deleted file mode 100644 index bd2675f4c..000000000 --- a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import "./announcementsDualButtonWithIcon.css"; -import CloseIcon from "@mui/icons-material/Close"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {React.ReactNode} props.icon - Optional React node for an announcement icon - * @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 (usually "Close") - * @param {string} props.primary - The text for the primary button - * @param {function} props.closeToast - Function to close the toast notification - * @returns {JSX.Element} - Renders the announcement dual button with icon component - */ - -const AnnouncementsDualButtonWithIcon = ({ - icon, - subject, - body, - esc, - primary, - closeToast, -}) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
- {icon &&
{icon}
} -
- {subject && ( -
{subject}
- )} - {body &&
{body}
} - {(esc || primary) && ( -
- {esc && ( -
- {esc} -
- )} - {primary && ( -
{primary}
- )} -
- )} -
-
- -
-
- ); -}; - -AnnouncementsDualButtonWithIcon.propTypes = { - icon: PropTypes.object, - subject: PropTypes.string, - body: PropTypes.string, - esc: PropTypes.string, - primary: PropTypes.string, - closeToast: PropTypes.func.isRequired, -}; - -export default AnnouncementsDualButtonWithIcon; diff --git a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css deleted file mode 100644 index 02f132374..000000000 --- a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css +++ /dev/null @@ -1,58 +0,0 @@ -.announcement-tile { - margin: 20px; - width: fit-content; - display: flex; - border: 1px solid var(--env-var-color-4); - padding: 16px; - border-radius: var(--env-var-radius-1); -} - -.info-icon-frame { - display: flex; - width: var(--env-var-default-2); - height: var(--env-var-default-2); - border: 1px solid var(--env-var-color-6); - border-radius: var(--env-var-radius-2); - justify-content: center; - align-items: center; -} - -.announcement-content { - padding: 0 16px; -} - -.announcement-content-subject { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); - font-weight: 700; - margin-bottom: 10px; -} - -.announcement-content-body { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); - font-weight: 300; -} - -.announcement-content-controllers { - display: flex; - font-size: var(--env-var-font-size-medium); - margin-top: 15px; -} - -.controllers-button-esc { - font-size: var(--env-var-font-size-medium); - font-weight: 600; - margin-right: 12px; -} - -.controllers-button-primary { - font-size: var(--env-var-font-size-medium); - font-weight: 600; - color: var(--env-var-color-3); -} - -.announcement-close { - width: var(--env-var-default-1); - height: var(--env-var-default-1); -} diff --git a/Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx deleted file mode 100644 index 20a179052..000000000 --- a/Client/src/Components/Toast/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/Toast/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css deleted file mode 100644 index 7a6e30b0a..000000000 --- a/Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css +++ /dev/null @@ -1,8 +0,0 @@ -.announcement-messagebar-body { - margin: 20px; - font-size: var(--env-var-font-size-medium); - padding: 0 16px 0 0; - justify-content: center; - align-items: center; - margin: auto; -} diff --git a/Client/src/Components/Toast/index.css b/Client/src/Components/Toast/index.css deleted file mode 100644 index c778d22f5..000000000 --- a/Client/src/Components/Toast/index.css +++ /dev/null @@ -1,3 +0,0 @@ -.Toastify__toast-container { - width: auto; -} \ No newline at end of file diff --git a/Client/src/Components/Toast/index.jsx b/Client/src/Components/Toast/index.jsx deleted file mode 100644 index 41367ec11..000000000 --- a/Client/src/Components/Toast/index.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import PropTypes from "prop-types"; -import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert"; -import AnnouncementsDualButtonWithIcon from "./AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; -import "react-toastify/dist/ReactToastify.css"; -import { toast, ToastContainer } from "react-toastify"; -import "./index.css"; - -/** - * ToastComponent displays a notification that is triggered by error messages. - * - * @component - * @param {Object} props - The component props - * @param {string} props.subject - The subject or title of the toast message - * @param {string} props.body - The body content of the toast message - * @param {string} props.esc - The text for the dismiss action button - * @param {string} props.primary - The text for the primary action button - * @returns {JSX.Element} JSX element representing the ToastComponent - */ - -const ToastComponent = ({ subject, body, esc, primary }) => { - const displayMsg = () => { - toast( - ({ closeToast, toastProps }) => ( - } - subject={subject} - body={body} - esc={esc} - primary={primary} - closeToast={closeToast} - /> - ), - { closeButton: false } - ); - }; - - return ( -
- - -
- ); -}; - -ToastComponent.propTypes = { - subject: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - esc: PropTypes.string.isRequired, - primary: PropTypes.string.isRequired, -}; - -export default ToastComponent; diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx index bde0b6761..247146362 100644 --- a/Client/src/Pages/PlayGround/PlayGround.jsx +++ b/Client/src/Pages/PlayGround/PlayGround.jsx @@ -4,16 +4,9 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField"; import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField"; -import AnnouncementsDualButton from "../../Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton"; -import AnnouncementsDualButtonWithIcon from "../../Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; -import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert"; -import AnnouncementsMessageBar from "../../Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar"; -import AnnouncementUpdateSubscription from "../../Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription"; import PlayGroundCharts from "./PlayGround-Charts"; import PlayGroundPopupModals from "./PlayGround-Popup-Modals"; import PlayGroundTooltips from "./PlayGround-Tooltips"; -import Toast from "../../Components/Toast"; // This Component is just for the development and test // purposes and just to see what my components look like while development @@ -53,7 +46,6 @@ function PlayGround() { hasCopyButton={true} hintText="This is a hint text to help user." /> -
{/* Now, illustration of the Description text fields */} @@ -66,55 +58,6 @@ function PlayGround() { hasError={true} hintText="This is a hint text to help user." /> - - - - } - subject="We’ve just released a new feature" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="View changes" - /> - - } - subject="There was a problem with that action" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="Learn more" - /> - - } - subject="Successfully updated profile" - body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid - pariatur, ipsum dolor." - esc="Dismiss" - primary="Learn more" - /> - - - - - -