Announcements are implemented

Client/src/App.jsx

@@ -1,5 +1,3 @@
-import PlayGroundTooltips from "./screens/PlayGround/PlayGround-Tooltips";
-
 function App() {
   return (
     <>

Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx

@@ -0,0 +1,40 @@
+import "./announcementUpdateSubscription.css";
+import React from "react";
+
+function AnnouncementUpdateSubscription({
+  title,
+  text,
+  cancel,
+  positive,
+  header,
+  button,
+}) {
+  return (
+    <div className="update-subscription">
+      <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>
+  );
+}
+
+export default AnnouncementUpdateSubscription;

Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css

@@ -0,0 +1,100 @@
+:root {
+  --update-subscription-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  --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-radius-0: 4px;
+  --spacing-1: 16px;
+  --spacing-2: 20px;
+}
+
+.update-subscription,
+.update-subscription-dialog {
+  font-family: var(--update-subscription-font-family);
+  max-width: 770px;
+  border-radius: 4px;
+  border: 1px solid #eaecf0;
+}
+
+.update-subscription-dialog {
+  padding: 15px 30px;
+}
+
+.subscription-dialog-title {
+  font-size: 1rem;
+  font-family: var(--update-subscription-font-family);
+  font-weight: 900;
+  color: var(--update-subscription-color-0);
+}
+
+.v-spacing-small {
+  height: 10px;
+}
+
+.v-spacing-medium {
+  height: 15px;
+}
+
+.subscription-dialog-text {
+  font-size: 13px;
+  font-family: var(--update-subscription-font-family);
+  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);
+}
+
+.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);
+}
+
+.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;
+}

Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx

@@ -0,0 +1,25 @@
+import "./announcementsDualButton.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+function AnnouncementsDualButton({ subject, body, esc, primary }) {
+  return (
+    <div className="announcement-without-tile">
+      <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>
+  );
+}
+
+export default AnnouncementsDualButton;

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);
+}

Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx

@@ -0,0 +1,36 @@
+import "./announcementsDualButtonWithIcon.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+function AnnouncementsDualButtonWithIcon({
+  icon,
+  subject,
+  body,
+  esc,
+  primary,
+}) {
+  return (
+    <div className="announcement-tile">
+      {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">{esc}</div>}
+            {primary && (
+              <div className="controllers-button-primary">{primary}</div>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="announcement-close">
+        <CloseIcon style={{ fill: "#98A2B3" }} />
+      </div>
+    </div>
+  );
+}
+
+export default AnnouncementsDualButtonWithIcon;

Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css

@@ -0,0 +1,70 @@
+: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-tile {
+  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);
+}
+
+.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);
+}
+
+.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: 500;
+  margin-right: 12px;
+}
+
+.controllers-button-primary {
+  font-size: var(--announcement-font-size-0);
+  font-weight: 500;
+  color: var(--announcement-font-color-2);
+}
+
+.announcement-close {
+  width: 24px;
+  height: 24px;
+}

Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx

@@ -0,0 +1,18 @@
+import "./announcementsMessageBar.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+function AnnouncementsMessageBar() {
+  return (
+    <div className="announcement-tile">
+      <div className="announcement-messagebar-body">
+        New employee created successfully
+      </div>
+      <div className="announcement-close">
+        <CloseIcon style={{ fill: "#98A2B3" }} />
+      </div>
+    </div>
+  );
+}
+
+export default AnnouncementsMessageBar;

Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css

@@ -0,0 +1,14 @@
+:root {
+  --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  --announcement-font-size-0: 13px;
+  --announcement-padding: 16px;
+}
+
+.announcement-messagebar-body {
+  font-size: var(--announcement-font-size-0);
+  font-family: var(--announcement-font-family);
+  padding: 0 var(--announcement-padding) 0 0;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}

Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx

@@ -0,0 +1,25 @@
+import "./complexAlert.css";
+import React from "react";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+
+function ComplexAlert({ theme }) {
+  if (theme === "red") {
+    return (
+      <div className="icon-holder-outer-red">
+        <div className="icon-holder-inner-red">
+          <ErrorOutlineIcon className="icon-core" style={{ fill: "#D92D20" }} />
+        </div>
+      </div>
+    );
+  } else if (theme === "green") {
+    return (
+      <div className="icon-holder-outer-green">
+        <div className="icon-holder-inner-green">
+          <ErrorOutlineIcon className="icon-core" style={{ fill: "#079455" }} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ComplexAlert;

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;
+}

Client/src/screens/PlayGround/PlayGround-announcements.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import AnnouncementsDualButtonWithIcon from "../../components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ComplexAlert from "../../components/Icons/ComplexAlert/ComplexAlert";
+import AnnouncementsMessageBar from "../../components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
+import AnnouncementsDualButton from "../../components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
+import AnnouncementUpdateSubscription from "../../components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
+
+function PlayGroundAnnouncements() {
+  return (
+    <div>
+      <AnnouncementsDualButtonWithIcon
+        icon={
+          <div className="info-icon-frame">
+            <InfoOutlinedIcon style={{ fill: "#344054" }} />
+          </div>
+        }
+        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"
+      />
+      <br />
+      <br />
+      <AnnouncementsDualButtonWithIcon
+        icon={<ComplexAlert theme="red" />}
+        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"
+      />
+      <br />
+      <br />
+      <AnnouncementsDualButtonWithIcon
+        icon={<ComplexAlert theme="green" />}
+        subject="Successfully updated profile"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+        pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="Learn more"
+      />
+      <br />
+      <br />
+      <AnnouncementsDualButton
+        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"
+      />
+      <br />
+      <br />
+      <AnnouncementsMessageBar />
+      <br />
+      <br />
+      <AnnouncementUpdateSubscription
+        title="We’ve just released a new update!"
+        text="Check out the all new dashboard view. Pages and now load faster."
+        cancel="Dismiss"
+        positive="Changelog"
+        header="Subscribe to updates"
+        button="Subscribe"
+      />
+      <br />
+      <br />
+    </div>
+  );
+}
+
+export default PlayGroundAnnouncements;