fix: styles closer to design

src/core/client/stream/tabs/profile/components/HistoryComment.css

@@ -1,8 +1,8 @@
 .icon {
   color: var(--palette-text-secondary);
+  margin-right: calc(0.5 * var(--spacing-unit));
 }
 
-.button,
 .replies {
   composes: button from "talk-ui/shared/typography.css";
 }
@@ -12,6 +12,6 @@
   word-break: break-all;
 }
 
-.commentHistory .divider {
+.divider {
   margin: calc(var(--spacing-unit) * 2) 0 !important;
 }

src/core/client/stream/tabs/profile/components/HistoryComment.tsx

@@ -26,7 +26,7 @@ export interface HistoryCommentProps {
 
 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
-    <HorizontalGutter className={styles.commentHistory}>
+    <HorizontalGutter>
       <Localized id="profile-historyComment-story" $title={props.asset.title}>
         <Typography variant="heading4">{"Story: {$title}"}</Typography>
       </Localized>
@@ -36,7 +36,7 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
           <HTMLContent className={styles.body}>{props.body}</HTMLContent>
         )}
       </Typography>
-      <Flex direction="row" alignItems="center" itemGutter="double">
+      <Flex direction="row" alignItems="center" itemGutter>
         {!!props.replyCount && (
           <div className={styles.replies}>
             <Icon className={styles.icon}>reply</Icon>