Styling

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

@@ -0,0 +1,7 @@
+.icon {
+  color: var(--palette-text-secondary);
+}
+
+.sideBar {
+  min-width: 110px;
+}

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

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
-import { Flex, RelativeTime, Typography } from "talk-ui/components";
+import Timestamp from "talk-stream/components/Timestamp";
+import { Flex, Icon, Typography } from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
+import * as styles from "./HistoryComment.css";
 
 export interface CommentHistoryProps {
   comment: {
@@ -12,13 +14,19 @@ export interface CommentHistoryProps {
 
 const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
   return (
-    <Flex>
+    <Flex direction="row" justifyContent="space-between">
       <Typography variant="bodyCopy">
         {props.comment.body && <HTMLContent>{props.comment.body}</HTMLContent>}
       </Typography>
-      <div>
-        <RelativeTime date={props.comment.createdAt} />
-      </div>
+      <Flex
+        direction="row"
+        alignItems="baseline"
+        itemGutter="half"
+        className={styles.sideBar}
+      >
+        <Icon className={styles.icon}>schedule</Icon>
+        <Timestamp>{props.comment.createdAt}</Timestamp>
+      </Flex>
     </Flex>
   );
 };