From 503eb0b06a42619195cbdd364babca5915127d3b Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Tue, 4 Feb 2020 12:53:27 -0500
Subject: [PATCH] fix styling of icons and text in stream announcement (#2821)

---
 .../Comments/Stream/Announcement/Announcement.css  |  1 +
 .../Comments/Stream/Announcement/Announcement.tsx  | 14 +++++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.css b/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.css
index def52ccce..1bdbe56fa 100644
--- a/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.css
+++ b/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.css
@@ -7,5 +7,6 @@
 
 .text {
   @mixin bodyCopy;
+  font-weight: var(--font-weight-medium);
   color: white;
 }
diff --git a/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.tsx b/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.tsx
index 7c848123d..758c31900 100644
--- a/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/Announcement/Announcement.tsx
@@ -15,13 +15,17 @@ const Announcement: FunctionComponent<Props> = props => {
   return (
     <div className={cn(styles.root, CLASSES.announcement)}>
       <Flex justifyContent="space-between" alignItems="center">
-        <Flex itemGutter>
-          <Icon size="lg">notifications</Icon>
+        <Flex itemGutter="double" alignItems="center">
+          <div>
+            <Icon size="lg">notifications</Icon>
+          </div>
           <span className={styles.text}>{props.children}</span>
         </Flex>
-        <Button color="light" onClick={props.onClose}>
-          <Icon>close</Icon>
-        </Button>
+        <div>
+          <Button color="light" onClick={props.onClose}>
+            <Icon>close</Icon>
+          </Button>
+        </div>
       </Flex>
     </div>
   );