adding route for playground

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;