Merge branch 'ui-tab' of github.com:coralproject/talk into ui-tab

* 'ui-tab' of github.com:coralproject/talk:
  Adapt snapshot
  Fix types
  Pending comment blur

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

@@ -0,0 +1,5 @@
+.blur {
+  filter: blur(2px);
+  user-select: none;
+  pointer-events: none;
+}

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

@@ -1,20 +1,25 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 
 import Indent from "../Indent";
 import Comment from "./Comment";
+import * as styles from "./IndentedComment.css";
 
 export interface IndentedCommentProps extends PropTypesOf<typeof Comment> {
   indentLevel?: number;
+  blur?: boolean;
 }
 
 const IndentedComment: StatelessComponent<IndentedCommentProps> = props => {
   const { indentLevel, ...rest } = props;
   const CommentElement = <Comment {...rest} />;
-  const CommentwithIndent =
-    (indentLevel && <Indent level={indentLevel}>{CommentElement}</Indent>) ||
-    CommentElement;
+  const CommentwithIndent = (
+    <Indent level={indentLevel} className={cn({ [styles.blur]: props.blur })}>
+      {CommentElement}
+    </Indent>
+  );
   return CommentwithIndent;
 };
 

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

@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <Indent
+  className=""
   level={1}
 >
   <Comment

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

@@ -4,6 +4,7 @@ import React, { StatelessComponent } from "react";
 import * as styles from "./Indent.css";
 
 export interface IndentProps {
+  className?: string;
   level?: number;
   noBorder?: boolean;
   children: React.ReactNode;
@@ -12,7 +13,7 @@ export interface IndentProps {
 const Indent: StatelessComponent<IndentProps> = props => {
   return (
     <div
-      className={cn(styles.root, {
+      className={cn(props.className, styles.root, {
         [styles.level1]: props.level === 1,
         [styles.noBorder]: props.noBorder,
       })}

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

@@ -23,6 +23,7 @@ it("renders username and body", () => {
       },
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
+      pending: false,
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
@@ -45,6 +46,7 @@ it("renders body only", () => {
       },
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
+      pending: false,
     },
     indentLevel: 1,
     showAuthPopup: noop as any,

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

@@ -57,6 +57,7 @@ export class CommentContainer extends Component<InnerProps, State> {
         <Comment
           {...rest}
           {...comment}
+          blur={comment.pending || false}
           footer={
             <>
               <ReplyButton
@@ -100,6 +101,7 @@ const enhanced = withShowAuthPopupMutation(
         }
         body
         createdAt
+        pending
         ...ReplyCommentFormContainer_comment
       }
     `,

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

@@ -8,6 +8,7 @@ exports[`renders body only 1`] = `
         "username": null,
       }
     }
+    blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
@@ -25,6 +26,7 @@ exports[`renders body only 1`] = `
     id="comment-id"
     indentLevel={1}
     me={null}
+    pending={false}
     showAuthPopup={[Function]}
   />
 </React.Fragment>
@@ -38,6 +40,7 @@ exports[`renders username and body 1`] = `
         "username": "Marvin",
       }
     }
+    blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
@@ -55,6 +58,7 @@ exports[`renders username and body 1`] = `
     id="comment-id"
     indentLevel={1}
     me={null}
+    pending={false}
     showAuthPopup={[Function]}
   />
 </React.Fragment>

src/core/client/stream/local/local.graphql

@@ -15,6 +15,10 @@ type AuthPopup {
   view: View
 }
 
+extend type Comment {
+  pending: Boolean
+}
+
 type Local {
   network: Network!
   assetID: String

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

@@ -72,6 +72,7 @@ function commit(
 ) {
   const me = getMe(environment)!;
   const currentDate = new Date().toISOString();
+  const id = uuidGenerator();
   return commitMutationPromiseNormalized<MutationTypes>(environment, {
     mutation,
     variables: {
@@ -85,7 +86,7 @@ function commit(
         edge: {
           cursor: currentDate,
           node: {
-            id: uuidGenerator(),
+            id,
             createdAt: currentDate,
             author: {
               id: me.id,
@@ -97,6 +98,9 @@ function commit(
         clientMutationId: (clientMutationId++).toString(),
       },
     } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
+    optimisticUpdater: store => {
+      store.get(id)!.setValue(true, "pending");
+    },
     configs: getConfig(input),
   });
 }

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

@@ -149,52 +149,56 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -202,52 +206,56 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -255,52 +263,56 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Isabelle
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Hey!",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-2"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Isabelle
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Hey!",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-2"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -458,52 +470,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -511,52 +527,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -24,52 +24,56 @@ exports[`renders permalink view 1`] = `
       Show all comments
     </a>
     <div
-      className="Comment-root"
-      role="article"
+      className="Indent-root"
     >
       <div
-        className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        className="Comment-root"
+        role="article"
       >
-        <span
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+        <div
+          className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
         >
-          Markus
-        </span>
-        <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
-        className="HTMLContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Joining Too",
-          }
-        }
-      />
-      <div
-        className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-          id="comments-commentContainer-replyButton-comment-0"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          <span>
-            Reply
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            Markus
           </span>
-        </button>
+          <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
+          className="HTMLContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "Joining Too",
+            }
+          }
+        />
+        <div
+          className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+            id="comments-commentContainer-replyButton-comment-0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            <span>
+              Reply
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -225,52 +229,56 @@ exports[`show all comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -181,52 +181,56 @@ exports[`show all comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -182,52 +182,56 @@ exports[`post a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="IndentedComment-blur Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<strong>Hello world!</strong>",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-uuid-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<strong>Hello world!</strong>",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-uuid-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -235,52 +239,56 @@ exports[`post a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -288,52 +296,56 @@ exports[`post a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -530,52 +542,56 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<strong>Hello world! (from server)</strong>",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-x"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<strong>Hello world! (from server)</strong>",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-x"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -583,52 +599,56 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -636,52 +656,56 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -878,52 +902,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -931,52 +959,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -188,52 +188,56 @@ exports[`post a reply: open reply form 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <form
@@ -368,52 +372,56 @@ exports[`post a reply: open reply form 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -610,52 +618,56 @@ exports[`post a reply: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <form
@@ -785,7 +797,7 @@ exports[`post a reply: optimistic response 1`] = `
           role="log"
         >
           <div
-            className="Indent-root Indent-level1"
+            className="IndentedComment-blur Indent-root Indent-level1"
           >
             <div
               className="Comment-root"
@@ -843,52 +855,56 @@ exports[`post a reply: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1085,52 +1101,56 @@ exports[`post a reply: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -1197,52 +1217,56 @@ exports[`post a reply: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1439,52 +1463,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1492,52 +1520,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -149,52 +149,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -202,52 +206,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "I like yoghurt",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-with-replies"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "I like yoghurt",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-with-replies"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div

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

@@ -149,52 +149,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -202,52 +206,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Lukas
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Lukas
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -149,52 +149,56 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -431,52 +435,56 @@ exports[`show all replies 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Comment-root"
+            role="article"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Markus
-            </span>
-            <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
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
               </span>
-            </button>
+              <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
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div