Moved announcements components to Toast component as that's the only place they should be used

Client/src/Components/Toast/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 (
+    <div className="update-subscription" style={{ fontFamily: fontFamily }}>
+      <div className="update-subscription-dialog">
+        <div className="subscription-dialog-title">{title}</div>
+        <div className="v-spacing-small"></div>
+        <div className="subscription-dialog-text">{text}</div>
+        <div className="v-spacing-medium"></div>
+        <div className="subscription-dialog-controls">
+          <button className="controls-negative">{cancel}</button>
+          <button className="controls-positive">{positive}</button>
+        </div>
+        <div className="v-spacing-medium"></div>
+      </div>
+      <div className="v-spacing-medium"></div>
+      <div className="update-subscription-title">{header}</div>
+      <div className="subscription-email">
+        <input
+          className="subscription-email-field"
+          type="text"
+          placeholder="olivia@untitledui.com"
+        />
+        <button className="subscribe-button">{button}</button>
+      </div>
+      <div className="v-spacing-medium"></div>
+    </div>
+  );
+};
+
+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;

Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css

@@ -0,0 +1,86 @@
+.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;
+}

Client/src/Components/Toast/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 (
+    <div
+      className="announcement-without-tile"
+      style={{ fontFamily: fontFamily }}
+    >
+      <div className="announcement-without-content">
+        <div className="announcement-without-content-subject">{subject}</div>
+        <div className="v-spacing"></div>
+        <div className="announcement-without-content-body">{body}</div>
+        <div className="announcement-content-controllers">
+          <div className="controllers-button-esc">{esc}</div>
+          <div className="controllers-button-primary">{primary}</div>
+        </div>
+      </div>
+      <div className="h-spacing"></div>
+      <div className="announcement-close">
+        <CloseIcon style={{ fill: "#98A2B3" }} />
+      </div>
+    </div>
+  );
+};
+
+AnnouncementsDualButton.propTypes = {
+  subject: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  esc: PropTypes.string.isRequired,
+  primary: PropTypes.string.isRequired,
+};
+
+export default AnnouncementsDualButton;

Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css

@@ -0,0 +1,25 @@
+.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);
+}

Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx

@@ -0,0 +1,71 @@
+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 (
+    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
+      {icon && <div className="announcement-icon">{icon}</div>}
+      <div className="announcement-content">
+        {subject && (
+          <div className="announcement-content-subject">{subject}</div>
+        )}
+        {body && <div className="announcement-content-body">{body}</div>}
+        {(esc || primary) && (
+          <div className="announcement-content-controllers">
+            {esc && (
+              <div className="controllers-button-esc" onClick={closeToast}>
+                {esc}
+              </div>
+            )}
+            {primary && (
+              <div className="controllers-button-primary">{primary}</div>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="announcement-close" onClick={closeToast}>
+        <CloseIcon style={{ fill: "#98A2B3" }} />
+      </div>
+    </div>
+  );
+};
+
+AnnouncementsDualButtonWithIcon.propTypes = {
+  icon: PropTypes.object,
+  subject: PropTypes.string,
+  body: PropTypes.string,
+  esc: PropTypes.string,
+  primary: PropTypes.string,
+  closeToast: PropTypes.func.isRequired,
+};
+
+export default AnnouncementsDualButtonWithIcon;

Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css

@@ -0,0 +1,58 @@
+.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);
+}

Client/src/Components/Toast/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 (
+    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
+      <div className="announcement-messagebar-body">{message}</div>
+      <div className="announcement-close">
+        <CloseIcon style={{ fill: "#98A2B3" }} />
+      </div>
+    </div>
+  );
+};
+
+AnnouncementsMessageBar.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+export default AnnouncementsMessageBar;

Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css

@@ -0,0 +1,8 @@
+.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;
+}

Client/src/Components/Toast/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
+import AnnouncementsDualButtonWithIcon from "./AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import "react-toastify/dist/ReactToastify.css";
 import { toast, ToastContainer } from "react-toastify";
 import "./index.css";