From 52c8c8a625530d70432b99e59f87eadd50df1062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 14 Sep 2018 13:03:26 -0300
Subject: [PATCH] Styling

---
 .../tabs/profile/components/HistoryComment.css |  7 +++++++
 .../tabs/profile/components/HistoryComment.tsx | 18 +++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/core/client/stream/tabs/profile/components/HistoryComment.css

diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
new file mode 100644
index 000000000..b0a8f73cb
--- /dev/null
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -0,0 +1,7 @@
+.icon {
+  color: var(--palette-text-secondary);
+}
+
+.sideBar {
+  min-width: 110px;
+}
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index a315cb393..c5f73f2cc 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/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>
   );
 };