Use correct gutter for username

src/core/client/stream/components/Comment.css

@@ -5,3 +5,7 @@
 .gutterBottom {
   margin-bottom: calc(2px * $spacing-unit);
 }
+
+.topBar {
+  margin-bottom: calc(1px * $spacing-unit);
+}

src/core/client/stream/components/Comment.tsx

@@ -22,7 +22,9 @@ const Comment: StatelessComponent<CommentProps> = props => {
   });
   return (
     <div className={rootClassName}>
-      {props.author && <Username>{props.author.username}</Username>}
+      <div className={styles.topBar}>
+        {props.author && <Username>{props.author.username}</Username>}
+      </div>
       <Typography>{props.body}</Typography>
     </div>
   );

src/core/client/stream/components/Username.css

@@ -1,3 +1,3 @@
 .root {
-  font-weight: $font-weight-medium;
+  composes: heading4 from "talk-ui/shared/typography.css";
 }

src/core/client/stream/components/Username.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { StatelessComponent } from "react";
 
-import { Typography } from "talk-ui/components";
-
 import * as styles from "./Username.css";
 
 export interface CommentProps {
@@ -10,11 +8,7 @@ export interface CommentProps {
 }
 
 const Username: StatelessComponent<CommentProps> = props => {
-  return (
-    <Typography className={styles.root} variant="heading2" gutterBottom>
-      {props.children}
-    </Typography>
-  );
+  return <span className={styles.root}>{props.children}</span>;
 };
 
 export default Username;