fix styling of icons and text in stream announcement (#2821)

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

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