Add edited marker

src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap

@@ -216,7 +216,7 @@ exports[`navigates to sign up form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -239,7 +239,7 @@ exports[`navigates to sign up form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>

src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap

@@ -56,7 +56,7 @@ exports[`accepts correct password 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -92,7 +92,7 @@ exports[`accepts correct password 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -237,7 +237,7 @@ exports[`accepts correct password confirmation 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -273,7 +273,7 @@ exports[`accepts correct password confirmation 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -418,7 +418,7 @@ exports[`accepts valid email 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -454,7 +454,7 @@ exports[`accepts valid email 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -612,7 +612,7 @@ exports[`accepts valid username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -635,7 +635,7 @@ exports[`accepts valid username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -793,7 +793,7 @@ exports[`checks for invalid characters in username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -829,7 +829,7 @@ exports[`checks for invalid characters in username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -987,7 +987,7 @@ exports[`checks for invalid email 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1023,7 +1023,7 @@ exports[`checks for invalid email 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1181,7 +1181,7 @@ exports[`checks for too long username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1217,7 +1217,7 @@ exports[`checks for too long username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1375,7 +1375,7 @@ exports[`checks for too short password 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1411,7 +1411,7 @@ exports[`checks for too short password 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1569,7 +1569,7 @@ exports[`checks for too short username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1605,7 +1605,7 @@ exports[`checks for too short username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1763,7 +1763,7 @@ exports[`checks for wrong password confirmation 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1799,7 +1799,7 @@ exports[`checks for wrong password confirmation 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1944,7 +1944,7 @@ exports[`renders sign up form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1967,7 +1967,7 @@ exports[`renders sign up form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2099,7 +2099,7 @@ exports[`shows error when submitting empty form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2135,7 +2135,7 @@ exports[`shows error when submitting empty form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2280,7 +2280,7 @@ exports[`shows server error 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2303,7 +2303,7 @@ exports[`shows server error 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2427,7 +2427,7 @@ exports[`shows server error 2`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2450,7 +2450,7 @@ exports[`shows server error 2`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2569,7 +2569,7 @@ exports[`submits form successfully 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2592,7 +2592,7 @@ exports[`submits form successfully 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2711,7 +2711,7 @@ exports[`submits form successfully 2`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2734,7 +2734,7 @@ exports[`submits form successfully 2`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>

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

@@ -14,6 +14,7 @@ it("renders username and body", () => {
     createdAt: "1995-12-17T03:24:00.000Z",
     topBarRight: "topBarRight",
     footer: "footer",
+    showEditedMarker: true,
   };
   const wrapper = shallow(<Comment {...props} />);
   expect(wrapper).toMatchSnapshot();

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

@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
 import { Flex } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
+import EditedMarker from "./EditedMarker";
 import HTMLContent from "./HTMLContent";
 import Timestamp from "./Timestamp";
 import TopBarLeft from "./TopBarLeft";
@@ -17,6 +18,7 @@ export interface CommentProps {
   createdAt: string;
   topBarRight?: React.ReactNode;
   footer?: React.ReactNode;
+  showEditedMarker?: boolean;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
@@ -32,7 +34,10 @@ const Comment: StatelessComponent<CommentProps> = props => {
             props.author.username && (
               <Username>{props.author.username}</Username>
             )}
-          <Timestamp>{props.createdAt}</Timestamp>
+          <Flex direction="row" alignItems="baseline" itemGutter>
+            <Timestamp>{props.createdAt}</Timestamp>
+            {props.showEditedMarker && <EditedMarker />}
+          </Flex>
         </TopBarLeft>
         {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>

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

@@ -0,0 +1,3 @@
+.root {
+  composes: detail from "talk-ui/shared/typography.css";
+}

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

@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import EditedMarker from "./EditedMarker";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<EditedMarker />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,16 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import styles from "./EditedMarker.css";
+
+const EditedMarker: StatelessComponent = () => (
+  <div className={styles.root}>
+    (
+    <Localized id="comments-editedMarker-edited">
+      <span>Edited</span>
+    </Localized>
+    )
+  </div>
+);
+
+export default EditedMarker;

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

@@ -1,22 +1,17 @@
-import React from "react";
-
 import dompurify from "dompurify";
+import React, { StatelessComponent } from "react";
+
 import styles from "./HTMLContent.css";
 
-interface ContentProps {
+interface HTMLContentProps {
   children: string;
 }
 
-class HTMLContent extends React.Component<ContentProps> {
-  public render() {
-    const { children } = this.props;
-    return (
-      <div
-        className={styles.root}
-        dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
-      />
-    );
-  }
-}
+const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
+  <div
+    className={styles.root}
+    dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
+  />
+);
 
 export default HTMLContent;

src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap

@@ -14,9 +14,16 @@ exports[`renders username and body 1`] = `
       <Username>
         Marvin
       </Username>
-      <Timestamp>
-        1995-12-17T03:24:00.000Z
-      </Timestamp>
+      <withPropsOnChange(Flex)
+        alignItems="baseline"
+        direction="row"
+        itemGutter={true}
+      >
+        <Timestamp>
+          1995-12-17T03:24:00.000Z
+        </Timestamp>
+        <EditedMarker />
+      </withPropsOnChange(Flex)>
     </TopBarLeft>
     <div>
       topBarRight

src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="EditedMarker-root"
+>
+  (
+  <Localized
+    id="comments-editedMarker-edited"
+  >
+    <span>
+      Edited
+    </span>
+  </Localized>
+  )
+</div>
+`;

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

@@ -14,11 +14,7 @@ const PoweredBy: StatelessComponent<Props> = props => {
         id="comments-poweredBy"
         logo={<Typography variant="heading4" container="span" />}
       >
-        <Typography
-          variant="inputDescription"
-          container="span"
-          color="textSecondary"
-        >
+        <Typography variant="detail" container="span" color="textSecondary">
           {"Powered by <logo>The Coral Project</logo>"}
         </Typography>
       </Localized>

src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
     <withPropsOnChange(Typography)
       color="textSecondary"
       container="span"
-      variant="inputDescription"
+      variant="detail"
     >
       Powered by &lt;logo&gt;The Coral Project&lt;/logo&gt;
     </withPropsOnChange(Typography)>

src/core/client/stream/containers/CommentContainer.spec.tsx

@@ -24,6 +24,7 @@ it("renders username and body", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
+        edited: false,
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
       pending: false,
@@ -50,6 +51,7 @@ it("renders body only", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
+        edited: false,
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
       pending: false,

src/core/client/stream/containers/CommentContainer.tsx

@@ -113,6 +113,7 @@ export class CommentContainer extends Component<InnerProps, State> {
           body={comment.body}
           createdAt={comment.createdAt}
           blur={comment.pending || false}
+          showEditedMarker={comment.editing.edited}
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
@@ -173,6 +174,7 @@ const enhanced = withShowAuthPopupMutation(
         body
         createdAt
         editing {
+          edited
           editableUntil
         }
         pending

src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap

@@ -24,6 +24,7 @@ exports[`renders body only 1`] = `
       </React.Fragment>
     }
     indentLevel={1}
+    showEditedMarker={false}
   />
 </React.Fragment>
 `;
@@ -52,6 +53,7 @@ exports[`renders username and body 1`] = `
       </React.Fragment>
     }
     indentLevel={1}
+    showEditedMarker={false}
   />
 </React.Fragment>
 `;

src/core/client/stream/mutations/EditCommentMutation.ts

@@ -19,6 +19,9 @@ const mutation = graphql`
     editComment(input: $input) {
       comment {
         body
+        editing {
+          edited
+        }
       }
       clientMutationId
     }
@@ -40,6 +43,9 @@ function commit(environment: Environment, input: EditCommentInput) {
       editComment: {
         id: input.commentID,
         body: input.body,
+        editing: {
+          edited: true,
+        },
         clientMutationId: (clientMutationId++).toString(),
       },
     } as any, // TODO: (cvle) generated types should contain one for the optimistic response.

src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap

@@ -151,7 +151,7 @@ exports[`cancel edit: edit canceled 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -205,13 +205,17 @@ exports[`cancel edit: edit canceled 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -282,13 +286,17 @@ exports[`cancel edit: edit canceled 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -478,7 +486,7 @@ exports[`edit a comment: edit form 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -697,13 +705,17 @@ exports[`edit a comment: edit form 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -893,7 +905,7 @@ exports[`edit a comment: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1112,13 +1124,17 @@ exports[`edit a comment: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1308,7 +1324,7 @@ exports[`edit a comment: render stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1362,13 +1378,17 @@ exports[`edit a comment: render stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -1439,13 +1459,17 @@ exports[`edit a comment: render stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1635,7 +1659,7 @@ exports[`edit a comment: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1689,13 +1713,26 @@ exports[`edit a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                  <div
+                    className="EditedMarker-root"
+                  >
+                    (
+                    <span>
+                      Edited
+                    </span>
+                    )
+                  </div>
+                </div>
               </div>
               <div>
                 <button
@@ -1766,13 +1803,17 @@ exports[`edit a comment: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1962,7 +2003,7 @@ exports[`shows expiry message: edit form closed 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -2016,13 +2057,17 @@ exports[`shows expiry message: edit form closed 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -2093,13 +2138,17 @@ exports[`shows expiry message: edit form closed 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -2289,7 +2338,7 @@ exports[`shows expiry message: edit time expired 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -2485,13 +2534,17 @@ exports[`shows expiry message: edit time expired 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -166,13 +166,17 @@ exports[`loads more comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`loads more comments 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -288,13 +296,17 @@ exports[`loads more comments 1`] = `
                 >
                   Isabelle
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:14:00.000Z"
-                  title="2018-07-06T18:14:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:14:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:14:00.000Z"
+                    title="2018-07-06T18:14:00.000Z"
+                  >
+                    2018-07-06T18:14:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -499,13 +511,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -560,13 +576,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap

@@ -41,13 +41,17 @@ exports[`renders permalink view 1`] = `
             >
               Markus
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <div
+              className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              <time
+                className="Timestamp-root RelativeTime-root"
+                dateTime="2018-07-06T18:24:00.000Z"
+                title="2018-07-06T18:24:00.000Z"
+              >
+                2018-07-06T18:24:00.000Z
+              </time>
+            </div>
           </div>
         </div>
         <div
@@ -250,13 +254,17 @@ exports[`show all comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -198,13 +198,17 @@ exports[`show all comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap

@@ -145,7 +145,7 @@ exports[`post a comment: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -199,13 +199,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -276,13 +280,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -337,13 +345,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -533,7 +545,7 @@ exports[`post a comment: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -587,13 +599,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -648,13 +664,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -709,13 +729,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -905,7 +929,7 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -959,13 +983,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1020,13 +1048,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap

@@ -151,7 +151,7 @@ exports[`post a reply: open reply form 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -205,13 +205,17 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -393,13 +397,17 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -589,7 +597,7 @@ exports[`post a reply: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -643,13 +651,17 @@ exports[`post a reply: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -826,13 +838,17 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
                 <div>
                   <button
@@ -904,13 +920,17 @@ exports[`post a reply: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1100,7 +1120,7 @@ exports[`post a reply: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1154,13 +1174,17 @@ exports[`post a reply: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1216,13 +1240,17 @@ exports[`post a reply: server response 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -1278,13 +1306,17 @@ exports[`post a reply: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1474,7 +1506,7 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1528,13 +1560,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1589,13 +1625,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -289,13 +297,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -346,13 +358,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -228,13 +232,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -460,13 +468,17 @@ exports[`show all replies 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -522,13 +534,17 @@ exports[`show all replies 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -579,13 +595,17 @@ exports[`show all replies 1`] = `
                   >
                     Isabelle
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:14:00.000Z"
-                    title="2018-07-06T18:14:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:14:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:14:00.000Z"
+                      title="2018-07-06T18:14:00.000Z"
+                    >
+                      2018-07-06T18:14:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div

src/core/client/stream/test/editComment.spec.tsx

@@ -36,6 +36,9 @@ function createTestRenderer() {
               comment: {
                 id: assets[0].comments.edges[0].node.id,
                 body: "Edited! (from server)",
+                editing: {
+                  edited: true,
+                },
               },
               clientMutationId: "0",
             })

src/core/client/stream/test/fixtures.ts

@@ -21,6 +21,7 @@ export const comments = [
     createdAt: "2018-07-06T18:24:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:24:30.000Z",
     },
   },
@@ -31,6 +32,7 @@ export const comments = [
     createdAt: "2018-07-06T18:20:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:20:30.000Z",
     },
   },
@@ -41,6 +43,7 @@ export const comments = [
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
     },
   },
@@ -78,6 +81,7 @@ export const commentWithReplies = {
     },
   },
   editing: {
+    edited: false,
     editableUntil: "2018-07-06T18:24:30.000Z",
   },
 };

src/core/client/stream/test/postComment.spec.tsx

@@ -42,6 +42,7 @@ beforeEach(() => {
                   body: "<strong>Hello world! (from server)</strong>",
                   createdAt: "2018-07-06T18:24:00.000Z",
                   editing: {
+                    edited: false,
                     editableUntil: "2018-07-06T18:24:30.000Z",
                   },
                 },

src/core/client/stream/test/postReply.spec.tsx

@@ -46,6 +46,7 @@ beforeEach(() => {
                     pageInfo: { endCursor: null, hasNextPage: false },
                   },
                   editing: {
+                    edited: false,
                     editableUntil: "2018-07-06T18:24:30.000Z",
                   },
                 },

src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`works with multiple form components 1`] = `
     Username
   </label>
   <p
-    className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+    className="Typography-root Typography-detail Typography-colorTextSecondary"
   >
     A unique identifier displayed on your comments. You may use “_” and “.”
   </p>

src/core/client/ui/components/InputDescription/InputDescription.tsx

@@ -11,7 +11,7 @@ const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
   const { className, children, ...rest } = props;
   return (
     <Typography
-      variant="inputDescription"
+      variant="detail"
       color="textSecondary"
       className={className}
       {...rest}

src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <p
-  className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+  className="Typography-root Typography-detail Typography-colorTextSecondary"
 >
   Form Components should go here
 </p>

src/core/client/ui/components/Typography/Typography.css

@@ -40,8 +40,8 @@
   composes: inputLabel from "talk-ui/shared/typography.css";
 }
 
-.inputDescription {
-  composes: inputDescription from "talk-ui/shared/typography.css";
+.detail {
+  composes: detail from "talk-ui/shared/typography.css";
 }
 
 .timestamp {

src/core/client/ui/components/Typography/Typography.tsx

@@ -15,7 +15,7 @@ type Variant =
   | "bodyCopy"
   | "bodyCopyBold"
   | "inputLabel"
-  | "inputDescription"
+  | "detail"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -146,7 +146,7 @@ Typography.defaultProps = {
     bodyCopyBold: "p",
     timestamp: "span",
     inputLabel: "label",
-    inputDescription: "p",
+    detail: "p",
   },
   noWrap: false,
   paragraph: false,

src/core/client/ui/shared/typography.css

@@ -155,7 +155,7 @@
   color: var(--palette-text-primary);
 }
 
-.inputDescription {
+.detail {
   font-size: calc(14rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
   font-family: var(--font-family-sans-serif);

src/locales/en-US/stream.ftl

@@ -65,3 +65,4 @@ comments-editCommentForm-rte =
   .placeholder = { comments-editCommentForm-rteLabel }
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
+comments-editedMarker-edited = Edited