From e909d21039bc8aa0c07fda48e91c0f18fe091cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 7 Sep 2018 10:23:29 -0300
Subject: [PATCH 01/53] Adding Message Matching the exact values

---
 .../client/ui/components/Message/Message.css  | 29 +++++++++
 .../client/ui/components/Message/Message.mdx  | 27 ++++++++
 .../ui/components/Message/Message.spec.tsx    | 15 +++++
 .../client/ui/components/Message/Message.tsx  | 61 +++++++++++++++++++
 .../client/ui/components/Message/index.ts     |  1 +
 src/core/client/ui/components/index.ts        |  1 +
 6 files changed, 134 insertions(+)
 create mode 100644 src/core/client/ui/components/Message/Message.css
 create mode 100644 src/core/client/ui/components/Message/Message.mdx
 create mode 100644 src/core/client/ui/components/Message/Message.spec.tsx
 create mode 100644 src/core/client/ui/components/Message/Message.tsx
 create mode 100644 src/core/client/ui/components/Message/index.ts

diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
new file mode 100644
index 000000000..86c7f0129
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.css
@@ -0,0 +1,29 @@
+.root {
+  composes: alertMessage from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
+  border-width: 1px;
+  border-left-width: calc(0.8 * var(--spacing-unit));
+  border-style: solid;
+}
+
+.color {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-grey-main);
+  color: var(--palette-grey-main);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
+.icon {
+  margin-right: calc(0.8 * var(--spacing-unit));
+  color: var(--palette-grey-main);
+}
diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx
new file mode 100644
index 000000000..9a876d76c
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.mdx
@@ -0,0 +1,27 @@
+---
+name: Message
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Message from './Message'
+import HorizontalGutter from '../HorizontalGutter'
+
+# Message
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <Message>This is a message</Message>
+    <Message fullWidth>Contrary to popular belief, Lorem Ipsum is not simply random text.</Message>
+  </HorizontalGutter>
+</Playground>
+
+## Usage with icon
+<Playground>
+  <HorizontalGutter>
+    <Message icon="alarm">Edit: 1 min 23 secs Remaining</Message>
+  </HorizontalGutter>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
new file mode 100644
index 000000000..d1335f8d9
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Message from "./Message";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<Message {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
new file mode 100644
index 000000000..19bb8ece5
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -0,0 +1,61 @@
+import cn from "classnames";
+import React, { ReactNode, StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import Icon from "../Icon";
+import * as styles from "./Message.css";
+
+export interface MessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /*
+  * If set renders a full width message
+  */
+  fullWidth?: boolean;
+  /*
+  * Name of the icon, render if provided
+  */
+  icon?: string;
+}
+
+const Message: StatelessComponent<MessageProps> = props => {
+  const { className, classes, fullWidth, children, icon, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    classes.color,
+    {
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {icon && (
+        <Icon size="md" className={classes.icon}>
+          {icon}
+        </Icon>
+      )}
+      {children}
+    </div>
+  );
+};
+
+Message.defaultProps = {
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(Message);
+export default enhanced;
diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts
new file mode 100644
index 000000000..a6d22dd86
--- /dev/null
+++ b/src/core/client/ui/components/Message/index.ts
@@ -0,0 +1 @@
+export { default } from "./Message";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index f701660dd..61970ed25 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -20,3 +20,4 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
+export { default as Message } from "./Message";

From 994b0f7fb3502752be97df6058a02df9ae15c09a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 7 Sep 2018 10:56:03 -0300
Subject: [PATCH 02/53] Updated API

---
 .../client/ui/components/Message/Message.css  | 11 ++++--
 .../client/ui/components/Message/Message.tsx  | 18 ++++++++--
 .../ValidationMessage/ValidationMessage.css   | 27 ---------------
 .../ValidationMessage/ValidationMessage.mdx   |  2 +-
 .../ValidationMessage/ValidationMessage.tsx   | 34 ++++---------------
 5 files changed, 31 insertions(+), 61 deletions(-)
 delete mode 100644 src/core/client/ui/components/ValidationMessage/ValidationMessage.css

diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
index 86c7f0129..267de3201 100644
--- a/src/core/client/ui/components/Message/Message.css
+++ b/src/core/client/ui/components/Message/Message.css
@@ -8,16 +8,22 @@
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
-  border-left-width: calc(0.8 * var(--spacing-unit));
   border-style: solid;
+  border-left-width: calc(0.8 * var(--spacing-unit));
 }
 
-.color {
+.colorInfo {
   background-color: var(--palette-common-white);
   border-color: var(--palette-grey-main);
   color: var(--palette-grey-main);
 }
 
+.colorValidation {
+  background-color: var(--palette-error-light);
+  border-color: var(--palette-error-darkest);
+  color: var(--palette-common-white);
+}
+
 .fullWidth {
   display: flex;
   width: 100%;
@@ -25,5 +31,4 @@
 
 .icon {
   margin-right: calc(0.8 * var(--spacing-unit));
-  color: var(--palette-grey-main);
 }
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
index 19bb8ece5..9eb678f4f 100644
--- a/src/core/client/ui/components/Message/Message.tsx
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -27,15 +27,28 @@ export interface MessageProps {
   * Name of the icon, render if provided
   */
   icon?: string;
+  /*
+  * Name of color, "info" stays by default - common gray one
+  */
+  color?: "validation" | "info";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
-  const { className, classes, fullWidth, children, icon, ...rest } = props;
+  const {
+    className,
+    classes,
+    fullWidth,
+    children,
+    icon,
+    color,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
-    classes.color,
     {
+      [classes.colorInfo]: color === "info",
+      [classes.colorValidation]: color === "validation",
       [classes.fullWidth]: fullWidth,
     },
     className
@@ -54,6 +67,7 @@ const Message: StatelessComponent<MessageProps> = props => {
 };
 
 Message.defaultProps = {
+  color: "info",
   fullWidth: false,
 };
 
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
deleted file mode 100644
index b3d6a6290..000000000
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.root {
-  composes: alertMessage from "talk-ui/shared/typography.css";
-  position: relative;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
-  box-sizing: border-box;
-  border-radius: var(--round-corners);
-  border-left-width: calc(0.5 * var(--spacing-unit));
-  border-left-style: solid;
-}
-
-.colorError {
-  background-color: var(--palette-error-light);
-  border-color: var(--palette-error-darkest);
-  color: var(--palette-common-white);
-}
-
-.fullWidth {
-  display: flex;
-  width: 100%;
-}
-
-.icon {
-  margin-right: var(--spacing-unit);
-}
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index c8e7b11ad..28bbec5a6 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground } from 'docz'
-import ValidationMessage from './ValidationMessage.tsx'
+import ValidationMessage from './ValidationMessage'
 import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 0cc781560..c7abbb8cc 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,10 +1,5 @@
-import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
-import * as styles from "./ValidationMessage.css";
+import Message from "../Message";
 
 export interface ValidationMessageProps {
   /**
@@ -16,34 +11,18 @@ export interface ValidationMessageProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * If set renders a full width message
    */
-  classes: typeof styles;
-  /*
-  * If set renders a full width message
-  */
   fullWidth?: boolean;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, classes, fullWidth, children, ...rest } = props;
-
-  const rootClassName = cn(
-    classes.root,
-    classes.colorError,
-    {
-      [classes.fullWidth]: fullWidth,
-    },
-    className
-  );
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <div className={rootClassName} {...rest}>
-      <Icon size="sm" className={classes.icon}>
-        warning
-      </Icon>
+    <Message color="validation" icon="warning" className={className} {...rest}>
       {children}
-    </div>
+    </Message>
   );
 };
 
@@ -51,5 +30,4 @@ ValidationMessage.defaultProps = {
   fullWidth: false,
 };
 
-const enhanced = withStyles(styles)(ValidationMessage);
-export default enhanced;
+export default ValidationMessage;

From b37ec2b944e16aa4b58634866d4f579a070d550e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 7 Sep 2018 12:54:22 -0300
Subject: [PATCH 03/53] Supporting icons with ValidationMessages

---
 .../ValidationMessage/ValidationMessage.tsx         | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index c7abbb8cc..34782a29d 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -14,13 +14,22 @@ export interface ValidationMessageProps {
    * If set renders a full width message
    */
   fullWidth?: boolean;
+  /*
+  * Name of the icon, if not provided it will default to warning icon
+  */
+  icon?: string;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, fullWidth, children, ...rest } = props;
+  const { className, fullWidth, children, icon, ...rest } = props;
 
   return (
-    <Message color="validation" icon="warning" className={className} {...rest}>
+    <Message
+      color="validation"
+      icon={icon ? icon : "warning"}
+      className={className}
+      {...rest}
+    >
       {children}
     </Message>
   );

From dce2177dcd99d4eebb58d18b58fdfa6da519a7a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 7 Sep 2018 13:03:56 -0300
Subject: [PATCH 04/53] Updated snapshots

---
 .../test/__snapshots__/signIn.spec.tsx.snap   |  24 +--
 .../test/__snapshots__/signUp.spec.tsx.snap   | 164 +++++++++---------
 .../__snapshots__/Message.spec.tsx.snap       |   9 +
 3 files changed, 103 insertions(+), 94 deletions(-)
 create mode 100644 src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap

diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index cb01d2c1b..770f604f0 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -180,11 +180,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -290,11 +290,11 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -321,11 +321,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -546,11 +546,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -577,11 +577,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 6293da7d8..b382a8713 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -70,11 +70,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -124,11 +124,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -215,11 +215,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -251,11 +251,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -287,11 +287,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -318,11 +318,11 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -432,11 +432,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -468,11 +468,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -499,11 +499,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -590,11 +590,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -649,11 +649,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -680,11 +680,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -771,11 +771,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -807,11 +807,11 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -843,11 +843,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -874,11 +874,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -965,11 +965,11 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1001,11 +1001,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1037,11 +1037,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1068,11 +1068,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1159,11 +1159,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1195,11 +1195,11 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1231,11 +1231,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1262,11 +1262,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1353,11 +1353,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1389,11 +1389,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1425,11 +1425,11 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1456,11 +1456,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1547,11 +1547,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1583,11 +1583,11 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1619,11 +1619,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1650,11 +1650,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1741,11 +1741,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1777,11 +1777,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1813,11 +1813,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -1844,11 +1844,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -2077,11 +2077,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -2113,11 +2113,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -2149,11 +2149,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
@@ -2180,11 +2180,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorValidation"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root Message-icon Icon-md"
           >
             warning
           </span>
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
new file mode 100644
index 000000000..0b0f3046d
--- /dev/null
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Message-root Message-colorInfo custom"
+>
+  Hello World
+</div>
+`;

From 71c5c7c64fb242269f601e5817e7b0da90565d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 11:13:13 -0300
Subject: [PATCH 05/53] Basic Tab usage

---
 src/core/client/ui/components/Tabs/Tab.css    | 42 ++++++++++++
 src/core/client/ui/components/Tabs/Tab.tsx    | 43 ++++++++++++
 src/core/client/ui/components/Tabs/TabBar.css | 13 ++++
 src/core/client/ui/components/Tabs/TabBar.mdx | 52 +++++++++++++++
 src/core/client/ui/components/Tabs/TabBar.tsx | 66 +++++++++++++++++++
 .../client/ui/components/Tabs/TabContent.tsx  |  0
 .../client/ui/components/Tabs/TabPane.tsx     |  0
 src/core/client/ui/components/Tabs/index.ts   |  1 +
 8 files changed, 217 insertions(+)
 create mode 100644 src/core/client/ui/components/Tabs/Tab.css
 create mode 100644 src/core/client/ui/components/Tabs/Tab.tsx
 create mode 100644 src/core/client/ui/components/Tabs/TabBar.css
 create mode 100644 src/core/client/ui/components/Tabs/TabBar.mdx
 create mode 100644 src/core/client/ui/components/Tabs/TabBar.tsx
 create mode 100644 src/core/client/ui/components/Tabs/TabContent.tsx
 create mode 100644 src/core/client/ui/components/Tabs/TabPane.tsx
 create mode 100644 src/core/client/ui/components/Tabs/index.ts

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
new file mode 100644
index 000000000..1a25fcc1c
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -0,0 +1,42 @@
+.root {
+  box-sizing: border-box;
+  list-style: none;
+  padding: var(--spacing-unit);
+  display: inline-flex;
+  margin-bottom: -1px;
+}
+
+.root.primary {
+  background: #f2f2f2;
+  color: #787d80;
+  border: 1px solid #979797;
+  border-left-width: 0;
+  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+
+  &:first-child {
+    border-left-width: 1px;
+    border-top-left-radius: var(--round-corners);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--round-corners);
+  }
+
+  &.active {
+    background-color: var(--palette-common-white);
+    color: var(--palette-common-black);
+    border-bottom-color: white;
+    border-top-width: 5px;
+    border-top-color: #3498db;
+  }
+}
+
+.secondary {
+  border-bottom: 1px solid #e0e0e0;
+  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+
+  &.active {
+    font-weight: bold;
+    border-bottom: 3px solid #0277bd;
+  }
+}
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
new file mode 100644
index 000000000..32509b75f
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Tab.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  tabId: number;
+  active: boolean;
+  color: string;
+  onTabClick?: () => void;
+}
+
+const TabBar: StatelessComponent<TabBarProps> = props => {
+  const { className, classes, children, tabId, active, color } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.primary]: color === "primary",
+      [classes.secondary]: color === "secondary",
+      [classes.active]: active,
+    },
+    className
+  );
+
+  return (
+    <li className={rootClassName} key={tabId}>
+      {children}
+    </li>
+  );
+};
+
+const enhanced = withStyles(styles)(TabBar);
+export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
new file mode 100644
index 000000000..8d076ee0a
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -0,0 +1,13 @@
+.root {
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.primary {
+  border-bottom: 1px solid #787d80;
+}
+
+.secondary {
+  border-bottom: 1px solid #e0e0e0;
+}
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
new file mode 100644
index 000000000..5b7e47727
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabBar.mdx
@@ -0,0 +1,52 @@
+---
+name: TabBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+
+# TabBar
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="second">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="three">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>
+
+## Secondary Color
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one" color="secondary">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
new file mode 100644
index 000000000..6aef2e6a8
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -0,0 +1,66 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./TabBar.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  color: "primary" | "secondary";
+  activeId?: string;
+  defaultActiveId?: string;
+  onChange?: (activeId: string) => void;
+  onTabClick?: () => void;
+}
+
+const TabBar: StatelessComponent<TabBarProps> = props => {
+  const {
+    className,
+    classes,
+    children,
+    onTabClick,
+    activeId,
+    color,
+    defaultActiveId,
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    [
+      {
+        [classes.primary]: color === "primary",
+        [classes.secondary]: color === "secondary",
+      },
+    ],
+    className
+  );
+
+  const tabs = React.Children.toArray(children).map(
+    (child: React.ReactElement<any>, index: number) =>
+      React.cloneElement(child, {
+        tabId: index,
+        active:
+          defaultActiveId && !activeId
+            ? child.props.tabId === defaultActiveId
+            : child.props.tabId === activeId,
+        color,
+        onTabClick,
+      })
+  );
+
+  return <ul className={rootClassName}>{tabs}</ul>;
+};
+
+TabBar.defaultProps = {
+  color: "primary",
+};
+
+const enhanced = withStyles(styles)(TabBar);
+export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Tabs/index.ts b/src/core/client/ui/components/Tabs/index.ts
new file mode 100644
index 000000000..58ecee89f
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/index.ts
@@ -0,0 +1 @@
+export { default } from "./TabBar";

From 96515eac0cd16e8caf4592cff8c75f7d86d94583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 11:24:17 -0300
Subject: [PATCH 06/53] Added Color palette

---
 src/core/client/ui/components/Tabs/Tab.css    | 19 ++++++++++++-------
 src/core/client/ui/components/Tabs/TabBar.css |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 1a25fcc1c..9650b8a95 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -4,12 +4,18 @@
   padding: var(--spacing-unit);
   display: inline-flex;
   margin-bottom: -1px;
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family-serif);
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .root.primary {
   background: #f2f2f2;
-  color: #787d80;
-  border: 1px solid #979797;
+  color: var(--palette-grey-main);
+  border: 1px solid var(--palette-grey-main);
   border-left-width: 0;
   padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
 
@@ -25,18 +31,17 @@
   &.active {
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
-    border-bottom-color: white;
+    border-bottom-color: var(--palette-common-white);
     border-top-width: 5px;
-    border-top-color: #3498db;
+    border-top-color: var(--palette-primary-main);
   }
 }
 
 .secondary {
-  border-bottom: 1px solid #e0e0e0;
   padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
 
   &.active {
-    font-weight: bold;
-    border-bottom: 3px solid #0277bd;
+    font-weight: var(--font-weight-medium);
+    border-bottom: 3px solid var(--palette-primary-main);
   }
 }
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
index 8d076ee0a..cb75fbb27 100644
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -5,7 +5,7 @@
 }
 
 .primary {
-  border-bottom: 1px solid #787d80;
+  border-bottom: 1px solid var(--palette-grey-main);
 }
 
 .secondary {

From cb3a6b053383e3f8e6a376160a27020f564e5dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 11:35:56 -0300
Subject: [PATCH 07/53] Adding TabContent, TabPane

---
 src/core/client/ui/components/Tabs/Tab.mdx    | 52 +++++++++++++++++++
 src/core/client/ui/components/Tabs/Tab.tsx    | 22 ++++++--
 src/core/client/ui/components/Tabs/TabBar.tsx |  6 ++-
 .../client/ui/components/Tabs/TabContent.tsx  |  8 +++
 .../client/ui/components/Tabs/TabPane.css     |  0
 .../client/ui/components/Tabs/TabPane.tsx     | 40 ++++++++++++++
 6 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/ui/components/Tabs/Tab.mdx
 create mode 100644 src/core/client/ui/components/Tabs/TabPane.css

diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
new file mode 100644
index 000000000..add6f01cf
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.mdx
@@ -0,0 +1,52 @@
+---
+name: Tab
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+
+# Tab
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="second">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="three">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>
+
+## Secondary Color
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one" color="secondary">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 32509b75f..f1f8e245a 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -13,14 +13,22 @@ export interface TabBarProps {
    */
   classes: typeof styles;
 
-  tabId: number;
+  tabId: string;
   active: boolean;
   color: string;
   onTabClick?: () => void;
 }
 
 const TabBar: StatelessComponent<TabBarProps> = props => {
-  const { className, classes, children, tabId, active, color } = props;
+  const {
+    className,
+    classes,
+    children,
+    tabId,
+    active,
+    color,
+    onTabClick,
+  } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -33,7 +41,15 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
   );
 
   return (
-    <li className={rootClassName} key={tabId}>
+    <li
+      className={rootClassName}
+      key={tabId}
+      id={`${tabId}-tab`}
+      role="tab"
+      onClick={onTabClick}
+      aria-controls={tabId}
+      aria-selected={active}
+    >
       {children}
     </li>
   );
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index 6aef2e6a8..8bb3d18f1 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -55,7 +55,11 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
       })
   );
 
-  return <ul className={rootClassName}>{tabs}</ul>;
+  return (
+    <ul className={rootClassName} role="tablist">
+      {tabs}
+    </ul>
+  );
 };
 
 TabBar.defaultProps = {
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index e69de29bb..50653284d 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -0,0 +1,8 @@
+import React, { StatelessComponent } from "react";
+
+const TabContent: StatelessComponent<{}> = props => {
+  const { children } = props;
+  return <>{children}</>;
+};
+
+export default TabContent;
diff --git a/src/core/client/ui/components/Tabs/TabPane.css b/src/core/client/ui/components/Tabs/TabPane.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
index e69de29bb..e24560f33 100644
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ b/src/core/client/ui/components/Tabs/TabPane.tsx
@@ -0,0 +1,40 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./TabPane.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  tabId: string;
+  hidden: boolean;
+}
+
+const TabContent: StatelessComponent<TabBarProps> = props => {
+  const { className, classes, children, tabId, hidden } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <section
+      className={rootClassName}
+      key={tabId}
+      id={tabId}
+      role="tabpanel"
+      aria-labelledby="foo-tab"
+      hidden={hidden}
+    >
+      {children}
+    </section>
+  );
+};
+
+const enhanced = withStyles(styles)(TabContent);
+export default enhanced;

From e9ab3d1d7f93187b6b7a0a52ef93cb9f8988df79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 12:27:00 -0300
Subject: [PATCH 08/53] Working tab example

---
 src/core/client/ui/components/Tabs/Tab.mdx    | 52 --------------
 src/core/client/ui/components/Tabs/Tab.tsx    | 68 +++++++++----------
 src/core/client/ui/components/Tabs/TabBar.mdx |  1 -
 src/core/client/ui/components/Tabs/TabBar.tsx |  7 +-
 .../client/ui/components/Tabs/TabContent.tsx  | 22 +++++-
 src/core/client/ui/components/Tabs/index.ts   |  5 +-
 src/core/client/ui/components/index.ts        |  1 +
 src/docs/tabs.mdx                             | 25 +++++++
 8 files changed, 88 insertions(+), 93 deletions(-)
 delete mode 100644 src/core/client/ui/components/Tabs/Tab.mdx
 create mode 100644 src/docs/tabs.mdx

diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
deleted file mode 100644
index add6f01cf..000000000
--- a/src/core/client/ui/components/Tabs/Tab.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-name: Tab
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-
-# Tab
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveId="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveId="one" activeId="second">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveId="one" activeId="three">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
-
-## Secondary Color
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveId="one" color="secondary">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index f1f8e245a..70f2a5f5d 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -16,44 +16,44 @@ export interface TabBarProps {
   tabId: string;
   active: boolean;
   color: string;
-  onTabClick?: () => void;
+  onTabClick?: (tabId: string) => void;
 }
 
-const TabBar: StatelessComponent<TabBarProps> = props => {
-  const {
-    className,
-    classes,
-    children,
-    tabId,
-    active,
-    color,
-    onTabClick,
-  } = props;
+class TabBar extends React.Component<TabBarProps> {
+  public handleTabClick = () => {
+    if (this.props.onTabClick) {
+      this.props.onTabClick(this.props.tabId);
+    }
+  };
 
-  const rootClassName = cn(
-    classes.root,
-    {
-      [classes.primary]: color === "primary",
-      [classes.secondary]: color === "secondary",
-      [classes.active]: active,
-    },
-    className
-  );
+  public render() {
+    const { className, classes, children, tabId, active, color } = this.props;
 
-  return (
-    <li
-      className={rootClassName}
-      key={tabId}
-      id={`${tabId}-tab`}
-      role="tab"
-      onClick={onTabClick}
-      aria-controls={tabId}
-      aria-selected={active}
-    >
-      {children}
-    </li>
-  );
-};
+    const rootClassName = cn(
+      classes.root,
+      {
+        [classes.primary]: color === "primary",
+        [classes.secondary]: color === "secondary",
+        [classes.active]: active,
+      },
+      className
+    );
+
+    return (
+      <li
+        className={rootClassName}
+        key={tabId}
+        id={`${tabId}-tab`}
+        role="tab"
+        onClick={this.handleTabClick}
+        aria-controls={tabId}
+        aria-selected={active}
+      >
+        {children}
+      </li>
+    );
+  }
+}
 
 const enhanced = withStyles(styles)(TabBar);
 export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
index 5b7e47727..847efe843 100644
--- a/src/core/client/ui/components/Tabs/TabBar.mdx
+++ b/src/core/client/ui/components/Tabs/TabBar.mdx
@@ -10,7 +10,6 @@ import HorizontalGutter from '../HorizontalGutter'
 import TabBar from './TabBar'
 import Tab from './Tab'
 
-
 # TabBar
 
 ## Basic Use
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index 8bb3d18f1..e3f947d47 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -14,10 +14,12 @@ export interface TabBarProps {
   classes: typeof styles;
 
   color: "primary" | "secondary";
+
   activeId?: string;
   defaultActiveId?: string;
+
   onChange?: (activeId: string) => void;
-  onTabClick?: () => void;
+  onTabClick?: (tabId: string) => void;
 }
 
 const TabBar: StatelessComponent<TabBarProps> = props => {
@@ -44,8 +46,9 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
 
   const tabs = React.Children.toArray(children).map(
     (child: React.ReactElement<any>, index: number) =>
+      console.log(child) ||
       React.cloneElement(child, {
-        tabId: index,
+        index,
         active:
           defaultActiveId && !activeId
             ? child.props.tabId === defaultActiveId
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index 50653284d..27f37930c 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -1,8 +1,24 @@
 import React, { StatelessComponent } from "react";
 
-const TabContent: StatelessComponent<{}> = props => {
-  const { children } = props;
-  return <>{children}</>;
+export interface TabContentProps {
+  activeTab?: string;
+}
+
+const TabContent: StatelessComponent<TabContentProps> = props => {
+  const { children, activeTab } = props;
+  return (
+    <>
+      {React.Children.toArray(children)
+        .filter(
+          (child: React.ReactElement<any>) => child.props.tabId === activeTab
+        )
+        .map((child: React.ReactElement<any>, i) =>
+          React.cloneElement(child, {
+            tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+          })
+        )}
+    </>
+  );
 };
 
 export default TabContent;
diff --git a/src/core/client/ui/components/Tabs/index.ts b/src/core/client/ui/components/Tabs/index.ts
index 58ecee89f..f8818e9ea 100644
--- a/src/core/client/ui/components/Tabs/index.ts
+++ b/src/core/client/ui/components/Tabs/index.ts
@@ -1 +1,4 @@
-export { default } from "./TabBar";
+export { default as TabBar } from "./TabBar";
+export { default as Tab } from "./Tab";
+export { default as TabPane } from "./TabPane";
+export { default as TabContent } from "./TabContent";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index f701660dd..28a3f5c36 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -20,3 +20,4 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
+export { Tab, TabBar, TabContent, TabPane } from "./Tabs";
diff --git a/src/docs/tabs.mdx b/src/docs/tabs.mdx
new file mode 100644
index 000000000..63efef0e9
--- /dev/null
+++ b/src/docs/tabs.mdx
@@ -0,0 +1,25 @@
+---
+name: Tabs
+route: '/Tabs'
+---
+
+# Tabs
+
+### Examples
+
+import { Playground, PropsTable } from 'docz'
+import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components'
+import Container from "react-with-state-props"
+
+## Simple Form
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <TabBar activeId={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+        <Tab tabId="one">One</Tab>
+        <Tab tabId="two">Two</Tab>
+        <Tab tabId="three">Three</Tab>
+      </TabBar>
+    )}/>
+</Playground>

From 3b01af66b346f68b7aa40816665daef208f2a877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 12:36:13 -0300
Subject: [PATCH 09/53] Two working examples, primary and secondary

---
 src/core/client/ui/components/Tabs/TabBar.tsx |  9 +++---
 .../client/ui/components/Tabs/TabContent.tsx  |  2 +-
 .../client/ui/components/Tabs/TabPane.tsx     | 23 ++++----------
 src/docs/tabs.mdx                             | 31 +++++++++++++++++--
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index e3f947d47..faef9f09e 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -15,7 +15,7 @@ export interface TabBarProps {
 
   color: "primary" | "secondary";
 
-  activeId?: string;
+  activeTab?: string;
   defaultActiveId?: string;
 
   onChange?: (activeId: string) => void;
@@ -28,7 +28,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     classes,
     children,
     onTabClick,
-    activeId,
+    activeTab,
     color,
     defaultActiveId,
   } = props;
@@ -46,13 +46,12 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
 
   const tabs = React.Children.toArray(children).map(
     (child: React.ReactElement<any>, index: number) =>
-      console.log(child) ||
       React.cloneElement(child, {
         index,
         active:
-          defaultActiveId && !activeId
+          defaultActiveId && !activeTab
             ? child.props.tabId === defaultActiveId
-            : child.props.tabId === activeId,
+            : child.props.tabId === activeTab,
         color,
         onTabClick,
       })
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index 27f37930c..4ce407db7 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -14,7 +14,7 @@ const TabContent: StatelessComponent<TabContentProps> = props => {
         )
         .map((child: React.ReactElement<any>, i) =>
           React.cloneElement(child, {
-            tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+            tabId: child.props.tabId ? child.props.tabId : i,
           })
         )}
     </>
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
index e24560f33..485eb5e53 100644
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ b/src/core/client/ui/components/Tabs/TabPane.tsx
@@ -1,7 +1,4 @@
-import cn from "classnames";
 import React, { StatelessComponent } from "react";
-import { withStyles } from "talk-ui/hocs";
-import * as styles from "./TabPane.css";
 
 export interface TabBarProps {
   /**
@@ -9,32 +6,24 @@ export interface TabBarProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * Name of the tab
    */
-  classes: typeof styles;
-
   tabId: string;
-  hidden: boolean;
 }
 
-const TabContent: StatelessComponent<TabBarProps> = props => {
-  const { className, classes, children, tabId, hidden } = props;
-
-  const rootClassName = cn(classes.root, className);
-
+const TabPane: StatelessComponent<TabBarProps> = props => {
+  const { className, children, tabId } = props;
   return (
     <section
-      className={rootClassName}
+      className={className}
       key={tabId}
       id={tabId}
       role="tabpanel"
-      aria-labelledby="foo-tab"
-      hidden={hidden}
+      aria-labelledby={`${tabId}-tab`}
     >
       {children}
     </section>
   );
 };
 
-const enhanced = withStyles(styles)(TabContent);
-export default enhanced;
+export default TabPane;
diff --git a/src/docs/tabs.mdx b/src/docs/tabs.mdx
index 63efef0e9..1fc0f50bc 100644
--- a/src/docs/tabs.mdx
+++ b/src/docs/tabs.mdx
@@ -11,15 +11,42 @@ import { Playground, PropsTable } from 'docz'
 import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components'
 import Container from "react-with-state-props"
 
-## Simple Form
+## Primary Tabs
 <Playground>
   <Container
     state={{ activeId: "two" }}
     render={props => (
-      <TabBar activeId={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+      <div>
+      <TabBar activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
         <Tab tabId="one">One</Tab>
         <Tab tabId="two">Two</Tab>
         <Tab tabId="three">Three</Tab>
       </TabBar>
+      <TabContent activeTab={props.activeId}>
+        <TabPane tabId="one">Hola One</TabPane>
+        <TabPane tabId="two">Hola Two</TabPane>
+        <TabPane tabId="three">Hola Three</TabPane>
+      </TabContent>
+      </div>
+    )}/>
+</Playground>
+
+## Secondary Tabs
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <div>
+      <TabBar color="secondary" activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+        <Tab tabId="one">One</Tab>
+        <Tab tabId="two">Two</Tab>
+        <Tab tabId="three">Three</Tab>
+      </TabBar>
+      <TabContent activeTab={props.activeId}>
+        <TabPane tabId="one">Hola One</TabPane>
+        <TabPane tabId="two">Hola Two</TabPane>
+        <TabPane tabId="three">Hola Three</TabPane>
+      </TabContent>
+      </div>
     )}/>
 </Playground>

From a8b24187cb2bb2c45ed2e02846f7f5573384b60b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 12:55:31 -0300
Subject: [PATCH 10/53] change

---
 src/core/client/ui/components/Tabs/Tab.mdx    | 25 +++++++++++++++++++
 src/core/client/ui/components/Tabs/TabBar.mdx |  8 +++---
 src/core/client/ui/components/Tabs/TabBar.tsx |  8 +++---
 .../client/ui/components/Tabs/TabContent.mdx  | 23 +++++++++++++++++
 .../client/ui/components/Tabs/TabPane.mdx     | 23 +++++++++++++++++
 5 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/core/client/ui/components/Tabs/Tab.mdx
 create mode 100644 src/core/client/ui/components/Tabs/TabContent.mdx
 create mode 100644 src/core/client/ui/components/Tabs/TabPane.mdx

diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
new file mode 100644
index 000000000..365259456
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.mdx
@@ -0,0 +1,25 @@
+---
+name: TabBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+# Tab
+`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
+
+## Basic Usage
+<Playground>
+  <HorizontalGutter>
+    <TabBar defaultActiveTab="one">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
index 847efe843..14fc68a3b 100644
--- a/src/core/client/ui/components/Tabs/TabBar.mdx
+++ b/src/core/client/ui/components/Tabs/TabBar.mdx
@@ -16,19 +16,19 @@ import Tab from './Tab'
 <Playground>
   <HorizontalGutter>
 
-    <TabBar defaultActiveId="one">
+    <TabBar defaultActiveTab="one">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
     </TabBar>
 
-    <TabBar defaultActiveId="one" activeId="second">
+    <TabBar defaultActiveTab="one" activeTab="second">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
     </TabBar>
 
-    <TabBar defaultActiveId="one" activeId="three">
+    <TabBar defaultActiveTab="one" activeTab="three">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
@@ -41,7 +41,7 @@ import Tab from './Tab'
 <Playground>
   <HorizontalGutter>
 
-    <TabBar defaultActiveId="one" color="secondary">
+    <TabBar defaultActiveTab="one" color="secondary">
       <Tab tabId="one">Tab one</Tab>
       <Tab tabId="second">Active Tab</Tab>
       <Tab tabId="three">Tab Three</Tab>
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index faef9f09e..ab9c6212d 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -16,7 +16,7 @@ export interface TabBarProps {
   color: "primary" | "secondary";
 
   activeTab?: string;
-  defaultActiveId?: string;
+  defaultActiveTab?: string;
 
   onChange?: (activeId: string) => void;
   onTabClick?: (tabId: string) => void;
@@ -30,7 +30,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     onTabClick,
     activeTab,
     color,
-    defaultActiveId,
+    defaultActiveTab,
   } = props;
 
   const rootClassName = cn(
@@ -49,8 +49,8 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
       React.cloneElement(child, {
         index,
         active:
-          defaultActiveId && !activeTab
-            ? child.props.tabId === defaultActiveId
+          defaultActiveTab && !activeTab
+            ? child.props.tabId === defaultActiveTab
             : child.props.tabId === activeTab,
         color,
         onTabClick,
diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx
new file mode 100644
index 000000000..1646887a5
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabContent.mdx
@@ -0,0 +1,23 @@
+---
+name: TabContent
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+import TabPane from './TabPane'
+import TabContent from './TabContent'
+
+# TabContent
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx
new file mode 100644
index 000000000..36cb915f0
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabPane.mdx
@@ -0,0 +1,23 @@
+---
+name: TabPane
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+import TabPane from './TabPane'
+import TabContent from './TabContent'
+
+# TabPane
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  </HorizontalGutter>
+</Playground>

From b608e8a52131bad1bc3a8fe1aedb7c907798d600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 13:22:57 -0300
Subject: [PATCH 11/53] Adding descriptions

---
 src/core/client/ui/components/Tabs/Tab.mdx       |  2 +-
 src/core/client/ui/components/Tabs/Tab.tsx       | 15 +++++++++++++--
 src/core/client/ui/components/Tabs/TabBar.tsx    | 16 ++++++++++++----
 .../client/ui/components/Tabs/TabContent.tsx     |  3 +++
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
index 365259456..f81399cfc 100644
--- a/src/core/client/ui/components/Tabs/Tab.mdx
+++ b/src/core/client/ui/components/Tabs/Tab.mdx
@@ -1,5 +1,5 @@
 ---
-name: TabBar
+name: Tab
 menu: UI Kit
 ---
 
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 70f2a5f5d..87b4ba236 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -12,10 +12,21 @@ export interface TabBarProps {
    * Override or extend the styles applied to the component.
    */
   classes: typeof styles;
-
+  /**
+   * The id/name of the tab
+   */
   tabId: string;
+  /**
+   * Active status
+   */
   active: boolean;
-  color: string;
+  /**
+   * Color style variant
+   */
+  color: "primary" | "secondary";
+  /**
+   * Action taken on tab click
+   */
   onTabClick?: (tabId: string) => void;
 }
 
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index ab9c6212d..46427f3cd 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -12,13 +12,21 @@ export interface TabBarProps {
    * Override or extend the styles applied to the component.
    */
   classes: typeof styles;
-
+  /**
+   * Color style variant
+   */
   color: "primary" | "secondary";
-
+  /**
+   * Active tab id/name
+   */
   activeTab?: string;
+  /**
+   * Default active tab id/name
+   */
   defaultActiveTab?: string;
-
-  onChange?: (activeId: string) => void;
+  /**
+   * Action taken on tab click
+   */
   onTabClick?: (tabId: string) => void;
 }
 
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index 4ce407db7..da68f05a9 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -1,6 +1,9 @@
 import React, { StatelessComponent } from "react";
 
 export interface TabContentProps {
+  /**
+   * Active tab id/name
+   */
   activeTab?: string;
 }
 

From a36d944e4ad52b797fce415848ff5426780db084 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 00:15:27 +0200
Subject: [PATCH 12/53] Implement edit

---
 .../framework/lib/bootstrap/createContext.tsx |  11 +-
 .../stream/components/Comment/Comment.css     |   3 -
 .../stream/components/Comment/Comment.tsx     |  23 ++-
 .../{TopBar.spec.tsx => TopBarLeft.spec.tsx}  |  10 +-
 .../Comment/{TopBar.tsx => TopBarLeft.tsx}    |   6 +-
 .../client/stream/components/Comment/index.ts |   3 +
 .../stream/components/EditCommentForm.tsx     | 156 ++++++++++++++++++
 .../stream/containers/CommentContainer.tsx    |  76 ++++++++-
 .../containers/EditCommentFormContainer.tsx   | 139 ++++++++++++++++
 .../stream/mutations/CreateCommentMutation.ts |   3 +
 .../stream/mutations/EditCommentMutation.ts   |  56 +++++++
 src/core/client/stream/mutations/index.ts     |   5 +
 .../components/RelativeTime/RelativeTime.css  |   2 -
 src/core/common/utils/index.ts                |   1 +
 src/core/common/utils/isBeforeDate.spec.ts    |   0
 src/core/common/utils/isBeforeDate.ts         |   3 +
 src/locales/de/framework.ftl                  |   2 +-
 src/locales/en-US/framework.ftl               |  13 +-
 src/locales/en-US/stream.ftl                  |  13 +-
 src/locales/es/framework.ftl                  |   4 +-
 src/types/react-timeago.d.ts                  |   1 +
 21 files changed, 494 insertions(+), 36 deletions(-)
 rename src/core/client/stream/components/Comment/{TopBar.spec.tsx => TopBarLeft.spec.tsx} (81%)
 rename src/core/client/stream/components/Comment/{TopBar.tsx => TopBarLeft.tsx} (81%)
 create mode 100644 src/core/client/stream/components/EditCommentForm.tsx
 create mode 100644 src/core/client/stream/containers/EditCommentFormContainer.tsx
 create mode 100644 src/core/client/stream/mutations/EditCommentMutation.ts
 create mode 100644 src/core/common/utils/isBeforeDate.spec.ts
 create mode 100644 src/core/common/utils/isBeforeDate.ts

diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
index 839cee453..d11b3b83c 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -47,7 +47,16 @@ interface CreateContextArguments {
  */
 export const timeagoFormatter: Formatter = (value, unit, suffix) => {
   // We use 'in' instead of 'from now' for language consistency
-  const ourSuffix = suffix === "from now" ? "in" : suffix;
+  const ourSuffix = suffix === "from now" ? "noSuffix" : suffix;
+
+  if (unit === "second" && suffix === "ago") {
+    return (
+      <Localized id="framework-timeago-just-now">
+        <span>Just now</span>
+      </Localized>
+    );
+  }
+
   return (
     <Localized
       id="framework-timeago"
diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index b996f5d55..2b9c0d5bb 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -6,6 +6,3 @@
 .footer:not(:empty) {
   margin-top: var(--spacing-unit);
 }
-.reply {
-  margin-top: var(--spacing-unit);
-}
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index bd4fc17f7..37c6bb2ad 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -5,28 +5,37 @@ import { Flex } from "talk-ui/components";
 import * as styles from "./Comment.css";
 import HTMLContent from "./HTMLContent";
 import Timestamp from "./Timestamp";
-import TopBar from "./TopBar";
+import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
 
 export interface CommentProps {
-  id: string;
   className?: string;
   author: {
     username: string | null;
   } | null;
   body: string | null;
   createdAt: string;
+  topBarRight?: ReactElement<any> | Array<ReactElement<any>>;
   footer?: ReactElement<any> | Array<ReactElement<any>>;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
     <div role="article" className={styles.root}>
-      <TopBar className={styles.topBar}>
-        {props.author &&
-          props.author.username && <Username>{props.author.username}</Username>}
-        <Timestamp>{props.createdAt}</Timestamp>
-      </TopBar>
+      <Flex
+        className={styles.topBar}
+        direction="row"
+        justifyContent="space-between"
+      >
+        <TopBarLeft>
+          {props.author &&
+            props.author.username && (
+              <Username>{props.author.username}</Username>
+            )}
+          <Timestamp>{props.createdAt}</Timestamp>
+        </TopBarLeft>
+        <div>{props.topBarRight}</div>
+      </Flex>
       <HTMLContent>{props.body || ""}</HTMLContent>
       <Flex className={styles.footer} direction="row" itemGutter="half">
         {props.footer}
diff --git a/src/core/client/stream/components/Comment/TopBar.spec.tsx b/src/core/client/stream/components/Comment/TopBarLeft.spec.tsx
similarity index 81%
rename from src/core/client/stream/components/Comment/TopBar.spec.tsx
rename to src/core/client/stream/components/Comment/TopBarLeft.spec.tsx
index 5ee691f70..8769bb3dd 100644
--- a/src/core/client/stream/components/Comment/TopBar.spec.tsx
+++ b/src/core/client/stream/components/Comment/TopBarLeft.spec.tsx
@@ -4,10 +4,10 @@ import TestRenderer from "react-test-renderer";
 import { PropTypesOf } from "talk-framework/types";
 import { UIContext, UIContextProps } from "talk-ui/components";
 
-import TopBar from "./TopBar";
+import TopBarLeft from "./TopBarLeft";
 
 it("renders correctly on small screens", () => {
-  const props: PropTypesOf<typeof TopBar> = {
+  const props: PropTypesOf<typeof TopBarLeft> = {
     children: <div>Hello World</div>,
   };
 
@@ -19,14 +19,14 @@ it("renders correctly on small screens", () => {
 
   const testRenderer = TestRenderer.create(
     <UIContext.Provider value={context}>
-      <TopBar {...props} />
+      <TopBarLeft {...props} />
     </UIContext.Provider>
   );
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
 it("renders correctly on big screens", () => {
-  const props: PropTypesOf<typeof TopBar> = {
+  const props: PropTypesOf<typeof TopBarLeft> = {
     children: <div>Hello World</div>,
   };
 
@@ -38,7 +38,7 @@ it("renders correctly on big screens", () => {
 
   const testRenderer = TestRenderer.create(
     <UIContext.Provider value={context}>
-      <TopBar {...props} />
+      <TopBarLeft {...props} />
     </UIContext.Provider>
   );
   expect(testRenderer.toJSON()).toMatchSnapshot();
diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBarLeft.tsx
similarity index 81%
rename from src/core/client/stream/components/Comment/TopBar.tsx
rename to src/core/client/stream/components/Comment/TopBarLeft.tsx
index eed8aea32..5f3862020 100644
--- a/src/core/client/stream/components/Comment/TopBar.tsx
+++ b/src/core/client/stream/components/Comment/TopBarLeft.tsx
@@ -4,12 +4,12 @@ import { StatelessComponent } from "react";
 
 import { Flex, MatchMedia } from "talk-ui/components";
 
-export interface TopBarProps {
+export interface TopBarLeftProps {
   className?: string;
   children: React.ReactNode;
 }
 
-const TopBar: StatelessComponent<TopBarProps> = props => {
+const TopBarLeft: StatelessComponent<TopBarLeftProps> = props => {
   const rootClassName = cn(props.className);
   return (
     <MatchMedia gtWidth="xs">
@@ -27,4 +27,4 @@ const TopBar: StatelessComponent<TopBarProps> = props => {
   );
 };
 
-export default TopBar;
+export default TopBarLeft;
diff --git a/src/core/client/stream/components/Comment/index.ts b/src/core/client/stream/components/Comment/index.ts
index abb1d79ae..56c2da651 100644
--- a/src/core/client/stream/components/Comment/index.ts
+++ b/src/core/client/stream/components/Comment/index.ts
@@ -1 +1,4 @@
 export { default, default as IndentedComment } from "./IndentedComment";
+export { default as TopBarLeft } from "./TopBarLeft";
+export { default as Username } from "./Username";
+export { default as Timestamp } from "./Timestamp";
diff --git a/src/core/client/stream/components/EditCommentForm.tsx b/src/core/client/stream/components/EditCommentForm.tsx
new file mode 100644
index 000000000..84c753b1b
--- /dev/null
+++ b/src/core/client/stream/components/EditCommentForm.tsx
@@ -0,0 +1,156 @@
+import { CoralRTE } from "@coralproject/rte";
+import { Localized } from "fluent-react/compat";
+import React, {
+  EventHandler,
+  MouseEvent,
+  Ref,
+  StatelessComponent,
+} from "react";
+import { Field, Form } from "react-final-form";
+
+import { OnSubmit } from "talk-framework/lib/form";
+import { required } from "talk-framework/lib/validation";
+import {
+  AriaInfo,
+  Button,
+  Flex,
+  HorizontalGutter,
+  RelativeTime,
+  Typography,
+  ValidationMessage,
+} from "talk-ui/components";
+
+import { Timestamp, TopBarLeft, Username } from "./Comment";
+import RTE from "./RTE";
+
+interface FormProps {
+  body: string;
+}
+
+export interface EditCommentFormProps {
+  id: string;
+  className?: string;
+  author: {
+    username: string | null;
+  } | null;
+  createdAt: string;
+  editableUntil: string;
+  onSubmit: OnSubmit<FormProps>;
+  onCancel?: EventHandler<MouseEvent<any>>;
+  onClose?: EventHandler<MouseEvent<any>>;
+  initialValues?: FormProps;
+  rteRef?: Ref<CoralRTE>;
+  expired?: boolean;
+}
+
+const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
+  const inputID = `comments-editCommentForm-rte-${props.id}`;
+  return (
+    <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
+      {({ handleSubmit, submitting, hasValidationErrors, pristine }) => (
+        <form
+          className={props.className}
+          autoComplete="off"
+          onSubmit={handleSubmit}
+          id={`comments-editCommentForm-form-${props.id}`}
+        >
+          <HorizontalGutter>
+            <div>
+              <TopBarLeft>
+                {props.author &&
+                  props.author.username && (
+                    <Username>{props.author.username}</Username>
+                  )}
+                <Timestamp>{props.createdAt}</Timestamp>
+              </TopBarLeft>
+            </div>
+            <Field name="body" validate={required}>
+              {({ input, meta }) => (
+                <div>
+                  <Localized id="comments-editCommentForm-rteLabel">
+                    <AriaInfo component="label" htmlFor={inputID}>
+                      Edit comment
+                    </AriaInfo>
+                  </Localized>
+                  <Localized
+                    id="comments-editCommentForm-rte"
+                    attrs={{ placeholder: true }}
+                  >
+                    <RTE
+                      inputId={inputID}
+                      onChange={({ html }) => input.onChange(html)}
+                      value={input.value}
+                      placeholder="Edit comment"
+                      forwardRef={props.rteRef}
+                      disabled={submitting || props.expired}
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <Typography align="right" color="error" gutterBottom>
+                        {meta.error || meta.submitError}
+                      </Typography>
+                    )}
+                </div>
+              )}
+            </Field>
+            {props.expired ? (
+              <Localized id="comments-editCommentForm-editTimeExpired">
+                <ValidationMessage fullWidth>
+                  Edit time has expired. You can no longer edit this comment.
+                  Why not post another one?
+                </ValidationMessage>
+              </Localized>
+            ) : (
+              <ValidationMessage fullWidth>
+                <Localized
+                  id="comments-editCommentForm-editRemainingTime"
+                  time={<RelativeTime date={props.editableUntil} live />}
+                >
+                  <span>{"Edit: <time></time> remaining"}</span>
+                </Localized>
+              </ValidationMessage>
+            )}
+            <Flex direction="row" justifyContent="flex-end" itemGutter="half">
+              {props.expired ? (
+                <Localized id="comments-editCommentForm-close">
+                  <Button
+                    variant="outlined"
+                    disabled={submitting}
+                    onClick={props.onClose}
+                  >
+                    Close
+                  </Button>
+                </Localized>
+              ) : (
+                <>
+                  <Localized id="comments-editCommentForm-cancel">
+                    <Button
+                      variant="outlined"
+                      disabled={submitting}
+                      onClick={props.onCancel}
+                    >
+                      Cancel
+                    </Button>
+                  </Localized>
+                  <Localized id="comments-editCommentForm-saveChanges">
+                    <Button
+                      color="primary"
+                      variant="filled"
+                      disabled={submitting || hasValidationErrors || pristine}
+                      type="submit"
+                    >
+                      Save Changes
+                    </Button>
+                  </Localized>
+                </>
+              )}
+            </Flex>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default EditCommentForm;
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 21b4b767e..c3368b9d0 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -1,6 +1,8 @@
+import { Localized } from "fluent-react/compat";
 import React, { Component } from "react";
 import { graphql } from "react-relay";
 
+import { isBeforeDate } from "talk-common/utils";
 import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
 import { PropTypesOf } from "talk-framework/types";
 import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql";
@@ -11,10 +13,12 @@ import {
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
 
+import { Button } from "talk-ui/components";
 import Comment from "../components/Comment";
 import ReplyButton from "../components/Comment/ReplyButton";
-import ReplyCommentFormContainer from ".//ReplyCommentFormContainer";
+import EditCommentFormContainer from "./EditCommentFormContainer";
 import PermalinkButtonContainer from "./PermalinkButtonContainer";
+import ReplyCommentFormContainer from "./ReplyCommentFormContainer";
 
 interface InnerProps {
   me: MeData | null;
@@ -26,13 +30,28 @@ interface InnerProps {
 
 interface State {
   showReplyDialog: boolean;
+  showEditDialog: boolean;
+  editable: boolean;
 }
 
 export class CommentContainer extends Component<InnerProps, State> {
+  private uneditableTimer: any;
+
   public state = {
     showReplyDialog: false,
+    showEditDialog: false,
+    editable: isBeforeDate(this.props.comment.editing.editableUntil),
   };
 
+  constructor(props: InnerProps) {
+    super(props);
+    this.uneditableTimer = this.updateWhenNotEditable();
+  }
+
+  public componentWillUnmount() {
+    clearTimeout(this.uneditableTimer);
+  }
+
   private openReplyDialog = () => {
     if (this.props.me) {
       this.setState(state => ({
@@ -43,20 +62,68 @@ export class CommentContainer extends Component<InnerProps, State> {
     }
   };
 
+  private openEditDialog = () => {
+    if (this.props.me) {
+      this.setState(state => ({
+        showEditDialog: true,
+      }));
+    } else {
+      this.props.showAuthPopup({ view: "SIGN_IN" });
+    }
+  };
+
+  private closeEditDialog = () => {
+    this.setState(state => ({
+      showEditDialog: false,
+    }));
+  };
+
   private closeReplyDialog = () => {
     this.setState(state => ({
       showReplyDialog: false,
     }));
   };
 
+  private updateWhenNotEditable() {
+    const ms =
+      new Date(this.props.comment.editing.editableUntil).getTime() - Date.now();
+    if (ms > 0) {
+      return setTimeout(() => this.setState({ editable: false }), ms);
+    }
+    return;
+  }
+
   public render() {
     const { comment, asset, ...rest } = this.props;
-    const { showReplyDialog } = this.state;
+    const { showReplyDialog, showEditDialog, editable } = this.state;
+    if (showEditDialog) {
+      return (
+        <EditCommentFormContainer
+          asset={asset}
+          comment={comment}
+          onClose={this.closeEditDialog}
+        />
+      );
+    }
     return (
       <>
         <Comment
           {...rest}
           {...comment}
+          topBarRight={
+            (editable && (
+              <Localized id="comments-commentContainer-editButton">
+                <Button
+                  color="primary"
+                  variant="underlined"
+                  onClick={this.openEditDialog}
+                >
+                  Edit
+                </Button>
+              </Localized>
+            )) ||
+            undefined
+          }
           footer={
             <>
               <ReplyButton
@@ -90,6 +157,7 @@ const enhanced = withShowAuthPopupMutation(
     asset: graphql`
       fragment CommentContainer_asset on Asset {
         ...ReplyCommentFormContainer_asset
+        ...EditCommentFormContainer_asset
       }
     `,
     comment: graphql`
@@ -100,7 +168,11 @@ const enhanced = withShowAuthPopupMutation(
         }
         body
         createdAt
+        editing {
+          editableUntil
+        }
         ...ReplyCommentFormContainer_comment
+        ...EditCommentFormContainer_comment
       }
     `,
   })(CommentContainer)
diff --git a/src/core/client/stream/containers/EditCommentFormContainer.tsx b/src/core/client/stream/containers/EditCommentFormContainer.tsx
new file mode 100644
index 000000000..bdf8130b1
--- /dev/null
+++ b/src/core/client/stream/containers/EditCommentFormContainer.tsx
@@ -0,0 +1,139 @@
+import { CoralRTE } from "@coralproject/rte";
+import React, { Component } from "react";
+import { graphql } from "react-relay";
+
+import { isBeforeDate } from "talk-common/utils";
+import { withContext } from "talk-framework/lib/bootstrap";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+
+import { EditCommentFormContainer_asset as AssetData } from "talk-stream/__generated__/EditCommentFormContainer_asset.graphql";
+import { EditCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/EditCommentFormContainer_comment.graphql";
+
+import EditCommentForm, {
+  EditCommentFormProps,
+} from "../components/EditCommentForm";
+import { EditCommentMutation, withEditCommentMutation } from "../mutations";
+
+interface InnerProps {
+  editComment: EditCommentMutation;
+  comment: CommentData;
+  onClose?: () => void;
+  asset: AssetData;
+  autofocus: boolean;
+}
+
+interface State {
+  initialValues?: EditCommentFormProps["initialValues"];
+  initialized: boolean;
+  expired: boolean;
+}
+
+export class EditCommentFormContainer extends Component<InnerProps, State> {
+  private expiredTimer: any;
+
+  public state: State = {
+    initialized: false,
+    expired: !isBeforeDate(this.props.comment.editing.editableUntil),
+  };
+
+  constructor(props: InnerProps) {
+    super(props);
+    this.expiredTimer = this.updateWhenExpired();
+  }
+
+  public componentWillUnmount() {
+    clearTimeout(this.expiredTimer);
+  }
+
+  private updateWhenExpired() {
+    const ms =
+      new Date(this.props.comment.editing.editableUntil).getTime() - Date.now();
+    if (ms > 0) {
+      return setTimeout(() => this.setState({ expired: true }), ms);
+    }
+    return;
+  }
+
+  private handleRTERef = (rte: CoralRTE | null) => {
+    if (rte && this.props.autofocus) {
+      rte.focus();
+    }
+  };
+
+  private handleOnCancelOrClose = () => {
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  };
+
+  private handleOnSubmit: EditCommentFormProps["onSubmit"] = async (
+    input,
+    form
+  ) => {
+    try {
+      await this.props.editComment({
+        assetID: this.props.asset.id,
+        commentID: this.props.comment.id,
+        body: input.body,
+      });
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+
+  public render() {
+    return (
+      <EditCommentForm
+        id={this.props.comment.id}
+        onSubmit={this.handleOnSubmit}
+        initialValues={{ body: this.props.comment.body || "" }}
+        onCancel={this.handleOnCancelOrClose}
+        onClose={this.handleOnCancelOrClose}
+        rteRef={this.handleRTERef}
+        author={this.props.comment.author}
+        createdAt={this.props.comment.createdAt}
+        editableUntil={this.props.comment.editing.editableUntil}
+        expired={this.state.expired}
+      />
+    );
+  }
+}
+const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
+  // Disable autofocus on ios and enable for the rest.
+  autofocus: !browserInfo.ios,
+}))(
+  withEditCommentMutation(
+    withFragmentContainer<InnerProps>({
+      asset: graphql`
+        fragment EditCommentFormContainer_asset on Asset {
+          id
+        }
+      `,
+      comment: graphql`
+        fragment EditCommentFormContainer_comment on Comment {
+          id
+          body
+          createdAt
+          author {
+            username
+          }
+          editing {
+            editableUntil
+          }
+        }
+      `,
+    })(EditCommentFormContainer)
+  )
+);
+export type PostCommentFormContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/mutations/CreateCommentMutation.ts b/src/core/client/stream/mutations/CreateCommentMutation.ts
index a293a58e7..958ad9acc 100644
--- a/src/core/client/stream/mutations/CreateCommentMutation.ts
+++ b/src/core/client/stream/mutations/CreateCommentMutation.ts
@@ -92,6 +92,9 @@ function commit(
               username: me.username,
             },
             body: input.body,
+            editing: {
+              editableUntil: new Date(Date.now() + 10000),
+            },
           },
         },
         clientMutationId: (clientMutationId++).toString(),
diff --git a/src/core/client/stream/mutations/EditCommentMutation.ts b/src/core/client/stream/mutations/EditCommentMutation.ts
new file mode 100644
index 000000000..a3d456ed2
--- /dev/null
+++ b/src/core/client/stream/mutations/EditCommentMutation.ts
@@ -0,0 +1,56 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
+import { Omit } from "talk-framework/types";
+
+import { EditCommentMutation as MutationTypes } from "talk-stream/__generated__/EditCommentMutation.graphql";
+
+export type EditCommentInput = Omit<
+  MutationTypes["variables"]["input"],
+  "clientMutationId"
+>;
+
+const mutation = graphql`
+  mutation EditCommentMutation($input: EditCommentInput!) {
+    editComment(input: $input) {
+      comment {
+        body
+      }
+      clientMutationId
+    }
+  }
+`;
+
+let clientMutationId = 0;
+
+function commit(environment: Environment, input: EditCommentInput) {
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
+    mutation,
+    variables: {
+      input: {
+        ...input,
+        clientMutationId: clientMutationId.toString(),
+      },
+    },
+    optimisticResponse: {
+      editComment: {
+        id: input.commentID,
+        body: input.body,
+        clientMutationId: (clientMutationId++).toString(),
+      },
+    } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
+  });
+}
+
+export const withEditCommentMutation = createMutationContainer(
+  "editComment",
+  commit
+);
+
+export type EditCommentMutation = (
+  input: EditCommentInput
+) => Promise<MutationTypes["response"]["editComment"]>;
diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index 324fddbdc..6c920dfea 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -3,6 +3,11 @@ export {
   CreateCommentMutation,
   CreateCommentInput,
 } from "./CreateCommentMutation";
+export {
+  withEditCommentMutation,
+  EditCommentMutation,
+  EditCommentInput,
+} from "./EditCommentMutation";
 export {
   withSetNetworkStatusMutation,
   SetNetworkStatusMutation,
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.css b/src/core/client/ui/components/RelativeTime/RelativeTime.css
index e0450679f..c3a2af639 100644
--- a/src/core/client/ui/components/RelativeTime/RelativeTime.css
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.css
@@ -1,4 +1,2 @@
 .root {
-  composes: bodyCopy from "talk-ui/shared/typography.css";
-  background-color: transparent;
 }
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
index 28435047e..4d6df9fc5 100644
--- a/src/core/common/utils/index.ts
+++ b/src/core/common/utils/index.ts
@@ -2,3 +2,4 @@ export { default as timeout } from "./timeout";
 export { default as animationFrame } from "./animationFrame";
 export { default as pascalCase } from "./pascalCase";
 export { default as oncePerFrame } from "./oncePerFrame";
+export { default as isBeforeDate } from "./isBeforeDate";
diff --git a/src/core/common/utils/isBeforeDate.spec.ts b/src/core/common/utils/isBeforeDate.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/common/utils/isBeforeDate.ts b/src/core/common/utils/isBeforeDate.ts
new file mode 100644
index 000000000..24d2a33e9
--- /dev/null
+++ b/src/core/common/utils/isBeforeDate.ts
@@ -0,0 +1,3 @@
+export default function isBeforeDate(date: string | number | Date) {
+  return new Date() < new Date(date);
+}
diff --git a/src/locales/de/framework.ftl b/src/locales/de/framework.ftl
index 55dca1c8c..7ea668be3 100644
--- a/src/locales/de/framework.ftl
+++ b/src/locales/de/framework.ftl
@@ -6,10 +6,10 @@
 
 framework-validation-required = Dies ist ein Pflichtpfeld.
 
+framework-timeago-just-now = Gerade eben
 framework-timeago =
   { $suffix ->
     [ago] vor
-    [in] in
   }
   { $value }
   { $unit ->
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index f03b2a50a..89eee969b 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -13,6 +13,8 @@ framework-validation-invalidEmail = Please enter a valid email address.
 framework-validation-passwordTooShort = Password must contain at least {$minLength} characters.
 framework-validation-passwordsDoNotMatch = Passwords do not match. Try again.
 
+framework-timeago-just-now = Just now
+
 framework-timeago-time =
   { $value }
   { $unit ->
@@ -48,12 +50,7 @@ framework-timeago-time =
   }
 
 framework-timeago =
-  { $value ->
-    [0] now
-    *[other]
-      { $suffix ->
-        [ago] {framework-timeago-time} ago
-        [in] in {framework-timeago-time}
-        *[other] unknown suffix
-      }
+  { $suffix ->
+    [ago] {framework-timeago-time} ago
+    [noSuffix] {framework-timeago-time}
   }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 29aac39c9..683ea792e 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -53,4 +53,15 @@ comments-replyCommentForm-submit = Submit
 comments-replyCommentForm-cancel = Cancel
 comments-replyCommentForm-rteLabel = Write a reply
 comments-replyCommentForm-rte =
-  .placeholder = { comments-postCommentForm-rteLabel }
+  .placeholder = { comments-replyCommentForm-rteLabel }
+
+comments-commentContainer-editButton = Edit
+
+comments-editCommentForm-saveChanges = Save Changes
+comments-editCommentForm-cancel = Cancel
+comments-editCommentForm-close = Close
+comments-editCommentForm-rteLabel = Edit comment
+comments-editCommentForm-rte =
+  .placeholder = { comments-editCommentForm-rteLabel }
+comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
+comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
diff --git a/src/locales/es/framework.ftl b/src/locales/es/framework.ftl
index a383c75bb..86b5e6cb4 100644
--- a/src/locales/es/framework.ftl
+++ b/src/locales/es/framework.ftl
@@ -2,14 +2,12 @@
 ### All keys must start with `framework` because this file is shared
 ### among different targets.
 
+framework-timeago-just-now = Hace poco
 framework-timeago =
   { $value ->
-    [0] ahora
     *[other]
       { $suffix ->
         [ago] hace
-        [in] en
-        *[other] unknown suffix
       }
       { $value }
       { $unit ->
diff --git a/src/types/react-timeago.d.ts b/src/types/react-timeago.d.ts
index 431bbf88e..02161745c 100644
--- a/src/types/react-timeago.d.ts
+++ b/src/types/react-timeago.d.ts
@@ -36,6 +36,7 @@ declare module "react-timeago" {
     live?: boolean;
     className: string;
     formatter?: Formatter;
+    minPeriod?: number;
   }
 
   const TimeAgo: React.ComponentType<TimeAgoProps>;

From b5db80b1e1cbee6989682ee0cb305fd0bc9cb470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 09:47:59 -0300
Subject: [PATCH 13/53] Updated colors

---
 src/core/client/ui/components/Message/Message.css |  4 ++--
 src/core/client/ui/components/Message/Message.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
index 267de3201..57dbe34bf 100644
--- a/src/core/client/ui/components/Message/Message.css
+++ b/src/core/client/ui/components/Message/Message.css
@@ -12,13 +12,13 @@
   border-left-width: calc(0.8 * var(--spacing-unit));
 }
 
-.colorInfo {
+.colorGrey {
   background-color: var(--palette-common-white);
   border-color: var(--palette-grey-main);
   color: var(--palette-grey-main);
 }
 
-.colorValidation {
+.colorError {
   background-color: var(--palette-error-light);
   border-color: var(--palette-error-darkest);
   color: var(--palette-common-white);
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
index 9eb678f4f..258174288 100644
--- a/src/core/client/ui/components/Message/Message.tsx
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -28,9 +28,9 @@ export interface MessageProps {
   */
   icon?: string;
   /*
-  * Name of color, "info" stays by default - common gray one
+  * Name of color, "grey" stays by default - common gray one
   */
-  color?: "validation" | "info";
+  color?: "error" | "grey";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
@@ -47,8 +47,8 @@ const Message: StatelessComponent<MessageProps> = props => {
   const rootClassName = cn(
     classes.root,
     {
-      [classes.colorInfo]: color === "info",
-      [classes.colorValidation]: color === "validation",
+      [classes.colorGrey]: color === "grey",
+      [classes.colorError]: color === "error",
       [classes.fullWidth]: fullWidth,
     },
     className
@@ -67,7 +67,7 @@ const Message: StatelessComponent<MessageProps> = props => {
 };
 
 Message.defaultProps = {
-  color: "info",
+  color: "grey",
   fullWidth: false,
 };
 

From a35ee7909837d708e3b7edd6afe7fb55dd272365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 09:57:55 -0300
Subject: [PATCH 14/53] Adding MessageIcon

---
 .../client/ui/components/Message/Message.mdx  |  3 +-
 .../client/ui/components/Message/Message.tsx  | 19 +---------
 .../ui/components/Message/MessageIcon.css     |  5 +++
 .../ui/components/Message/MessageIcon.tsx     | 36 +++++++++++++++++++
 4 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 src/core/client/ui/components/Message/MessageIcon.css
 create mode 100644 src/core/client/ui/components/Message/MessageIcon.tsx

diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx
index 9a876d76c..828d18036 100644
--- a/src/core/client/ui/components/Message/Message.mdx
+++ b/src/core/client/ui/components/Message/Message.mdx
@@ -5,6 +5,7 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Message from './Message'
+import MessageIcon from './MessageIcon'
 import HorizontalGutter from '../HorizontalGutter'
 
 # Message
@@ -20,7 +21,7 @@ import HorizontalGutter from '../HorizontalGutter'
 ## Usage with icon
 <Playground>
   <HorizontalGutter>
-    <Message icon="alarm">Edit: 1 min 23 secs Remaining</Message>
+    <Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
   </HorizontalGutter>
 </Playground>
 
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
index 258174288..c3f4ea2e8 100644
--- a/src/core/client/ui/components/Message/Message.tsx
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -24,25 +24,13 @@ export interface MessageProps {
   */
   fullWidth?: boolean;
   /*
-  * Name of the icon, render if provided
-  */
-  icon?: string;
-  /*
   * Name of color, "grey" stays by default - common gray one
   */
   color?: "error" | "grey";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
-  const {
-    className,
-    classes,
-    fullWidth,
-    children,
-    icon,
-    color,
-    ...rest
-  } = props;
+  const { className, classes, fullWidth, children, color, ...rest } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -56,11 +44,6 @@ const Message: StatelessComponent<MessageProps> = props => {
 
   return (
     <div className={rootClassName} {...rest}>
-      {icon && (
-        <Icon size="md" className={classes.icon}>
-          {icon}
-        </Icon>
-      )}
       {children}
     </div>
   );
diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css
new file mode 100644
index 000000000..df730b2de
--- /dev/null
+++ b/src/core/client/ui/components/Message/MessageIcon.css
@@ -0,0 +1,5 @@
+.root {
+  &:first-child {
+    margin-right: calc(0.5 * var(--spacing-unit));
+  }
+}
diff --git a/src/core/client/ui/components/Message/MessageIcon.tsx b/src/core/client/ui/components/Message/MessageIcon.tsx
new file mode 100644
index 000000000..cd4d0ad13
--- /dev/null
+++ b/src/core/client/ui/components/Message/MessageIcon.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import Icon, { IconProps } from "talk-ui/components/Icon";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+
+import * as styles from "./MessageIcon.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const MessageIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+MessageIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
+export default enhanced;

From 91d421ad46a215be976a0a0fd24924e56873721e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 10:01:14 -0300
Subject: [PATCH 15/53] Updated tests

---
 .../ui/components/Message/Message.spec.tsx       | 14 ++++++++++++++
 .../Message/__snapshots__/Message.spec.tsx.snap  | 16 +++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
index d1335f8d9..6f7bfc8cc 100644
--- a/src/core/client/ui/components/Message/Message.spec.tsx
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -4,6 +4,7 @@ import TestRenderer from "react-test-renderer";
 import { PropTypesOf } from "talk-ui/types";
 
 import Message from "./Message";
+import MessageIcon from "./MessageIcon";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof Message> = {
@@ -13,3 +14,16 @@ it("renders correctly", () => {
   const renderer = TestRenderer.create(<Message {...props} />);
   expect(renderer.toJSON()).toMatchSnapshot();
 });
+
+it("renders icon", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+  };
+
+  const renderer = TestRenderer.create(
+    <Message {...props}>
+      <MessageIcon>alert</MessageIcon>Alert Message
+    </Message>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
index 0b0f3046d..ae81503dc 100644
--- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -2,8 +2,22 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Message-root Message-colorInfo custom"
+  className="Message-root Message-colorGrey custom"
 >
   Hello World
 </div>
 `;
+
+exports[`renders icon 1`] = `
+<div
+  className="Message-root Message-colorGrey custom"
+>
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    alert
+  </span>
+  Alert Message
+</div>
+`;

From f7fa1dae23e12d20f902a1ff23c2eed16f14bb7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 10:17:46 -0300
Subject: [PATCH 16/53] Updated tests

---
 .../test/__snapshots__/signIn.spec.tsx.snap   |  54 +--
 .../test/__snapshots__/signUp.spec.tsx.snap   | 369 ++++--------------
 .../ValidationMessage.spec.tsx.snap           |   9 +-
 3 files changed, 96 insertions(+), 336 deletions(-)

diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index 770f604f0..b4db66fc7 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -180,14 +175,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -290,14 +280,9 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -321,14 +306,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -546,14 +526,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -577,14 +552,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index b382a8713..e18788d70 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -70,14 +65,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -124,14 +114,9 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -215,14 +200,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -251,14 +231,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -287,14 +262,9 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -318,14 +288,9 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -432,14 +397,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -468,14 +428,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -499,14 +454,9 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -590,14 +540,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -649,14 +594,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -680,14 +620,9 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -771,14 +706,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -807,14 +737,9 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Invalid characters. Try again.
           </span>
@@ -843,14 +768,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -874,14 +794,9 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -965,14 +880,9 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -1001,14 +911,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1037,14 +942,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1068,14 +968,9 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1159,14 +1054,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1195,14 +1085,9 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Usernames cannot be longer than ⁨20⁩ characters.
           </span>
@@ -1231,14 +1116,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1262,14 +1142,9 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1353,14 +1228,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1389,14 +1259,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1425,14 +1290,9 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Password must contain at least ⁨8⁩ characters.
           </span>
@@ -1456,14 +1316,9 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1547,14 +1402,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1583,14 +1433,9 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Username must contain at least ⁨3⁩ characters.
           </span>
@@ -1619,14 +1464,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1650,14 +1490,9 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1741,14 +1576,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1777,14 +1607,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1813,14 +1638,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -1844,14 +1664,9 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -2077,14 +1892,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2113,14 +1923,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2149,14 +1954,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
@@ -2180,14 +1980,9 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorValidation"
+          className="Message-root"
+          icon="warning"
         >
-          <span
-            aria-hidden="true"
-            className="Icon-root Message-icon Icon-md"
-          >
-            warning
-          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index 7f03e37e0..da5a985c1 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -2,14 +2,9 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="ValidationMessage-root ValidationMessage-colorError custom"
+  className="Message-root custom"
+  icon="warning"
 >
-  <span
-    aria-hidden="true"
-    className="Icon-root ValidationMessage-icon Icon-sm"
-  >
-    warning
-  </span>
   Hello World
 </div>
 `;

From 4e63858c66293ebf7ad2213eed750defe09456ee Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 17:25:40 +0200
Subject: [PATCH 17/53] Fix lint and test

---
 .../components/Comment/Comment.spec.tsx       |   1 -
 .../stream/components/Comment/Comment.tsx     |   2 +-
 .../Comment/IndentedComment.spec.tsx          |   1 -
 .../__snapshots__/Comment.spec.tsx.snap       |  20 +-
 ...spec.tsx.snap => TopBarLeft.spec.tsx.snap} |   0
 .../containers/CommentContainer.spec.tsx      |   6 +
 .../stream/containers/CommentContainer.tsx    |   8 +-
 .../CommentContainer.spec.tsx.snap            |   6 -
 .../test/__snapshots__/loadMore.spec.tsx.snap | 140 ++++----
 .../__snapshots__/permalinkView.spec.tsx.snap |  56 ++--
 ...permalinkViewCommentNotFound.spec.tsx.snap |  28 +-
 .../__snapshots__/postComment.spec.tsx.snap   | 239 ++++++++------
 .../__snapshots__/postReply.spec.tsx.snap     | 301 +++++++++++-------
 .../__snapshots__/renderReplies.spec.tsx.snap | 112 ++++---
 .../__snapshots__/renderStream.spec.tsx.snap  |  56 ++--
 .../showAllReplies.spec.tsx.snap              | 140 ++++----
 src/core/client/stream/test/fixtures.ts       |  12 +
 .../client/stream/test/postComment.spec.tsx   |   3 +
 .../client/stream/test/postReply.spec.tsx     |   3 +
 19 files changed, 667 insertions(+), 467 deletions(-)
 rename src/core/client/stream/components/Comment/__snapshots__/{TopBar.spec.tsx.snap => TopBarLeft.spec.tsx.snap} (100%)

diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
index 8b409adeb..cae068012 100644
--- a/src/core/client/stream/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -7,7 +7,6 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
-    id: "comment-id",
     author: {
       username: "Marvin",
     },
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 37c6bb2ad..02dd50bfd 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -34,7 +34,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
             )}
           <Timestamp>{props.createdAt}</Timestamp>
         </TopBarLeft>
-        <div>{props.topBarRight}</div>
+        {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
       <HTMLContent>{props.body || ""}</HTMLContent>
       <Flex className={styles.footer} direction="row" itemGutter="half">
diff --git a/src/core/client/stream/components/Comment/IndentedComment.spec.tsx b/src/core/client/stream/components/Comment/IndentedComment.spec.tsx
index c86a66ef2..be489a804 100644
--- a/src/core/client/stream/components/Comment/IndentedComment.spec.tsx
+++ b/src/core/client/stream/components/Comment/IndentedComment.spec.tsx
@@ -8,7 +8,6 @@ import IndentedComment from "./IndentedComment";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof IndentedComment> = {
     indentLevel: 1,
-    id: "comment-id",
     author: {
       username: "Marvin",
     },
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index 246444f0d..cf9aa58ab 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -5,16 +5,20 @@ exports[`renders username and body 1`] = `
   className="Comment-root"
   role="article"
 >
-  <TopBar
+  <withPropsOnChange(Flex)
     className="Comment-topBar"
+    direction="row"
+    justifyContent="space-between"
   >
-    <Username>
-      Marvin
-    </Username>
-    <Timestamp>
-      1995-12-17T03:24:00.000Z
-    </Timestamp>
-  </TopBar>
+    <TopBarLeft>
+      <Username>
+        Marvin
+      </Username>
+      <Timestamp>
+        1995-12-17T03:24:00.000Z
+      </Timestamp>
+    </TopBarLeft>
+  </withPropsOnChange(Flex)>
   <HTMLContent>
     Woof
   </HTMLContent>
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
rename to src/core/client/stream/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index d43c241af..91f2acafb 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -23,6 +23,9 @@ it("renders username and body", () => {
       },
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
+      editing: {
+        editableUntil: "1995-12-17T03:24:30.000Z",
+      },
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
@@ -45,6 +48,9 @@ it("renders body only", () => {
       },
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
+      editing: {
+        editableUntil: "1995-12-17T03:24:30.000Z",
+      },
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index c3368b9d0..9d6ae37f6 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -94,7 +94,7 @@ export class CommentContainer extends Component<InnerProps, State> {
   }
 
   public render() {
-    const { comment, asset, ...rest } = this.props;
+    const { comment, asset, indentLevel } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
     if (showEditDialog) {
       return (
@@ -108,8 +108,10 @@ export class CommentContainer extends Component<InnerProps, State> {
     return (
       <>
         <Comment
-          {...rest}
-          {...comment}
+          indentLevel={indentLevel}
+          author={comment.author}
+          body={comment.body}
+          createdAt={comment.createdAt}
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 4883c80e1..9ad26125f 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -22,10 +22,7 @@ exports[`renders body only 1`] = `
         />
       </React.Fragment>
     }
-    id="comment-id"
     indentLevel={1}
-    me={null}
-    showAuthPopup={[Function]}
   />
 </React.Fragment>
 `;
@@ -52,10 +49,7 @@ exports[`renders username and body 1`] = `
         />
       </React.Fragment>
     }
-    id="comment-id"
     indentLevel={1}
-    me={null}
-    showAuthPopup={[Function]}
   />
 </React.Fragment>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 2b6612877..27964d7c7 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -153,20 +153,24 @@ exports[`loads more comments 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -206,20 +210,24 @@ exports[`loads more comments 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -259,20 +267,24 @@ exports[`loads more comments 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -462,20 +474,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -515,20 +531,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index a53c3f1e4..a21e1148b 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -28,20 +28,24 @@ exports[`renders permalink view 1`] = `
       role="article"
     >
       <div
-        className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
       >
-        <span
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+        <div
+          className="Flex-root 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>
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            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>
       <div
         className="HTMLContent-root"
@@ -229,20 +233,24 @@ exports[`show all comments 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 475a485da..f5ac0cf10 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -185,20 +185,24 @@ exports[`show all comments 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index f4dae1d35..15fe54400 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -186,20 +186,39 @@ exports[`post a comment: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
           </div>
           <div
             className="HTMLContent-root"
@@ -239,20 +258,24 @@ exports[`post a comment: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -292,20 +315,24 @@ exports[`post a comment: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -534,20 +561,24 @@ exports[`post a comment: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -587,20 +618,24 @@ exports[`post a comment: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -640,20 +675,24 @@ exports[`post a comment: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -882,20 +921,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -935,20 +978,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 0e6c5d219..469a64117 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -192,20 +192,24 @@ exports[`post a reply: open reply form 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -305,10 +309,10 @@ exports[`post a reply: open reply form 1`] = `
                     aria-hidden="true"
                     className="RTE-placeholder RTE-placeholder"
                   >
-                    Post a comment
+                    Write a reply
                   </div>
                   <div
-                    aria-placeholder="Post a comment"
+                    aria-placeholder="Write a reply"
                     className="RTE-contentEditable RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
@@ -372,20 +376,24 @@ exports[`post a reply: open reply form 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -614,20 +622,24 @@ exports[`post a reply: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -724,7 +736,7 @@ exports[`post a reply: optimistic response 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-placeholder="Post a comment"
+                    aria-placeholder="Write a reply"
                     className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
                     contentEditable={false}
                     dangerouslySetInnerHTML={
@@ -792,20 +804,39 @@ exports[`post a reply: optimistic response 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                </div>
               </div>
               <div
                 className="HTMLContent-root"
@@ -847,20 +878,24 @@ exports[`post a reply: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -1089,20 +1124,24 @@ exports[`post a reply: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -1146,20 +1185,24 @@ exports[`post a reply: server response 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
@@ -1201,20 +1244,24 @@ exports[`post a reply: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -1443,20 +1490,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -1496,20 +1547,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 1673675ef..3ceec7207 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -153,20 +153,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -206,20 +210,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -263,20 +271,24 @@ exports[`renders comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
@@ -316,20 +328,24 @@ exports[`renders comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index b93b5d5f8..0cada5f0e 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -153,20 +153,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -206,20 +210,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 235810d26..94cacbaf6 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -153,20 +153,24 @@ exports[`renders comment stream 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -210,20 +214,24 @@ exports[`renders comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
@@ -435,20 +443,24 @@ exports[`show all replies 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <div
+              className="Flex-root 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>
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
           <div
             className="HTMLContent-root"
@@ -492,20 +504,24 @@ exports[`show all replies 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
@@ -545,20 +561,24 @@ exports[`show all replies 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  className="Flex-root 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>
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    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>
               <div
                 className="HTMLContent-root"
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index b4e207978..121ffa036 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -20,6 +20,9 @@ export const comments = [
     body: "Joining Too",
     createdAt: "2018-07-06T18:24:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    editing: {
+      editableUntil: "2018-07-06T18:24:30.000Z",
+    },
   },
   {
     id: "comment-1",
@@ -27,6 +30,9 @@ export const comments = [
     body: "What's up?",
     createdAt: "2018-07-06T18:20:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    editing: {
+      editableUntil: "2018-07-06T18:20:30.000Z",
+    },
   },
   {
     id: "comment-2",
@@ -34,6 +40,9 @@ export const comments = [
     body: "Hey!",
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    editing: {
+      editableUntil: "2018-07-06T18:14:30.000Z",
+    },
   },
 ];
 
@@ -68,6 +77,9 @@ export const commentWithReplies = {
       hasNextPage: false,
     },
   },
+  editing: {
+    editableUntil: "2018-07-06T18:24:30.000Z",
+  },
 };
 
 export const assetWithReplies = {
diff --git a/src/core/client/stream/test/postComment.spec.tsx b/src/core/client/stream/test/postComment.spec.tsx
index 658a9d036..1d5de1157 100644
--- a/src/core/client/stream/test/postComment.spec.tsx
+++ b/src/core/client/stream/test/postComment.spec.tsx
@@ -41,6 +41,9 @@ beforeEach(() => {
                   author: users[0],
                   body: "<strong>Hello world! (from server)</strong>",
                   createdAt: "2018-07-06T18:24:00.000Z",
+                  editing: {
+                    editableUntil: "2018-07-06T18:24:30.000Z",
+                  },
                 },
               },
               clientMutationId: "0",
diff --git a/src/core/client/stream/test/postReply.spec.tsx b/src/core/client/stream/test/postReply.spec.tsx
index 3c64bc098..27a91b267 100644
--- a/src/core/client/stream/test/postReply.spec.tsx
+++ b/src/core/client/stream/test/postReply.spec.tsx
@@ -45,6 +45,9 @@ beforeEach(() => {
                     edges: [],
                     pageInfo: { endCursor: null, hasNextPage: false },
                   },
+                  editing: {
+                    editableUntil: "2018-07-06T18:24:30.000Z",
+                  },
                 },
               },
               clientMutationId: "0",

From 170fb47daea9f4556b561b50c862e51fafc1fef0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 17:32:46 +0200
Subject: [PATCH 18/53] More unit tests

---
 .../client/stream/components/Comment/Comment.spec.tsx    | 2 ++
 src/core/client/stream/components/Comment/Comment.tsx    | 4 ++--
 .../Comment/__snapshots__/Comment.spec.tsx.snap          | 7 ++++++-
 .../Comment/__snapshots__/IndentedComment.spec.tsx.snap  | 1 -
 src/core/common/utils/isBeforeDate.spec.ts               | 9 +++++++++
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
index cae068012..f8d14f6eb 100644
--- a/src/core/client/stream/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -12,6 +12,8 @@ it("renders username and body", () => {
     },
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
+    topBarRight: "topBarRight",
+    footer: "footer",
   };
   const wrapper = shallow(<Comment {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 02dd50bfd..9a03094cc 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -15,8 +15,8 @@ export interface CommentProps {
   } | null;
   body: string | null;
   createdAt: string;
-  topBarRight?: ReactElement<any> | Array<ReactElement<any>>;
-  footer?: ReactElement<any> | Array<ReactElement<any>>;
+  topBarRight?: React.ReactNode;
+  footer?: React.ReactNode;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index cf9aa58ab..7d13e23ea 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -18,6 +18,9 @@ exports[`renders username and body 1`] = `
         1995-12-17T03:24:00.000Z
       </Timestamp>
     </TopBarLeft>
+    <div>
+      topBarRight
+    </div>
   </withPropsOnChange(Flex)>
   <HTMLContent>
     Woof
@@ -26,6 +29,8 @@ exports[`renders username and body 1`] = `
     className="Comment-footer"
     direction="row"
     itemGutter="half"
-  />
+  >
+    footer
+  </withPropsOnChange(Flex)>
 </div>
 `;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
index ae2d56dee..d264e4050 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
@@ -12,7 +12,6 @@ exports[`renders correctly 1`] = `
     }
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
-    id="comment-id"
   />
 </Indent>
 `;
diff --git a/src/core/common/utils/isBeforeDate.spec.ts b/src/core/common/utils/isBeforeDate.spec.ts
index e69de29bb..4359ca55a 100644
--- a/src/core/common/utils/isBeforeDate.spec.ts
+++ b/src/core/common/utils/isBeforeDate.spec.ts
@@ -0,0 +1,9 @@
+import timekeeper from "timekeeper";
+import isBeforeDate from "./isBeforeDate";
+
+it("works correctly", () => {
+  timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
+  expect(isBeforeDate(new Date("2018-07-06T18:24:30.000Z"))).toBe(true);
+  expect(isBeforeDate(new Date("2018-07-06T18:23:30.000Z"))).toBe(false);
+  timekeeper.reset();
+});

From 7b221c40a0f91016f22e1261861094addae51e4d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 18:03:54 +0200
Subject: [PATCH 19/53] Add integration test

---
 .../stream/components/Comment/Comment.tsx     |    2 +-
 .../stream/containers/CommentContainer.tsx    |    1 +
 .../__snapshots__/editComment.spec.tsx.snap   | 1459 +++++++++++++++++
 .../client/stream/test/editComment.spec.tsx   |   90 +
 4 files changed, 1551 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
 create mode 100644 src/core/client/stream/test/editComment.spec.tsx

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 9a03094cc..68fa6dab4 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 9d6ae37f6..df61c3f9e 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -116,6 +116,7 @@ export class CommentContainer extends Component<InnerProps, State> {
             (editable && (
               <Localized id="comments-commentContainer-editButton">
                 <Button
+                  id={`comments-commentContainer-editButton-${comment.id}`}
                   color="primary"
                   variant="underlined"
                   onClick={this.openEditDialog}
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
new file mode 100644
index 000000000..2c3565eec
--- /dev/null
+++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
@@ -0,0 +1,1459 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`edit a comment: edit form 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <form
+          autoComplete="off"
+          id="comments-editCommentForm-form-comment-0"
+          onSubmit={[Function]}
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+            <div>
+              <label
+                className="AriaInfo-root"
+                htmlFor="comments-editCommentForm-rte-comment-0"
+              >
+                Edit comment
+              </label>
+              <div>
+                <div
+                  className=""
+                >
+                  <div
+                    className="Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-placeholder="Edit comment"
+                    className="RTE-contentEditable RTE-content"
+                    contentEditable={true}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                    disabled={false}
+                    id="comments-editCommentForm-rte-comment-0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root ValidationMessage-icon Icon-sm"
+              >
+                warning
+              </span>
+              <span>
+                Edit: 
+                <time
+                  className="RelativeTime-root"
+                  dateTime="2018-07-06T18:24:30.000Z"
+                  title="2018-07-06T18:24:30.000Z"
+                >
+                  2018-07-06T18:24:30.000Z
+                </time>
+                 remaining
+              </span>
+            </div>
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
+
+exports[`edit a comment: optimistic response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <form
+          autoComplete="off"
+          id="comments-editCommentForm-form-comment-0"
+          onSubmit={[Function]}
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+            <div>
+              <label
+                className="AriaInfo-root"
+                htmlFor="comments-editCommentForm-rte-comment-0"
+              >
+                Edit comment
+              </label>
+              <div>
+                <div
+                  className=""
+                >
+                  <div
+                    className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-placeholder="Edit comment"
+                    className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                    contentEditable={false}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Edited!",
+                      }
+                    }
+                    disabled={true}
+                    id="comments-editCommentForm-rte-comment-0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root ValidationMessage-icon Icon-sm"
+              >
+                warning
+              </span>
+              <span>
+                Edit: 
+                <time
+                  className="RelativeTime-root"
+                  dateTime="2018-07-06T18:24:30.000Z"
+                  title="2018-07-06T18:24:30.000Z"
+                >
+                  2018-07-06T18:24:30.000Z
+                </time>
+                 remaining
+              </span>
+            </div>
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
+
+exports[`edit a comment: render stream 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                id="comments-commentContainer-editButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
+          </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
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
+
+exports[`edit a comment: server response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                id="comments-commentContainer-editButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
+          </div>
+          <div
+            className="HTMLContent-root"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Edited! (from server)",
+              }
+            }
+          />
+          <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
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
new file mode 100644
index 000000000..b1d0a67e8
--- /dev/null
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -0,0 +1,90 @@
+import { ReactTestRenderer } from "react-test-renderer";
+import timekeeper from "timekeeper";
+
+import { timeout } from "talk-common/utils";
+import { createSinonStub } from "talk-framework/testHelpers";
+
+import create from "./create";
+import { assets, users } from "./fixtures";
+
+let testRenderer: ReactTestRenderer;
+beforeEach(() => {
+  const resolvers = {
+    Query: {
+      asset: createSinonStub(
+        s => s.throws(),
+        s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
+      ),
+      me: createSinonStub(
+        s => s.throws(),
+        s => s.withArgs(undefined, { clientAuthRevision: 0 }).returns(users[0])
+      ),
+    },
+    Mutation: {
+      editComment: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, {
+              input: {
+                assetID: assets[0].id,
+                commentID: assets[0].comments.edges[0].node.id,
+                body: "Edited!",
+                clientMutationId: "0",
+              },
+            })
+            .returns({
+              // TODO: add a type assertion here to ensure that if the type changes, that the test will fail
+              comment: {
+                id: assets[0].comments.edges[0].node.id,
+                body: "Edited! (from server)",
+              },
+              clientMutationId: "0",
+            })
+      ),
+    },
+  };
+
+  timekeeper.freeze(assets[0].comments.edges[0].node.createdAt);
+  ({ testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(assets[0].id, "assetID");
+    },
+  }));
+});
+
+afterAll(() => {
+  timekeeper.reset();
+});
+
+it("edit a comment", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot("render stream");
+
+  // Open edit form.
+  testRenderer.root
+    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot("edit form");
+
+  testRenderer.root
+    .findByProps({ inputId: "comments-editCommentForm-rte-comment-0" })
+    .props.onChange({ html: "Edited!" });
+
+  testRenderer.root
+    .findByProps({ id: "comments-editCommentForm-form-comment-0" })
+    .props.onSubmit();
+
+  // Test optimistic response.
+  expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
+
+  // Wait for loading.
+  await timeout();
+
+  // Test after server response.
+  expect(testRenderer.toJSON()).toMatchSnapshot("server response");
+});

From 5a8ce7655cb191316965d2c0b04630dfd35651e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 11 Sep 2018 13:09:49 -0300
Subject: [PATCH 20/53] Updated tests

---
 .../test/__snapshots__/signIn.spec.tsx.snap   |  54 ++-
 .../test/__snapshots__/signUp.spec.tsx.snap   | 369 ++++++++++++++----
 .../ui/components/Message/Message.spec.tsx    |   6 +-
 .../client/ui/components/Message/Message.tsx  |   3 -
 .../__snapshots__/Message.spec.tsx.snap       |   2 +-
 .../ValidationMessage/ValidationMessage.tsx   |   9 +-
 .../ValidationMessage.spec.tsx.snap           |   9 +-
 7 files changed, 341 insertions(+), 111 deletions(-)

diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index b4db66fc7..c21b65546 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -175,9 +180,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -280,9 +290,14 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -306,9 +321,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -526,9 +546,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -552,9 +577,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index e18788d70..88ec82da6 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -65,9 +70,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -114,9 +124,14 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -200,9 +215,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -231,9 +251,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -262,9 +287,14 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -288,9 +318,14 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -397,9 +432,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -428,9 +468,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -454,9 +499,14 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -540,9 +590,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -594,9 +649,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -620,9 +680,14 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -706,9 +771,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -737,9 +807,14 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Invalid characters. Try again.
           </span>
@@ -768,9 +843,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -794,9 +874,14 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -880,9 +965,14 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Please enter a valid email address.
           </span>
@@ -911,9 +1001,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -942,9 +1037,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -968,9 +1068,14 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1054,9 +1159,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1085,9 +1195,14 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Usernames cannot be longer than ⁨20⁩ characters.
           </span>
@@ -1116,9 +1231,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1142,9 +1262,14 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1228,9 +1353,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1259,9 +1389,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1290,9 +1425,14 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Password must contain at least ⁨8⁩ characters.
           </span>
@@ -1316,9 +1456,14 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1402,9 +1547,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1433,9 +1583,14 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Username must contain at least ⁨3⁩ characters.
           </span>
@@ -1464,9 +1619,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1490,9 +1650,14 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1576,9 +1741,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1607,9 +1777,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1638,9 +1813,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1664,9 +1844,14 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             Passwords do not match. Try again.
           </span>
@@ -1892,9 +2077,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1923,9 +2113,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1954,9 +2149,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
@@ -1980,9 +2180,14 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root"
-          icon="warning"
+          className="Message-root Message-colorError"
         >
+          <span
+            aria-hidden="true"
+            className="Icon-root MessageIcon-root Icon-sm"
+          >
+            warning
+          </span>
           <span>
             This field is required.
           </span>
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
index 6f7bfc8cc..ac69cea85 100644
--- a/src/core/client/ui/components/Message/Message.spec.tsx
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -16,12 +16,8 @@ it("renders correctly", () => {
 });
 
 it("renders icon", () => {
-  const props: PropTypesOf<typeof Message> = {
-    className: "custom",
-  };
-
   const renderer = TestRenderer.create(
-    <Message {...props}>
+    <Message>
       <MessageIcon>alert</MessageIcon>Alert Message
     </Message>
   );
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
index c3f4ea2e8..7547d8442 100644
--- a/src/core/client/ui/components/Message/Message.tsx
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -1,9 +1,6 @@
 import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
 import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
 import * as styles from "./Message.css";
 
 export interface MessageProps {
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
index ae81503dc..38381f0c6 100644
--- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders icon 1`] = `
 <div
-  className="Message-root Message-colorGrey custom"
+  className="Message-root Message-colorGrey"
 >
   <span
     aria-hidden="true"
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 34782a29d..9a4819178 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode, StatelessComponent } from "react";
 import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
 
 export interface ValidationMessageProps {
   /**
@@ -24,12 +25,8 @@ const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
   const { className, fullWidth, children, icon, ...rest } = props;
 
   return (
-    <Message
-      color="validation"
-      icon={icon ? icon : "warning"}
-      className={className}
-      {...rest}
-    >
+    <Message color="error" className={className} {...rest}>
+      <MessageIcon>warning</MessageIcon>
       {children}
     </Message>
   );
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index da5a985c1..c0e1861bb 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -2,9 +2,14 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Message-root custom"
-  icon="warning"
+  className="Message-root Message-colorError custom"
 >
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    warning
+  </span>
   Hello World
 </div>
 `;

From 8a25e6826641009aaf9585c573cfaf9d887fdbf0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 21:16:22 +0200
Subject: [PATCH 21/53] Add integration tests

---
 .../stream/components/EditCommentForm.tsx     |    2 +
 .../__snapshots__/editComment.spec.tsx.snap   | 1028 +++++++++++++++++
 .../__snapshots__/postComment.spec.tsx.snap   |    1 +
 .../__snapshots__/postReply.spec.tsx.snap     |    1 +
 .../client/stream/test/editComment.spec.tsx   |   56 +-
 5 files changed, 1082 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/components/EditCommentForm.tsx b/src/core/client/stream/components/EditCommentForm.tsx
index 84c753b1b..454ffb41b 100644
--- a/src/core/client/stream/components/EditCommentForm.tsx
+++ b/src/core/client/stream/components/EditCommentForm.tsx
@@ -115,6 +115,7 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
               {props.expired ? (
                 <Localized id="comments-editCommentForm-close">
                   <Button
+                    id={`comments-editCommentForm-closeButton-${props.id}`}
                     variant="outlined"
                     disabled={submitting}
                     onClick={props.onClose}
@@ -126,6 +127,7 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
                 <>
                   <Localized id="comments-editCommentForm-cancel">
                     <Button
+                      id={`comments-editCommentForm-cancelButton-${props.id}`}
                       variant="outlined"
                       disabled={submitting}
                       onClick={props.onCancel}
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
index 2c3565eec..07b6f3c19 100644
--- a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
@@ -1,5 +1,324 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`cancel edit: edit canceled 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                id="comments-commentContainer-editButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
+          </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
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
+
 exports[`edit a comment: edit form 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
@@ -320,6 +639,7 @@ exports[`edit a comment: edit form 1`] = `
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
                 disabled={false}
+                id="comments-editCommentForm-cancelButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -730,6 +1050,7 @@ exports[`edit a comment: optimistic response 1`] = `
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
                 disabled={true}
+                id="comments-editCommentForm-cancelButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1457,3 +1778,710 @@ exports[`edit a comment: server response 1`] = `
   </div>
 </div>
 `;
+
+exports[`shows expiry message: edit form closed 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                id="comments-commentContainer-editButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
+          </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
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
+
+exports[`shows expiry message: edit time expired 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <form
+          autoComplete="off"
+          id="comments-editCommentForm-form-comment-0"
+          onSubmit={[Function]}
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+            <div>
+              <label
+                className="AriaInfo-root"
+                htmlFor="comments-editCommentForm-rte-comment-0"
+              >
+                Edit comment
+              </label>
+              <div>
+                <div
+                  className=""
+                >
+                  <div
+                    className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-placeholder="Edit comment"
+                    className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                    contentEditable={false}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                    disabled={true}
+                    id="comments-editCommentForm-rte-comment-0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root ValidationMessage-icon Icon-sm"
+              >
+                warning
+              </span>
+              Edit time has expired. You can no longer edit this comment. Why not post another one?
+            </div>
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+                disabled={false}
+                id="comments-editCommentForm-closeButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+          <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>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 15fe54400..0c0129082 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -207,6 +207,7 @@ exports[`post a comment: optimistic response 1`] = `
             <div>
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                id="comments-commentContainer-editButton-uuid-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 469a64117..ad6177fc0 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -825,6 +825,7 @@ exports[`post a reply: optimistic response 1`] = `
                 <div>
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                    id="comments-commentContainer-editButton-uuid-0"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
index b1d0a67e8..b65c7f7bb 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -7,8 +7,7 @@ import { createSinonStub } from "talk-framework/testHelpers";
 import create from "./create";
 import { assets, users } from "./fixtures";
 
-let testRenderer: ReactTestRenderer;
-beforeEach(() => {
+function createTestRenderer() {
   const resolvers = {
     Query: {
       asset: createSinonStub(
@@ -45,22 +44,25 @@ beforeEach(() => {
     },
   };
 
-  timekeeper.freeze(assets[0].comments.edges[0].node.createdAt);
-  ({ testRenderer } = create({
+  const { testRenderer } = create({
     // Set this to true, to see graphql responses.
     logNetwork: false,
     resolvers,
     initLocalState: localRecord => {
       localRecord.setValue(assets[0].id, "assetID");
     },
-  }));
-});
+  });
+  return testRenderer;
+}
 
 afterAll(() => {
   timekeeper.reset();
 });
 
 it("edit a comment", async () => {
+  timekeeper.freeze(assets[0].comments.edges[0].node.createdAt);
+  const testRenderer = createTestRenderer();
+
   // Wait for loading.
   await timeout();
   expect(testRenderer.toJSON()).toMatchSnapshot("render stream");
@@ -88,3 +90,45 @@ it("edit a comment", async () => {
   // Test after server response.
   expect(testRenderer.toJSON()).toMatchSnapshot("server response");
 });
+
+it("cancel edit", async () => {
+  timekeeper.freeze(assets[0].comments.edges[0].node.createdAt);
+  const testRenderer = createTestRenderer();
+
+  await timeout();
+
+  // Open edit form.
+  testRenderer.root
+    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+    .props.onClick();
+
+  // Cacnel edit form.
+  testRenderer.root
+    .findByProps({ id: "comments-editCommentForm-cancelButton-comment-0" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot("edit canceled");
+});
+
+it("shows expiry message", async () => {
+  timekeeper.freeze(assets[0].comments.edges[0].node.createdAt);
+  const testRenderer = createTestRenderer();
+
+  await timeout();
+  jest.useFakeTimers();
+  // Open edit form.
+  testRenderer.root
+    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+    .props.onClick();
+
+  timekeeper.reset();
+  jest.runOnlyPendingTimers();
+
+  // Show edit time expired.
+  expect(testRenderer.toJSON()).toMatchSnapshot("edit time expired");
+
+  // Close edit form.
+  testRenderer.root
+    .findByProps({ id: "comments-editCommentForm-closeButton-comment-0" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot("edit form closed");
+});

From 7fa01322119125480b96d171789a0cc7e62e74d8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 11 Sep 2018 21:20:36 +0200
Subject: [PATCH 22/53] Fix linting

---
 src/core/client/stream/test/editComment.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
index b65c7f7bb..d68a890f1 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -1,4 +1,3 @@
-import { ReactTestRenderer } from "react-test-renderer";
 import timekeeper from "timekeeper";
 
 import { timeout } from "talk-common/utils";

From a794fe8cd7cbae540762ef8a0a7c7589ecfb79d6 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 11 Sep 2018 16:35:00 -0600
Subject: [PATCH 23/53] fix: remove assetID from EditCommentInput

---
 .../server/graph/tenant/mutators/comment.ts    |  1 -
 .../server/graph/tenant/schema/schema.graphql  |  5 -----
 src/core/server/services/comments/index.ts     | 18 ++++++++++--------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/core/server/graph/tenant/mutators/comment.ts b/src/core/server/graph/tenant/mutators/comment.ts
index d0c26e431..aeaac70ee 100644
--- a/src/core/server/graph/tenant/mutators/comment.ts
+++ b/src/core/server/graph/tenant/mutators/comment.ts
@@ -26,7 +26,6 @@ export default (ctx: TenantContext) => ({
       ctx.user!,
       {
         id: input.commentID,
-        asset_id: input.assetID,
         body: input.body,
       },
       ctx.req
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index dc689f403..1ba2546d6 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -879,11 +879,6 @@ type CreateCommentPayload {
 EditCommentInput provides the input for the editComment Mutation.
 """
 input EditCommentInput {
-  """
-  assetID is the ID of the Asset where we are editing a comment on.
-  """
-  assetID: ID!
-
   """
   commentID is the ID of the comment being edited.
   """
diff --git a/src/core/server/services/comments/index.ts b/src/core/server/services/comments/index.ts
index b356b919b..91e124216 100644
--- a/src/core/server/services/comments/index.ts
+++ b/src/core/server/services/comments/index.ts
@@ -74,12 +74,7 @@ export async function create(
 export type EditComment = Omit<
   EditCommentInput,
   "status" | "author_id" | "lastEditableCommentCreatedAt"
-> & {
-  /**
-   * asset_id is the asset that the comment exists on.
-   */
-  asset_id: string;
-};
+>;
 
 export async function edit(
   mongo: Db,
@@ -88,8 +83,15 @@ export async function edit(
   input: EditComment,
   req?: Request
 ) {
+  // Get the comment that we're editing.
+  let comment = await retrieveComment(mongo, tenant.id, input.id);
+  if (!comment) {
+    // TODO: replace to match error returned by the models/comments.ts
+    throw new Error("comment not found");
+  }
+
   // Grab the asset that we'll use to check moderation pieces with.
-  const asset = await retrieveAsset(mongo, tenant.id, input.asset_id);
+  const asset = await retrieveAsset(mongo, tenant.id, comment.asset_id);
   if (!asset) {
     // TODO: (wyattjoh) return better error.
     throw new Error("asset referenced does not exist");
@@ -106,7 +108,7 @@ export async function edit(
 
   // TODO: (wyattjoh) use the actions somehow.
 
-  const comment = await editComment(mongo, tenant.id, {
+  comment = await editComment(mongo, tenant.id, {
     id: input.id,
     author_id: author.id,
     body: input.body,

From 7a4bf847b042c46e5dfe3189761eca8e8e59eabb Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 11 Sep 2018 16:35:12 -0600
Subject: [PATCH 24/53] feat: merge metadata during edit

---
 src/core/server/models/comment.ts          | 18 ++++++++++++++++--
 src/core/server/services/comments/index.ts |  3 ++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/core/server/models/comment.ts b/src/core/server/models/comment.ts
index d2c8e03a6..bec7cc382 100644
--- a/src/core/server/models/comment.ts
+++ b/src/core/server/models/comment.ts
@@ -2,6 +2,7 @@ import { Db } from "mongodb";
 import uuid from "uuid";
 
 import { Omit, Sub } from "talk-common/types";
+import { dotize } from "talk-common/utils/dotize";
 import {
   GQLCOMMENT_SORT,
   GQLCOMMENT_STATUS,
@@ -103,7 +104,7 @@ export async function createComment(
 
 export type EditCommentInput = Pick<
   Comment,
-  "id" | "author_id" | "body" | "status"
+  "id" | "author_id" | "body" | "status" | "metadata"
 > & {
   /**
    * lastEditableCommentCreatedAt is the date that the last comment would have
@@ -125,7 +126,16 @@ export async function editComment(
   ];
   const createdAt = new Date();
 
-  const { id, body, lastEditableCommentCreatedAt, status, author_id } = input;
+  const {
+    id,
+    body,
+    lastEditableCommentCreatedAt,
+    status,
+    author_id,
+    metadata,
+  } = input;
+
+  // TODO: (wyattjoh) consider resetting the action counts if we're starting fresh with a new comment
 
   const result = await collection(db).findOneAndUpdate(
     {
@@ -144,6 +154,10 @@ export async function editComment(
       $set: {
         body,
         status,
+        // Embed all the metadata properties, this may override the existing
+        // metadata, but we won't replace metadata that has been recalculated.
+        // TODO: (wyattjoh) consider if we want to replace the metadata for edited comments instead of supplementing it
+        ...dotize({ metadata }),
       },
       $push: {
         body_history: {
diff --git a/src/core/server/services/comments/index.ts b/src/core/server/services/comments/index.ts
index 91e124216..25a264f5a 100644
--- a/src/core/server/services/comments/index.ts
+++ b/src/core/server/services/comments/index.ts
@@ -98,7 +98,7 @@ export async function edit(
   }
 
   // Run the comment through the moderation phases.
-  const { status } = await processForModeration({
+  const { status, metadata } = await processForModeration({
     asset,
     tenant,
     comment: input,
@@ -113,6 +113,7 @@ export async function edit(
     author_id: author.id,
     body: input.body,
     status,
+    metadata,
     // The editable time is based on the current time, and the edit window
     // length. By subtracting the current date from the edit window length, we
     // get the maximum value for the `created_at` time that would be permitted

From b1aac28eec6cb2a2bada2c3adde58e32229d3009 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 11 Sep 2018 17:07:42 -0600
Subject: [PATCH 25/53] fix: remove assetID from client queries to edit comment

---
 src/core/client/stream/containers/CommentContainer.tsx    | 2 --
 .../client/stream/containers/EditCommentFormContainer.tsx | 8 --------
 2 files changed, 10 deletions(-)

diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 13797018c..0b2d0e578 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -99,7 +99,6 @@ export class CommentContainer extends Component<InnerProps, State> {
     if (showEditDialog) {
       return (
         <EditCommentFormContainer
-          asset={asset}
           comment={comment}
           onClose={this.closeEditDialog}
         />
@@ -161,7 +160,6 @@ const enhanced = withShowAuthPopupMutation(
     asset: graphql`
       fragment CommentContainer_asset on Asset {
         ...ReplyCommentFormContainer_asset
-        ...EditCommentFormContainer_asset
       }
     `,
     comment: graphql`
diff --git a/src/core/client/stream/containers/EditCommentFormContainer.tsx b/src/core/client/stream/containers/EditCommentFormContainer.tsx
index bdf8130b1..9dee698d3 100644
--- a/src/core/client/stream/containers/EditCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/EditCommentFormContainer.tsx
@@ -8,7 +8,6 @@ import { BadUserInputError } from "talk-framework/lib/errors";
 import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 
-import { EditCommentFormContainer_asset as AssetData } from "talk-stream/__generated__/EditCommentFormContainer_asset.graphql";
 import { EditCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/EditCommentFormContainer_comment.graphql";
 
 import EditCommentForm, {
@@ -20,7 +19,6 @@ interface InnerProps {
   editComment: EditCommentMutation;
   comment: CommentData;
   onClose?: () => void;
-  asset: AssetData;
   autofocus: boolean;
 }
 
@@ -74,7 +72,6 @@ export class EditCommentFormContainer extends Component<InnerProps, State> {
   ) => {
     try {
       await this.props.editComment({
-        assetID: this.props.asset.id,
         commentID: this.props.comment.id,
         body: input.body,
       });
@@ -114,11 +111,6 @@ const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
 }))(
   withEditCommentMutation(
     withFragmentContainer<InnerProps>({
-      asset: graphql`
-        fragment EditCommentFormContainer_asset on Asset {
-          id
-        }
-      `,
       comment: graphql`
         fragment EditCommentFormContainer_comment on Comment {
           id

From 19b1a7882c0f29697a588400fa117edcf9f0de96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 08:53:22 -0300
Subject: [PATCH 26/53] Changes

---
 src/core/client/ui/components/Tabs/Tab.tsx    | 10 +++++-----
 src/core/client/ui/components/Tabs/TabBar.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 87b4ba236..a0b23c0aa 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -1,9 +1,9 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./Tab.css";
 
-export interface TabBarProps {
+export interface TabProps {
   /**
    * Convenient prop to override the root styling.
    */
@@ -30,7 +30,7 @@ export interface TabBarProps {
   onTabClick?: (tabId: string) => void;
 }
 
-class TabBar extends React.Component<TabBarProps> {
+class Tab extends React.Component<TabProps> {
   public handleTabClick = () => {
     if (this.props.onTabClick) {
       this.props.onTabClick(this.props.tabId);
@@ -53,7 +53,7 @@ class TabBar extends React.Component<TabBarProps> {
     return (
       <li
         className={rootClassName}
-        key={tabId}
+        key={`${tabId}-tab`}
         id={`${tabId}-tab`}
         role="tab"
         onClick={this.handleTabClick}
@@ -66,5 +66,5 @@ class TabBar extends React.Component<TabBarProps> {
   }
 }
 
-const enhanced = withStyles(styles)(TabBar);
+const enhanced = withStyles(styles)(Tab);
 export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index 46427f3cd..f614cce4f 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -55,7 +55,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
   const tabs = React.Children.toArray(children).map(
     (child: React.ReactElement<any>, index: number) =>
       React.cloneElement(child, {
-        index,
+        tabId: child.props.tabId ? child.props.tabId : index,
         active:
           defaultActiveTab && !activeTab
             ? child.props.tabId === defaultActiveTab

From cc67f2f572f3eb3a096cd06d474aa4865b7a2819 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 09:00:38 -0300
Subject: [PATCH 27/53] Changes

---
 src/core/client/ui/components/Tabs/Tab.tsx       |  6 +++---
 .../client/ui/components/Tabs/TabBar.spec.tsx    | 16 ++++++++++++++++
 src/core/client/ui/components/Tabs/TabBar.tsx    |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/ui/components/Tabs/TabBar.spec.tsx

diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index a0b23c0aa..9afe73023 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ReactNode } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./Tab.css";
 
@@ -19,11 +19,11 @@ export interface TabProps {
   /**
    * Active status
    */
-  active: boolean;
+  active?: boolean;
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */
diff --git a/src/core/client/ui/components/Tabs/TabBar.spec.tsx b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
new file mode 100644
index 000000000..ef12f60d3
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+import TabBar from "./TabBar";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabId="one">One</Tab>
+      <Tab tabId="two">Two</Tab>
+      <Tab tabId="three">Three</Tab>
+    </TabBar>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index f614cce4f..88c77b95b 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -15,7 +15,7 @@ export interface TabBarProps {
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Active tab id/name
    */

From d04b9d818c2c1bb0b8a4b2d74f9895a2a762c57d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 09:20:50 -0300
Subject: [PATCH 28/53] Test added

---
 .../client/ui/components/Tabs/Tab.spec.tsx    |  9 +++++
 .../client/ui/components/Tabs/TabBar.spec.tsx | 18 +++++++++
 .../ui/components/Tabs/TabContent.spec.tsx    | 31 +++++++++++++++
 .../client/ui/components/Tabs/TabPane.css     |  0
 .../ui/components/Tabs/TabPane.spec.tsx       |  9 +++++
 .../Tabs/__snapshots__/Tab.spec.tsx.snap      | 13 +++++++
 .../Tabs/__snapshots__/TabBar.spec.tsx.snap   | 39 +++++++++++++++++++
 .../__snapshots__/TabContent.spec.tsx.snap    | 11 ++++++
 .../Tabs/__snapshots__/TabPane.spec.tsx.snap  | 11 ++++++
 9 files changed, 141 insertions(+)
 create mode 100644 src/core/client/ui/components/Tabs/Tab.spec.tsx
 create mode 100644 src/core/client/ui/components/Tabs/TabContent.spec.tsx
 delete mode 100644 src/core/client/ui/components/Tabs/TabPane.css
 create mode 100644 src/core/client/ui/components/Tabs/TabPane.spec.tsx
 create mode 100644 src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap

diff --git a/src/core/client/ui/components/Tabs/Tab.spec.tsx b/src/core/client/ui/components/Tabs/Tab.spec.tsx
new file mode 100644
index 000000000..3af6a904a
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Tab tabId="three">Three</Tab>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Tabs/TabBar.spec.tsx b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
index ef12f60d3..ffe91d4fd 100644
--- a/src/core/client/ui/components/Tabs/TabBar.spec.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
@@ -14,3 +14,21 @@ it("renders correctly", () => {
   );
   expect(renderer.toJSON()).toMatchSnapshot();
 });
+
+it("sets initial tab as active", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabId="one">One</Tab>
+      <Tab tabId="two">Two</Tab>
+      <Tab tabId="three">Three</Tab>
+    </TabBar>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabBar).props.activeTab).toBe("one");
+  const tabs = testInstance.findAllByType(Tab);
+  expect(tabs.length).toBe(3);
+  expect(tabs[0].props.active).toBe(true);
+  expect(tabs[1].props.active).toBe(false);
+  expect(tabs[2].props.active).toBe(false);
+});
diff --git a/src/core/client/ui/components/Tabs/TabContent.spec.tsx b/src/core/client/ui/components/Tabs/TabContent.spec.tsx
new file mode 100644
index 000000000..f411b53f5
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabContent.spec.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabContent from "./TabContent";
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("sets initial tab as active, renders only one", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabContent).props.activeTab).toBe("one");
+  const panes = testInstance.findAllByType(TabPane);
+  expect(panes.length).toBe(1);
+});
diff --git a/src/core/client/ui/components/Tabs/TabPane.css b/src/core/client/ui/components/Tabs/TabPane.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/core/client/ui/components/Tabs/TabPane.spec.tsx b/src/core/client/ui/components/Tabs/TabPane.spec.tsx
new file mode 100644
index 000000000..595e054de
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/TabPane.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<TabPane tabId="three">Three</TabPane>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
new file mode 100644
index 000000000..cd06a91e8
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<li
+  aria-controls="three"
+  className="Tab-root"
+  id="three-tab"
+  onClick={[Function]}
+  role="tab"
+>
+  Three
+</li>
+`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
new file mode 100644
index 000000000..1a4ec45de
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ul
+  className="TabBar-root TabBar-primary"
+  role="tablist"
+>
+  <li
+    aria-controls="one"
+    aria-selected={true}
+    className="Tab-root Tab-primary Tab-active"
+    id="one-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    One
+  </li>
+  <li
+    aria-controls="two"
+    aria-selected={false}
+    className="Tab-root Tab-primary"
+    id="two-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    Two
+  </li>
+  <li
+    aria-controls="three"
+    aria-selected={false}
+    className="Tab-root Tab-primary"
+    id="three-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    Three
+  </li>
+</ul>
+`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
new file mode 100644
index 000000000..0fb2810e0
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="one-tab"
+  id="one"
+  role="tabpanel"
+>
+  Hola One
+</section>
+`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
new file mode 100644
index 000000000..97032314c
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="three-tab"
+  id="three"
+  role="tabpanel"
+>
+  Three
+</section>
+`;

From b1e7c6d2d4d2b31248912d1c697d5b308af80dc8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 12 Sep 2018 17:05:31 +0200
Subject: [PATCH 29/53] Add edited marker

---
 .../__snapshots__/navigation.spec.tsx.snap    |   4 +-
 .../test/__snapshots__/signUp.spec.tsx.snap   |  64 +++---
 .../components/Comment/Comment.spec.tsx       |   1 +
 .../stream/components/Comment/Comment.tsx     |   7 +-
 .../components/Comment/EditedMarker.css       |   3 +
 .../components/Comment/EditedMarker.spec.tsx  |   9 +
 .../components/Comment/EditedMarker.tsx       |  16 ++
 .../stream/components/Comment/HTMLContent.tsx |  23 +-
 .../__snapshots__/Comment.spec.tsx.snap       |  13 +-
 .../__snapshots__/EditedMarker.spec.tsx.snap  |  17 ++
 .../client/stream/components/PoweredBy.tsx    |   6 +-
 .../__snapshots__/PoweredBy.spec.tsx.snap     |   2 +-
 .../containers/CommentContainer.spec.tsx      |   2 +
 .../stream/containers/CommentContainer.tsx    |   2 +
 .../CommentContainer.spec.tsx.snap            |   2 +
 .../stream/mutations/EditCommentMutation.ts   |   6 +
 .../__snapshots__/editComment.spec.tsx.snap   | 199 +++++++++++-------
 .../test/__snapshots__/loadMore.spec.tsx.snap |  80 ++++---
 .../__snapshots__/permalinkView.spec.tsx.snap |  32 +--
 ...permalinkViewCommentNotFound.spec.tsx.snap |  16 +-
 .../__snapshots__/postComment.spec.tsx.snap   | 134 +++++++-----
 .../__snapshots__/postReply.spec.tsx.snap     | 168 +++++++++------
 .../__snapshots__/renderReplies.spec.tsx.snap |  64 +++---
 .../__snapshots__/renderStream.spec.tsx.snap  |  32 +--
 .../showAllReplies.spec.tsx.snap              |  80 ++++---
 .../client/stream/test/editComment.spec.tsx   |   3 +
 src/core/client/stream/test/fixtures.ts       |   4 +
 .../client/stream/test/postComment.spec.tsx   |   1 +
 .../client/stream/test/postReply.spec.tsx     |   1 +
 .../__snapshots__/FormField.spec.tsx.snap     |   2 +-
 .../InputDescription/InputDescription.tsx     |   2 +-
 .../InputDescription.spec.tsx.snap            |   2 +-
 .../ui/components/Typography/Typography.css   |   4 +-
 .../ui/components/Typography/Typography.tsx   |   4 +-
 src/core/client/ui/shared/typography.css      |   2 +-
 src/locales/en-US/stream.ftl                  |   1 +
 36 files changed, 640 insertions(+), 368 deletions(-)
 create mode 100644 src/core/client/stream/components/Comment/EditedMarker.css
 create mode 100644 src/core/client/stream/components/Comment/EditedMarker.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/EditedMarker.tsx
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap

diff --git a/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap
index c3c5fe4ed..47693769e 100644
--- a/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap
@@ -216,7 +216,7 @@ exports[`navigates to sign up form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -239,7 +239,7 @@ exports[`navigates to sign up form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 6293da7d8..2450ce71f 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`accepts correct password 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -92,7 +92,7 @@ exports[`accepts correct password 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -237,7 +237,7 @@ exports[`accepts correct password confirmation 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -273,7 +273,7 @@ exports[`accepts correct password confirmation 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -418,7 +418,7 @@ exports[`accepts valid email 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -454,7 +454,7 @@ exports[`accepts valid email 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -612,7 +612,7 @@ exports[`accepts valid username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -635,7 +635,7 @@ exports[`accepts valid username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -793,7 +793,7 @@ exports[`checks for invalid characters in username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -829,7 +829,7 @@ exports[`checks for invalid characters in username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -987,7 +987,7 @@ exports[`checks for invalid email 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1023,7 +1023,7 @@ exports[`checks for invalid email 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1181,7 +1181,7 @@ exports[`checks for too long username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1217,7 +1217,7 @@ exports[`checks for too long username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1375,7 +1375,7 @@ exports[`checks for too short password 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1411,7 +1411,7 @@ exports[`checks for too short password 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1569,7 +1569,7 @@ exports[`checks for too short username 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1605,7 +1605,7 @@ exports[`checks for too short username 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1763,7 +1763,7 @@ exports[`checks for wrong password confirmation 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1799,7 +1799,7 @@ exports[`checks for wrong password confirmation 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -1944,7 +1944,7 @@ exports[`renders sign up form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -1967,7 +1967,7 @@ exports[`renders sign up form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2099,7 +2099,7 @@ exports[`shows error when submitting empty form 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2135,7 +2135,7 @@ exports[`shows error when submitting empty form 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2280,7 +2280,7 @@ exports[`shows server error 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2303,7 +2303,7 @@ exports[`shows server error 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2427,7 +2427,7 @@ exports[`shows server error 2`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2450,7 +2450,7 @@ exports[`shows server error 2`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2569,7 +2569,7 @@ exports[`submits form successfully 1`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2592,7 +2592,7 @@ exports[`submits form successfully 1`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
@@ -2711,7 +2711,7 @@ exports[`submits form successfully 2`] = `
           Username
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           A unique identifier displayed on your comments. You may use “_” and “.”
         </p>
@@ -2734,7 +2734,7 @@ exports[`submits form successfully 2`] = `
           Password
         </label>
         <p
-          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+          className="Typography-root Typography-detail Typography-colorTextSecondary"
         >
           Must be at least ⁨8⁩ characters
         </p>
diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx
index f8d14f6eb..d9c0a9acf 100644
--- a/src/core/client/stream/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/components/Comment/Comment.spec.tsx
@@ -14,6 +14,7 @@ it("renders username and body", () => {
     createdAt: "1995-12-17T03:24:00.000Z",
     topBarRight: "topBarRight",
     footer: "footer",
+    showEditedMarker: true,
   };
   const wrapper = shallow(<Comment {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 68fa6dab4..dcf77308e 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
 import { Flex } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
+import EditedMarker from "./EditedMarker";
 import HTMLContent from "./HTMLContent";
 import Timestamp from "./Timestamp";
 import TopBarLeft from "./TopBarLeft";
@@ -17,6 +18,7 @@ export interface CommentProps {
   createdAt: string;
   topBarRight?: React.ReactNode;
   footer?: React.ReactNode;
+  showEditedMarker?: boolean;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
@@ -32,7 +34,10 @@ const Comment: StatelessComponent<CommentProps> = props => {
             props.author.username && (
               <Username>{props.author.username}</Username>
             )}
-          <Timestamp>{props.createdAt}</Timestamp>
+          <Flex direction="row" alignItems="baseline" itemGutter>
+            <Timestamp>{props.createdAt}</Timestamp>
+            {props.showEditedMarker && <EditedMarker />}
+          </Flex>
         </TopBarLeft>
         {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
diff --git a/src/core/client/stream/components/Comment/EditedMarker.css b/src/core/client/stream/components/Comment/EditedMarker.css
new file mode 100644
index 000000000..147c8656f
--- /dev/null
+++ b/src/core/client/stream/components/Comment/EditedMarker.css
@@ -0,0 +1,3 @@
+.root {
+  composes: detail from "talk-ui/shared/typography.css";
+}
diff --git a/src/core/client/stream/components/Comment/EditedMarker.spec.tsx b/src/core/client/stream/components/Comment/EditedMarker.spec.tsx
new file mode 100644
index 000000000..4017b77d1
--- /dev/null
+++ b/src/core/client/stream/components/Comment/EditedMarker.spec.tsx
@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import EditedMarker from "./EditedMarker";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<EditedMarker />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/EditedMarker.tsx b/src/core/client/stream/components/Comment/EditedMarker.tsx
new file mode 100644
index 000000000..a07d0f7f2
--- /dev/null
+++ b/src/core/client/stream/components/Comment/EditedMarker.tsx
@@ -0,0 +1,16 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import styles from "./EditedMarker.css";
+
+const EditedMarker: StatelessComponent = () => (
+  <div className={styles.root}>
+    (
+    <Localized id="comments-editedMarker-edited">
+      <span>Edited</span>
+    </Localized>
+    )
+  </div>
+);
+
+export default EditedMarker;
diff --git a/src/core/client/stream/components/Comment/HTMLContent.tsx b/src/core/client/stream/components/Comment/HTMLContent.tsx
index b9d61c945..62bd62b78 100644
--- a/src/core/client/stream/components/Comment/HTMLContent.tsx
+++ b/src/core/client/stream/components/Comment/HTMLContent.tsx
@@ -1,22 +1,17 @@
-import React from "react";
-
 import dompurify from "dompurify";
+import React, { StatelessComponent } from "react";
+
 import styles from "./HTMLContent.css";
 
-interface ContentProps {
+interface HTMLContentProps {
   children: string;
 }
 
-class HTMLContent extends React.Component<ContentProps> {
-  public render() {
-    const { children } = this.props;
-    return (
-      <div
-        className={styles.root}
-        dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
-      />
-    );
-  }
-}
+const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
+  <div
+    className={styles.root}
+    dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
+  />
+);
 
 export default HTMLContent;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index 7d13e23ea..64419b0fa 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -14,9 +14,16 @@ exports[`renders username and body 1`] = `
       <Username>
         Marvin
       </Username>
-      <Timestamp>
-        1995-12-17T03:24:00.000Z
-      </Timestamp>
+      <withPropsOnChange(Flex)
+        alignItems="baseline"
+        direction="row"
+        itemGutter={true}
+      >
+        <Timestamp>
+          1995-12-17T03:24:00.000Z
+        </Timestamp>
+        <EditedMarker />
+      </withPropsOnChange(Flex)>
     </TopBarLeft>
     <div>
       topBarRight
diff --git a/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
new file mode 100644
index 000000000..8b957f989
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="EditedMarker-root"
+>
+  (
+  <Localized
+    id="comments-editedMarker-edited"
+  >
+    <span>
+      Edited
+    </span>
+  </Localized>
+  )
+</div>
+`;
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
index 2f1c036eb..b1ca618c4 100644
--- a/src/core/client/stream/components/PoweredBy.tsx
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -14,11 +14,7 @@ const PoweredBy: StatelessComponent<Props> = props => {
         id="comments-poweredBy"
         logo={<Typography variant="heading4" container="span" />}
       >
-        <Typography
-          variant="inputDescription"
-          container="span"
-          color="textSecondary"
-        >
+        <Typography variant="detail" container="span" color="textSecondary">
           {"Powered by <logo>The Coral Project</logo>"}
         </Typography>
       </Localized>
diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
index 14ae7599d..fdee2029d 100644
--- a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
     <withPropsOnChange(Typography)
       color="textSecondary"
       container="span"
-      variant="inputDescription"
+      variant="detail"
     >
       Powered by &lt;logo&gt;The Coral Project&lt;/logo&gt;
     </withPropsOnChange(Typography)>
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 7ca1da6e6..304ce4e9c 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -24,6 +24,7 @@ it("renders username and body", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
+        edited: false,
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
       pending: false,
@@ -50,6 +51,7 @@ it("renders body only", () => {
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
+        edited: false,
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
       pending: false,
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 13797018c..fe6747d2b 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -113,6 +113,7 @@ export class CommentContainer extends Component<InnerProps, State> {
           body={comment.body}
           createdAt={comment.createdAt}
           blur={comment.pending || false}
+          showEditedMarker={comment.editing.edited}
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
@@ -173,6 +174,7 @@ const enhanced = withShowAuthPopupMutation(
         body
         createdAt
         editing {
+          edited
           editableUntil
         }
         pending
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index c58185c5b..835692858 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -24,6 +24,7 @@ exports[`renders body only 1`] = `
       </React.Fragment>
     }
     indentLevel={1}
+    showEditedMarker={false}
   />
 </React.Fragment>
 `;
@@ -52,6 +53,7 @@ exports[`renders username and body 1`] = `
       </React.Fragment>
     }
     indentLevel={1}
+    showEditedMarker={false}
   />
 </React.Fragment>
 `;
diff --git a/src/core/client/stream/mutations/EditCommentMutation.ts b/src/core/client/stream/mutations/EditCommentMutation.ts
index a3d456ed2..3eee01303 100644
--- a/src/core/client/stream/mutations/EditCommentMutation.ts
+++ b/src/core/client/stream/mutations/EditCommentMutation.ts
@@ -19,6 +19,9 @@ const mutation = graphql`
     editComment(input: $input) {
       comment {
         body
+        editing {
+          edited
+        }
       }
       clientMutationId
     }
@@ -40,6 +43,9 @@ function commit(environment: Environment, input: EditCommentInput) {
       editComment: {
         id: input.commentID,
         body: input.body,
+        editing: {
+          edited: true,
+        },
         clientMutationId: (clientMutationId++).toString(),
       },
     } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
index 32b7681fa..ed29c75d0 100644
--- a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
@@ -151,7 +151,7 @@ exports[`cancel edit: edit canceled 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -205,13 +205,17 @@ exports[`cancel edit: edit canceled 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -282,13 +286,17 @@ exports[`cancel edit: edit canceled 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -478,7 +486,7 @@ exports[`edit a comment: edit form 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -697,13 +705,17 @@ exports[`edit a comment: edit form 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -893,7 +905,7 @@ exports[`edit a comment: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1112,13 +1124,17 @@ exports[`edit a comment: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1308,7 +1324,7 @@ exports[`edit a comment: render stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1362,13 +1378,17 @@ exports[`edit a comment: render stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -1439,13 +1459,17 @@ exports[`edit a comment: render stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1635,7 +1659,7 @@ exports[`edit a comment: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1689,13 +1713,26 @@ exports[`edit a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                  <div
+                    className="EditedMarker-root"
+                  >
+                    (
+                    <span>
+                      Edited
+                    </span>
+                    )
+                  </div>
+                </div>
               </div>
               <div>
                 <button
@@ -1766,13 +1803,17 @@ exports[`edit a comment: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1962,7 +2003,7 @@ exports[`shows expiry message: edit form closed 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -2016,13 +2057,17 @@ exports[`shows expiry message: edit form closed 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -2093,13 +2138,17 @@ exports[`shows expiry message: edit form closed 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -2289,7 +2338,7 @@ exports[`shows expiry message: edit time expired 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -2485,13 +2534,17 @@ exports[`shows expiry message: edit time expired 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 2d039a849..84c4e89de 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -166,13 +166,17 @@ exports[`loads more comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`loads more comments 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -288,13 +296,17 @@ exports[`loads more comments 1`] = `
                 >
                   Isabelle
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:14:00.000Z"
-                  title="2018-07-06T18:14:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:14:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:14:00.000Z"
+                    title="2018-07-06T18:14:00.000Z"
+                  >
+                    2018-07-06T18:14:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -499,13 +511,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -560,13 +576,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index a3598699e..2c4a7ed98 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -41,13 +41,17 @@ exports[`renders permalink view 1`] = `
             >
               Markus
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <div
+              className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              <time
+                className="Timestamp-root RelativeTime-root"
+                dateTime="2018-07-06T18:24:00.000Z"
+                title="2018-07-06T18:24:00.000Z"
+              >
+                2018-07-06T18:24:00.000Z
+              </time>
+            </div>
           </div>
         </div>
         <div
@@ -250,13 +254,17 @@ exports[`show all comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index e4ccc295a..e9e7cff3c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -198,13 +198,17 @@ exports[`show all comments 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 4ccf8d58d..28eab8f9c 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -145,7 +145,7 @@ exports[`post a comment: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -199,13 +199,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
               <div>
                 <button
@@ -276,13 +280,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -337,13 +345,17 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -533,7 +545,7 @@ exports[`post a comment: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -587,13 +599,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -648,13 +664,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -709,13 +729,17 @@ exports[`post a comment: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -905,7 +929,7 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -959,13 +983,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1020,13 +1048,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index b19964019..b7546e97c 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -151,7 +151,7 @@ exports[`post a reply: open reply form 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -205,13 +205,17 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -393,13 +397,17 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -589,7 +597,7 @@ exports[`post a reply: optimistic response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -643,13 +651,17 @@ exports[`post a reply: optimistic response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -826,13 +838,17 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
                 <div>
                   <button
@@ -904,13 +920,17 @@ exports[`post a reply: optimistic response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1100,7 +1120,7 @@ exports[`post a reply: server response 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1154,13 +1174,17 @@ exports[`post a reply: server response 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1216,13 +1240,17 @@ exports[`post a reply: server response 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -1278,13 +1306,17 @@ exports[`post a reply: server response 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1474,7 +1506,7 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-poweredBy"
             >
               <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+                className="Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Powered by 
                 <span
@@ -1528,13 +1560,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -1589,13 +1625,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 68830fcce..1b2669c4e 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -289,13 +297,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Markus
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:24:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -346,13 +358,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index c967faf70..e4baedf5f 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Lukas
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:20:00.000Z"
+                    title="2018-07-06T18:20:00.000Z"
+                  >
+                    2018-07-06T18:20:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index caf62a93a..4353d3187 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -228,13 +232,17 @@ exports[`renders comment stream 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -460,13 +468,17 @@ exports[`show all replies 1`] = `
                 >
                   Markus
                 </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
+                <div
+                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                 >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <time
+                    className="Timestamp-root RelativeTime-root"
+                    dateTime="2018-07-06T18:24:00.000Z"
+                    title="2018-07-06T18:24:00.000Z"
+                  >
+                    2018-07-06T18:24:00.000Z
+                  </time>
+                </div>
               </div>
             </div>
             <div
@@ -522,13 +534,17 @@ exports[`show all replies 1`] = `
                   >
                     Lukas
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:20:00.000Z"
-                    title="2018-07-06T18:20:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:20:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:20:00.000Z"
+                      title="2018-07-06T18:20:00.000Z"
+                    >
+                      2018-07-06T18:20:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
@@ -579,13 +595,17 @@ exports[`show all replies 1`] = `
                   >
                     Isabelle
                   </span>
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:14:00.000Z"
-                    title="2018-07-06T18:14:00.000Z"
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    2018-07-06T18:14:00.000Z
-                  </time>
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:14:00.000Z"
+                      title="2018-07-06T18:14:00.000Z"
+                    >
+                      2018-07-06T18:14:00.000Z
+                    </time>
+                  </div>
                 </div>
               </div>
               <div
diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
index d68a890f1..d141201ea 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -36,6 +36,9 @@ function createTestRenderer() {
               comment: {
                 id: assets[0].comments.edges[0].node.id,
                 body: "Edited! (from server)",
+                editing: {
+                  edited: true,
+                },
               },
               clientMutationId: "0",
             })
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index 121ffa036..ec219fb67 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -21,6 +21,7 @@ export const comments = [
     createdAt: "2018-07-06T18:24:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:24:30.000Z",
     },
   },
@@ -31,6 +32,7 @@ export const comments = [
     createdAt: "2018-07-06T18:20:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:20:30.000Z",
     },
   },
@@ -41,6 +43,7 @@ export const comments = [
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
     editing: {
+      edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
     },
   },
@@ -78,6 +81,7 @@ export const commentWithReplies = {
     },
   },
   editing: {
+    edited: false,
     editableUntil: "2018-07-06T18:24:30.000Z",
   },
 };
diff --git a/src/core/client/stream/test/postComment.spec.tsx b/src/core/client/stream/test/postComment.spec.tsx
index 1d5de1157..2a63090ed 100644
--- a/src/core/client/stream/test/postComment.spec.tsx
+++ b/src/core/client/stream/test/postComment.spec.tsx
@@ -42,6 +42,7 @@ beforeEach(() => {
                   body: "<strong>Hello world! (from server)</strong>",
                   createdAt: "2018-07-06T18:24:00.000Z",
                   editing: {
+                    edited: false,
                     editableUntil: "2018-07-06T18:24:30.000Z",
                   },
                 },
diff --git a/src/core/client/stream/test/postReply.spec.tsx b/src/core/client/stream/test/postReply.spec.tsx
index 27a91b267..e8d43bdc5 100644
--- a/src/core/client/stream/test/postReply.spec.tsx
+++ b/src/core/client/stream/test/postReply.spec.tsx
@@ -46,6 +46,7 @@ beforeEach(() => {
                     pageInfo: { endCursor: null, hasNextPage: false },
                   },
                   editing: {
+                    edited: false,
                     editableUntil: "2018-07-06T18:24:30.000Z",
                   },
                 },
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index 874adc015..011020568 100644
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`works with multiple form components 1`] = `
     Username
   </label>
   <p
-    className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+    className="Typography-root Typography-detail Typography-colorTextSecondary"
   >
     A unique identifier displayed on your comments. You may use “_” and “.”
   </p>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx
index d36d5fe7a..ae84ed141 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.tsx
+++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx
@@ -11,7 +11,7 @@ const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
   const { className, children, ...rest } = props;
   return (
     <Typography
-      variant="inputDescription"
+      variant="detail"
       color="textSecondary"
       className={className}
       {...rest}
diff --git a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
index 90078c59e..eb7d1a539 100644
--- a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
+++ b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <p
-  className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+  className="Typography-root Typography-detail Typography-colorTextSecondary"
 >
   Form Components should go here
 </p>
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index a2bd115fe..be3e0954e 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -40,8 +40,8 @@
   composes: inputLabel from "talk-ui/shared/typography.css";
 }
 
-.inputDescription {
-  composes: inputDescription from "talk-ui/shared/typography.css";
+.detail {
+  composes: detail from "talk-ui/shared/typography.css";
 }
 
 .timestamp {
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 2c4a20d94..b8f6d2396 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -15,7 +15,7 @@ type Variant =
   | "bodyCopy"
   | "bodyCopyBold"
   | "inputLabel"
-  | "inputDescription"
+  | "detail"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -146,7 +146,7 @@ Typography.defaultProps = {
     bodyCopyBold: "p",
     timestamp: "span",
     inputLabel: "label",
-    inputDescription: "p",
+    detail: "p",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index cb785f8fc..3012a3617 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -155,7 +155,7 @@
   color: var(--palette-text-primary);
 }
 
-.inputDescription {
+.detail {
   font-size: calc(14rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
   font-family: var(--font-family-sans-serif);
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 683ea792e..d939806a7 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -65,3 +65,4 @@ comments-editCommentForm-rte =
   .placeholder = { comments-editCommentForm-rteLabel }
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
+comments-editedMarker-edited = Edited

From 2292e5d53f1ba6da890190e3e2cbfb5923a53989 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 12 Sep 2018 17:07:36 +0200
Subject: [PATCH 30/53] Fix integration test

---
 src/core/client/stream/test/editComment.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
index d141201ea..de22f2384 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -25,7 +25,6 @@ function createTestRenderer() {
           s
             .withArgs(undefined, {
               input: {
-                assetID: assets[0].id,
                 commentID: assets[0].comments.edges[0].node.id,
                 body: "Edited!",
                 clientMutationId: "0",

From 8b09b52be8ee7204aac20997b7cc611c683d2b59 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Wed, 12 Sep 2018 18:04:54 +0200
Subject: [PATCH 31/53] [next] Start a clean session when user logs in / out
 (#1853)

* Clear user session after login / logout

* Filename cases

* Improve type checking

* Apply suggestions
---
 src/core/client/auth/index.tsx                |  20 +-
 src/core/client/auth/test/create.tsx          |   5 +-
 src/core/client/framework/helpers/getMe.ts    |   7 +-
 .../framework/lib/bootstrap/TalkContext.tsx   |   7 +
 .../framework/lib/bootstrap/createContext.tsx | 147 ----------
 .../framework/lib/bootstrap/createManaged.tsx | 252 ++++++++++++++++++
 .../client/framework/lib/bootstrap/index.ts   |   8 +-
 .../lib/relay/commitLocalUpdatePromisified.ts |  18 ++
 src/core/client/framework/lib/relay/index.ts  |   3 +
 .../mutations/SetAuthTokenMutation.spec.ts    |  32 ++-
 .../mutations/SetAuthTokenMutation.ts         |  28 +-
 src/core/client/stream/index.tsx              |  44 ++-
 .../listeners/OnPostMessageAuthError.tsx      |  28 ++
 ....ts => OnPostMessageSetAuthToken.spec.tsx} |  17 +-
 .../listeners/OnPostMessageSetAuthToken.ts    |  31 +++
 ...tID.spec.ts => OnPymSetCommentID.spec.tsx} |  16 +-
 .../stream/listeners/OnPymSetCommentID.ts     |  39 +++
 src/core/client/stream/listeners/index.ts     |   8 +-
 .../listeners/onPostMessageAuthError.ts       |  11 -
 .../listeners/onPostMessageSetAuthToken.ts    |  11 -
 .../stream/listeners/onPymSetCommentID.ts     |  19 --
 .../__snapshots__/initLocalState.spec.ts.snap |   1 -
 .../client/stream/local/initLocalState.ts     |   3 -
 src/core/client/stream/local/local.graphql    |   4 -
 .../stream/queries/PermalinkViewQuery.tsx     |  15 +-
 .../client/stream/queries/StreamQuery.tsx     |  11 +-
 src/core/client/stream/test/create.tsx        |   5 +-
 .../client/stream/test/postComment.spec.tsx   |  10 +-
 .../client/stream/test/postReply.spec.tsx     |  10 +-
 .../server/graph/tenant/schema/schema.graphql |   6 +-
 30 files changed, 485 insertions(+), 331 deletions(-)
 delete mode 100644 src/core/client/framework/lib/bootstrap/createContext.tsx
 create mode 100644 src/core/client/framework/lib/bootstrap/createManaged.tsx
 create mode 100644 src/core/client/framework/lib/relay/commitLocalUpdatePromisified.ts
 create mode 100644 src/core/client/stream/listeners/OnPostMessageAuthError.tsx
 rename src/core/client/stream/listeners/{onPostMessageSetAuthToken.spec.ts => OnPostMessageSetAuthToken.spec.tsx} (57%)
 create mode 100644 src/core/client/stream/listeners/OnPostMessageSetAuthToken.ts
 rename src/core/client/stream/listeners/{onPymSetCommentID.spec.ts => OnPymSetCommentID.spec.tsx} (77%)
 create mode 100644 src/core/client/stream/listeners/OnPymSetCommentID.ts
 delete mode 100644 src/core/client/stream/listeners/onPostMessageAuthError.ts
 delete mode 100644 src/core/client/stream/listeners/onPostMessageSetAuthToken.ts
 delete mode 100644 src/core/client/stream/listeners/onPymSetCommentID.ts

diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index b30487719..d6057f5a3 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -2,11 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";
 
-import {
-  createContext,
-  TalkContext,
-  TalkContextProvider,
-} from "talk-framework/lib/bootstrap";
+import { createManaged } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
 import resizePopup from "./dom/resizePopup";
@@ -32,23 +28,17 @@ function pollPopupHeight(interval: number = 100) {
   }, interval);
 }
 
-// This is called when the context is first initialized.
-async function init({ relayEnvironment }: TalkContext) {
-  await initLocalState(relayEnvironment);
-}
-
 async function main() {
-  // Bootstrap our context.
-  const context = await createContext({
-    init,
+  const ManagedTalkContextProvider = await createManaged({
+    initLocalState,
     localesData,
     userLocales: navigator.languages,
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider value={context}>
+    <ManagedTalkContextProvider>
       <AppContainer />
-    </TalkContextProvider>
+    </ManagedTalkContextProvider>
   );
 
   ReactDOM.render(<Index />, document.getElementById("app"));
diff --git a/src/core/client/auth/test/create.tsx b/src/core/client/auth/test/create.tsx
index a0b9d9da9..fc03cd354 100644
--- a/src/core/client/auth/test/create.tsx
+++ b/src/core/client/auth/test/create.tsx
@@ -1,4 +1,6 @@
+import { EventEmitter2 } from "eventemitter2";
 import { IResolvers } from "graphql-tools";
+import { noop } from "lodash";
 import React from "react";
 import TestRenderer from "react-test-renderer";
 import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
@@ -29,7 +31,6 @@ export default function create(params: CreateParams) {
     logNetwork: params.logNetwork,
     resolvers: params.resolvers,
     initLocalState: (localRecord, source, env) => {
-      localRecord.setValue(0, "authRevision");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, env);
       }
@@ -45,6 +46,8 @@ export default function create(params: CreateParams) {
     postMessage: new PostMessageService(),
     browserInfo: { ios: false },
     uuidGenerator: createUUIDGenerator(),
+    eventEmitter: new EventEmitter2({ wildcard: true, maxListeners: 20 }),
+    clearSession: noop,
   };
 
   const testRenderer = TestRenderer.create(
diff --git a/src/core/client/framework/helpers/getMe.ts b/src/core/client/framework/helpers/getMe.ts
index fb5bafcf9..d989b5be2 100644
--- a/src/core/client/framework/helpers/getMe.ts
+++ b/src/core/client/framework/helpers/getMe.ts
@@ -3,12 +3,9 @@ import { Environment, ROOT_ID } from "relay-runtime";
 export default function getMe(environment: Environment) {
   const source = environment.getStore().getSource();
   const root = source.get(ROOT_ID)!;
-  const meKey = Object.keys(root)
-    .reverse()
-    .find(s => s.startsWith("me("))!;
-  if (!root[meKey]) {
+  if (!root.me) {
     return null;
   }
-  const meID = root[meKey].__ref;
+  const meID = root.me.__ref;
   return source.get(meID)!;
 }
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index d855a884e..ece409674 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,3 +1,4 @@
+import { EventEmitter2 } from "eventemitter2";
 import { LocalizationProvider } from "fluent-react/compat";
 import { FluentBundle } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
@@ -52,6 +53,12 @@ export interface TalkContext {
 
   /** Generates uuids. */
   uuidGenerator: () => string;
+
+  /** A event emitter */
+  eventEmitter: EventEmitter2;
+
+  /** Clear session data. */
+  clearSession: () => void;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
deleted file mode 100644
index 839cee453..000000000
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { EventEmitter2 } from "eventemitter2";
-import { Localized } from "fluent-react/compat";
-import { noop } from "lodash";
-import { Child as PymChild } from "pym.js";
-import React from "react";
-import { Formatter } from "react-timeago";
-import { Environment, Network, RecordSource, Store } from "relay-runtime";
-import uuid from "uuid/v4";
-
-import { getBrowserInfo } from "talk-framework/lib/browserInfo";
-import { LOCAL_ID } from "talk-framework/lib/relay";
-import {
-  createLocalStorage,
-  createPromisifiedStorage,
-  createPymStorage,
-  createSessionStorage,
-} from "talk-framework/lib/storage";
-
-import { RestClient } from "talk-framework/lib/rest";
-import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
-
-import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
-import { createFetch, TokenGetter } from "../network";
-import { PostMessageService } from "../postMessage";
-import { TalkContext } from "./TalkContext";
-
-interface CreateContextArguments {
-  /** Locales that the user accepts, usually `navigator.languages`. */
-  userLocales: ReadonlyArray<string>;
-
-  /** Locales data that is returned by our `locales-loader`. */
-  localesData: LocalesData;
-
-  /** Init will be called after the context has been created. */
-  init?: ((context: TalkContext) => void | Promise<void>);
-
-  /** A pym child that interacts with the pym parent. */
-  pym?: PymChild;
-
-  /** Supports emitting and listening to events. */
-  eventEmitter?: EventEmitter2;
-}
-
-/**
- * timeagoFormatter integrates timeago into our translation
- * framework. It gets injected into the UIContext.
- */
-export const timeagoFormatter: Formatter = (value, unit, suffix) => {
-  // We use 'in' instead of 'from now' for language consistency
-  const ourSuffix = suffix === "from now" ? "in" : suffix;
-  return (
-    <Localized
-      id="framework-timeago"
-      $value={value}
-      $unit={unit}
-      $suffix={ourSuffix}
-    >
-      <span>now</span>
-    </Localized>
-  );
-};
-
-function areWeInIframe() {
-  try {
-    return window.self !== window.top;
-  } catch (e) {
-    return true;
-  }
-}
-
-/**
- * `createContext` manages the dependencies of our framework
- * and returns a `TalkContext` that can be passed to the
- * `TalkContextProvider`.
- */
-export default async function createContext({
-  init = noop,
-  userLocales,
-  localesData,
-  pym,
-  eventEmitter = new EventEmitter2({ wildcard: true }),
-}: CreateContextArguments): Promise<TalkContext> {
-  const inIframe = areWeInIframe();
-  // Initialize Relay.
-  const source = new RecordSource();
-  const tokenGetter: TokenGetter = () => {
-    const localState = source.get(LOCAL_ID);
-    if (localState) {
-      return localState.authToken || "";
-    }
-    return "";
-  };
-  const relayEnvironment = new Environment({
-    network: Network.create(createFetch(tokenGetter)),
-    store: new Store(source),
-  });
-
-  // Listen for outside clicks.
-  let registerClickFarAway: ClickFarAwayRegister | undefined;
-  if (pym) {
-    registerClickFarAway = cb => {
-      pym.onMessage("click", cb);
-      // Return unlisten callback.
-      return () => {
-        const index = pym.messageHandlers.click.indexOf(cb);
-        if (index > -1) {
-          pym.messageHandlers.click.splice(index, 1);
-        }
-      };
-    };
-  }
-
-  // Initialize i18n.
-  const locales = negotiateLanguages(userLocales, localesData);
-
-  if (process.env.NODE_ENV !== "production") {
-    // tslint:disable:next-line: no-console
-    console.log(`Negotiated locales ${JSON.stringify(locales)}`);
-  }
-
-  const localeBundles = await generateBundles(locales, localesData);
-
-  // Assemble context.
-  const context = {
-    relayEnvironment,
-    localeBundles,
-    timeagoFormatter,
-    pym,
-    eventEmitter,
-    registerClickFarAway,
-    rest: new RestClient("/api", tokenGetter),
-    postMessage: new PostMessageService(),
-    localStorage:
-      (pym && inIframe && createPymStorage(pym, "localStorage")) ||
-      createPromisifiedStorage(createLocalStorage()),
-    sessionStorage:
-      (pym && inIframe && createPymStorage(pym, "sessionStorage")) ||
-      createPromisifiedStorage(createSessionStorage()),
-    browserInfo: getBrowserInfo(),
-    uuidGenerator: uuid,
-  };
-
-  // Run custom initializations.
-  await init(context);
-
-  return context;
-}
diff --git a/src/core/client/framework/lib/bootstrap/createManaged.tsx b/src/core/client/framework/lib/bootstrap/createManaged.tsx
new file mode 100644
index 000000000..f2d86e7c8
--- /dev/null
+++ b/src/core/client/framework/lib/bootstrap/createManaged.tsx
@@ -0,0 +1,252 @@
+import { EventEmitter2 } from "eventemitter2";
+import { Localized } from "fluent-react/compat";
+import { noop } from "lodash";
+import { Child as PymChild } from "pym.js";
+import React, { Component, ComponentType } from "react";
+import { Formatter } from "react-timeago";
+import { Environment, Network, RecordSource, Store } from "relay-runtime";
+import uuid from "uuid/v4";
+
+import { getBrowserInfo } from "talk-framework/lib/browserInfo";
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import {
+  createLocalStorage,
+  createPromisifiedStorage,
+  createPymStorage,
+  createSessionStorage,
+  PromisifiedStorage,
+} from "talk-framework/lib/storage";
+
+import { RestClient } from "talk-framework/lib/rest";
+import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
+
+import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
+import { createFetch, TokenGetter } from "../network";
+import { PostMessageService } from "../postMessage";
+import { TalkContext, TalkContextProvider } from "./TalkContext";
+
+export type InitLocalState = ((
+  environment: Environment,
+  context: TalkContext
+) => void | Promise<void>);
+
+interface CreateContextArguments {
+  /** Locales that the user accepts, usually `navigator.languages`. */
+  userLocales: ReadonlyArray<string>;
+
+  /** Locales data that is returned by our `locales-loader`. */
+  localesData: LocalesData;
+
+  /** Init will be called after the context has been created. */
+  initLocalState?: InitLocalState;
+
+  /** A pym child that interacts with the pym parent. */
+  pym?: PymChild;
+
+  /** Supports emitting and listening to events. */
+  eventEmitter?: EventEmitter2;
+}
+
+/**
+ * timeagoFormatter integrates timeago into our translation
+ * framework. It gets injected into the UIContext.
+ */
+export const timeagoFormatter: Formatter = (value, unit, suffix) => {
+  // We use 'in' instead of 'from now' for language consistency
+  const ourSuffix = suffix === "from now" ? "in" : suffix;
+  return (
+    <Localized
+      id="framework-timeago"
+      $value={value}
+      $unit={unit}
+      $suffix={ourSuffix}
+    >
+      <span>now</span>
+    </Localized>
+  );
+};
+
+/**
+ * Returns true if we are in an iframe.
+ */
+function areWeInIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
+function createRelayEnvironment() {
+  // Initialize Relay.
+  const source = new RecordSource();
+  const tokenGetter: TokenGetter = () => {
+    const localState = source.get(LOCAL_ID);
+    if (localState) {
+      return localState.authToken || "";
+    }
+    return "";
+  };
+  const environment = new Environment({
+    network: Network.create(createFetch(tokenGetter)),
+    store: new Store(source),
+  });
+  return { environment, tokenGetter };
+}
+
+function createRestAPI(tokenGetter: (() => string)) {
+  return new RestClient("/api", tokenGetter);
+}
+
+/**
+ * Returns a managed TalkContextProvider, that includes given context
+ * and handles context changes, e.g. when a user session changes.
+ */
+function createMangedTalkContextProvider(
+  context: TalkContext,
+  initLocalState: InitLocalState
+) {
+  const ManagedTalkContextProvider = class extends Component<
+    {},
+    { context: TalkContext }
+  > {
+    constructor(props: {}) {
+      super(props);
+      this.state = {
+        context: {
+          ...context,
+          clearSession: this.clearSession,
+        },
+      };
+    }
+
+    // This is called every time a user session starts or ends.
+    private clearSession = async () => {
+      // Clear session storage.
+      this.state.context.sessionStorage.clear();
+
+      // Create a new context with a new Relay Environment.
+      const {
+        environment: newEnvironment,
+        tokenGetter: newTokenGetter,
+      } = createRelayEnvironment();
+
+      const newContext = {
+        ...this.state.context,
+        relayEnvironment: newEnvironment,
+        rest: createRestAPI(newTokenGetter),
+      };
+
+      // Initialize local state.
+      await initLocalState(newContext.relayEnvironment, newContext);
+
+      // Propagate new context.
+      this.setState({
+        context: newContext,
+      });
+    };
+
+    public render() {
+      return (
+        <TalkContextProvider value={this.state.context}>
+          {this.props.children}
+        </TalkContextProvider>
+      );
+    }
+  };
+
+  return ManagedTalkContextProvider;
+}
+
+/**
+ * resolveLocalStorage decides which local storage to use in the context
+ */
+function resolveLocalStorage(pym?: PymChild): PromisifiedStorage {
+  if (pym && areWeInIframe()) {
+    // Use local storage over pym when we have pym and are in an iframe.
+    return createPymStorage(pym, "localStorage");
+  }
+  // Use promisified, prefixed local storage.
+  return createPromisifiedStorage(createLocalStorage());
+}
+
+/**
+ * resolveSessionStorage decides which session storage to use in the context
+ */
+function resolveSessionStorage(pym?: PymChild): PromisifiedStorage {
+  if (pym && areWeInIframe()) {
+    // Use session storage over pym when we have pym and are in an iframe.
+    return createPymStorage(pym, "sessionStorage");
+  }
+  // Use promisified, prefixed session storage.
+  return createPromisifiedStorage(createSessionStorage());
+}
+
+/**
+ * `createManaged` establishes the dependencies of our framework
+ * and returns a `ManagedTalkContextProvider` that provides the context
+ * to the rest of the application.
+ */
+export default async function createManaged({
+  initLocalState = noop,
+  userLocales,
+  localesData,
+  pym,
+  eventEmitter = new EventEmitter2({ wildcard: true, maxListeners: 20 }),
+}: CreateContextArguments): Promise<ComponentType> {
+  // Listen for outside clicks.
+  let registerClickFarAway: ClickFarAwayRegister | undefined;
+  if (pym) {
+    registerClickFarAway = cb => {
+      pym.onMessage("click", cb);
+      // Return unlisten callback.
+      return () => {
+        const index = pym.messageHandlers.click.indexOf(cb);
+        if (index > -1) {
+          pym.messageHandlers.click.splice(index, 1);
+        }
+      };
+    };
+  }
+
+  // Initialize i18n.
+  const locales = negotiateLanguages(userLocales, localesData);
+
+  if (process.env.NODE_ENV !== "production") {
+    // tslint:disable:next-line: no-console
+    console.log(`Negotiated locales ${JSON.stringify(locales)}`);
+  }
+
+  const localeBundles = await generateBundles(locales, localesData);
+
+  const localStorage = resolveLocalStorage(pym);
+  const sessionStorage = resolveSessionStorage(pym);
+
+  const { environment, tokenGetter } = createRelayEnvironment();
+
+  // Assemble context.
+  const context: TalkContext = {
+    relayEnvironment: environment,
+    localeBundles,
+    timeagoFormatter,
+    pym,
+    eventEmitter,
+    registerClickFarAway,
+    rest: createRestAPI(tokenGetter),
+    postMessage: new PostMessageService(),
+    localStorage,
+    sessionStorage,
+    browserInfo: getBrowserInfo(),
+    uuidGenerator: uuid,
+    // Noop, this is later replaced by the
+    // managed TalkContextProvider.
+    clearSession: noop,
+  };
+
+  // Initialize local state.
+  await initLocalState(context.relayEnvironment, context);
+
+  // Returns a managed TalkContextProvider, that includes the above
+  // context and handles context changes, e.g. when a user session changes.
+  return createMangedTalkContextProvider(context, initLocalState);
+}
diff --git a/src/core/client/framework/lib/bootstrap/index.ts b/src/core/client/framework/lib/bootstrap/index.ts
index a6bd57eaa..0ef2ee79b 100644
--- a/src/core/client/framework/lib/bootstrap/index.ts
+++ b/src/core/client/framework/lib/bootstrap/index.ts
@@ -1,3 +1,7 @@
-export * from "./TalkContext";
-export { default as createContext } from "./createContext";
+export {
+  TalkContext,
+  TalkContextConsumer,
+  TalkContextProvider,
+} from "./TalkContext";
+export { default as createManaged } from "./createManaged";
 export { default as withContext } from "./withContext";
diff --git a/src/core/client/framework/lib/relay/commitLocalUpdatePromisified.ts b/src/core/client/framework/lib/relay/commitLocalUpdatePromisified.ts
new file mode 100644
index 000000000..92d341cef
--- /dev/null
+++ b/src/core/client/framework/lib/relay/commitLocalUpdatePromisified.ts
@@ -0,0 +1,18 @@
+import {
+  commitLocalUpdate,
+  Environment,
+  RecordSourceProxy,
+} from "relay-runtime";
+
+export default function commitLocalUpdatePromisified(
+  environment: Environment,
+  updater: (store: RecordSourceProxy) => Promise<void>
+) {
+  return new Promise((resolve, reject) => {
+    commitLocalUpdate(environment, store => {
+      updater(store)
+        .then(() => resolve())
+        .catch(err => reject(err));
+    });
+  });
+}
diff --git a/src/core/client/framework/lib/relay/index.ts b/src/core/client/framework/lib/relay/index.ts
index 43dca5178..31bae3d63 100644
--- a/src/core/client/framework/lib/relay/index.ts
+++ b/src/core/client/framework/lib/relay/index.ts
@@ -13,3 +13,6 @@ export {
   commitMutationPromiseNormalized,
 } from "./commitMutationPromise";
 export { graphql } from "react-relay";
+export {
+  default as commitLocalUpdatePromisified,
+} from "./commitLocalUpdatePromisified";
diff --git a/src/core/client/framework/mutations/SetAuthTokenMutation.spec.ts b/src/core/client/framework/mutations/SetAuthTokenMutation.spec.ts
index 887e6fd84..158dd0854 100644
--- a/src/core/client/framework/mutations/SetAuthTokenMutation.spec.ts
+++ b/src/core/client/framework/mutations/SetAuthTokenMutation.spec.ts
@@ -1,7 +1,9 @@
 import { Environment, RecordSource } from "relay-runtime";
+import sinon from "sinon";
 
+import { TalkContext } from "talk-framework/lib/bootstrap";
 import { LOCAL_ID } from "talk-framework/lib/relay";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
+import { createPromisifiedStorage } from "talk-framework/lib/storage";
 import { createRelayEnvironment } from "talk-framework/testHelpers";
 
 import { commit } from "./SetAuthTokenMutation";
@@ -15,21 +17,29 @@ beforeAll(() => {
   });
 });
 
-it("Sets auth token to localStorage", () => {
-  const context = {
-    localStorage: createInMemoryStorage(),
+it("Sets auth token to localStorage", async () => {
+  const clearSessionStub = sinon.stub();
+  const context: Partial<TalkContext> = {
+    localStorage: createPromisifiedStorage(),
+    clearSession: clearSessionStub,
   };
   const authToken = "auth token";
-  commit(environment, { authToken }, context as any);
+  await commit(environment, { authToken }, context as any);
   expect(source.get(LOCAL_ID)!.authToken).toEqual(authToken);
-  expect(context.localStorage.getItem("authToken")).toEqual(authToken);
+  await expect(context.localStorage!.getItem("authToken")).resolves.toEqual(
+    authToken
+  );
+  expect(clearSessionStub.calledOnce).toBe(true);
 });
 
-it("Removes auth token from localStorage", () => {
-  const context = {
-    localStorage: createInMemoryStorage(),
+it("Removes auth token from localStorage", async () => {
+  const clearSessionStub = sinon.stub();
+  const context: Partial<TalkContext> = {
+    localStorage: createPromisifiedStorage(),
+    clearSession: clearSessionStub,
   };
   localStorage.setItem("authToken", "tmp");
-  commit(environment, { authToken: null }, context as any);
-  expect(context.localStorage.getItem("authToken")).toBeNull();
+  await commit(environment, { authToken: null }, context as any);
+  await expect(context.localStorage!.getItem("authToken")).resolves.toBeNull();
+  expect(clearSessionStub.calledOnce).toBe(true);
 });
diff --git a/src/core/client/framework/mutations/SetAuthTokenMutation.ts b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
index 90e520155..f0da6df92 100644
--- a/src/core/client/framework/mutations/SetAuthTokenMutation.ts
+++ b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
@@ -1,7 +1,10 @@
-import { commitLocalUpdate, Environment } from "relay-runtime";
+import { Environment } from "relay-runtime";
 
 import { TalkContext } from "talk-framework/lib/bootstrap";
-import { createMutationContainer } from "talk-framework/lib/relay";
+import {
+  commitLocalUpdatePromisified,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
 import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 
 export interface SetAuthTokenInput {
@@ -13,27 +16,18 @@ export type SetAuthTokenMutation = (input: SetAuthTokenInput) => Promise<void>;
 export async function commit(
   environment: Environment,
   input: SetAuthTokenInput,
-  { localStorage }: TalkContext
+  { localStorage, clearSession }: TalkContext
 ) {
-  return commitLocalUpdate(environment, store => {
+  return await commitLocalUpdatePromisified(environment, async store => {
     const record = store.get(LOCAL_ID)!;
     record.setValue(input.authToken, "authToken");
     if (input.authToken) {
-      localStorage.setItem("authToken", input.authToken);
+      await localStorage.setItem("authToken", input.authToken);
     } else {
-      localStorage.removeItem("authToken");
+      await localStorage.removeItem("authToken");
     }
-    // Increment auth revision to indicate a change in auth state.
-    record.setValue(record.getValue("authRevision") + 1, "authRevision");
-
-    // Force gc to trigger.
-    environment
-      .retain({
-        dataID: "tmp",
-        node: { selections: [] },
-        variables: {},
-      })
-      .dispose();
+    // Clear current session, as we are starting a new one.
+    clearSession();
   });
 }
 
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 31fade961..7dde43c00 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -3,46 +3,40 @@ import React from "react";
 import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";
 
-import {
-  createContext,
-  TalkContext,
-  TalkContextProvider,
-} from "talk-framework/lib/bootstrap";
+import { createManaged } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
 import {
-  onPostMessageAuthError,
-  onPostMessageSetAuthToken,
-  onPymSetCommentID,
+  OnPostMessageAuthError,
+  OnPostMessageSetAuthToken,
+  OnPymSetCommentID,
 } from "./listeners";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
-const listeners = [
-  onPymSetCommentID,
-  onPostMessageSetAuthToken,
-  onPostMessageAuthError,
-];
-
-// This is called when the context is first initialized.
-async function init(context: TalkContext) {
-  await initLocalState(context.relayEnvironment, context);
-  listeners.forEach(f => f(context));
-}
+const listeners = (
+  <>
+    <OnPymSetCommentID />
+    <OnPostMessageSetAuthToken />
+    <OnPostMessageAuthError />
+  </>
+);
 
 async function main() {
-  // Bootstrap our context.
-  const context = await createContext({
-    init,
+  const ManagedTalkContextProvider = await createManaged({
+    initLocalState,
     localesData,
     userLocales: navigator.languages,
     pym: new PymChild({ polling: 100 }),
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider value={context}>
-      <AppContainer />
-    </TalkContextProvider>
+    <ManagedTalkContextProvider>
+      <>
+        {listeners}
+        <AppContainer />
+      </>
+    </ManagedTalkContextProvider>
   );
 
   ReactDOM.render(<Index />, document.getElementById("app"));
diff --git a/src/core/client/stream/listeners/OnPostMessageAuthError.tsx b/src/core/client/stream/listeners/OnPostMessageAuthError.tsx
new file mode 100644
index 000000000..3bb851965
--- /dev/null
+++ b/src/core/client/stream/listeners/OnPostMessageAuthError.tsx
@@ -0,0 +1,28 @@
+import { Component } from "react";
+
+import { withContext } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+
+interface Props {
+  postMessage: PostMessageService;
+}
+
+class OnPostMessageAuthError extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    // Auth popup will use this to send back errors during login.
+    props.postMessage!.on("authError", error => {
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    });
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const enhanced = withContext(({ postMessage }) => ({ postMessage }))(
+  OnPostMessageAuthError
+);
+export default enhanced;
diff --git a/src/core/client/stream/listeners/onPostMessageSetAuthToken.spec.ts b/src/core/client/stream/listeners/OnPostMessageSetAuthToken.spec.tsx
similarity index 57%
rename from src/core/client/stream/listeners/onPostMessageSetAuthToken.spec.ts
rename to src/core/client/stream/listeners/OnPostMessageSetAuthToken.spec.tsx
index c35823c8a..da2eb5816 100644
--- a/src/core/client/stream/listeners/onPostMessageSetAuthToken.spec.ts
+++ b/src/core/client/stream/listeners/OnPostMessageSetAuthToken.spec.tsx
@@ -1,10 +1,14 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
 import { Environment, RecordSource } from "relay-runtime";
 
+import { TalkContext } from "talk-framework/lib/bootstrap";
 import { LOCAL_ID } from "talk-framework/lib/relay";
-import { createInMemoryStorage } from "talk-framework/lib/storage";
+import { createPromisifiedStorage } from "talk-framework/lib/storage";
 import { createRelayEnvironment } from "talk-framework/testHelpers";
 
-import onPostMessageSetAuthToken from "./onPostMessageSetAuthToken";
+import { OnPostMessageSetAuthToken } from "./OnPostMessageSetAuthToken";
 
 let relayEnvironment: Environment;
 const source: RecordSource = new RecordSource();
@@ -17,16 +21,17 @@ beforeAll(() => {
 
 it("Sets auth token", () => {
   const token = "auth-token";
-  const context = {
+  const context: Partial<TalkContext> = {
     postMessage: {
       on: (name: string, cb: (token: string) => void) => {
         expect(name).toBe("setAuthToken");
         cb(token);
       },
-    },
+    } as any,
     relayEnvironment,
-    localStorage: createInMemoryStorage(),
+    localStorage: createPromisifiedStorage(),
+    clearSession: noop,
   };
-  onPostMessageSetAuthToken(context as any);
+  shallow(<OnPostMessageSetAuthToken context={context as any} />);
   expect(source.get(LOCAL_ID)!.authToken).toEqual(token);
 });
diff --git a/src/core/client/stream/listeners/OnPostMessageSetAuthToken.ts b/src/core/client/stream/listeners/OnPostMessageSetAuthToken.ts
new file mode 100644
index 000000000..553e4fa5b
--- /dev/null
+++ b/src/core/client/stream/listeners/OnPostMessageSetAuthToken.ts
@@ -0,0 +1,31 @@
+import { Component } from "react";
+
+import { TalkContext, withContext } from "talk-framework/lib/bootstrap";
+import { commit as setAuthToken } from "talk-framework/mutations/SetAuthTokenMutation";
+
+interface Props {
+  context: TalkContext;
+}
+
+export class OnPostMessageSetAuthToken extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    // Auth popup will use this to handle a successful login.
+    props.context.postMessage!.on("setAuthToken", (authToken: string) => {
+      setAuthToken(
+        this.props.context.relayEnvironment,
+        { authToken },
+        this.props.context
+      );
+    });
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const enhanced = withContext(context => ({ context }))(
+  OnPostMessageSetAuthToken
+);
+export default enhanced;
diff --git a/src/core/client/stream/listeners/onPymSetCommentID.spec.ts b/src/core/client/stream/listeners/OnPymSetCommentID.spec.tsx
similarity index 77%
rename from src/core/client/stream/listeners/onPymSetCommentID.spec.ts
rename to src/core/client/stream/listeners/OnPymSetCommentID.spec.tsx
index 6b5e67ea2..20132c1f7 100644
--- a/src/core/client/stream/listeners/onPymSetCommentID.spec.ts
+++ b/src/core/client/stream/listeners/OnPymSetCommentID.spec.tsx
@@ -1,9 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
 import { Environment, RecordSource } from "relay-runtime";
 
 import { LOCAL_ID } from "talk-framework/lib/relay";
 import { createRelayEnvironment } from "talk-framework/testHelpers";
 
-import onPymSetCommentID from "./onPymSetCommentID";
+import { OnPymSetCommentID } from "./OnPymSetCommentID";
 
 let relayEnvironment: Environment;
 const source: RecordSource = new RecordSource();
@@ -16,30 +18,30 @@ beforeAll(() => {
 
 it("Sets comment id", () => {
   const id = "comment1-id";
-  const context = {
+  const props = {
     pym: {
       onMessage: (eventName: string, cb: (id: string) => void) => {
         expect(eventName).toBe("setCommentID");
         cb(id);
       },
-    },
+    } as any,
     relayEnvironment,
   };
-  onPymSetCommentID(context as any);
+  shallow(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
 });
 
 it("Sets comment id to null when empty", () => {
   const id = "";
-  const context = {
+  const props = {
     pym: {
       onMessage: (eventName: string, cb: (data: string) => void) => {
         expect(eventName).toBe("setCommentID");
         cb(id);
       },
-    },
+    } as any,
     relayEnvironment,
   };
-  onPymSetCommentID(context as any);
+  shallow(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
 });
diff --git a/src/core/client/stream/listeners/OnPymSetCommentID.ts b/src/core/client/stream/listeners/OnPymSetCommentID.ts
new file mode 100644
index 000000000..f9ca0c6f5
--- /dev/null
+++ b/src/core/client/stream/listeners/OnPymSetCommentID.ts
@@ -0,0 +1,39 @@
+import { Child } from "pym.js";
+import { Component } from "react";
+import { commitLocalUpdate } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import { withContext } from "talk-framework/lib/bootstrap";
+import { LOCAL_ID } from "talk-framework/lib/relay";
+
+interface Props {
+  relayEnvironment: Environment;
+  pym: Child;
+}
+
+export class OnPymSetCommentID extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    // Sets comment id through pym.
+    props.pym!.onMessage("setCommentID", raw => {
+      commitLocalUpdate(this.props.relayEnvironment, s => {
+        const id = raw || null;
+        if (s.get(LOCAL_ID)!.getValue("commentID") !== id) {
+          s.get(LOCAL_ID)!.setValue(id, "commentID");
+        }
+      });
+    });
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const enhanced = withContext(({ relayEnvironment, pym }) => ({
+  relayEnvironment,
+  pym,
+}))(OnPymSetCommentID);
+
+export default enhanced;
diff --git a/src/core/client/stream/listeners/index.ts b/src/core/client/stream/listeners/index.ts
index 7901544e0..1c315d81f 100644
--- a/src/core/client/stream/listeners/index.ts
+++ b/src/core/client/stream/listeners/index.ts
@@ -1,5 +1,5 @@
-export { default as onPymSetCommentID } from "./onPymSetCommentID";
+export { default as OnPymSetCommentID } from "./OnPymSetCommentID";
 export {
-  default as onPostMessageSetAuthToken,
-} from "./onPostMessageSetAuthToken";
-export { default as onPostMessageAuthError } from "./onPostMessageAuthError";
+  default as OnPostMessageSetAuthToken,
+} from "./OnPostMessageSetAuthToken";
+export { default as OnPostMessageAuthError } from "./OnPostMessageAuthError";
diff --git a/src/core/client/stream/listeners/onPostMessageAuthError.ts b/src/core/client/stream/listeners/onPostMessageAuthError.ts
deleted file mode 100644
index 668a4ba1f..000000000
--- a/src/core/client/stream/listeners/onPostMessageAuthError.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TalkContext } from "talk-framework/lib/bootstrap";
-
-export default function onPostMessageSetAuthToken({
-  postMessage,
-}: TalkContext) {
-  // Auth popup will use this to send back errors during login.
-  postMessage!.on("authError", error => {
-    // tslint:disable-next-line:no-console
-    console.error(error);
-  });
-}
diff --git a/src/core/client/stream/listeners/onPostMessageSetAuthToken.ts b/src/core/client/stream/listeners/onPostMessageSetAuthToken.ts
deleted file mode 100644
index 767af51f7..000000000
--- a/src/core/client/stream/listeners/onPostMessageSetAuthToken.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TalkContext } from "talk-framework/lib/bootstrap";
-
-import { commit as setAuthToken } from "talk-framework/mutations/SetAuthTokenMutation";
-
-export default function onPostMessageSetAuthToken(ctx: TalkContext) {
-  const { relayEnvironment, postMessage } = ctx;
-  // Auth popup will use this to handle a successful login.
-  postMessage!.on("setAuthToken", (authToken: string) => {
-    setAuthToken(relayEnvironment, { authToken }, ctx);
-  });
-}
diff --git a/src/core/client/stream/listeners/onPymSetCommentID.ts b/src/core/client/stream/listeners/onPymSetCommentID.ts
deleted file mode 100644
index 4b5547173..000000000
--- a/src/core/client/stream/listeners/onPymSetCommentID.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { commitLocalUpdate } from "react-relay";
-
-import { TalkContext } from "talk-framework/lib/bootstrap";
-import { LOCAL_ID } from "talk-framework/lib/relay";
-
-export default function onPymSetCommentID({
-  relayEnvironment,
-  pym,
-}: TalkContext) {
-  // Sets comment id through pym.
-  pym!.onMessage("setCommentID", raw => {
-    commitLocalUpdate(relayEnvironment, s => {
-      const id = raw || null;
-      if (s.get(LOCAL_ID)!.getValue("commentID") !== id) {
-        s.get(LOCAL_ID)!.setValue(id, "commentID");
-      }
-    });
-  });
-}
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index b95cc19ce..c8dda11c7 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -13,7 +13,6 @@ exports[`init local state 1`] = `
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
     \\"authToken\\": \\"\\",
-    \\"authRevision\\": 0,
     \\"network\\": {
       \\"__ref\\": \\"client:root.local.network\\"
     },
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 2d953e6ae..5b127755d 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -35,9 +35,6 @@ export default async function initLocalState(
     // Set auth token
     localRecord.setValue(authToken || "", "authToken");
 
-    // Set initial auth revision, this is increment whenenver auth state might have changed.
-    localRecord.setValue(0, "authRevision");
-
     // Parse query params
     const query = qs.parse(location.search);
 
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 9e04c476a..37615ec9d 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -26,10 +26,6 @@ type Local {
   commentID: String
   authPopup: AuthPopup!
   authToken: String
-  # Used to invalidate the `me` endpoint.
-  # This is incremented whenever the auth status
-  # might have changed.
-  authRevision: Int!
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
index fc098dafe..4d1ac4611 100644
--- a/src/core/client/stream/queries/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -45,19 +45,12 @@ export const render = ({
 };
 
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
-  local: { commentID, assetID, authRevision },
+  local: { commentID, assetID },
 }) => (
   <QueryRenderer<QueryTypes>
     query={graphql`
-      query PermalinkViewQuery(
-        $commentID: ID!
-        $assetID: ID!
-        $authRevision: Int!
-      ) {
-        # authRevision is increment every time auth state has changed.
-        # This is basically a cache invalidation and causes relay
-        # to automatically update this query.
-        me(clientAuthRevision: $authRevision) {
+      query PermalinkViewQuery($commentID: ID!, $assetID: ID!) {
+        me {
           ...PermalinkViewContainer_me
         }
         asset(id: $assetID) {
@@ -71,7 +64,6 @@ const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
     variables={{
       assetID: assetID!,
       commentID: commentID!,
-      authRevision,
     }}
     render={render}
   />
@@ -81,7 +73,6 @@ const enhanced = withLocalStateContainer(
   graphql`
     fragment PermalinkViewQueryLocal on Local {
       assetID
-      authRevision
       commentID
     }
   `
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index b0f1f0c3f..ec61ec723 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -38,15 +38,12 @@ export const render = ({
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID, authRevision },
+  local: { assetID },
 }) => (
   <QueryRenderer<QueryTypes>
     query={graphql`
-      query StreamQuery($assetID: ID!, $authRevision: Int!) {
-        # authRevision is increment every time auth state has changed.
-        # This is basically a cache invalidation and causes relay
-        # to automatically update this query.
-        me(clientAuthRevision: $authRevision) {
+      query StreamQuery($assetID: ID!) {
+        me {
           ...StreamContainer_me
         }
         asset(id: $assetID) {
@@ -56,7 +53,6 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
     `}
     variables={{
       assetID: assetID!,
-      authRevision,
     }}
     render={render}
   />
@@ -66,7 +62,6 @@ const enhanced = withLocalStateContainer(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID
-      authRevision
     }
   `
 )(StreamQuery);
diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx
index 49d885c66..2eecbc5a1 100644
--- a/src/core/client/stream/test/create.tsx
+++ b/src/core/client/stream/test/create.tsx
@@ -1,4 +1,6 @@
+import { EventEmitter2 } from "eventemitter2";
 import { IResolvers } from "graphql-tools";
+import { noop } from "lodash";
 import React from "react";
 import TestRenderer from "react-test-renderer";
 import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
@@ -30,7 +32,6 @@ export default function create(params: CreateParams) {
     logNetwork: params.logNetwork,
     resolvers: params.resolvers,
     initLocalState: (localRecord, source, env) => {
-      localRecord.setValue(0, "authRevision");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, env);
       }
@@ -46,6 +47,8 @@ export default function create(params: CreateParams) {
     postMessage: new PostMessageService(),
     browserInfo: { ios: false },
     uuidGenerator: createUUIDGenerator(),
+    eventEmitter: new EventEmitter2({ wildcard: true, maxListeners: 20 }),
+    clearSession: noop,
   };
 
   const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/postComment.spec.tsx b/src/core/client/stream/test/postComment.spec.tsx
index 658a9d036..78120589d 100644
--- a/src/core/client/stream/test/postComment.spec.tsx
+++ b/src/core/client/stream/test/postComment.spec.tsx
@@ -11,14 +11,8 @@ let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
     Query: {
-      asset: createSinonStub(
-        s => s.throws(),
-        s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
-      ),
-      me: createSinonStub(
-        s => s.throws(),
-        s => s.withArgs(undefined, { clientAuthRevision: 0 }).returns(users[0])
-      ),
+      asset: createSinonStub(s => s.throws(), s => s.returns(assets[0])),
+      me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
     },
     Mutation: {
       createComment: createSinonStub(
diff --git a/src/core/client/stream/test/postReply.spec.tsx b/src/core/client/stream/test/postReply.spec.tsx
index 3c64bc098..dd7f0eb6e 100644
--- a/src/core/client/stream/test/postReply.spec.tsx
+++ b/src/core/client/stream/test/postReply.spec.tsx
@@ -11,14 +11,8 @@ let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const resolvers = {
     Query: {
-      asset: createSinonStub(
-        s => s.throws(),
-        s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
-      ),
-      me: createSinonStub(
-        s => s.throws(),
-        s => s.withArgs(undefined, { clientAuthRevision: 0 }).returns(users[0])
-      ),
+      asset: createSinonStub(s => s.throws(), s => s.returns(assets[0])),
+      me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
     },
     Mutation: {
       createComment: createSinonStub(
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index dc689f403..3dcdb0894 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -809,12 +809,8 @@ type Query {
 
   """
   me is the current logged in User.
-
-  clientAuthRevision is an implementation detail that is only
-  used on the client to invalidate the cache.
-  TODO: This should move to a client side directive if this becomes possible.
   """
-  me(clientAuthRevision: Int): User
+  me: User
 
   """
   settings is the Settings for a given Tenant.

From 6f367a00782e8a9bfffb637d00bd19464735df67 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 13:13:09 -0300
Subject: [PATCH 32/53] changes

---
 src/core/client/ui/components/Message/Message.css   |  8 ++------
 .../ValidationMessage/ValidationMessage.tsx         | 13 +++++++------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
index 57dbe34bf..5811ad377 100644
--- a/src/core/client/ui/components/Message/Message.css
+++ b/src/core/client/ui/components/Message/Message.css
@@ -4,12 +4,12 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit);
+  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
   border-style: solid;
-  border-left-width: calc(0.8 * var(--spacing-unit));
+  border-left-width: calc(0.5 * var(--spacing-unit));
 }
 
 .colorGrey {
@@ -28,7 +28,3 @@
   display: flex;
   width: 100%;
 }
-
-.icon {
-  margin-right: calc(0.8 * var(--spacing-unit));
-}
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 9a4819178..8d1343f8b 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -15,17 +15,18 @@ export interface ValidationMessageProps {
    * If set renders a full width message
    */
   fullWidth?: boolean;
-  /*
-  * Name of the icon, if not provided it will default to warning icon
-  */
-  icon?: string;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, fullWidth, children, icon, ...rest } = props;
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <Message color="error" className={className} {...rest}>
+    <Message
+      color="error"
+      className={className}
+      fullWidth={fullWidth}
+      {...rest}
+    >
       <MessageIcon>warning</MessageIcon>
       {children}
     </Message>

From e6f8b7623ba21929945771cbf7d206d844b04c08 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 15:10:14 -0300
Subject: [PATCH 33/53] Adding docs and changes

---
 src/core/client/ui/components/Tabs/Tab.css    |  4 +-
 src/core/client/ui/components/Tabs/Tab.mdx    | 25 ---------
 src/core/client/ui/components/Tabs/Tab.tsx    | 10 ++--
 src/core/client/ui/components/Tabs/TabBar.css |  2 +-
 src/core/client/ui/components/Tabs/TabBar.mdx | 51 -------------------
 .../client/ui/components/Tabs/TabContent.mdx  | 23 ---------
 .../client/ui/components/Tabs/TabPane.mdx     | 23 ---------
 .../client/ui/components/Tabs}/tabs.mdx       |  0
 8 files changed, 8 insertions(+), 130 deletions(-)
 delete mode 100644 src/core/client/ui/components/Tabs/Tab.mdx
 delete mode 100644 src/core/client/ui/components/Tabs/TabBar.mdx
 delete mode 100644 src/core/client/ui/components/Tabs/TabContent.mdx
 delete mode 100644 src/core/client/ui/components/Tabs/TabPane.mdx
 rename src/{docs => core/client/ui/components/Tabs}/tabs.mdx (100%)

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 9650b8a95..ca7ac0f66 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -13,7 +13,7 @@
 }
 
 .root.primary {
-  background: #f2f2f2;
+  background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-main);
   border-left-width: 0;
@@ -32,7 +32,7 @@
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
     border-bottom-color: var(--palette-common-white);
-    border-top-width: 5px;
+    border-top-width: calc(0.5 * var(--spacing-unit));
     border-top-color: var(--palette-primary-main);
   }
 }
diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
deleted file mode 100644
index f81399cfc..000000000
--- a/src/core/client/ui/components/Tabs/Tab.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-name: Tab
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-# Tab
-`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
-
-## Basic Usage
-<Playground>
-  <HorizontalGutter>
-    <TabBar defaultActiveTab="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 9afe73023..e0fd95eb8 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -21,9 +21,9 @@ export interface TabProps {
    */
   active?: boolean;
   /**
-   * Color style variant
+   * Style variant
    */
-  color?: "primary" | "secondary";
+  variant?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */
@@ -38,13 +38,13 @@ class Tab extends React.Component<TabProps> {
   };
 
   public render() {
-    const { className, classes, children, tabId, active, color } = this.props;
+    const { className, classes, children, tabId, active, variant } = this.props;
 
     const rootClassName = cn(
       classes.root,
       {
-        [classes.primary]: color === "primary",
-        [classes.secondary]: color === "secondary",
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
         [classes.active]: active,
       },
       className
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
index cb75fbb27..7ea4a5ac3 100644
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -9,5 +9,5 @@
 }
 
 .secondary {
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--palette-divider);
 }
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
deleted file mode 100644
index 14fc68a3b..000000000
--- a/src/core/client/ui/components/Tabs/TabBar.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-name: TabBar
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-# TabBar
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveTab="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="second">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="three">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
-
-## Secondary Color
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveTab="one" color="secondary">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx
deleted file mode 100644
index 1646887a5..000000000
--- a/src/core/client/ui/components/Tabs/TabContent.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: TabContent
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabContent
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx
deleted file mode 100644
index 36cb915f0..000000000
--- a/src/core/client/ui/components/Tabs/TabPane.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: TabPane
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabPane
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/docs/tabs.mdx b/src/core/client/ui/components/Tabs/tabs.mdx
similarity index 100%
rename from src/docs/tabs.mdx
rename to src/core/client/ui/components/Tabs/tabs.mdx

From 32e56e805c60107e35752b2ee4a2adf2b053169f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 12 Sep 2018 20:35:07 +0200
Subject: [PATCH 34/53] Adapt integration test

---
 src/core/client/stream/test/editComment.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/editComment.spec.tsx
index de22f2384..a562c3b38 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/editComment.spec.tsx
@@ -15,7 +15,7 @@ function createTestRenderer() {
       ),
       me: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { clientAuthRevision: 0 }).returns(users[0])
+        s => s.withArgs(undefined).returns(users[0])
       ),
     },
     Mutation: {

From 2c8bdc6c9ac2a837ff0df78868cf42854ee309a9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 15:40:04 -0300
Subject: [PATCH 35/53] updated status

---
 .../test/__snapshots__/signIn.spec.tsx.snap   |   12 +-
 .../test/__snapshots__/signUp.spec.tsx.snap   |   82 +-
 .../test/__snapshots__/loadMore.spec.tsx.snap |  281 +--
 .../__snapshots__/permalinkView.spec.tsx.snap |   74 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap |   26 +-
 .../__snapshots__/postComment.spec.tsx.snap   | 1018 +----------
 .../__snapshots__/postReply.spec.tsx.snap     | 1579 +----------------
 .../__snapshots__/renderReplies.spec.tsx.snap |  377 +---
 .../__snapshots__/renderStream.spec.tsx.snap  |  265 +--
 .../showAllReplies.spec.tsx.snap              |  287 +--
 10 files changed, 105 insertions(+), 3896 deletions(-)

diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index c21b65546..898850de7 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -180,7 +180,7 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -290,7 +290,7 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -321,7 +321,7 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -546,7 +546,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -577,7 +577,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 88ec82da6..4b0ee2dc7 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -70,7 +70,7 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -124,7 +124,7 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -215,7 +215,7 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -287,7 +287,7 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -432,7 +432,7 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -468,7 +468,7 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -499,7 +499,7 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -590,7 +590,7 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -649,7 +649,7 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -680,7 +680,7 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -771,7 +771,7 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -807,7 +807,7 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -843,7 +843,7 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -874,7 +874,7 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -965,7 +965,7 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1001,7 +1001,7 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1037,7 +1037,7 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1068,7 +1068,7 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1159,7 +1159,7 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1195,7 +1195,7 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1231,7 +1231,7 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1262,7 +1262,7 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1353,7 +1353,7 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1389,7 +1389,7 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1425,7 +1425,7 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1456,7 +1456,7 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1547,7 +1547,7 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1583,7 +1583,7 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1619,7 +1619,7 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1650,7 +1650,7 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1741,7 +1741,7 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1777,7 +1777,7 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1813,7 +1813,7 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -1844,7 +1844,7 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -2077,7 +2077,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -2113,7 +2113,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -2149,7 +2149,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
@@ -2180,7 +2180,7 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 1d82d7bb9..e71e2b5cb 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -325,278 +325,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-      >
-        <div
-          aria-hidden="true"
-        >
-          <div>
-            <div
-              className=""
-            >
-              <div
-                className=" RTE-toolbarDisabled Toolbar-toolbar"
-              >
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Bold"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_bold
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Italic"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_italic
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Blockquote"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_quote
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-hidden="true"
-                className="RTE-placeholder RTE-placeholder "
-              >
-                Post a comment
-              </div>
-              <div
-                aria-placeholder="Post a comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                contentEditable={false}
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onCut={[Function]}
-                onFocus={[Function]}
-                onInput={[Function]}
-                onKeyDown={[Function]}
-                onPaste={[Function]}
-                onSelect={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="submit"
-        >
-          Sign in and join the conversation
-        </button>
-      </div>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <button
-        aria-controls="talk-comments-stream-log"
-        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-        disabled={false}
-        id="talk-comments-stream-loadMore"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        type="button"
-      >
-        Load more
-      </button>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 19ba2686a..aa3730929 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -4,78 +4,8 @@ exports[`renders permalink view 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="PermalinkView-root"
-  >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
-      type="button"
-    >
-      Show all comments
-    </a>
-    <div
-      className="Indent-root"
-    >
-      <div
-        className="Comment-root"
-        role="article"
-      >
-        <div
-          className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-        >
-          <span
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-          >
-            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>
-          </button>
-        </div>
-      </div>
-    </div>
+  <div>
+    Asset not found
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 931557b1a..6f6af0a3f 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -4,30 +4,8 @@ exports[`renders permalink view with unknown comment 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="PermalinkView-root"
-  >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
-      type="button"
-    >
-      Show all comments
-    </a>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
-      Comment not found
-    </p>
+  <div>
+    Asset not found
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index dacf75add..6376cc1c3 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -1,1018 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`post a comment: optimistic response 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "<strong>Hello world!</strong>",
-                    }
-                  }
-                  disabled={true}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="IndentedComment-blur Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`post a comment: server response 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 63360eccb..6376cc1c3 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -1,1579 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`post a reply: open reply form 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          id="comments-replyCommentForm-form-comment-0"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-replyCommentForm-rte-comment-0"
-              >
-                Write a reply
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    className="Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-replyCommentForm-rte-comment-0"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`post a reply: optimistic response 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          id="comments-replyCommentForm-form-comment-0"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-replyCommentForm-rte-comment-0"
-              >
-                Write a reply
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    className=" RTE-toolbarDisabled Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                    contentEditable={false}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<strong>Hello world!</strong>",
-                      }
-                    }
-                    disabled={true}
-                    id="comments-replyCommentForm-rte-comment-0"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-0"
-          role="log"
-        >
-          <div
-            className="IndentedComment-blur Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  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>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`post a reply: server response 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-0"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  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>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <form
-        autoComplete="off"
-        className="PostCommentForm-root"
-        id="comments-postCommentForm-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div>
-            <label
-              className="AriaInfo-root"
-              htmlFor="comments-postCommentForm-field"
-            >
-              Post a comment
-            </label>
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  className="Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
-                  contentEditable={true}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={false}
-                  id="comments-postCommentForm-field"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
-              >
-                Powered by 
-                <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                >
-                  ⁨The Coral Project⁩
-                </span>
-              </span>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-              disabled={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index bc69ca2ca..6376cc1c3 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -4,374 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-      >
-        <div
-          aria-hidden="true"
-        >
-          <div>
-            <div
-              className=""
-            >
-              <div
-                className=" RTE-toolbarDisabled Toolbar-toolbar"
-              >
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Bold"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_bold
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Italic"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_italic
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Blockquote"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_quote
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-hidden="true"
-                className="RTE-placeholder RTE-placeholder "
-              >
-                Post a comment
-              </div>
-              <div
-                aria-placeholder="Post a comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                contentEditable={false}
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onCut={[Function]}
-                onFocus={[Function]}
-                onInput={[Function]}
-                onKeyDown={[Function]}
-                onPaste={[Function]}
-                onSelect={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="submit"
-        >
-          Sign in and join the conversation
-        </button>
-      </div>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-with-replies"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  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>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  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>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index befacc4ef..6376cc1c3 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -4,262 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-      >
-        <div
-          aria-hidden="true"
-        >
-          <div>
-            <div
-              className=""
-            >
-              <div
-                className=" RTE-toolbarDisabled Toolbar-toolbar"
-              >
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Bold"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_bold
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Italic"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_italic
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Blockquote"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_quote
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-hidden="true"
-                className="RTE-placeholder RTE-placeholder "
-              >
-                Post a comment
-              </div>
-              <div
-                aria-placeholder="Post a comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                contentEditable={false}
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onCut={[Function]}
-                onFocus={[Function]}
-                onInput={[Function]}
-                onKeyDown={[Function]}
-                onPaste={[Function]}
-                onSelect={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="submit"
-        >
-          Sign in and join the conversation
-        </button>
-      </div>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d8a24d800..29fc3ded2 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -4,284 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-      >
-        <div
-          aria-hidden="true"
-        >
-          <div>
-            <div
-              className=""
-            >
-              <div
-                className=" RTE-toolbarDisabled Toolbar-toolbar"
-              >
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Bold"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_bold
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Italic"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_italic
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Blockquote"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_quote
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-hidden="true"
-                className="RTE-placeholder RTE-placeholder "
-              >
-                Post a comment
-              </div>
-              <div
-                aria-placeholder="Post a comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                contentEditable={false}
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onCut={[Function]}
-                onFocus={[Function]}
-                onInput={[Function]}
-                onKeyDown={[Function]}
-                onPaste={[Function]}
-                onSelect={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="submit"
-        >
-          Sign in and join the conversation
-        </button>
-      </div>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                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>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-0"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  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>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Indent-root Indent-level1 Indent-noBorder"
-          >
-            <button
-              aria-controls="talk-comments-replyList-log--comment-0"
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-              disabled={false}
-              id="talk-comments-replyList-showAll--comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Show all
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
+
+GraphQL request (3:3)
+2:   $assetID: ID!
+3:   $signedIn: Boolean!
+     ^
+4: ) {
+
   </div>
 </div>
 `;

From ed5ea3b759d93417f86c22bd81992390e16cab5d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 15:53:07 -0300
Subject: [PATCH 36/53] new snapshots after rebuilding the schema

---
 .../test/__snapshots__/loadMore.spec.tsx.snap |  281 ++-
 .../__snapshots__/permalinkView.spec.tsx.snap |   74 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap |   26 +-
 .../__snapshots__/postComment.spec.tsx.snap   | 1018 ++++++++++-
 .../__snapshots__/postReply.spec.tsx.snap     | 1579 ++++++++++++++++-
 .../__snapshots__/renderStream.spec.tsx.snap  |  265 ++-
 .../showAllReplies.spec.tsx.snap              |  287 ++-
 7 files changed, 3481 insertions(+), 49 deletions(-)

diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index e71e2b5cb..1d82d7bb9 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -325,15 +325,278 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-controls="talk-comments-stream-log"
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+        disabled={false}
+        id="talk-comments-stream-loadMore"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Load more
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index aa3730929..19ba2686a 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -4,8 +4,78 @@ exports[`renders permalink view 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Asset not found
+  <div
+    className="PermalinkView-root"
+  >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all comments
+    </a>
+    <div
+      className="Indent-root"
+    >
+      <div
+        className="Comment-root"
+        role="article"
+      >
+        <div
+          className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        >
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            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>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 6f6af0a3f..931557b1a 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -4,8 +4,30 @@ exports[`renders permalink view with unknown comment 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Asset not found
+  <div
+    className="PermalinkView-root"
+  >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 6376cc1c3..dacf75add 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -1,18 +1,1018 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`post a comment: optimistic response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                  contentEditable={false}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<strong>Hello world!</strong>",
+                    }
+                  }
+                  disabled={true}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="IndentedComment-blur Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`post a comment: server response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 6376cc1c3..63360eccb 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -1,18 +1,1579 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`post a reply: open reply form 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          id="comments-replyCommentForm-form-comment-0"
+          onSubmit={[Function]}
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div>
+              <label
+                className="AriaInfo-root"
+                htmlFor="comments-replyCommentForm-rte-comment-0"
+              >
+                Write a reply
+              </label>
+              <div>
+                <div
+                  className=""
+                >
+                  <div
+                    className="Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    className="RTE-placeholder RTE-placeholder"
+                  >
+                    Post a comment
+                  </div>
+                  <div
+                    aria-placeholder="Post a comment"
+                    className="RTE-contentEditable RTE-content"
+                    contentEditable={true}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "",
+                      }
+                    }
+                    disabled={false}
+                    id="comments-replyCommentForm-rte-comment-0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`post a reply: optimistic response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          id="comments-replyCommentForm-form-comment-0"
+          onSubmit={[Function]}
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div>
+              <label
+                className="AriaInfo-root"
+                htmlFor="comments-replyCommentForm-rte-comment-0"
+              >
+                Write a reply
+              </label>
+              <div>
+                <div
+                  className=""
+                >
+                  <div
+                    className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  >
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Bold"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_bold
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Italic"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_italic
+                      </span>
+                    </button>
+                    <button
+                      className="Button-button"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Blockquote"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-md"
+                      >
+                        format_quote
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-placeholder="Post a comment"
+                    className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                    contentEditable={false}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "<strong>Hello world!</strong>",
+                      }
+                    }
+                    disabled={true}
+                    id="comments-replyCommentForm-rte-comment-0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                disabled={true}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </form>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
+        >
+          <div
+            className="IndentedComment-blur Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`post a reply: server response 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
+        >
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 6376cc1c3..befacc4ef 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -4,15 +4,262 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 29fc3ded2..d8a24d800 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -4,15 +4,284 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
+        >
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1 Indent-noBorder"
+          >
+            <button
+              aria-controls="talk-comments-replyList-log--comment-0"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+              disabled={false}
+              id="talk-comments-replyList-showAll--comment-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Show all
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;

From 1ccb789b97349fc6773c75f30ad061381960c1dd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Sep 2018 15:53:54 -0300
Subject: [PATCH 37/53] new snapshots after rebuilding the schema

---
 .../__snapshots__/renderReplies.spec.tsx.snap | 377 +++++++++++++++++-
 1 file changed, 368 insertions(+), 9 deletions(-)

diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 6376cc1c3..bc69ca2ca 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -4,15 +4,374 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Variable "$signedIn" got invalid value null; Expected non-nullable type Boolean! not to be null.
-
-GraphQL request (3:3)
-2:   $assetID: ID!
-3:   $signedIn: Boolean!
-     ^
-4: ) {
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-with-replies"
+          role="log"
+        >
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;

From c8cd68c6b7e2275e57a4de1f45a857fa54f2e8e3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 12 Sep 2018 22:01:43 +0200
Subject: [PATCH 38/53] Use Message Component

---
 .../client/stream/components/EditCommentForm.tsx |  7 +++++--
 .../test/__snapshots__/editComment.spec.tsx.snap | 16 ++++++++--------
 .../client/ui/components/Message/MessageIcon.css |  2 ++
 src/core/client/ui/components/Message/index.ts   |  3 ++-
 src/core/client/ui/components/index.ts           |  2 +-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/core/client/stream/components/EditCommentForm.tsx b/src/core/client/stream/components/EditCommentForm.tsx
index 454ffb41b..d7d79ddd8 100644
--- a/src/core/client/stream/components/EditCommentForm.tsx
+++ b/src/core/client/stream/components/EditCommentForm.tsx
@@ -15,6 +15,8 @@ import {
   Button,
   Flex,
   HorizontalGutter,
+  Message,
+  MessageIcon,
   RelativeTime,
   Typography,
   ValidationMessage,
@@ -102,14 +104,15 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
                 </ValidationMessage>
               </Localized>
             ) : (
-              <ValidationMessage fullWidth>
+              <Message fullWidth>
+                <MessageIcon>alarm</MessageIcon>
                 <Localized
                   id="comments-editCommentForm-editRemainingTime"
                   time={<RelativeTime date={props.editableUntil} live />}
                 >
                   <span>{"Edit: <time></time> remaining"}</span>
                 </Localized>
-              </ValidationMessage>
+              </Message>
             )}
             <Flex direction="row" justifyContent="flex-end" itemGutter="half">
               {props.expired ? (
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
index ed29c75d0..6a91b49e0 100644
--- a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
@@ -629,13 +629,13 @@ exports[`edit a comment: edit form 1`] = `
               </div>
             </div>
             <div
-              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+              className="Message-root Message-colorGrey Message-fullWidth"
             >
               <span
                 aria-hidden="true"
-                className="Icon-root ValidationMessage-icon Icon-sm"
+                className="Icon-root MessageIcon-root Icon-sm"
               >
-                warning
+                alarm
               </span>
               <span>
                 Edit: 
@@ -1048,13 +1048,13 @@ exports[`edit a comment: optimistic response 1`] = `
               </div>
             </div>
             <div
-              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+              className="Message-root Message-colorGrey Message-fullWidth"
             >
               <span
                 aria-hidden="true"
-                className="Icon-root ValidationMessage-icon Icon-sm"
+                className="Icon-root MessageIcon-root Icon-sm"
               >
-                warning
+                alarm
               </span>
               <span>
                 Edit: 
@@ -2481,11 +2481,11 @@ exports[`shows expiry message: edit time expired 1`] = `
               </div>
             </div>
             <div
-              className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+              className="Message-root Message-colorError Message-fullWidth"
             >
               <span
                 aria-hidden="true"
-                className="Icon-root ValidationMessage-icon Icon-sm"
+                className="Icon-root MessageIcon-root Icon-sm"
               >
                 warning
               </span>
diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css
index df730b2de..0104b6cd1 100644
--- a/src/core/client/ui/components/Message/MessageIcon.css
+++ b/src/core/client/ui/components/Message/MessageIcon.css
@@ -1,4 +1,6 @@
 .root {
+  align-self: flex-start;
+  margin-top: 1px;
   &:first-child {
     margin-right: calc(0.5 * var(--spacing-unit));
   }
diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts
index a6d22dd86..84f6b9009 100644
--- a/src/core/client/ui/components/Message/index.ts
+++ b/src/core/client/ui/components/Message/index.ts
@@ -1 +1,2 @@
-export { default } from "./Message";
+export { default, default as Message } from "./Message";
+export { default as MessageIcon } from "./MessageIcon";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 61970ed25..a6d027393 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -20,4 +20,4 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
-export { default as Message } from "./Message";
+export { default as Message, MessageIcon } from "./Message";

From bb7007214d7d3b890bd6db467aad6c7cf38409d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 13 Sep 2018 09:32:05 -0300
Subject: [PATCH 39/53] Adding button

---
 src/core/client/ui/components/Tabs/Tab.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index e0fd95eb8..74cb146fd 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { ReactNode } from "react";
+import React from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./Tab.css";
 
@@ -55,12 +55,17 @@ class Tab extends React.Component<TabProps> {
         className={rootClassName}
         key={`${tabId}-tab`}
         id={`${tabId}-tab`}
-        role="tab"
+        role="presentation"
         onClick={this.handleTabClick}
-        aria-controls={tabId}
-        aria-selected={active}
       >
-        {children}
+        <button
+          aria-controls={tabId}
+          role="tab"
+          aria-selected={active}
+          onClick={this.handleTabClick}
+        >
+          {children}
+        </button>
       </li>
     );
   }

From 3955c960bf306a5038c14a59e50861980f5abc02 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 16:42:04 +0200
Subject: [PATCH 40/53] Only show edit button for the author

---
 .../stream/containers/CommentContainer.tsx    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index 309c3d337..1cd09fd2e 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -40,18 +40,31 @@ export class CommentContainer extends Component<InnerProps, State> {
   public state = {
     showReplyDialog: false,
     showEditDialog: false,
-    editable: isBeforeDate(this.props.comment.editing.editableUntil),
+    editable: this.isEditable(),
   };
 
   constructor(props: InnerProps) {
     super(props);
-    this.uneditableTimer = this.updateWhenNotEditable();
+    if (this.isEditable()) {
+      this.uneditableTimer = this.updateWhenNotEditable();
+    }
   }
 
   public componentWillUnmount() {
     clearTimeout(this.uneditableTimer);
   }
 
+  private isEditable() {
+    const isMyComment = !!(
+      this.props.me &&
+      this.props.comment.author &&
+      this.props.me.id === this.props.comment.author.id
+    );
+    return (
+      isMyComment && isBeforeDate(this.props.comment.editing.editableUntil)
+    );
+  }
+
   private openReplyDialog = () => {
     if (this.props.me) {
       this.setState(state => ({
@@ -155,7 +168,7 @@ const enhanced = withShowAuthPopupMutation(
   withFragmentContainer<InnerProps>({
     me: graphql`
       fragment CommentContainer_me on User {
-        __typename
+        id
       }
     `,
     asset: graphql`
@@ -167,6 +180,7 @@ const enhanced = withShowAuthPopupMutation(
       fragment CommentContainer_comment on Comment {
         id
         author {
+          id
           username
         }
         body

From ba2c2c32b2f4ac16a948bd6cfa80abe3b7274823 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 18:20:55 +0200
Subject: [PATCH 41/53] Fix lint

---
 src/core/client/stream/containers/CommentContainer.spec.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 304ce4e9c..772a8df79 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -19,6 +19,7 @@ it("renders username and body", () => {
     comment: {
       id: "comment-id",
       author: {
+        id: "author-id",
         username: "Marvin",
       },
       body: "Woof",
@@ -46,6 +47,7 @@ it("renders body only", () => {
     comment: {
       id: "comment-id",
       author: {
+        id: "author-id",
         username: null,
       },
       body: "Woof",

From 72f5af9f3b59975cd34b28127618d5ad7f275b89 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 18:29:05 +0200
Subject: [PATCH 42/53] Adapt snapshot

---
 .../containers/__snapshots__/CommentContainer.spec.tsx.snap     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 835692858..f6e7f50ba 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -5,6 +5,7 @@ exports[`renders body only 1`] = `
   <IndentedComment
     author={
       Object {
+        "id": "author-id",
         "username": null,
       }
     }
@@ -34,6 +35,7 @@ exports[`renders username and body 1`] = `
   <IndentedComment
     author={
       Object {
+        "id": "author-id",
         "username": "Marvin",
       }
     }

From db483849dd65bf75c493df15c07acfacb16b7a95 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 16:32:55 +0200
Subject: [PATCH 43/53] Move files into tab structure

---
 src/core/client/stream/components/App.tsx                    | 4 ++--
 .../client/stream/components/{Comment => }/HTMLContent.css   | 0
 .../stream/components/{Comment => }/HTMLContent.spec.tsx     | 0
 .../client/stream/components/{Comment => }/HTMLContent.tsx   | 0
 .../client/stream/components/{Comment => }/Timestamp.css     | 0
 .../stream/components/{Comment => }/Timestamp.spec.tsx       | 0
 .../client/stream/components/{Comment => }/Timestamp.tsx     | 0
 .../{Comment => }/__snapshots__/HTMLContent.spec.tsx.snap    | 0
 .../{Comment => }/__snapshots__/Timestamp.spec.tsx.snap      | 0
 .../{ => tabs/comments}/components/Comment/Comment.css       | 0
 .../{ => tabs/comments}/components/Comment/Comment.spec.tsx  | 0
 .../{ => tabs/comments}/components/Comment/Comment.tsx       | 4 ++--
 .../{ => tabs/comments}/components/Comment/EditedMarker.css  | 0
 .../comments}/components/Comment/EditedMarker.spec.tsx       | 0
 .../{ => tabs/comments}/components/Comment/EditedMarker.tsx  | 0
 .../comments}/components/Comment/IndentedComment.css         | 0
 .../comments}/components/Comment/IndentedComment.spec.tsx    | 0
 .../comments}/components/Comment/IndentedComment.tsx         | 0
 .../comments}/components/Comment/ReplyButton.spec.tsx        | 0
 .../{ => tabs/comments}/components/Comment/ReplyButton.tsx   | 0
 .../comments}/components/Comment/TopBarLeft.spec.tsx         | 0
 .../{ => tabs/comments}/components/Comment/TopBarLeft.tsx    | 0
 .../{ => tabs/comments}/components/Comment/Username.css      | 0
 .../{ => tabs/comments}/components/Comment/Username.spec.tsx | 0
 .../{ => tabs/comments}/components/Comment/Username.tsx      | 0
 .../components/Comment/__snapshots__/Comment.spec.tsx.snap   | 0
 .../Comment/__snapshots__/EditedMarker.spec.tsx.snap         | 0
 .../Comment/__snapshots__/IndentedComment.spec.tsx.snap      | 0
 .../Comment/__snapshots__/ReplyButton.spec.tsx.snap          | 0
 .../Comment/__snapshots__/TopBarLeft.spec.tsx.snap           | 0
 .../components/Comment/__snapshots__/Username.spec.tsx.snap  | 0
 .../stream/{ => tabs/comments}/components/Comment/index.ts   | 1 -
 .../{ => tabs/comments}/components/EditCommentForm.tsx       | 3 ++-
 .../client/stream/{ => tabs/comments}/components/Indent.css  | 0
 .../stream/{ => tabs/comments}/components/Indent.spec.tsx    | 0
 .../client/stream/{ => tabs/comments}/components/Indent.tsx  | 0
 .../comments}/components/PermalinkButton/PermalinkButton.css | 0
 .../comments}/components/PermalinkButton/PermalinkButton.tsx | 0
 .../components/PermalinkButton/PermalinkPopover.css          | 0
 .../components/PermalinkButton/PermalinkPopover.tsx          | 0
 .../{ => tabs/comments}/components/PermalinkButton/index.ts  | 0
 .../stream/{ => tabs/comments}/components/PermalinkView.css  | 0
 .../stream/{ => tabs/comments}/components/PermalinkView.tsx  | 0
 .../{ => tabs/comments}/components/PostCommentForm.css       | 0
 .../{ => tabs/comments}/components/PostCommentForm.tsx       | 0
 .../{ => tabs/comments}/components/PostCommentFormFake.css   | 0
 .../comments}/components/PostCommentFormFake.spec.tsx        | 0
 .../{ => tabs/comments}/components/PostCommentFormFake.tsx   | 0
 .../stream/{ => tabs/comments}/components/PoweredBy.spec.tsx | 0
 .../stream/{ => tabs/comments}/components/PoweredBy.tsx      | 0
 .../client/stream/{ => tabs/comments}/components/RTE.css     | 0
 .../stream/{ => tabs/comments}/components/RTE.spec.tsx       | 0
 .../client/stream/{ => tabs/comments}/components/RTE.tsx     | 0
 .../{ => tabs/comments}/components/ReplyCommentForm.tsx      | 0
 .../stream/{ => tabs/comments}/components/ReplyList.spec.tsx | 0
 .../stream/{ => tabs/comments}/components/ReplyList.tsx      | 0
 .../client/stream/{ => tabs/comments}/components/Stream.css  | 0
 .../stream/{ => tabs/comments}/components/Stream.spec.tsx    | 0
 .../client/stream/{ => tabs/comments}/components/Stream.tsx  | 2 +-
 .../comments}/components/__snapshots__/Indent.spec.tsx.snap  | 0
 .../__snapshots__/PostCommentFormFake.spec.tsx.snap          | 0
 .../components/__snapshots__/PoweredBy.spec.tsx.snap         | 0
 .../comments}/components/__snapshots__/RTE.spec.tsx.snap     | 0
 .../components/__snapshots__/ReplyList.spec.tsx.snap         | 0
 .../comments}/components/__snapshots__/Stream.spec.tsx.snap  | 0
 .../{ => tabs/comments}/containers/CommentContainer.spec.tsx | 0
 .../{ => tabs/comments}/containers/CommentContainer.tsx      | 0
 .../comments}/containers/EditCommentFormContainer.tsx        | 5 ++++-
 .../comments}/containers/PermalinkButtonContainer.tsx        | 0
 .../comments}/containers/PermalinkViewContainer.tsx          | 0
 .../comments}/containers/PostCommentFormContainer.spec.tsx   | 0
 .../comments}/containers/PostCommentFormContainer.tsx        | 5 ++++-
 .../comments}/containers/ReplyCommentFormContainer.spec.tsx  | 0
 .../comments}/containers/ReplyCommentFormContainer.tsx       | 5 ++++-
 .../comments}/containers/ReplyListContainer.spec.tsx         | 0
 .../{ => tabs/comments}/containers/ReplyListContainer.tsx    | 0
 .../{ => tabs/comments}/containers/StreamContainer.spec.tsx  | 0
 .../{ => tabs/comments}/containers/StreamContainer.tsx       | 0
 .../containers/__snapshots__/CommentContainer.spec.tsx.snap  | 0
 .../__snapshots__/PostCommentFormContainer.spec.tsx.snap     | 0
 .../__snapshots__/ReplyCommentFormContainer.spec.tsx.snap    | 0
 .../__snapshots__/ReplyListContainer.spec.tsx.snap           | 0
 .../containers/__snapshots__/StreamContainer.spec.tsx.snap   | 0
 .../{ => tabs/comments}/queries/PermalinkViewQuery.spec.tsx  | 0
 .../{ => tabs/comments}/queries/PermalinkViewQuery.tsx       | 0
 .../stream/{ => tabs/comments}/queries/StreamQuery.spec.tsx  | 0
 .../stream/{ => tabs/comments}/queries/StreamQuery.tsx       | 0
 .../queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap   | 0
 .../queries/__snapshots__/StreamQuery.spec.tsx.snap          | 0
 .../{ => comments}/__snapshots__/editComment.spec.tsx.snap   | 0
 .../test/{ => comments}/__snapshots__/loadMore.spec.tsx.snap | 0
 .../{ => comments}/__snapshots__/permalinkView.spec.tsx.snap | 0
 .../__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap   | 0
 .../__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap | 0
 .../{ => comments}/__snapshots__/postComment.spec.tsx.snap   | 0
 .../{ => comments}/__snapshots__/postReply.spec.tsx.snap     | 0
 .../{ => comments}/__snapshots__/renderReplies.spec.tsx.snap | 0
 .../{ => comments}/__snapshots__/renderStream.spec.tsx.snap  | 0
 .../__snapshots__/showAllReplies.spec.tsx.snap               | 0
 .../client/stream/test/{ => comments}/editComment.spec.tsx   | 4 ++--
 src/core/client/stream/test/{ => comments}/loadMore.spec.tsx | 4 ++--
 .../client/stream/test/{ => comments}/permalinkView.spec.tsx | 4 ++--
 .../test/{ => comments}/permalinkViewAssetNotFound.spec.tsx  | 2 +-
 .../{ => comments}/permalinkViewCommentNotFound.spec.tsx     | 4 ++--
 .../client/stream/test/{ => comments}/postComment.spec.tsx   | 4 ++--
 .../client/stream/test/{ => comments}/postReply.spec.tsx     | 4 ++--
 .../client/stream/test/{ => comments}/renderReplies.spec.tsx | 4 ++--
 .../client/stream/test/{ => comments}/renderStream.spec.tsx  | 4 ++--
 .../stream/test/{ => comments}/showAllReplies.spec.tsx       | 4 ++--
 109 files changed, 38 insertions(+), 29 deletions(-)
 rename src/core/client/stream/components/{Comment => }/HTMLContent.css (100%)
 rename src/core/client/stream/components/{Comment => }/HTMLContent.spec.tsx (100%)
 rename src/core/client/stream/components/{Comment => }/HTMLContent.tsx (100%)
 rename src/core/client/stream/components/{Comment => }/Timestamp.css (100%)
 rename src/core/client/stream/components/{Comment => }/Timestamp.spec.tsx (100%)
 rename src/core/client/stream/components/{Comment => }/Timestamp.tsx (100%)
 rename src/core/client/stream/components/{Comment => }/__snapshots__/HTMLContent.spec.tsx.snap (100%)
 rename src/core/client/stream/components/{Comment => }/__snapshots__/Timestamp.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Comment.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Comment.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Comment.tsx (92%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/EditedMarker.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/EditedMarker.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/EditedMarker.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/IndentedComment.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/IndentedComment.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/IndentedComment.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/ReplyButton.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/ReplyButton.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/TopBarLeft.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/TopBarLeft.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Username.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Username.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/Username.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/Comment.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/ReplyButton.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/__snapshots__/Username.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Comment/index.ts (77%)
 rename src/core/client/stream/{ => tabs/comments}/components/EditCommentForm.tsx (98%)
 rename src/core/client/stream/{ => tabs/comments}/components/Indent.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Indent.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Indent.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkButton/PermalinkButton.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkButton/PermalinkButton.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkButton/PermalinkPopover.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkButton/PermalinkPopover.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkButton/index.ts (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkView.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PermalinkView.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PostCommentForm.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PostCommentForm.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PostCommentFormFake.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PostCommentFormFake.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PostCommentFormFake.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PoweredBy.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/PoweredBy.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/RTE.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/RTE.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/RTE.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/ReplyCommentForm.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/ReplyList.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/ReplyList.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Stream.css (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Stream.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/Stream.tsx (97%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/Indent.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/PostCommentFormFake.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/PoweredBy.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/RTE.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/ReplyList.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/components/__snapshots__/Stream.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/CommentContainer.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/CommentContainer.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/EditCommentFormContainer.tsx (97%)
 rename src/core/client/stream/{ => tabs/comments}/containers/PermalinkButtonContainer.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/PermalinkViewContainer.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/PostCommentFormContainer.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/PostCommentFormContainer.tsx (96%)
 rename src/core/client/stream/{ => tabs/comments}/containers/ReplyCommentFormContainer.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/ReplyCommentFormContainer.tsx (97%)
 rename src/core/client/stream/{ => tabs/comments}/containers/ReplyListContainer.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/ReplyListContainer.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/StreamContainer.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/StreamContainer.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/__snapshots__/CommentContainer.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/__snapshots__/ReplyListContainer.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/containers/__snapshots__/StreamContainer.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/PermalinkViewQuery.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/PermalinkViewQuery.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/StreamQuery.spec.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/StreamQuery.tsx (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap (100%)
 rename src/core/client/stream/{ => tabs/comments}/queries/__snapshots__/StreamQuery.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/editComment.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/loadMore.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/permalinkView.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/postComment.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/postReply.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/renderReplies.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/renderStream.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/__snapshots__/showAllReplies.spec.tsx.snap (100%)
 rename src/core/client/stream/test/{ => comments}/editComment.spec.tsx (97%)
 rename src/core/client/stream/test/{ => comments}/loadMore.spec.tsx (96%)
 rename src/core/client/stream/test/{ => comments}/permalinkView.spec.tsx (95%)
 rename src/core/client/stream/test/{ => comments}/permalinkViewAssetNotFound.spec.tsx (95%)
 rename src/core/client/stream/test/{ => comments}/permalinkViewCommentNotFound.spec.tsx (95%)
 rename src/core/client/stream/test/{ => comments}/postComment.spec.tsx (96%)
 rename src/core/client/stream/test/{ => comments}/postReply.spec.tsx (97%)
 rename src/core/client/stream/test/{ => comments}/renderReplies.spec.tsx (91%)
 rename src/core/client/stream/test/{ => comments}/renderStream.spec.tsx (91%)
 rename src/core/client/stream/test/{ => comments}/showAllReplies.spec.tsx (96%)

diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index b7d2d09d9..1cd0306d1 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -3,8 +3,8 @@ import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
-import PermalinkViewQuery from "../queries/PermalinkViewQuery";
-import StreamQuery from "../queries/StreamQuery";
+import PermalinkViewQuery from "../tabs/comments/queries/PermalinkViewQuery";
+import StreamQuery from "../tabs/comments/queries/StreamQuery";
 import * as styles from "./App.css";
 
 export interface AppProps {
diff --git a/src/core/client/stream/components/Comment/HTMLContent.css b/src/core/client/stream/components/HTMLContent.css
similarity index 100%
rename from src/core/client/stream/components/Comment/HTMLContent.css
rename to src/core/client/stream/components/HTMLContent.css
diff --git a/src/core/client/stream/components/Comment/HTMLContent.spec.tsx b/src/core/client/stream/components/HTMLContent.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/HTMLContent.spec.tsx
rename to src/core/client/stream/components/HTMLContent.spec.tsx
diff --git a/src/core/client/stream/components/Comment/HTMLContent.tsx b/src/core/client/stream/components/HTMLContent.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/HTMLContent.tsx
rename to src/core/client/stream/components/HTMLContent.tsx
diff --git a/src/core/client/stream/components/Comment/Timestamp.css b/src/core/client/stream/components/Timestamp.css
similarity index 100%
rename from src/core/client/stream/components/Comment/Timestamp.css
rename to src/core/client/stream/components/Timestamp.css
diff --git a/src/core/client/stream/components/Comment/Timestamp.spec.tsx b/src/core/client/stream/components/Timestamp.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/Timestamp.spec.tsx
rename to src/core/client/stream/components/Timestamp.spec.tsx
diff --git a/src/core/client/stream/components/Comment/Timestamp.tsx b/src/core/client/stream/components/Timestamp.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/Timestamp.tsx
rename to src/core/client/stream/components/Timestamp.tsx
diff --git a/src/core/client/stream/components/Comment/__snapshots__/HTMLContent.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/HTMLContent.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/HTMLContent.spec.tsx.snap
rename to src/core/client/stream/components/__snapshots__/HTMLContent.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Timestamp.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/Timestamp.spec.tsx.snap
rename to src/core/client/stream/components/__snapshots__/Timestamp.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/tabs/comments/components/Comment/Comment.css
similarity index 100%
rename from src/core/client/stream/components/Comment/Comment.css
rename to src/core/client/stream/tabs/comments/components/Comment/Comment.css
diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/Comment.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
similarity index 92%
rename from src/core/client/stream/components/Comment/Comment.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
index dcf77308e..aee9d5740 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
@@ -1,11 +1,11 @@
 import React, { StatelessComponent } from "react";
 
+import HTMLContent from "talk-stream/components/HTMLContent";
+import Timestamp from "talk-stream/components/Timestamp";
 import { Flex } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
 import EditedMarker from "./EditedMarker";
-import HTMLContent from "./HTMLContent";
-import Timestamp from "./Timestamp";
 import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
 
diff --git a/src/core/client/stream/components/Comment/EditedMarker.css b/src/core/client/stream/tabs/comments/components/Comment/EditedMarker.css
similarity index 100%
rename from src/core/client/stream/components/Comment/EditedMarker.css
rename to src/core/client/stream/tabs/comments/components/Comment/EditedMarker.css
diff --git a/src/core/client/stream/components/Comment/EditedMarker.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/EditedMarker.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/EditedMarker.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/EditedMarker.spec.tsx
diff --git a/src/core/client/stream/components/Comment/EditedMarker.tsx b/src/core/client/stream/tabs/comments/components/Comment/EditedMarker.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/EditedMarker.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/EditedMarker.tsx
diff --git a/src/core/client/stream/components/Comment/IndentedComment.css b/src/core/client/stream/tabs/comments/components/Comment/IndentedComment.css
similarity index 100%
rename from src/core/client/stream/components/Comment/IndentedComment.css
rename to src/core/client/stream/tabs/comments/components/Comment/IndentedComment.css
diff --git a/src/core/client/stream/components/Comment/IndentedComment.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/IndentedComment.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/IndentedComment.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/IndentedComment.spec.tsx
diff --git a/src/core/client/stream/components/Comment/IndentedComment.tsx b/src/core/client/stream/tabs/comments/components/Comment/IndentedComment.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/IndentedComment.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/IndentedComment.tsx
diff --git a/src/core/client/stream/components/Comment/ReplyButton.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/ReplyButton.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/ReplyButton.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/ReplyButton.spec.tsx
diff --git a/src/core/client/stream/components/Comment/ReplyButton.tsx b/src/core/client/stream/tabs/comments/components/Comment/ReplyButton.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/ReplyButton.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/ReplyButton.tsx
diff --git a/src/core/client/stream/components/Comment/TopBarLeft.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/TopBarLeft.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/TopBarLeft.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/TopBarLeft.spec.tsx
diff --git a/src/core/client/stream/components/Comment/TopBarLeft.tsx b/src/core/client/stream/tabs/comments/components/Comment/TopBarLeft.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/TopBarLeft.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/TopBarLeft.tsx
diff --git a/src/core/client/stream/components/Comment/Username.css b/src/core/client/stream/tabs/comments/components/Comment/Username.css
similarity index 100%
rename from src/core/client/stream/components/Comment/Username.css
rename to src/core/client/stream/tabs/comments/components/Comment/Username.css
diff --git a/src/core/client/stream/components/Comment/Username.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/Username.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/Username.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/Username.spec.tsx
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/tabs/comments/components/Comment/Username.tsx
similarity index 100%
rename from src/core/client/stream/components/Comment/Username.tsx
rename to src/core/client/stream/tabs/comments/components/Comment/Username.tsx
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/ReplyButton.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ReplyButton.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/ReplyButton.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ReplyButton.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Username.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Username.spec.tsx.snap
diff --git a/src/core/client/stream/components/Comment/index.ts b/src/core/client/stream/tabs/comments/components/Comment/index.ts
similarity index 77%
rename from src/core/client/stream/components/Comment/index.ts
rename to src/core/client/stream/tabs/comments/components/Comment/index.ts
index 56c2da651..e89d4b958 100644
--- a/src/core/client/stream/components/Comment/index.ts
+++ b/src/core/client/stream/tabs/comments/components/Comment/index.ts
@@ -1,4 +1,3 @@
 export { default, default as IndentedComment } from "./IndentedComment";
 export { default as TopBarLeft } from "./TopBarLeft";
 export { default as Username } from "./Username";
-export { default as Timestamp } from "./Timestamp";
diff --git a/src/core/client/stream/components/EditCommentForm.tsx b/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
similarity index 98%
rename from src/core/client/stream/components/EditCommentForm.tsx
rename to src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
index d7d79ddd8..69176c2b7 100644
--- a/src/core/client/stream/components/EditCommentForm.tsx
+++ b/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
@@ -10,6 +10,7 @@ import { Field, Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
+import Timestamp from "talk-stream/components/Timestamp";
 import {
   AriaInfo,
   Button,
@@ -22,7 +23,7 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
-import { Timestamp, TopBarLeft, Username } from "./Comment";
+import { TopBarLeft, Username } from "./Comment";
 import RTE from "./RTE";
 
 interface FormProps {
diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/tabs/comments/components/Indent.css
similarity index 100%
rename from src/core/client/stream/components/Indent.css
rename to src/core/client/stream/tabs/comments/components/Indent.css
diff --git a/src/core/client/stream/components/Indent.spec.tsx b/src/core/client/stream/tabs/comments/components/Indent.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Indent.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Indent.spec.tsx
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/tabs/comments/components/Indent.tsx
similarity index 100%
rename from src/core/client/stream/components/Indent.tsx
rename to src/core/client/stream/tabs/comments/components/Indent.tsx
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkButton.css
similarity index 100%
rename from src/core/client/stream/components/PermalinkButton/PermalinkButton.css
rename to src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkButton.css
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkButton.tsx
similarity index 100%
rename from src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
rename to src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkButton.tsx
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css
similarity index 100%
rename from src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
rename to src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.tsx
similarity index 100%
rename from src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
rename to src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.tsx
diff --git a/src/core/client/stream/components/PermalinkButton/index.ts b/src/core/client/stream/tabs/comments/components/PermalinkButton/index.ts
similarity index 100%
rename from src/core/client/stream/components/PermalinkButton/index.ts
rename to src/core/client/stream/tabs/comments/components/PermalinkButton/index.ts
diff --git a/src/core/client/stream/components/PermalinkView.css b/src/core/client/stream/tabs/comments/components/PermalinkView.css
similarity index 100%
rename from src/core/client/stream/components/PermalinkView.css
rename to src/core/client/stream/tabs/comments/components/PermalinkView.css
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/tabs/comments/components/PermalinkView.tsx
similarity index 100%
rename from src/core/client/stream/components/PermalinkView.tsx
rename to src/core/client/stream/tabs/comments/components/PermalinkView.tsx
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/tabs/comments/components/PostCommentForm.css
similarity index 100%
rename from src/core/client/stream/components/PostCommentForm.css
rename to src/core/client/stream/tabs/comments/components/PostCommentForm.css
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/tabs/comments/components/PostCommentForm.tsx
similarity index 100%
rename from src/core/client/stream/components/PostCommentForm.tsx
rename to src/core/client/stream/tabs/comments/components/PostCommentForm.tsx
diff --git a/src/core/client/stream/components/PostCommentFormFake.css b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.css
similarity index 100%
rename from src/core/client/stream/components/PostCommentFormFake.css
rename to src/core/client/stream/tabs/comments/components/PostCommentFormFake.css
diff --git a/src/core/client/stream/components/PostCommentFormFake.spec.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/PostCommentFormFake.spec.tsx
rename to src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx
diff --git a/src/core/client/stream/components/PostCommentFormFake.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx
similarity index 100%
rename from src/core/client/stream/components/PostCommentFormFake.tsx
rename to src/core/client/stream/tabs/comments/components/PostCommentFormFake.tsx
diff --git a/src/core/client/stream/components/PoweredBy.spec.tsx b/src/core/client/stream/tabs/comments/components/PoweredBy.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/PoweredBy.spec.tsx
rename to src/core/client/stream/tabs/comments/components/PoweredBy.spec.tsx
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/tabs/comments/components/PoweredBy.tsx
similarity index 100%
rename from src/core/client/stream/components/PoweredBy.tsx
rename to src/core/client/stream/tabs/comments/components/PoweredBy.tsx
diff --git a/src/core/client/stream/components/RTE.css b/src/core/client/stream/tabs/comments/components/RTE.css
similarity index 100%
rename from src/core/client/stream/components/RTE.css
rename to src/core/client/stream/tabs/comments/components/RTE.css
diff --git a/src/core/client/stream/components/RTE.spec.tsx b/src/core/client/stream/tabs/comments/components/RTE.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/RTE.spec.tsx
rename to src/core/client/stream/tabs/comments/components/RTE.spec.tsx
diff --git a/src/core/client/stream/components/RTE.tsx b/src/core/client/stream/tabs/comments/components/RTE.tsx
similarity index 100%
rename from src/core/client/stream/components/RTE.tsx
rename to src/core/client/stream/tabs/comments/components/RTE.tsx
diff --git a/src/core/client/stream/components/ReplyCommentForm.tsx b/src/core/client/stream/tabs/comments/components/ReplyCommentForm.tsx
similarity index 100%
rename from src/core/client/stream/components/ReplyCommentForm.tsx
rename to src/core/client/stream/tabs/comments/components/ReplyCommentForm.tsx
diff --git a/src/core/client/stream/components/ReplyList.spec.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/ReplyList.spec.tsx
rename to src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
similarity index 100%
rename from src/core/client/stream/components/ReplyList.tsx
rename to src/core/client/stream/tabs/comments/components/ReplyList.tsx
diff --git a/src/core/client/stream/components/Stream.css b/src/core/client/stream/tabs/comments/components/Stream.css
similarity index 100%
rename from src/core/client/stream/components/Stream.css
rename to src/core/client/stream/tabs/comments/components/Stream.css
diff --git a/src/core/client/stream/components/Stream.spec.tsx b/src/core/client/stream/tabs/comments/components/Stream.spec.tsx
similarity index 100%
rename from src/core/client/stream/components/Stream.spec.tsx
rename to src/core/client/stream/tabs/comments/components/Stream.spec.tsx
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/tabs/comments/components/Stream.tsx
similarity index 97%
rename from src/core/client/stream/components/Stream.tsx
rename to src/core/client/stream/tabs/comments/components/Stream.tsx
index 1bed822ea..52c08e645 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/tabs/comments/components/Stream.tsx
@@ -3,12 +3,12 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
+import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
 import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
-import UserBoxContainer from "../containers/UserBoxContainer";
 import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 
diff --git a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/Indent.spec.tsx.snap
diff --git a/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/PoweredBy.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/PoweredBy.spec.tsx.snap
diff --git a/src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/RTE.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
similarity index 100%
rename from src/core/client/stream/containers/CommentContainer.spec.tsx
rename to src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
similarity index 100%
rename from src/core/client/stream/containers/CommentContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
diff --git a/src/core/client/stream/containers/EditCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/containers/EditCommentFormContainer.tsx
similarity index 97%
rename from src/core/client/stream/containers/EditCommentFormContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/EditCommentFormContainer.tsx
index 9dee698d3..68e0d0644 100644
--- a/src/core/client/stream/containers/EditCommentFormContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/EditCommentFormContainer.tsx
@@ -9,11 +9,14 @@ import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 
 import { EditCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/EditCommentFormContainer_comment.graphql";
+import {
+  EditCommentMutation,
+  withEditCommentMutation,
+} from "talk-stream/mutations";
 
 import EditCommentForm, {
   EditCommentFormProps,
 } from "../components/EditCommentForm";
-import { EditCommentMutation, withEditCommentMutation } from "../mutations";
 
 interface InnerProps {
   editComment: EditCommentMutation;
diff --git a/src/core/client/stream/containers/PermalinkButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx
similarity index 100%
rename from src/core/client/stream/containers/PermalinkButtonContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx
similarity index 100%
rename from src/core/client/stream/containers/PermalinkViewContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.spec.tsx
similarity index 100%
rename from src/core/client/stream/containers/PostCommentFormContainer.spec.tsx
rename to src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.spec.tsx
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx
similarity index 96%
rename from src/core/client/stream/containers/PostCommentFormContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx
index 882a3a07c..17e5f65c5 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx
@@ -5,10 +5,13 @@ import { BadUserInputError } from "talk-framework/lib/errors";
 import { PromisifiedStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 
+import {
+  CreateCommentMutation,
+  withCreateCommentMutation,
+} from "talk-stream/mutations";
 import PostCommentForm, {
   PostCommentFormProps,
 } from "../components/PostCommentForm";
-import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 
 interface InnerProps {
   createComment: CreateCommentMutation;
diff --git a/src/core/client/stream/containers/ReplyCommentFormContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx
similarity index 100%
rename from src/core/client/stream/containers/ReplyCommentFormContainer.spec.tsx
rename to src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx
diff --git a/src/core/client/stream/containers/ReplyCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.tsx
similarity index 97%
rename from src/core/client/stream/containers/ReplyCommentFormContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.tsx
index 3c0379e30..6a724b82e 100644
--- a/src/core/client/stream/containers/ReplyCommentFormContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.tsx
@@ -9,11 +9,14 @@ import { PromisifiedStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 import { ReplyCommentFormContainer_asset as AssetData } from "talk-stream/__generated__/ReplyCommentFormContainer_asset.graphql";
 import { ReplyCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/ReplyCommentFormContainer_comment.graphql";
+import {
+  CreateCommentMutation,
+  withCreateCommentMutation,
+} from "talk-stream/mutations";
 
 import ReplyCommentForm, {
   ReplyCommentFormProps,
 } from "../components/ReplyCommentForm";
-import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 
 interface InnerProps {
   createComment: CreateCommentMutation;
diff --git a/src/core/client/stream/containers/ReplyListContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.spec.tsx
similarity index 100%
rename from src/core/client/stream/containers/ReplyListContainer.spec.tsx
rename to src/core/client/stream/tabs/comments/containers/ReplyListContainer.spec.tsx
diff --git a/src/core/client/stream/containers/ReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
similarity index 100%
rename from src/core/client/stream/containers/ReplyListContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
diff --git a/src/core/client/stream/containers/StreamContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/StreamContainer.spec.tsx
similarity index 100%
rename from src/core/client/stream/containers/StreamContainer.spec.tsx
rename to src/core/client/stream/tabs/comments/containers/StreamContainer.spec.tsx
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx
similarity index 100%
rename from src/core/client/stream/containers/StreamContainer.tsx
rename to src/core/client/stream/tabs/comments/containers/StreamContainer.tsx
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
diff --git a/src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap
diff --git a/src/core/client/stream/containers/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/containers/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyCommentFormContainer.spec.tsx.snap
diff --git a/src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.spec.tsx b/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx
similarity index 100%
rename from src/core/client/stream/queries/PermalinkViewQuery.spec.tsx
rename to src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx
similarity index 100%
rename from src/core/client/stream/queries/PermalinkViewQuery.tsx
rename to src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx
diff --git a/src/core/client/stream/queries/StreamQuery.spec.tsx b/src/core/client/stream/tabs/comments/queries/StreamQuery.spec.tsx
similarity index 100%
rename from src/core/client/stream/queries/StreamQuery.spec.tsx
rename to src/core/client/stream/tabs/comments/queries/StreamQuery.spec.tsx
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/tabs/comments/queries/StreamQuery.tsx
similarity index 100%
rename from src/core/client/stream/queries/StreamQuery.tsx
rename to src/core/client/stream/tabs/comments/queries/StreamQuery.tsx
diff --git a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
diff --git a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
rename to src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
diff --git a/src/core/client/stream/test/editComment.spec.tsx b/src/core/client/stream/test/comments/editComment.spec.tsx
similarity index 97%
rename from src/core/client/stream/test/editComment.spec.tsx
rename to src/core/client/stream/test/comments/editComment.spec.tsx
index a562c3b38..d9d586f4f 100644
--- a/src/core/client/stream/test/editComment.spec.tsx
+++ b/src/core/client/stream/test/comments/editComment.spec.tsx
@@ -3,8 +3,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, users } from "./fixtures";
+import create from "../create";
+import { assets, users } from "../fixtures";
 
 function createTestRenderer() {
   const resolvers = {
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/comments/loadMore.spec.tsx
similarity index 96%
rename from src/core/client/stream/test/loadMore.spec.tsx
rename to src/core/client/stream/test/comments/loadMore.spec.tsx
index ea72b5510..1d4cdd652 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/comments/loadMore.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, comments } from "./fixtures";
+import create from "../create";
+import { assets, comments } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalinkView.spec.tsx
similarity index 95%
rename from src/core/client/stream/test/permalinkView.spec.tsx
rename to src/core/client/stream/test/comments/permalinkView.spec.tsx
index 438ca2cea..e35b75299 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkView.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, comments } from "./fixtures";
+import create from "../create";
+import { assets, comments } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
similarity index 95%
rename from src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
rename to src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
index 9d2df883e..a2f4c7f62 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
@@ -2,7 +2,7 @@ import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
 
-import create from "./create";
+import create from "../create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
similarity index 95%
rename from src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
rename to src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
index 6a7279669..afa8852e1 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, comments } from "./fixtures";
+import create from "../create";
+import { assets, comments } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/postComment.spec.tsx b/src/core/client/stream/test/comments/postComment.spec.tsx
similarity index 96%
rename from src/core/client/stream/test/postComment.spec.tsx
rename to src/core/client/stream/test/comments/postComment.spec.tsx
index 8703cc757..15f8d6e6f 100644
--- a/src/core/client/stream/test/postComment.spec.tsx
+++ b/src/core/client/stream/test/comments/postComment.spec.tsx
@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, users } from "./fixtures";
+import create from "../create";
+import { assets, users } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/postReply.spec.tsx b/src/core/client/stream/test/comments/postReply.spec.tsx
similarity index 97%
rename from src/core/client/stream/test/postReply.spec.tsx
rename to src/core/client/stream/test/comments/postReply.spec.tsx
index b0f8239a0..791b80b89 100644
--- a/src/core/client/stream/test/postReply.spec.tsx
+++ b/src/core/client/stream/test/comments/postReply.spec.tsx
@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, users } from "./fixtures";
+import create from "../create";
+import { assets, users } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/comments/renderReplies.spec.tsx
similarity index 91%
rename from src/core/client/stream/test/renderReplies.spec.tsx
rename to src/core/client/stream/test/comments/renderReplies.spec.tsx
index b508d78d8..fe0d32dfa 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/renderReplies.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assetWithReplies } from "./fixtures";
+import create from "../create";
+import { assetWithReplies } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/comments/renderStream.spec.tsx
similarity index 91%
rename from src/core/client/stream/test/renderStream.spec.tsx
rename to src/core/client/stream/test/comments/renderStream.spec.tsx
index 131bb678c..c9fca006e 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/comments/renderStream.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets } from "./fixtures";
+import create from "../create";
+import { assets } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
similarity index 96%
rename from src/core/client/stream/test/showAllReplies.spec.tsx
rename to src/core/client/stream/test/comments/showAllReplies.spec.tsx
index 52d302e55..59eb7d442 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "./create";
-import { assets, comments } from "./fixtures";
+import create from "../create";
+import { assets, comments } from "../fixtures";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

From ecc9eadc67930afc2b69aeec0daae0215b41b566 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 17:25:47 +0200
Subject: [PATCH 44/53] Add activeTab to local state

---
 .../client/stream/components/App.spec.tsx     | 12 ++-------
 src/core/client/stream/components/App.tsx     | 18 +++++++------
 .../__snapshots__/App.spec.tsx.snap           | 13 ++-------
 .../client/stream/containers/AppContainer.tsx |  6 ++---
 .../__snapshots__/initLocalState.spec.ts.snap |  3 ++-
 .../client/stream/local/initLocalState.ts     |  3 +++
 src/core/client/stream/local/local.graphql    |  5 ++++
 .../comments/components/CommentsPane.spec.tsx | 22 +++++++++++++++
 .../tabs/comments/components/CommentsPane.tsx | 15 +++++++++++
 .../__snapshots__/CommentsPane.spec.tsx.snap  |  5 ++++
 .../containers/CommentsPaneContainer.tsx      | 27 +++++++++++++++++++
 .../client/stream/test/comments/create.ts     | 13 +++++++++
 .../stream/test/comments/editComment.spec.tsx |  2 +-
 .../stream/test/comments/loadMore.spec.tsx    |  2 +-
 .../test/comments/permalinkView.spec.tsx      |  2 +-
 .../permalinkViewAssetNotFound.spec.tsx       |  2 +-
 .../permalinkViewCommentNotFound.spec.tsx     |  2 +-
 .../stream/test/comments/postComment.spec.tsx |  2 +-
 .../stream/test/comments/postReply.spec.tsx   |  2 +-
 .../test/comments/renderReplies.spec.tsx      |  2 +-
 .../test/comments/renderStream.spec.tsx       |  2 +-
 .../test/comments/showAllReplies.spec.tsx     |  2 +-
 src/core/client/stream/test/create.tsx        |  2 +-
 23 files changed, 120 insertions(+), 44 deletions(-)
 create mode 100644 src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx
 create mode 100644 src/core/client/stream/tabs/comments/components/CommentsPane.tsx
 create mode 100644 src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap
 create mode 100644 src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx
 create mode 100644 src/core/client/stream/test/comments/create.ts

diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx
index d7dfdc3a7..dcd979099 100644
--- a/src/core/client/stream/components/App.spec.tsx
+++ b/src/core/client/stream/components/App.spec.tsx
@@ -5,17 +5,9 @@ import { PropTypesOf } from "talk-framework/types";
 
 import App from "./App";
 
-it("renders stream", () => {
+it("renders comments", () => {
   const props: PropTypesOf<typeof App> = {
-    showPermalinkView: false,
-  };
-  const wrapper = shallow(<App {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders permalink view", () => {
-  const props: PropTypesOf<typeof App> = {
-    showPermalinkView: true,
+    activeTab: "COMMENTS",
   };
   const wrapper = shallow(<App {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 1cd0306d1..421e6af9c 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -3,20 +3,22 @@ import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
-import PermalinkViewQuery from "../tabs/comments/queries/PermalinkViewQuery";
-import StreamQuery from "../tabs/comments/queries/StreamQuery";
+import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import * as styles from "./App.css";
 
 export interface AppProps {
-  showPermalinkView: boolean;
+  activeTab: "COMMENTS" | "%future added value";
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  const view = props.showPermalinkView ? (
-    <PermalinkViewQuery />
-  ) : (
-    <StreamQuery />
-  );
+  let view: React.ReactElement<any>;
+  switch (props.activeTab) {
+    case "COMMENTS":
+      view = <CommentsPaneContainer />;
+      break;
+    default:
+      throw new Error(`Unknown tab ${props.activeTab}`);
+  }
   return (
     <Flex justifyContent="center" className={styles.root}>
       {view}
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
index ccb926aaf..d42a5a3d0 100644
--- a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -1,19 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders permalink view 1`] = `
+exports[`renders comments 1`] = `
 <withPropsOnChange(Flex)
   className="App-root"
   justifyContent="center"
 >
-  <withContext(withLocalStateContainer(PermalinkViewQuery)) />
-</withPropsOnChange(Flex)>
-`;
-
-exports[`renders stream 1`] = `
-<withPropsOnChange(Flex)
-  className="App-root"
-  justifyContent="center"
->
-  <withContext(withLocalStateContainer(StreamQuery)) />
+  <withContext(withLocalStateContainer(CommentsPaneContainer)) />
 </withPropsOnChange(Flex)>
 `;
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 533e8e37f..011a0bee8 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -11,15 +11,15 @@ interface InnerProps {
 }
 
 const AppContainer: StatelessComponent<InnerProps> = ({
-  local: { commentID },
+  local: { activeTab },
 }) => {
-  return <App showPermalinkView={!!commentID} />;
+  return <App activeTab={activeTab} />;
 };
 
 const enhanced = withLocalStateContainer(
   graphql`
     fragment AppContainerLocal on Local {
-      commentID
+      activeTab
     }
   `
 )(AppContainer);
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index c8dda11c7..b7fe1473c 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -18,7 +18,8 @@ exports[`init local state 1`] = `
     },
     \\"authPopup\\": {
       \\"__ref\\": \\"client:root.local.authPopup\\"
-    }
+    },
+    \\"activeTab\\": \\"COMMENTS\\"
   },
   \\"client:root.local.network\\": {
     \\"__id\\": \\"client:root.local.network\\",
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 5b127755d..b2f09b110 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -75,5 +75,8 @@ export default async function initLocalState(
     authPopupRecord.setValue(false, "focus");
     authPopupRecord.setValue("", "href");
     localRecord.setLinkedRecord(authPopupRecord, "authPopup");
+
+    // Set active tab
+    localRecord.setValue("COMMENTS", "activeTab");
   });
 }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 37615ec9d..62e52d4e8 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -9,6 +9,10 @@ enum View {
   FORGOT_PASSWORD
 }
 
+enum Tab {
+  COMMENTS
+}
+
 type AuthPopup {
   open: Boolean!
   focus: Boolean!
@@ -26,6 +30,7 @@ type Local {
   commentID: String
   authPopup: AuthPopup!
   authToken: String
+  activeTab: Tab!
 }
 
 extend type Query {
diff --git a/src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx b/src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx
new file mode 100644
index 000000000..cd04ecd31
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx
@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import CommentsPane from "./CommentsPane";
+
+it("renders stream", () => {
+  const props: PropTypesOf<typeof CommentsPane> = {
+    showPermalinkView: false,
+  };
+  const wrapper = shallow(<CommentsPane {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders permalink view", () => {
+  const props: PropTypesOf<typeof CommentsPane> = {
+    showPermalinkView: true,
+  };
+  const wrapper = shallow(<CommentsPane {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/components/CommentsPane.tsx b/src/core/client/stream/tabs/comments/components/CommentsPane.tsx
new file mode 100644
index 000000000..3bb4bc167
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/CommentsPane.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import PermalinkViewQuery from "../queries/PermalinkViewQuery";
+import StreamQuery from "../queries/StreamQuery";
+
+export interface CommentsPaneProps {
+  showPermalinkView: boolean;
+}
+
+const CommentsPane: StatelessComponent<CommentsPaneProps> = props => {
+  return props.showPermalinkView ? <PermalinkViewQuery /> : <StreamQuery />;
+};
+
+export default CommentsPane;
diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap
new file mode 100644
index 000000000..2207f2403
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view 1`] = `<withContext(withLocalStateContainer(PermalinkViewQuery)) />`;
+
+exports[`renders stream 1`] = `<withContext(withLocalStateContainer(StreamQuery)) />`;
diff --git a/src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx
new file mode 100644
index 000000000..c058adc02
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import { CommentsPaneContainerLocal as Local } from "talk-stream/__generated__/CommentsPaneContainerLocal.graphql";
+
+import CommentsPane from "../components/CommentsPane";
+
+interface InnerProps {
+  local: Local;
+}
+
+const CommentsPaneContainer: StatelessComponent<InnerProps> = ({
+  local: { commentID },
+}) => {
+  return <CommentsPane showPermalinkView={!!commentID} />;
+};
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment CommentsPaneContainerLocal on Local {
+      commentID
+    }
+  `
+)(CommentsPaneContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/test/comments/create.ts b/src/core/client/stream/test/comments/create.ts
new file mode 100644
index 000000000..090a3e3f1
--- /dev/null
+++ b/src/core/client/stream/test/comments/create.ts
@@ -0,0 +1,13 @@
+import createTopLevel, { CreateParams } from "../create";
+
+export default function create(params: CreateParams) {
+  return createTopLevel({
+    ...params,
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        localRecord.setValue("COMMENTS", "activeTab");
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/stream/test/comments/editComment.spec.tsx b/src/core/client/stream/test/comments/editComment.spec.tsx
index d9d586f4f..733f30eb2 100644
--- a/src/core/client/stream/test/comments/editComment.spec.tsx
+++ b/src/core/client/stream/test/comments/editComment.spec.tsx
@@ -3,8 +3,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 function createTestRenderer() {
   const resolvers = {
diff --git a/src/core/client/stream/test/comments/loadMore.spec.tsx b/src/core/client/stream/test/comments/loadMore.spec.tsx
index 1d4cdd652..404d3c702 100644
--- a/src/core/client/stream/test/comments/loadMore.spec.tsx
+++ b/src/core/client/stream/test/comments/loadMore.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalinkView.spec.tsx
index e35b75299..0bbe3e260 100644
--- a/src/core/client/stream/test/comments/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkView.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
index a2f4c7f62..9d2df883e 100644
--- a/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx
@@ -2,7 +2,7 @@ import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
 
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
index afa8852e1..9c4517351 100644
--- a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/postComment.spec.tsx b/src/core/client/stream/test/comments/postComment.spec.tsx
index 15f8d6e6f..01f296ffc 100644
--- a/src/core/client/stream/test/comments/postComment.spec.tsx
+++ b/src/core/client/stream/test/comments/postComment.spec.tsx
@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/postReply.spec.tsx b/src/core/client/stream/test/comments/postReply.spec.tsx
index 791b80b89..6f75b57a8 100644
--- a/src/core/client/stream/test/comments/postReply.spec.tsx
+++ b/src/core/client/stream/test/comments/postReply.spec.tsx
@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/renderReplies.spec.tsx b/src/core/client/stream/test/comments/renderReplies.spec.tsx
index fe0d32dfa..3c361740d 100644
--- a/src/core/client/stream/test/comments/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/renderReplies.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assetWithReplies } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/renderStream.spec.tsx b/src/core/client/stream/test/comments/renderStream.spec.tsx
index c9fca006e..2778acb02 100644
--- a/src/core/client/stream/test/comments/renderStream.spec.tsx
+++ b/src/core/client/stream/test/comments/renderStream.spec.tsx
@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/showAllReplies.spec.tsx b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
index 59eb7d442..547ac7b33 100644
--- a/src/core/client/stream/test/comments/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx
index 2eecbc5a1..f105162c4 100644
--- a/src/core/client/stream/test/create.tsx
+++ b/src/core/client/stream/test/create.tsx
@@ -16,7 +16,7 @@ import createEnvironment from "./createEnvironment";
 import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 
-interface CreateParams {
+export interface CreateParams {
   logNetwork?: boolean;
   resolvers: IResolvers<any, any>;
   initLocalState?: (

From a3526ab241b739d5d85bbc9e2d708808dd6c0b6f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 21:45:49 +0200
Subject: [PATCH 45/53] Change translation strings

---
 .../components/UserBoxAuthenticated.tsx       |  4 ++--
 .../components/UserBoxUnauthenticated.tsx     |  6 ++---
 .../UserBoxAuthenticated.spec.tsx.snap        |  4 ++--
 .../UserBoxUnauthenticated.spec.tsx.snap      |  6 ++---
 src/locales/en-US/stream.ftl                  | 22 ++++++++++---------
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 94ed90ac6..68c7fba00 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -20,7 +20,7 @@ const UserBoxAuthenticated: StatelessComponent<
   return (
     <Flex itemGutter="half" wrap>
       <Localized
-        id="comments-userBoxAuthenticated-signedInAs"
+        id="general-userBoxAuthenticated-signedInAs"
         username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
@@ -28,7 +28,7 @@ const UserBoxAuthenticated: StatelessComponent<
         </Typography>
       </Localized>
       <Localized
-        id="comments-userBoxAuthenticated-notYou"
+        id="general-userBoxAuthenticated-notYou"
         button={
           <Button
             color="primary"
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 8eec09e9e..44c9cd246 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -17,7 +17,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   return (
     <Flex itemGutter alignItems="center">
       <MatchMedia gteWidth="sm">
-        <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+        <Localized id="general-userBoxUnauthenticated-joinTheConversation">
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
@@ -30,7 +30,7 @@ const UserBoxUnauthenticated: StatelessComponent<
           |
         </Typography>
       </MatchMedia>
-      <Localized id="comments-userBoxUnauthenticated-signIn">
+      <Localized id="general-userBoxUnauthenticated-signIn">
         <Button
           color="primary"
           size="small"
@@ -40,7 +40,7 @@ const UserBoxUnauthenticated: StatelessComponent<
           Sign in
         </Button>
       </Localized>
-      <Localized id="comments-userBoxUnauthenticated-register">
+      <Localized id="general-userBoxUnauthenticated-register">
         <Button
           color="primary"
           size="small"
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
index 80f20f2b3..0899da755 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
   wrap={true}
 >
   <Localized
-    id="comments-userBoxAuthenticated-signedInAs"
+    id="general-userBoxAuthenticated-signedInAs"
     username={<Username />}
   >
     <withPropsOnChange(Typography)
@@ -25,7 +25,7 @@ exports[`renders correctly 1`] = `
         variant="underlined"
       />
     }
-    id="comments-userBoxAuthenticated-notYou"
+    id="general-userBoxAuthenticated-notYou"
   >
     <withPropsOnChange(Typography)
       container={[Function]}
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 492657d72..13857622c 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
     gteWidth="sm"
   >
     <Localized
-      id="comments-userBoxUnauthenticated-joinTheConversation"
+      id="general-userBoxUnauthenticated-joinTheConversation"
     >
       <withPropsOnChange(Typography)
         className="UserBoxUnauthenticated-joinText"
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(Typography)>
   </MatchMediaWithContext>
   <Localized
-    id="comments-userBoxUnauthenticated-signIn"
+    id="general-userBoxUnauthenticated-signIn"
   >
     <withPropsOnChange(Button)
       color="primary"
@@ -39,7 +39,7 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(Button)>
   </Localized>
   <Localized
-    id="comments-userBoxUnauthenticated-register"
+    id="general-userBoxUnauthenticated-register"
   >
     <withPropsOnChange(Button)
       color="primary"
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index d939806a7..1a2b81f5f 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -1,5 +1,17 @@
 ### Localization for Embed Stream
 
+## General
+
+general-userBoxUnauthenticated-joinTheConversation = Join the conversation
+general-userBoxUnauthenticated-signIn = Sign in
+general-userBoxUnauthenticated-register = Register
+
+general-userBoxAuthenticated-signedInAs =
+  Signed in as <username></username>.
+
+general-userBoxAuthenticated-notYou =
+  Not you? <button>Sign Out</button>
+
 ## Comments Tab
 
 comments-streamQuery-assetNotFound = Asset not found
@@ -14,16 +26,6 @@ comments-permalinkPopover-copied = Copied
 comments-permalinkView-showAllComments = Show all comments
 comments-permalinkView-commentNotFound = Comment not found
 
-comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
-comments-userBoxUnauthenticated-signIn = Sign in
-comments-userBoxUnauthenticated-register = Register
-
-comments-userBoxAuthenticated-signedInAs =
-  Signed in as <username></username>.
-
-comments-userBoxAuthenticated-notYou =
-  Not you? <button>Sign Out</button>
-
 comments-rte-bold =
   .title = Bold
 

From 4b1e2dd2fd3a1ad45ef86e736b1cc5f5da695272 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Sep 2018 21:49:30 +0200
Subject: [PATCH 46/53] Implement SetActiveTabMutation

---
 .../mutations/SetActiveTabMutation.spec.ts    | 21 ++++++++++++++++
 .../stream/mutations/SetActiveTabMutation.ts  | 24 +++++++++++++++++++
 src/core/client/stream/mutations/index.ts     |  4 ++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/core/client/stream/mutations/SetActiveTabMutation.spec.ts
 create mode 100644 src/core/client/stream/mutations/SetActiveTabMutation.ts

diff --git a/src/core/client/stream/mutations/SetActiveTabMutation.spec.ts b/src/core/client/stream/mutations/SetActiveTabMutation.spec.ts
new file mode 100644
index 000000000..d91b8aa68
--- /dev/null
+++ b/src/core/client/stream/mutations/SetActiveTabMutation.spec.ts
@@ -0,0 +1,21 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { commit } from "./SetActiveTabMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+  });
+});
+
+it("Sets activeTab", () => {
+  const tab = "COMMENTS";
+  commit(environment, { tab });
+  expect(source.get(LOCAL_ID)!.activeTab).toEqual(tab);
+});
diff --git a/src/core/client/stream/mutations/SetActiveTabMutation.ts b/src/core/client/stream/mutations/SetActiveTabMutation.ts
new file mode 100644
index 000000000..8c930dd0c
--- /dev/null
+++ b/src/core/client/stream/mutations/SetActiveTabMutation.ts
@@ -0,0 +1,24 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { createMutationContainer, LOCAL_ID } from "talk-framework/lib/relay";
+
+export interface SetActiveTabInput {
+  tab: "COMMENTS";
+}
+
+export type SetActiveTabMutation = (input: SetActiveTabInput) => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: SetActiveTabInput
+) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.tab, "activeTab");
+  });
+}
+
+export const withSetActiveTabMutation = createMutationContainer(
+  "setActiveTab",
+  commit
+);
diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index 6c920dfea..5b39e4e78 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -26,3 +26,7 @@ export {
   withSetAuthPopupStateMutation,
   SetAuthPopupStateMutation,
 } from "./SetAuthPopupStateMutation";
+export {
+  withSetActiveTabMutation,
+  SetActiveTabMutation,
+} from "./SetActiveTabMutation";

From 38f1068a77c9238661e66f1f598d28250ed7a899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 14 Sep 2018 09:33:16 -0300
Subject: [PATCH 47/53] Updates

---
 .../test/__snapshots__/loadMore.spec.tsx.snap | 281 ++++++++++++-
 .../__snapshots__/permalinkView.spec.tsx.snap |  81 +++-
 .../permalinkViewAssetNotFound.spec.tsx.snap  |   9 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap |  33 +-
 .../__snapshots__/postComment.spec.tsx.snap   | 304 +++++++++++++-
 .../__snapshots__/postReply.spec.tsx.snap     | 304 +++++++++++++-
 .../__snapshots__/renderReplies.spec.tsx.snap | 377 +++++++++++++++++-
 .../__snapshots__/renderStream.spec.tsx.snap  | 265 +++++++++++-
 .../showAllReplies.spec.tsx.snap              | 287 ++++++++++++-
 src/core/client/ui/components/Tabs/Tab.tsx    |   5 +-
 src/core/client/ui/components/Tabs/TabBar.tsx |  14 +-
 .../Tabs/__snapshots__/Tab.spec.tsx.snap      |  19 +-
 .../Tabs/__snapshots__/TabBar.spec.tsx.snap   |  63 ++-
 src/core/client/ui/components/Tabs/tabs.mdx   |   8 +-
 14 files changed, 1942 insertions(+), 108 deletions(-)

diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 19c1b6129..1d82d7bb9 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -325,15 +325,278 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-controls="talk-comments-stream-log"
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+        disabled={false}
+        id="talk-comments-stream-loadMore"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Load more
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 89eba3ff5..19ba2686a 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -4,15 +4,78 @@ exports[`renders permalink view 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (6:6)
-5: ) {
-6:   me(clientAuthRevision: $authRevision) {
-        ^
-7:     ...PermalinkViewContainer_me
-
+  <div
+    className="PermalinkView-root"
+  >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all comments
+    </a>
+    <div
+      className="Indent-root"
+    >
+      <div
+        className="Comment-root"
+        role="article"
+      >
+        <div
+          className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        >
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            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>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index d5c3a172c..b7f4fc521 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -5,14 +5,7 @@ exports[`renders permalink view with unknown asset 1`] = `
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (6:6)
-5: ) {
-6:   me(clientAuthRevision: $authRevision) {
-        ^
-7:     ...PermalinkViewContainer_me
-
+    Asset not found
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 39cd1503f..931557b1a 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -4,15 +4,30 @@ exports[`renders permalink view with unknown comment 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (6:6)
-5: ) {
-6:   me(clientAuthRevision: $authRevision) {
-        ^
-7:     ...PermalinkViewContainer_me
-
+  <div
+    className="PermalinkView-root"
+  >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 97fd167f7..dacf75add 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -718,15 +718,301 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index a7fce87a7..63360eccb 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -1279,15 +1279,301 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        >
+          <div
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Signed in as 
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            >
+              Markus
+            </span>
+            .
+          </div>
+          <div
+            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <form
+        autoComplete="off"
+        className="PostCommentForm-root"
+        id="comments-postCommentForm-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div>
+            <label
+              className="AriaInfo-root"
+              htmlFor="comments-postCommentForm-field"
+            >
+              Post a comment
+            </label>
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-hidden="true"
+                  className="RTE-placeholder RTE-placeholder"
+                >
+                  Post a comment
+                </div>
+                <div
+                  aria-placeholder="Post a comment"
+                  className="RTE-contentEditable RTE-content"
+                  contentEditable={true}
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                  disabled={false}
+                  id="comments-postCommentForm-field"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onCut={[Function]}
+                  onFocus={[Function]}
+                  onInput={[Function]}
+                  onKeyDown={[Function]}
+                  onPaste={[Function]}
+                  onSelect={[Function]}
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+          >
+            <div
+              className="PostCommentForm-poweredBy"
+            >
+              <span
+                className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+              >
+                Powered by 
+                <span
+                  className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+                >
+                  ⁨The Coral Project⁩
+                </span>
+              </span>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              disabled={true}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index dbdc4fd2e..bc69ca2ca 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -4,15 +4,374 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-with-replies"
+          role="log"
+        >
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index dbdc4fd2e..befacc4ef 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -4,15 +4,262 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 4bfa26a4a..d8a24d800 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -4,15 +4,284 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div>
-    Unknown argument "clientAuthRevision" on field "me" of type "Query".
-
-GraphQL request (5:6)
-4: ) {
-5:   me(clientAuthRevision: $authRevision) {
-        ^
-6:     ...StreamContainer_me
-
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Comment-root"
+            role="article"
+          >
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                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>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-0"
+          role="log"
+        >
+          <div
+            className="Indent-root Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  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>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Indent-root Indent-level1 Indent-noBorder"
+          >
+            <button
+              aria-controls="talk-comments-replyList-log--comment-0"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+              disabled={false}
+              id="talk-comments-replyList-showAll--comment-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Show all
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 74cb146fd..59f24cf20 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -1,6 +1,7 @@
 import cn from "classnames";
 import React from "react";
 import { withStyles } from "talk-ui/hocs";
+import BaseButton from "../BaseButton";
 import * as styles from "./Tab.css";
 
 export interface TabProps {
@@ -58,14 +59,14 @@ class Tab extends React.Component<TabProps> {
         role="presentation"
         onClick={this.handleTabClick}
       >
-        <button
+        <BaseButton
           aria-controls={tabId}
           role="tab"
           aria-selected={active}
           onClick={this.handleTabClick}
         >
           {children}
-        </button>
+        </BaseButton>
       </li>
     );
   }
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index 88c77b95b..29f993bf1 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -13,9 +13,9 @@ export interface TabBarProps {
    */
   classes: typeof styles;
   /**
-   * Color style variant
+   * Style variant
    */
-  color?: "primary" | "secondary";
+  variant?: "primary" | "secondary";
   /**
    * Active tab id/name
    */
@@ -37,7 +37,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     children,
     onTabClick,
     activeTab,
-    color,
+    variant,
     defaultActiveTab,
   } = props;
 
@@ -45,8 +45,8 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     classes.root,
     [
       {
-        [classes.primary]: color === "primary",
-        [classes.secondary]: color === "secondary",
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
       },
     ],
     className
@@ -60,7 +60,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
           defaultActiveTab && !activeTab
             ? child.props.tabId === defaultActiveTab
             : child.props.tabId === activeTab,
-        color,
+        variant,
         onTabClick,
       })
   );
@@ -73,7 +73,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
 };
 
 TabBar.defaultProps = {
-  color: "primary",
+  variant: "primary",
 };
 
 const enhanced = withStyles(styles)(TabBar);
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
index cd06a91e8..8754dd612 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
@@ -2,12 +2,25 @@
 
 exports[`renders correctly 1`] = `
 <li
-  aria-controls="three"
   className="Tab-root"
   id="three-tab"
   onClick={[Function]}
-  role="tab"
+  role="presentation"
 >
-  Three
+  <button
+    aria-controls="three"
+    className="BaseButton-root"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onTouchEnd={[Function]}
+    role="tab"
+    type="button"
+  >
+    Three
+  </button>
 </li>
 `;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
index 1a4ec45de..0f588bd1d 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
@@ -6,34 +6,73 @@ exports[`renders correctly 1`] = `
   role="tablist"
 >
   <li
-    aria-controls="one"
-    aria-selected={true}
     className="Tab-root Tab-primary Tab-active"
     id="one-tab"
     onClick={[Function]}
-    role="tab"
+    role="presentation"
   >
-    One
+    <button
+      aria-controls="one"
+      aria-selected={true}
+      className="BaseButton-root"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      One
+    </button>
   </li>
   <li
-    aria-controls="two"
-    aria-selected={false}
     className="Tab-root Tab-primary"
     id="two-tab"
     onClick={[Function]}
-    role="tab"
+    role="presentation"
   >
-    Two
+    <button
+      aria-controls="two"
+      aria-selected={false}
+      className="BaseButton-root"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      Two
+    </button>
   </li>
   <li
-    aria-controls="three"
-    aria-selected={false}
     className="Tab-root Tab-primary"
     id="three-tab"
     onClick={[Function]}
-    role="tab"
+    role="presentation"
   >
-    Three
+    <button
+      aria-controls="three"
+      aria-selected={false}
+      className="BaseButton-root"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      Three
+    </button>
   </li>
 </ul>
 `;
diff --git a/src/core/client/ui/components/Tabs/tabs.mdx b/src/core/client/ui/components/Tabs/tabs.mdx
index 1fc0f50bc..f465209ae 100644
--- a/src/core/client/ui/components/Tabs/tabs.mdx
+++ b/src/core/client/ui/components/Tabs/tabs.mdx
@@ -1,14 +1,14 @@
 ---
 name: Tabs
-route: '/Tabs'
+menu: UI Kit
 ---
 
 # Tabs
 
 ### Examples
 
-import { Playground, PropsTable } from 'docz'
-import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components'
+import { Playground } from 'docz'
+import { Flex, TabBar, Tab, TabContent, TabPane } from './index'
 import Container from "react-with-state-props"
 
 ## Primary Tabs
@@ -37,7 +37,7 @@ import Container from "react-with-state-props"
     state={{ activeId: "two" }}
     render={props => (
       <div>
-      <TabBar color="secondary" activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+      <TabBar variant="secondary" activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
         <Tab tabId="one">One</Tab>
         <Tab tabId="two">Two</Tab>
         <Tab tabId="three">Three</Tab>

From 3314bc3ba699f43a2ae14e4fc64970e9e03109ee Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 17 Sep 2018 20:52:36 +0200
Subject: [PATCH 48/53] Move styles to button

---
 src/core/client/ui/components/Tabs/Tab.css | 23 ++++++++++------------
 src/core/client/ui/components/Tabs/Tab.tsx |  8 ++++----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index ca7ac0f66..4000b151b 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -1,9 +1,16 @@
 .root {
+  display: inline-block;
+  list-style: none;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+
+.button {
+  height: 100%;
   box-sizing: border-box;
+  border-bottom: 0;
   list-style: none;
   padding: var(--spacing-unit);
-  display: inline-flex;
-  margin-bottom: -1px;
   font-weight: var(--font-weight-regular);
   font-family: var(--font-family-serif);
 
@@ -12,22 +19,12 @@
   }
 }
 
-.root.primary {
+.primary {
   background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-main);
-  border-left-width: 0;
   padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
 
-  &:first-child {
-    border-left-width: 1px;
-    border-top-left-radius: var(--round-corners);
-  }
-
-  &:last-child {
-    border-top-right-radius: var(--round-corners);
-  }
-
   &.active {
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 59f24cf20..8e0390c42 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -41,8 +41,8 @@ class Tab extends React.Component<TabProps> {
   public render() {
     const { className, classes, children, tabId, active, variant } = this.props;
 
-    const rootClassName = cn(
-      classes.root,
+    const buttonClassName = cn(
+      classes.button,
       {
         [classes.primary]: variant === "primary",
         [classes.secondary]: variant === "secondary",
@@ -53,13 +53,13 @@ class Tab extends React.Component<TabProps> {
 
     return (
       <li
-        className={rootClassName}
+        className={styles.root}
         key={`${tabId}-tab`}
         id={`${tabId}-tab`}
         role="presentation"
-        onClick={this.handleTabClick}
       >
         <BaseButton
+          className={buttonClassName}
           aria-controls={tabId}
           role="tab"
           aria-selected={active}

From 0b0aa7b1ee25ae5239bda419bc947600252565f9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 17 Sep 2018 20:56:42 +0200
Subject: [PATCH 49/53] Namespace ids

---
 src/core/client/ui/components/Tabs/Tab.tsx     | 6 +++---
 src/core/client/ui/components/Tabs/TabPane.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 8e0390c42..fd7e99e0f 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -54,13 +54,13 @@ class Tab extends React.Component<TabProps> {
     return (
       <li
         className={styles.root}
-        key={`${tabId}-tab`}
-        id={`${tabId}-tab`}
+        key={tabId}
+        id={`tab-${tabId}`}
         role="presentation"
       >
         <BaseButton
           className={buttonClassName}
-          aria-controls={tabId}
+          aria-controls={`tabPane-${tabId}`}
           role="tab"
           aria-selected={active}
           onClick={this.handleTabClick}
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
index 485eb5e53..a3c84480c 100644
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ b/src/core/client/ui/components/Tabs/TabPane.tsx
@@ -17,9 +17,9 @@ const TabPane: StatelessComponent<TabBarProps> = props => {
     <section
       className={className}
       key={tabId}
-      id={tabId}
+      id={`tabPane-${tabId}`}
       role="tabpanel"
-      aria-labelledby={`${tabId}-tab`}
+      aria-labelledby={`tab-${tabId}`}
     >
       {children}
     </section>

From 0983d31c103a4987ff2b5f5008592cf607c4bd72 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 17 Sep 2018 21:01:20 +0200
Subject: [PATCH 50/53] Update snapshots

---
 .../Tabs/__snapshots__/Tab.spec.tsx.snap      |  7 +++--
 .../Tabs/__snapshots__/TabBar.spec.tsx.snap   | 27 +++++++++----------
 .../__snapshots__/TabContent.spec.tsx.snap    |  4 +--
 .../Tabs/__snapshots__/TabPane.spec.tsx.snap  |  4 +--
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
index 8754dd612..a30d114a8 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
@@ -3,13 +3,12 @@
 exports[`renders correctly 1`] = `
 <li
   className="Tab-root"
-  id="three-tab"
-  onClick={[Function]}
+  id="tab-three"
   role="presentation"
 >
   <button
-    aria-controls="three"
-    className="BaseButton-root"
+    aria-controls="tabPane-three"
+    className="BaseButton-root Tab-button"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
index 0f588bd1d..fd9f2ae4a 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
@@ -6,15 +6,14 @@ exports[`renders correctly 1`] = `
   role="tablist"
 >
   <li
-    className="Tab-root Tab-primary Tab-active"
-    id="one-tab"
-    onClick={[Function]}
+    className="Tab-root"
+    id="tab-one"
     role="presentation"
   >
     <button
-      aria-controls="one"
+      aria-controls="tabPane-one"
       aria-selected={true}
-      className="BaseButton-root"
+      className="BaseButton-root Tab-button Tab-primary Tab-active"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -29,15 +28,14 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root Tab-primary"
-    id="two-tab"
-    onClick={[Function]}
+    className="Tab-root"
+    id="tab-two"
     role="presentation"
   >
     <button
-      aria-controls="two"
+      aria-controls="tabPane-two"
       aria-selected={false}
-      className="BaseButton-root"
+      className="BaseButton-root Tab-button Tab-primary"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -52,15 +50,14 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root Tab-primary"
-    id="three-tab"
-    onClick={[Function]}
+    className="Tab-root"
+    id="tab-three"
     role="presentation"
   >
     <button
-      aria-controls="three"
+      aria-controls="tabPane-three"
       aria-selected={false}
-      className="BaseButton-root"
+      className="BaseButton-root Tab-button Tab-primary"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
index 0fb2810e0..cdaf48d7d 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <section
-  aria-labelledby="one-tab"
-  id="one"
+  aria-labelledby="tab-one"
+  id="tabPane-one"
   role="tabpanel"
 >
   Hola One
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
index 97032314c..ad884add2 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <section
-  aria-labelledby="three-tab"
-  id="three"
+  aria-labelledby="tab-three"
+  id="tabPane-three"
   role="tabpanel"
 >
   Three

From b00a7f9618b47fab8a5a538b4b7a212f9251e57a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 17 Sep 2018 21:12:27 +0200
Subject: [PATCH 51/53] WIP

---
 src/core/client/ui/components/Tabs/Tab.css    | 10 +++++++++-
 src/core/client/ui/components/Tabs/TabBar.css |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 4000b151b..7793fd3d5 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -22,9 +22,17 @@
 .primary {
   background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
-  border: 1px solid var(--palette-grey-main);
+  border: 1px solid var(--palette-grey-lighter);
   padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
 
+  &:first-child {
+    border-top-left-radius: var(--round-corners);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--round-corners);
+  }
+
   &.active {
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
index 7ea4a5ac3..0ba3a25f2 100644
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -5,7 +5,7 @@
 }
 
 .primary {
-  border-bottom: 1px solid var(--palette-grey-main);
+  border-bottom: 1px solid var(--palette-grey-lighter);
 }
 
 .secondary {

From 2af01e5f4b6348a548c93289ab0874fcfb94c437 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 17 Sep 2018 22:12:58 +0200
Subject: [PATCH 52/53] Styling fixes

---
 src/core/client/ui/components/Tabs/Tab.css | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 7793fd3d5..ead948a36 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -19,26 +19,28 @@
   }
 }
 
+.root:first-child .primary {
+  border-top-left-radius: var(--round-corners);
+}
+
+.root:last-child .primary {
+  border-top-right-radius: var(--round-corners);
+}
+
 .primary {
+  position: relative;
   background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-lighter);
   padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
-
-  &:first-child {
-    border-top-left-radius: var(--round-corners);
-  }
-
-  &:last-child {
-    border-top-right-radius: var(--round-corners);
-  }
-
   &.active {
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
-    border-bottom-color: var(--palette-common-white);
+    border-bottom: 0;
     border-top-width: calc(0.5 * var(--spacing-unit));
     border-top-color: var(--palette-primary-main);
+    border-radius: 0;
+    z-index: 10;
   }
 }
 

From dbd7f4f820d3cdac8d6d1ff7abca032239851668 Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Tue, 18 Sep 2018 22:59:51 +0200
Subject: [PATCH 53/53] [next] Resubscribe local state (#1884)

* Resubscribe local state

* Don't pass context
---
 .../lib/relay/createMutationContainer.tsx     |  2 +-
 .../lib/relay/withLocalStateContainer.tsx     | 39 ++++++++++++++-----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index b8c74be18..3084635c9 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -42,7 +42,7 @@ function createMutationContainer<T extends string, I, R>(
         };
 
         public render() {
-          const { relayEnvironment: _, ...rest } = this.props;
+          const { context: _, ...rest } = this.props;
           const inject = {
             [propName]: this.commit,
           };
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index 444b67fa2..484928fc7 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -39,6 +39,7 @@ export const LOCAL_ID = "client:root.local";
 function withLocalStateContainer(
   fragmentSpec: GraphQLTaggedNode
 ): InferableComponentEnhancer<{ local: _RefType<any> }> {
+  const fragment = (fragmentSpec as any).data().default;
   return compose(
     withContext(({ relayEnvironment }) => ({ relayEnvironment })),
     hoistStatics((BaseComponent: React.ComponentType<any>) => {
@@ -49,9 +50,7 @@ function withLocalStateContainer(
         );
         private subscription: Disposable;
 
-        constructor(props: Props) {
-          super(props);
-          const fragment = (fragmentSpec as any).data().default;
+        private subscribe(environment: Environment) {
           if (fragment.kind !== "Fragment") {
             throw new Error("Expected fragment");
           }
@@ -65,24 +64,44 @@ function withLocalStateContainer(
             node: { selections: fragment.selections },
             variables: {},
           };
-          const snapshot = props.relayEnvironment.lookup(selector);
-          this.subscription = props.relayEnvironment.subscribe(
+          const snapshot = environment.lookup(selector);
+          this.subscription = environment.subscribe(
             snapshot,
             this.updateSnapshot
           );
-          this.state = {
-            data: snapshot.data,
-          };
+          this.updateSnapshot(snapshot);
+        }
+
+        constructor(props: Props) {
+          super(props);
+          this.subscribe(props.relayEnvironment);
         }
 
         private updateSnapshot = (snapshot: CSnapshot<any>) => {
-          this.setState({ data: snapshot.data });
+          const nextState = { data: snapshot.data };
+          // State has not been initialized yet.
+          if (!this.state) {
+            this.state = nextState;
+            return;
+          }
+          this.setState(nextState);
         };
 
-        public componentWillUnmount() {
+        private unsubscribe() {
           this.subscription.dispose();
         }
 
+        public componentWillReceiveProps(next: Props) {
+          if (this.props.relayEnvironment !== next.relayEnvironment) {
+            this.unsubscribe();
+            this.subscribe(next.relayEnvironment);
+          }
+        }
+
+        public componentWillUnmount() {
+          this.unsubscribe();
+        }
+
         public render() {
           const { relayEnvironment: _, ...rest } = this.props;
           return <BaseComponent {...rest} local={this.state.data} />;