adding route for playground

Client/src/App.jsx

@@ -5,6 +5,7 @@ import Login from "./Pages/Login";
 import Register from "./Pages/Register";
 import HomeLayout from "./Layouts/HomeLayout";
 import Demo from "./Pages/Demo/Demo";
+import PlayGround from "./Pages/PlayGround/PlayGround";
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/demo" element={<Demo />} />
         <Route path="*" element={<NotFound />} />
+        <Route path="/playground" element={<PlayGround />} />
       </Routes>
     </>
   );

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

@@ -15,6 +15,10 @@
   --spacing-2: 20px;
 }
 
+.update-subscription {
+  margin: var(--spacing-2);
+}
+
 .update-subscription,
 .update-subscription-dialog {
   max-width: 770px;

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

@@ -2,21 +2,21 @@
   --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;
+  --margin: 20px;
 }
 
 .announcement-without-tile {
+  margin: var(--margin);
   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);
 }

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

@@ -8,9 +8,11 @@
   --announcement-font-color-2: #1570ef;
   --announcement-padding: 16px;
   --info-icon-frame-color: #eaecf0;
+  --tile-margin: 20px;
 }
 
 .announcement-tile {
+  margin: var(--tile-margin);
   width: fit-content;
   display: flex;
   border: 1px solid var(--announcement-border-color);

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

@@ -1,9 +1,11 @@
 :root {
   --announcement-font-size-0: 13px;
   --announcement-padding: 16px;
+  --margin: 20px;
 }
 
 .announcement-messagebar-body {
+  margin: var(--margin);
   font-size: var(--announcement-font-size-0);
   padding: 0 var(--announcement-padding) 0 0;
   justify-content: center;

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -4,6 +4,15 @@ 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/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
+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 AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
+import PlayGroundCharts from "./PlayGround-Charts";
+import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
+import PlayGroundTooltips from "./PlayGround-Tooltips";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -34,20 +43,19 @@ function PlayGround() {
         icon={<HelpOutlineIcon />}
         helperText="This is a hint text to help user."
       />
-      <br />
+
       <hr />
       {/* Now, illustration of the Website text fields */}
-      <br />
+
       <WebsiteTextField hintText="This is a hint text to help user." />
       <WebsiteTextField
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
-      <br />
-      <br />
+
       <hr />
       {/* Now, illustration of the Description text fields */}
-      <br />
+
       <DescriptionTextField
         hasError={false}
         hintText="This is a hint text to help user."
@@ -56,6 +64,61 @@ function PlayGround() {
         hasError={true}
         hintText="This is a hint text to help user."
       />
+      <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"
+      />
+
+      <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"
+      />
+
+      <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"
+      />
+
+      <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"
+      />
+
+      <AnnouncementsMessageBar message="New employee created successfully" />
+
+      <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"
+      />
+      <hr />
+      <PlayGroundCharts />
+      <hr />
+      <PlayGroundPopupModals />
+      <hr />
+      <PlayGroundTooltips />
     </div>
   );
 }