diff --git a/package-lock.json b/package-lock.json
index b775a8cbd..cf8434155 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23643,7 +23643,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }
diff --git a/src/core/client/admin/components/ModerateCard/Timestamp.tsx b/src/core/client/admin/components/ModerateCard/Timestamp.tsx
index 54f8c5461..0f699ed63 100644
--- a/src/core/client/admin/components/ModerateCard/Timestamp.tsx
+++ b/src/core/client/admin/components/ModerateCard/Timestamp.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { RelativeTime } from "coral-ui/components";
 
diff --git a/src/core/client/admin/components/ModerateCard/Username.tsx b/src/core/client/admin/components/ModerateCard/Username.tsx
index b29792346..7a9f336cb 100644
--- a/src/core/client/admin/components/ModerateCard/Username.tsx
+++ b/src/core/client/admin/components/ModerateCard/Username.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "coral-ui/components";
 
diff --git a/src/core/client/admin/routes/Invite/SetUsernameField.tsx b/src/core/client/admin/routes/Invite/SetUsernameField.tsx
index 6354ba445..b54575126 100644
--- a/src/core/client/admin/routes/Invite/SetUsernameField.tsx
+++ b/src/core/client/admin/routes/Invite/SetUsernameField.tsx
@@ -11,8 +11,7 @@ import {
   ValidationMessage,
 } from "coral-ui/components";
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 interface Props {
diff --git a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
index 85c42c04d..e8fb4a75b 100644
--- a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
+++ b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx
@@ -1,6 +1,5 @@
 import { RouterState, withRouter } from "found";
-import * as React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 import { AccountCompletionContainer_auth as AuthData } from "coral-admin/__generated__/AccountCompletionContainer_auth.graphql";
 import { AccountCompletionContainer_viewer as UserData } from "coral-admin/__generated__/AccountCompletionContainer_viewer.graphql";
diff --git a/src/core/client/admin/routes/Login/EmailField.tsx b/src/core/client/admin/routes/Login/EmailField.tsx
index c4c6fc456..439fb2961 100644
--- a/src/core/client/admin/routes/Login/EmailField.tsx
+++ b/src/core/client/admin/routes/Login/EmailField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -9,10 +13,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx
index 4d2117959..5cfa422ad 100644
--- a/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx
+++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -9,10 +13,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx
index f15c0c32e..5bca52d4f 100644
--- a/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx
+++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -9,10 +13,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx
index 6dd562b4d..2132d8ee5 100644
--- a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx
+++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Icon } from "coral-ui/components";
 
diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
index 922905ba7..7fcf4bc5f 100644
--- a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
+++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./UnorderedList.css";
 
diff --git a/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx b/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx
index bee4d82bc..bd7997407 100644
--- a/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx
+++ b/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import { PasswordField } from "coral-framework/components";
 import {
   composeValidators,
@@ -10,10 +14,6 @@ import {
   InputLabel,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx b/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx
index 6df6ea83a..400c3230e 100644
--- a/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx
+++ b/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -10,10 +14,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx
index 9ed69766e..e1b3dcb69 100644
--- a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx
+++ b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "coral-ui/components";
 
diff --git a/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx b/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx
index 98cd8f2bd..b8fa98ed4 100644
--- a/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx
+++ b/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import HorizontalSeparator from "./HorizontalSeparator";
 
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 2cefab975..2e5cb05d2 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -159,7 +159,7 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Search"
-                  className="BaseButton-root Button-root UserTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
@@ -360,7 +360,7 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -427,7 +427,7 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -462,7 +462,7 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -525,7 +525,7 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -560,7 +560,7 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -623,7 +623,7 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -658,7 +658,7 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -702,7 +702,7 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change user status"
-                  className="BaseButton-root Button-root UserStatusChange-button UserStatusChange-fullWidth Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserStatusChange-button UserStatusChange-fullWidth"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -796,7 +796,7 @@ exports[`renders empty community 1`] = `
               >
                 <button
                   aria-label="Search"
-                  className="BaseButton-root Button-root UserTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
diff --git a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
index 29fda8fbc..432b97930 100644
--- a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
+++ b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
@@ -60,7 +60,7 @@ exports[`loads more 1`] = `
                 className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-11-29T16:01:51.897Z"
                   title="2018-11-29T16:01:51.897Z"
                 >
@@ -124,7 +124,7 @@ exports[`loads more 1`] = `
                 className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-11-29T16:01:45.644Z"
                   title="2018-11-29T16:01:45.644Z"
                 >
@@ -188,7 +188,7 @@ exports[`loads more 1`] = `
                 className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-11-29T16:01:42.060Z"
                   title="2018-11-29T16:01:42.060Z"
                 >
@@ -317,7 +317,7 @@ exports[`render popover content 1`] = `
                 className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-11-29T16:01:51.897Z"
                   title="2018-11-29T16:01:51.897Z"
                 >
@@ -381,7 +381,7 @@ exports[`render popover content 1`] = `
                 className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-11-29T16:01:45.644Z"
                   title="2018-11-29T16:01:45.644Z"
                 >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
index b61b591c7..b25acb153 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
@@ -47,7 +47,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -272,7 +272,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -494,7 +494,7 @@ exports[`renders reported queue with comments 1`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -703,7 +703,7 @@ exports[`renders reported queue with comments 1`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -928,7 +928,7 @@ exports[`renders reported queue with comments 2`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -1137,7 +1137,7 @@ exports[`renders reported queue with comments 2`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -1352,7 +1352,7 @@ exports[`renders reported queue with comments and load more 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
index 5165b32af..e75b602f9 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
@@ -47,7 +47,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -269,7 +269,7 @@ exports[`renders rejected queue with comments 1`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -478,7 +478,7 @@ exports[`renders rejected queue with comments 1`] = `
                   </span>
                 </button>
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -693,7 +693,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
index db19ac1e1..29e0e510e 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`approves single comment 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -225,7 +225,7 @@ exports[`rejects single comment 1`] = `
             </span>
           </button>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -451,7 +451,7 @@ exports[`renders single comment view 1`] = `
                     </span>
                   </button>
                   <time
-                    className="Timestamp-root RelativeTime-root"
+                    className="RelativeTime-root Timestamp-root"
                     dateTime="2018-07-06T18:24:00.000Z"
                     title="2018-07-06T18:24:00.000Z"
                   >
diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
index c151d9c7d..6e156787c 100644
--- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders empty stories 1`] = `
             >
               <button
                 aria-label="Search"
-                className="BaseButton-root Button-root StoryTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
@@ -190,7 +190,7 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -259,7 +259,7 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -344,7 +344,7 @@ exports[`renders stories 1`] = `
             >
               <button
                 aria-label="Search"
-                className="BaseButton-root Button-root StoryTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
@@ -493,7 +493,7 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -562,7 +562,7 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
diff --git a/src/core/client/auth/App/AccountCompletion/AccountCompletionContainer.tsx b/src/core/client/auth/App/AccountCompletion/AccountCompletionContainer.tsx
index ef6679b73..a9468897b 100644
--- a/src/core/client/auth/App/AccountCompletion/AccountCompletionContainer.tsx
+++ b/src/core/client/auth/App/AccountCompletion/AccountCompletionContainer.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 import { AccountCompletionContainer_auth as AuthData } from "coral-auth/__generated__/AccountCompletionContainer_auth.graphql";
 import { AccountCompletionContainer_viewer as UserData } from "coral-auth/__generated__/AccountCompletionContainer_viewer.graphql";
diff --git a/src/core/client/auth/App/AppContainer.tsx b/src/core/client/auth/App/AppContainer.tsx
index 6ca991fef..80aef623b 100644
--- a/src/core/client/auth/App/AppContainer.tsx
+++ b/src/core/client/auth/App/AppContainer.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 import { AppContainer_auth as AuthData } from "coral-auth/__generated__/AppContainer_auth.graphql";
 import { AppContainer_viewer as UserData } from "coral-auth/__generated__/AppContainer_viewer.graphql";
diff --git a/src/core/client/auth/components/ConfirmEmailField.tsx b/src/core/client/auth/components/ConfirmEmailField.tsx
index c9189e547..7b799a5a8 100644
--- a/src/core/client/auth/components/ConfirmEmailField.tsx
+++ b/src/core/client/auth/components/ConfirmEmailField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -9,10 +13,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/auth/components/ConfirmPasswordField.tsx b/src/core/client/auth/components/ConfirmPasswordField.tsx
index 4ebe03a6a..155471ae0 100644
--- a/src/core/client/auth/components/ConfirmPasswordField.tsx
+++ b/src/core/client/auth/components/ConfirmPasswordField.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import {
diff --git a/src/core/client/auth/components/EmailField.tsx b/src/core/client/auth/components/EmailField.tsx
index 51d296af0..91c51be9e 100644
--- a/src/core/client/auth/components/EmailField.tsx
+++ b/src/core/client/auth/components/EmailField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -9,10 +13,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/auth/components/Header/Bar.tsx b/src/core/client/auth/components/Header/Bar.tsx
index 717e567ce..a3c16eee8 100644
--- a/src/core/client/auth/components/Header/Bar.tsx
+++ b/src/core/client/auth/components/Header/Bar.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "coral-ui/components";
 
diff --git a/src/core/client/auth/components/Header/SubBar.tsx b/src/core/client/auth/components/Header/SubBar.tsx
index 3334cdc0a..652c6fe28 100644
--- a/src/core/client/auth/components/Header/SubBar.tsx
+++ b/src/core/client/auth/components/Header/SubBar.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "coral-ui/components";
 
diff --git a/src/core/client/auth/components/Header/Subtitle.tsx b/src/core/client/auth/components/Header/Subtitle.tsx
index e6fff9e75..ce84a3662 100644
--- a/src/core/client/auth/components/Header/Subtitle.tsx
+++ b/src/core/client/auth/components/Header/Subtitle.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "coral-ui/components";
 import styles from "./Subtitle.css";
diff --git a/src/core/client/auth/components/Header/Title.tsx b/src/core/client/auth/components/Header/Title.tsx
index bbe31a302..2d0345af1 100644
--- a/src/core/client/auth/components/Header/Title.tsx
+++ b/src/core/client/auth/components/Header/Title.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Typography } from "coral-ui/components";
 import styles from "./Title.css";
diff --git a/src/core/client/auth/components/HorizontalSeparator.tsx b/src/core/client/auth/components/HorizontalSeparator.tsx
index 9ed69766e..e1b3dcb69 100644
--- a/src/core/client/auth/components/HorizontalSeparator.tsx
+++ b/src/core/client/auth/components/HorizontalSeparator.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "coral-ui/components";
 
diff --git a/src/core/client/auth/components/OrSeparator.tsx b/src/core/client/auth/components/OrSeparator.tsx
index d4c7460ff..6b8de0045 100644
--- a/src/core/client/auth/components/OrSeparator.tsx
+++ b/src/core/client/auth/components/OrSeparator.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import HorizontalSeparator from "./HorizontalSeparator";
 
diff --git a/src/core/client/auth/components/SetPasswordField.tsx b/src/core/client/auth/components/SetPasswordField.tsx
index 7e8da0a2b..e26e0dfa6 100644
--- a/src/core/client/auth/components/SetPasswordField.tsx
+++ b/src/core/client/auth/components/SetPasswordField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import { PasswordField } from "coral-framework/components";
 import {
   composeValidators,
@@ -10,10 +14,6 @@ import {
   InputLabel,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/auth/components/UsernameField.tsx b/src/core/client/auth/components/UsernameField.tsx
index 52d9c6420..219de20d0 100644
--- a/src/core/client/auth/components/UsernameField.tsx
+++ b/src/core/client/auth/components/UsernameField.tsx
@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
 import {
   composeValidators,
   required,
@@ -10,10 +14,6 @@ import {
   TextField,
   ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 93af0c46e..ff7a4252f 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
 import { createManaged } from "coral-framework/lib/bootstrap";
diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx
index 6dd562b4d..2132d8ee5 100644
--- a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx
+++ b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Icon } from "coral-ui/components";
 
diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/UnorderedList.tsx b/src/core/client/auth/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
index 922905ba7..7fcf4bc5f 100644
--- a/src/core/client/auth/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
+++ b/src/core/client/auth/views/AddEmailAddress/UnorderedList/UnorderedList.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./UnorderedList.css";
 
diff --git a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
index 3449a9dd8..a662b61f0 100644
--- a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
+++ b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { Form } from "react-final-form";
 
 import AutoHeight from "coral-auth/components/AutoHeight";
diff --git a/src/core/client/framework/components/FacebookButton.tsx b/src/core/client/framework/components/FacebookButton.tsx
index 0f79d95e5..b1a26cc98 100644
--- a/src/core/client/framework/components/FacebookButton.tsx
+++ b/src/core/client/framework/components/FacebookButton.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 import { Button } from "coral-ui/components";
diff --git a/src/core/client/framework/components/GoogleButton.tsx b/src/core/client/framework/components/GoogleButton.tsx
index ad8df1ec9..435501774 100644
--- a/src/core/client/framework/components/GoogleButton.tsx
+++ b/src/core/client/framework/components/GoogleButton.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 import { Button } from "coral-ui/components";
diff --git a/src/core/client/framework/components/OIDCButton.tsx b/src/core/client/framework/components/OIDCButton.tsx
index dd1c373fd..683bfb84b 100644
--- a/src/core/client/framework/components/OIDCButton.tsx
+++ b/src/core/client/framework/components/OIDCButton.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 import { Button } from "coral-ui/components";
diff --git a/src/core/client/framework/helpers/createContextHOC.tsx b/src/core/client/framework/helpers/createContextHOC.tsx
index 85e6faa23..38f0e94ed 100644
--- a/src/core/client/framework/helpers/createContextHOC.tsx
+++ b/src/core/client/framework/helpers/createContextHOC.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
   hoistStatics,
   InferableComponentEnhancer,
diff --git a/src/core/client/framework/lib/i18n/withGetMessage.tsx b/src/core/client/framework/lib/i18n/withGetMessage.tsx
index 6ff0aefe4..f077cc645 100644
--- a/src/core/client/framework/lib/i18n/withGetMessage.tsx
+++ b/src/core/client/framework/lib/i18n/withGetMessage.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
 
 import { CoralContext, withContext } from "../bootstrap";
diff --git a/src/core/client/framework/lib/intersection/IntersectionContext.tsx b/src/core/client/framework/lib/intersection/IntersectionContext.tsx
index c85df2bd6..064be579f 100644
--- a/src/core/client/framework/lib/intersection/IntersectionContext.tsx
+++ b/src/core/client/framework/lib/intersection/IntersectionContext.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { createContextHOC } from "coral-framework/helpers";
 
diff --git a/src/core/client/framework/lib/intersection/withInView.tsx b/src/core/client/framework/lib/intersection/withInView.tsx
index 62430ec32..688841963 100644
--- a/src/core/client/framework/lib/intersection/withInView.tsx
+++ b/src/core/client/framework/lib/intersection/withInView.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
 
 import { Observe, withIntersectionContext } from "./IntersectionContext";
diff --git a/src/core/client/framework/lib/relay/createFetchContainer.tsx b/src/core/client/framework/lib/relay/createFetchContainer.tsx
index b5f9fde1f..1ce151c51 100644
--- a/src/core/client/framework/lib/relay/createFetchContainer.tsx
+++ b/src/core/client/framework/lib/relay/createFetchContainer.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
   compose,
   hoistStatics,
diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index 265d80904..53289b00a 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
   compose,
   hoistStatics,
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index 2afb7437a..6e1c9f436 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { _RefType } from "react-relay";
 import {
   compose,
diff --git a/src/core/client/framework/lib/router/withRouteConfig.ts b/src/core/client/framework/lib/router/withRouteConfig.ts
index 1d1de7166..b96445318 100644
--- a/src/core/client/framework/lib/router/withRouteConfig.ts
+++ b/src/core/client/framework/lib/router/withRouteConfig.ts
@@ -1,5 +1,5 @@
 import { RouteMatch, RouteProps } from "found";
-import * as React from "react";
+import React from "react";
 
 type RouteConfig<Props = any, QueryResponse = undefined> = Partial<
   Pick<RouteProps, "query" | "getQuery">
diff --git a/src/core/client/install/index.tsx b/src/core/client/install/index.tsx
index d701c7a23..e46d15080 100644
--- a/src/core/client/install/index.tsx
+++ b/src/core/client/install/index.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
 import { createManaged } from "coral-framework/lib/bootstrap";
diff --git a/src/core/client/stream/App/App.tsx b/src/core/client/stream/App/App.tsx
index 4932f5544..af6049d3f 100644
--- a/src/core/client/stream/App/App.tsx
+++ b/src/core/client/stream/App/App.tsx
@@ -1,6 +1,5 @@
 import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import Comments from "../tabs/Comments";
 import Configure from "../tabs/Configure";
diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx
index 2a0e11d18..c2c380627 100644
--- a/src/core/client/stream/App/TabBar.tsx
+++ b/src/core/client/stream/App/TabBar.tsx
@@ -1,7 +1,8 @@
 import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
+
+import CLASSES from "coral-stream/classes";
 
 type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
 
@@ -14,21 +15,25 @@ export interface Props {
 
 const AppTabBar: FunctionComponent<Props> = props => {
   return (
-    <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
-      <Tab tabID="COMMENTS">
+    <TabBar
+      className={CLASSES.tabBar.$root}
+      activeTab={props.activeTab}
+      onTabClick={props.onTabClick}
+    >
+      <Tab className={CLASSES.tabBar.allComments} tabID="COMMENTS">
         <Localized id="general-tabBar-commentsTab">
           <span>Comments</span>
         </Localized>
       </Tab>
       {props.showProfileTab && (
-        <Tab tabID="PROFILE">
+        <Tab className={CLASSES.tabBar.myProfile} tabID="PROFILE">
           <Localized id="general-tabBar-myProfileTab">
             <span>My Profile</span>
           </Localized>
         </Tab>
       )}
       {props.showConfigureTab && (
-        <Tab tabID="CONFIGURE">
+        <Tab className={CLASSES.tabBar.configure} tabID="CONFIGURE">
           <MatchMedia gteWidth="sm">
             {matches =>
               matches ? (
diff --git a/src/core/client/stream/App/TabBarContainer.tsx b/src/core/client/stream/App/TabBarContainer.tsx
index 23d6b42e5..fbe4f6e89 100644
--- a/src/core/client/stream/App/TabBarContainer.tsx
+++ b/src/core/client/stream/App/TabBarContainer.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 import {
   graphql,
diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
new file mode 100644
index 000000000..bf9301d45
--- /dev/null
+++ b/src/core/client/stream/classes.ts
@@ -0,0 +1,105 @@
+const CLASSES = {
+  /**
+   * tabBar is all the components in the top tab bar selector.
+   */
+  tabBar: {
+    /**
+     * $root represents the container for the tab buttons.
+     */
+    $root: "coral coral-tabBar",
+
+    /**
+     * allComments is the button for the "All Comments" tab.
+     */
+    allComments: "coral coral-tabBar-allComments",
+
+    /**
+     * myProfile is the button for the "My Profile" tab.
+     */
+    myProfile: "coral coral-tabBar-myProfile",
+
+    /**
+     * configure is the button for the "Configure" tab.
+     */
+    configure: "coral coral-tabBar-configure",
+  },
+
+  /**
+   * createComment is the comment creation box where a user can write a comment.
+   */
+  createComment: {
+    /**
+     * $root represents the container for the new comments box.
+     */
+    $root: "coral coral-createComment",
+
+    /**
+     * box is the actual commenting input box for creating a new comment.
+     */
+    box: "coral coral-createComment-box",
+
+    /**
+     * submit is the button for submitting a new comment.
+     */
+    submit: "coral coral-createComment-submit",
+
+    /**
+     * signIn is the button for submitting a new comment and signing in.
+     */
+    signIn: "coral coral-createComment-signIn",
+  },
+
+  /**
+   * replyComment is the comment creation box where a user can write a reply on
+   * a specific comment.
+   */
+  createReplyComment: {
+    /**
+     * $root represents the container for the new reply box.
+     */
+    $root: "coral coral-createReplyComment",
+
+    /**
+     * box is the actual commenting input box for creating a new reply.
+     */
+    box: "coral coral-createReplyComment-box",
+
+    /**
+     * submit is the button for submitting a new reply.
+     */
+    submit: "coral coral-createReplyComment-submit",
+  },
+
+  /**
+   * comment is the visual representation of a Comment.
+   */
+  comment: {
+    /**
+     * $root represents the container containing a given Comment.
+     */
+    $root: "coral coral-comment",
+
+    /**
+     * username is the text display for any given Username in the system.
+     */
+    username: "coral coral-comment-username",
+
+    /**
+     * timestamp is the text that contains the time since the comment was
+     * published.
+     */
+    timestamp: "coral coral-comment-timestamp",
+
+    /**
+     * userTag can be used to target a tag associated with a User.
+     */
+    userTag: "coral coral-comment-userTag",
+
+    /**
+     * commentTag can be used to target a tag associated with a Comment.
+     */
+    commentTag: "coral coral-comment-commentTag",
+  },
+};
+
+export default CLASSES;
diff --git a/src/core/client/stream/common/NamedComponent/NamedComponent.tsx b/src/core/client/stream/common/NamedComponent/NamedComponent.tsx
new file mode 100644
index 000000000..7c3d2742d
--- /dev/null
+++ b/src/core/client/stream/common/NamedComponent/NamedComponent.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+
+interface Props {
+  id: string;
+  children: React.ReactNode;
+}
+
+const NamedComponent: FunctionComponent<Props> = ({
+  id: className,
+  children,
+}) => <div className={className}>{children}</div>;
+
+export default NamedComponent;
diff --git a/src/core/client/stream/common/Timestamp/Timestamp.tsx b/src/core/client/stream/common/Timestamp/Timestamp.tsx
index 80b263594..98e32c9af 100644
--- a/src/core/client/stream/common/Timestamp/Timestamp.tsx
+++ b/src/core/client/stream/common/Timestamp/Timestamp.tsx
@@ -1,7 +1,7 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { RelativeTime } from "coral-ui/components";
 
 import styles from "./Timestamp.css";
@@ -13,7 +13,7 @@ export interface TimestampProps {
 
 const Timestamp: FunctionComponent<TimestampProps> = props => (
   <RelativeTime
-    className={cn(styles.root, props.className)}
+    className={cn(styles.root, props.className, CLASSES.comment.timestamp)}
     date={props.children}
   />
 );
diff --git a/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
index ed879ed6e..fc2ac16cd 100644
--- a/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
+++ b/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
-  className="Timestamp-root"
+  className="Timestamp-root coral coral-comment-timestamp"
   date="1995-12-17T03:24:00.000Z"
 />
 `;
diff --git a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
index e928b7791..9be0127c3 100644
--- a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
+++ b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 import { urls } from "coral-framework/helpers";
 import {
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index e51df5297..35efd238a 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -1,6 +1,5 @@
 import { Child as PymChild } from "pym.js";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
 import { createManaged } from "coral-framework/lib/bootstrap";
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index 476932000..b13272ba7 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -19,6 +19,7 @@ import {
 } from "coral-stream/mutations";
 import { Button, Flex, HorizontalGutter, Tag } from "coral-ui/components";
 
+import CLASSES from "coral-stream/classes";
 import { isCommentVisible } from "../helpers";
 import ButtonsBar from "./ButtonsBar";
 import EditCommentFormContainer from "./EditCommentForm";
@@ -164,7 +165,11 @@ export class CommentContainer extends Component<Props, State> {
     const commentTags = (
       <>
         {hasFeaturedTag && (
-          <Tag color="primary" variant="pill">
+          <Tag
+            className={CLASSES.comment.commentTag}
+            color="primary"
+            variant="pill"
+          >
             <Localized id="comments-featuredTag">
               <span>Featured</span>
             </Localized>
@@ -203,7 +208,10 @@ export class CommentContainer extends Component<Props, State> {
       return null;
     }
     return (
-      <div data-testid={`comment-${comment.id}`}>
+      <div
+        className={CLASSES.comment.$root}
+        data-testid={`comment-${comment.id}`}
+      >
         <HorizontalGutter>
           <IndentedComment
             indentLevel={indentLevel}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
index 35d3ee4c1..a095dd188 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
@@ -1,10 +1,12 @@
 import { CoralRTE } from "@coralproject/rte";
+import cn from "classnames";
 import { FormApi, FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, { EventHandler, FunctionComponent, MouseEvent, Ref } from "react";
 import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "coral-framework/lib/form";
+import CLASSES from "coral-stream/classes";
 import {
   AriaInfo,
   Button,
@@ -44,7 +46,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
     <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
       {({ handleSubmit, submitting, form, submitError }) => (
         <form
-          className={props.className}
+          className={cn(props.className, CLASSES.createReplyComment.$root)}
           autoComplete="off"
           onSubmit={handleSubmit}
           id={`comments-replyCommentForm-form-${props.id}`}
@@ -60,7 +62,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
               {({ input, meta }) => (
                 <>
                   <HorizontalGutter size="half">
-                    <div>
+                    <div className={CLASSES.createReplyComment.box}>
                       <Localized id="comments-replyCommentForm-rteLabel">
                         <AriaInfo component="label" htmlFor={inputID}>
                           Write a reply
@@ -143,6 +145,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
                               submitting || !input.value || props.disabled
                             }
                             type="submit"
+                            className={CLASSES.createReplyComment.submit}
                             fullWidth={matches}
                           >
                             Submit
diff --git a/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx b/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
index b306898f8..ba4e7cf05 100644
--- a/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex, MatchMedia } from "coral-ui/components";
 
diff --git a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
index 4e47aff62..0601c8ffd 100644
--- a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
@@ -4,6 +4,7 @@ import { graphql } from "react-relay";
 
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
 import { UserTagsContainer_comment as CommentData } from "coral-stream/__generated__/UserTagsContainer_comment.graphql";
+import CLASSES from "coral-stream/classes";
 import { Tag } from "coral-ui/components";
 
 interface Props {
@@ -17,7 +18,7 @@ const UserTagsContainer: FunctionComponent<Props> = props => {
     <>
       {staffTag && (
         <Localized id="comments-staffTag">
-          <Tag>Staff</Tag>
+          <Tag className={CLASSES.comment.userTag}>Staff</Tag>
         </Localized>
       )}
     </>
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
index 3cf0c0a6b..2f2987b39 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
@@ -1,6 +1,7 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Typography } from "coral-ui/components";
 
 import styles from "./Username.css";
@@ -11,7 +12,11 @@ interface Props {
 
 const Username: FunctionComponent<Props> = props => {
   return (
-    <Typography variant={"heading3"} className={styles.root} container="span">
+    <Typography
+      variant={"heading3"}
+      className={cn(styles.root, CLASSES.comment.username)}
+      container="span"
+    >
       {props.children}
     </Typography>
   );
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
index e00b85a0a..aa318f49e 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`hide reply button 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -137,6 +138,7 @@ exports[`hide reply button 1`] = `
 
 exports[`renders body only 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -278,6 +280,7 @@ exports[`renders body only 1`] = `
 
 exports[`renders disabled reply when commenting has been disabled 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -419,6 +422,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
 
 exports[`renders disabled reply when story is closed 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -560,6 +564,7 @@ exports[`renders disabled reply when story is closed 1`] = `
 
 exports[`renders in reply to 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -713,6 +718,7 @@ exports[`renders in reply to 1`] = `
 
 exports[`renders username and body 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -854,6 +860,7 @@ exports[`renders username and body 1`] = `
 
 exports[`shows conversation link 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
diff --git a/src/core/client/stream/tabs/Comments/CommentsPane.tsx b/src/core/client/stream/tabs/Comments/CommentsPane.tsx
index 9ec67fb59..2d59d5828 100644
--- a/src/core/client/stream/tabs/Comments/CommentsPane.tsx
+++ b/src/core/client/stream/tabs/Comments/CommentsPane.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { graphql, useLocal } from "coral-framework/lib/relay";
 import { CommentsPaneLocal } from "coral-stream/__generated__/CommentsPaneLocal.graphql";
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
index a2d09bb69..c58928617 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import {
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.tsx
index ee7870119..e06950d80 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Circle.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Circle.css";
 
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.tsx
index 5ca7af270..2c7dcab11 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/Timeline/Line.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Line.css";
 
diff --git a/src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx b/src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx
index 5f96e57d2..1d1e00e43 100644
--- a/src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx
+++ b/src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import FadeInTransition from "coral-framework/components/FadeInTransition";
 import { PropTypesOf } from "coral-framework/types";
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
index 83dc18c41..58be5481a 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
@@ -5,6 +5,7 @@ import React, { FunctionComponent } from "react";
 import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "coral-framework/lib/form";
+import CLASSES from "coral-stream/classes";
 import {
   AriaInfo,
   Button,
@@ -46,6 +47,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
     <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
       {({ handleSubmit, submitting, submitError, form }) => (
         <form
+          className={CLASSES.createComment.$root}
           autoComplete="off"
           onSubmit={handleSubmit}
           id="comments-postCommentForm-form"
@@ -78,6 +80,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
                         onChange={({ html }) =>
                           input.onChange(cleanupRTEEmptyHTML(html))
                         }
+                        className={CLASSES.createComment.box}
                         value={input.value}
                         placeholder="Post a comment"
                         disabled={submitting || props.disabled}
@@ -123,6 +126,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
                       <Button
                         color="primary"
                         variant="filled"
+                        className={CLASSES.createComment.submit}
                         disabled={submitting || !input.value || props.disabled}
                         type="submit"
                       >
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
index 9e4c8c867..0bef07811 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx
@@ -7,6 +7,7 @@ import { Button, HorizontalGutter } from "coral-ui/components";
 import RTE from "../../RTE";
 import MessageBoxContainer from "../MessageBoxContainer";
 
+import CLASSES from "coral-stream/classes";
 import styles from "./PostCommentFormFake.css";
 
 interface Props {
@@ -23,7 +24,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
     [props.onDraftChange]
   );
   return (
-    <div>
+    <div className={CLASSES.createComment.$root}>
       {props.showMessageBox && (
         <MessageBoxContainer
           story={props.story}
@@ -31,7 +32,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
         />
       )}
       <HorizontalGutter className={styles.root}>
-        <div aria-hidden="true">
+        <div className={CLASSES.createComment.box} aria-hidden="true">
           <Localized
             id="comments-postCommentFormFake-rte"
             attrs={{ placeholder: true }}
@@ -45,6 +46,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
         </div>
         <Localized id="comments-postCommentFormFake-signInAndJoin">
           <Button
+            className={CLASSES.createComment.signIn}
             color="primary"
             variant="filled"
             type="submit"
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
index 49f2e64ed..9ef144c4a 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  className="coral coral-createComment"
+>
   <Relay(MessageBoxContainer)
     className="PostCommentFormFake-messageBox"
     story={Object {}}
@@ -11,6 +13,7 @@ exports[`renders correctly 1`] = `
   >
     <div
       aria-hidden="true"
+      className="coral coral-createComment-box"
     >
       <Localized
         attrs={
@@ -31,6 +34,7 @@ exports[`renders correctly 1`] = `
       id="comments-postCommentFormFake-signInAndJoin"
     >
       <ForwardRef(forwardRef)
+        className="coral coral-createComment-signIn"
         color="primary"
         fullWidth={true}
         onClick={[Function]}
diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
index a8725d199..e3e4961c2 100644
--- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
@@ -1,8 +1,8 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
 import { PropTypesOf } from "coral-framework/types";
 import { Button, HorizontalGutter, Typography } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
 
 import HistoryCommentContainer from "./HistoryCommentContainer";
 
diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx
index e4207915d..cb9a5d31e 100644
--- a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx
@@ -1,6 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
diff --git a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
index c4bd9ebce..4d84cb3fb 100644
--- a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders comment stream 1`] = `
   className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
 >
   <ul
-    className="TabBar-root TabBar-primary"
+    className="TabBar-root TabBar-primary coral coral-tabBar"
     role="tablist"
   >
     <li
@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
       <button
         aria-controls="tabPane-COMMENTS"
         aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -70,12 +70,15 @@ exports[`renders comment stream 1`] = `
           Register
         </button>
       </div>
-      <div>
+      <div
+        className="coral coral-createComment"
+      >
         <div
           className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
         >
           <div
             aria-hidden="true"
+            className="coral coral-createComment-box"
           >
             <div>
               <div
@@ -159,7 +162,7 @@ exports[`renders comment stream 1`] = `
             </div>
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -312,7 +315,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -335,7 +338,7 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Box-ml-1"
                 />
                 <time
-                  className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -412,7 +415,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Lukas
                     </span>
@@ -435,7 +438,7 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Box-ml-1"
                 />
                 <time
-                  className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
index 43e19586c..b9bb67ffc 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
@@ -99,6 +99,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-1"
             >
               <div
@@ -138,7 +139,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Lukas
                                 </span>
@@ -162,7 +163,7 @@ exports[`renders permalink view 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -305,6 +306,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-2"
             >
               <div
@@ -344,7 +346,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Isabelle
                                 </span>
@@ -368,7 +370,7 @@ exports[`renders permalink view 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -509,6 +511,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-with-replies"
             >
               <div
@@ -548,7 +551,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Markus
                                 </span>
@@ -572,7 +575,7 @@ exports[`renders permalink view 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -709,6 +712,7 @@ exports[`renders permalink view 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-3"
             >
               <div
@@ -748,7 +752,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Isabelle
                                 </span>
@@ -772,7 +776,7 @@ exports[`renders permalink view 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -925,6 +929,7 @@ exports[`renders permalink view 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-4"
             >
               <div
@@ -964,7 +969,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Isabelle
                                 </span>
@@ -988,7 +993,7 @@ exports[`renders permalink view 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index 4707d23c3..bed4cd29f 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -38,13 +38,13 @@ exports[`renders conversation thread 1`] = `
           >
             <div>
               <span
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
               >
                 Moderator
               </span>
             </div>
             <span
-              className="Tag-root Tag-colorGrey"
+              className="Tag-root coral coral-comment-userTag Tag-colorGrey"
             >
               Staff
             </span>
@@ -53,7 +53,7 @@ exports[`renders conversation thread 1`] = `
             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
           >
             <time
-              className="Timestamp-root RelativeTime-root"
+              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
               dateTime="2018-07-06T18:24:00.000Z"
               title="2018-07-06T18:24:00.000Z"
             >
@@ -87,7 +87,7 @@ exports[`renders conversation thread 1`] = `
         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
       >
         <button
-          className="BaseButton-root Button-root ConversationThreadContainer-showMoreButton Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined ConversationThreadContainer-showMoreButton"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -133,6 +133,7 @@ exports[`renders conversation thread 1`] = `
         </svg>
       </div>
       <div
+        className="coral coral-comment"
         data-testid="comment-comment-0"
       >
         <div
@@ -172,7 +173,7 @@ exports[`renders conversation thread 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                           >
                             Markus
                           </span>
@@ -196,7 +197,7 @@ exports[`renders conversation thread 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
-                        className="Timestamp-root RelativeTime-root"
+                        className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                         dateTime="2018-07-06T18:24:00.000Z"
                         title="2018-07-06T18:24:00.000Z"
                       >
@@ -352,6 +353,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
+        className="coral coral-comment"
         data-testid="comment-comment-1"
       >
         <div
@@ -391,7 +393,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                           >
                             Lukas
                           </span>
@@ -415,7 +417,7 @@ exports[`shows more of this conversation 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
-                        className="Timestamp-root RelativeTime-root"
+                        className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                         dateTime="2018-07-06T18:24:00.000Z"
                         title="2018-07-06T18:24:00.000Z"
                       >
@@ -558,6 +560,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
+        className="coral coral-comment"
         data-testid="comment-comment-from-staff-0"
       >
         <div
@@ -597,7 +600,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                           >
                             Moderator
                           </span>
@@ -617,7 +620,7 @@ exports[`shows more of this conversation 1`] = `
                         </div>
                       </div>
                       <span
-                        className="Tag-root Tag-colorGrey"
+                        className="Tag-root coral coral-comment-userTag Tag-colorGrey"
                       >
                         Staff
                       </span>
@@ -626,7 +629,7 @@ exports[`shows more of this conversation 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
-                        className="Timestamp-root RelativeTime-root"
+                        className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                         dateTime="2018-07-06T18:24:00.000Z"
                         title="2018-07-06T18:24:00.000Z"
                       >
@@ -767,6 +770,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
+        className="coral coral-comment"
         data-testid="comment-comment-0"
       >
         <div
@@ -806,7 +810,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                           >
                             Markus
                           </span>
@@ -830,7 +834,7 @@ exports[`shows more of this conversation 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
-                        className="Timestamp-root RelativeTime-root"
+                        className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                         dateTime="2018-07-06T18:24:00.000Z"
                         title="2018-07-06T18:24:00.000Z"
                       >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 21dfe3908..e66cc5da1 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`cancel edit 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -41,7 +42,7 @@ exports[`cancel edit 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -65,7 +66,7 @@ exports[`cancel edit 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -236,13 +237,13 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
             >
               Markus
             </span>
           </div>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -408,13 +409,13 @@ exports[`edit a comment: edit form 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
             >
               Markus
             </span>
           </div>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -580,13 +581,13 @@ exports[`edit a comment: optimistic response 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
             >
               Markus
             </span>
           </div>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
@@ -737,6 +738,7 @@ exports[`edit a comment: optimistic response 1`] = `
 
 exports[`edit a comment: render comment with edit button 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -776,7 +778,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -800,7 +802,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -956,6 +958,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
 
 exports[`edit a comment: server response 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -995,7 +998,7 @@ exports[`edit a comment: server response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -1019,7 +1022,7 @@ exports[`edit a comment: server response 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -1184,6 +1187,7 @@ exports[`edit a comment: server response 1`] = `
 
 exports[`shows expiry message: edit form closed 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -1223,7 +1227,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -1247,7 +1251,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -1418,13 +1422,13 @@ exports[`shows expiry message: edit time expired 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
             >
               Markus
             </span>
           </div>
           <time
-            className="Timestamp-root RelativeTime-root"
+            className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
             dateTime="2018-07-06T18:24:00.000Z"
             title="2018-07-06T18:24:00.000Z"
           >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
index 64af8903c..7ea2150a9 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
@@ -12,6 +12,7 @@ exports[`renders comment stream with load more button 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-0"
     >
       <div
@@ -51,7 +52,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Markus
                         </span>
@@ -75,7 +76,7 @@ exports[`renders comment stream with load more button 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
@@ -201,6 +202,7 @@ exports[`renders comment stream with load more button 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-1"
     >
       <div
@@ -240,7 +242,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Lukas
                         </span>
@@ -264,7 +266,7 @@ exports[`renders comment stream with load more button 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
index c8e6ef002..22c13cd1d 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`post a comment: optimistic response 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-uuid-0"
 >
   <div
@@ -41,7 +42,7 @@ exports[`post a comment: optimistic response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -65,7 +66,7 @@ exports[`post a comment: optimistic response 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
index a31a35c95..8c446c9d4 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-deepest-replies-5"
 >
   <div
@@ -41,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -65,7 +66,7 @@ exports[`post a reply: open reply form 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -246,6 +247,7 @@ exports[`post a reply: open reply form 1`] = `
     </div>
     <form
       autoComplete="off"
+      className="coral coral-createReplyComment"
       id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
       onSubmit={[Function]}
     >
@@ -255,7 +257,9 @@ exports[`post a reply: open reply form 1`] = `
         <div
           className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
-          <div>
+          <div
+            className="coral coral-createReplyComment-box"
+          >
             <label
               className="AriaInfo-root"
               htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
@@ -386,7 +390,7 @@ exports[`post a reply: open reply form 1`] = `
             Cancel
           </button>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -415,6 +419,7 @@ exports[`post a reply: optimistic response 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-uuid-0"
     >
       <div
@@ -454,7 +459,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Markus
                         </span>
@@ -478,7 +483,7 @@ exports[`post a reply: optimistic response 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
@@ -657,6 +662,7 @@ exports[`renders comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-with-deepest-replies"
     >
       <div
@@ -696,7 +702,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Markus
                         </span>
@@ -720,7 +726,7 @@ exports[`renders comment stream 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
@@ -869,6 +875,7 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
+          className="coral coral-comment"
           data-testid="comment-comment-with-deepest-replies-1"
         >
           <div
@@ -908,7 +915,7 @@ exports[`renders comment stream 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                             >
                               Markus
                             </span>
@@ -932,7 +939,7 @@ exports[`renders comment stream 1`] = `
                         className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
-                          className="Timestamp-root RelativeTime-root"
+                          className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                           dateTime="2018-07-06T18:24:00.000Z"
                           title="2018-07-06T18:24:00.000Z"
                         >
@@ -1108,6 +1115,7 @@ exports[`renders comment stream 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-with-deepest-replies-2"
             >
               <div
@@ -1147,7 +1155,7 @@ exports[`renders comment stream 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Markus
                                 </span>
@@ -1171,7 +1179,7 @@ exports[`renders comment stream 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -1347,6 +1355,7 @@ exports[`renders comment stream 1`] = `
                 className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
+                  className="coral coral-comment"
                   data-testid="comment-comment-with-deepest-replies-3"
                 >
                   <div
@@ -1386,7 +1395,7 @@ exports[`renders comment stream 1`] = `
                                     type="button"
                                   >
                                     <span
-                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                     >
                                       Markus
                                     </span>
@@ -1410,7 +1419,7 @@ exports[`renders comment stream 1`] = `
                                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                               >
                                 <time
-                                  className="Timestamp-root RelativeTime-root"
+                                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                                   dateTime="2018-07-06T18:24:00.000Z"
                                   title="2018-07-06T18:24:00.000Z"
                                 >
@@ -1586,6 +1595,7 @@ exports[`renders comment stream 1`] = `
                     className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
+                      className="coral coral-comment"
                       data-testid="comment-comment-with-deepest-replies-4"
                     >
                       <div
@@ -1625,7 +1635,7 @@ exports[`renders comment stream 1`] = `
                                         type="button"
                                       >
                                         <span
-                                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                         >
                                           Markus
                                         </span>
@@ -1649,7 +1659,7 @@ exports[`renders comment stream 1`] = `
                                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                                   >
                                     <time
-                                      className="Timestamp-root RelativeTime-root"
+                                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                                       dateTime="2018-07-06T18:24:00.000Z"
                                       title="2018-07-06T18:24:00.000Z"
                                     >
@@ -1825,6 +1835,7 @@ exports[`renders comment stream 1`] = `
                         className="Box-root HorizontalGutter-root HorizontalGutter-full"
                       >
                         <div
+                          className="coral coral-comment"
                           data-testid="comment-comment-with-deepest-replies-5"
                         >
                           <div
@@ -1864,7 +1875,7 @@ exports[`renders comment stream 1`] = `
                                             type="button"
                                           >
                                             <span
-                                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                             >
                                               Markus
                                             </span>
@@ -1888,7 +1899,7 @@ exports[`renders comment stream 1`] = `
                                         className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                                       >
                                         <time
-                                          className="Timestamp-root RelativeTime-root"
+                                          className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                                           dateTime="2018-07-06T18:24:00.000Z"
                                           title="2018-07-06T18:24:00.000Z"
                                         >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
index dacbdd869..18fd029ca 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-0"
 >
   <div
@@ -41,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -65,7 +66,7 @@ exports[`post a reply: open reply form 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -204,6 +205,7 @@ exports[`post a reply: open reply form 1`] = `
     </div>
     <form
       autoComplete="off"
+      className="coral coral-createReplyComment"
       id="comments-replyCommentForm-form-comment-0"
       onSubmit={[Function]}
     >
@@ -213,7 +215,9 @@ exports[`post a reply: open reply form 1`] = `
         <div
           className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
-          <div>
+          <div
+            className="coral coral-createReplyComment-box"
+          >
             <label
               className="AriaInfo-root"
               htmlFor="comments-replyCommentForm-rte-comment-0"
@@ -344,7 +348,7 @@ exports[`post a reply: open reply form 1`] = `
             Cancel
           </button>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -373,6 +377,7 @@ exports[`post a reply: optimistic response 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-uuid-0"
     >
       <div
@@ -412,7 +417,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Markus
                         </span>
@@ -436,7 +441,7 @@ exports[`post a reply: optimistic response 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
index 3acc191b3..ef86587ae 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
@@ -54,12 +54,15 @@ exports[`renders comment stream with community guidelines 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      className="coral coral-createComment"
+    >
       <div
         className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
       >
         <div
           aria-hidden="true"
+          className="coral coral-createComment-box"
         >
           <div>
             <div
@@ -143,7 +146,7 @@ exports[`renders comment stream with community guidelines 1`] = `
           </div>
         </div>
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -270,6 +273,7 @@ exports[`renders comment stream with community guidelines 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-0"
             >
               <div
@@ -309,7 +313,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Markus
                                 </span>
@@ -333,7 +337,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
@@ -459,6 +463,7 @@ exports[`renders comment stream with community guidelines 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
+              className="coral coral-comment"
               data-testid="comment-comment-1"
             >
               <div
@@ -498,7 +503,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                 >
                                   Lukas
                                 </span>
@@ -522,7 +527,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
-                              className="Timestamp-root RelativeTime-root"
+                              className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                               dateTime="2018-07-06T18:24:00.000Z"
                               title="2018-07-06T18:24:00.000Z"
                             >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index 4806537ae..eef534831 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -264,6 +264,7 @@ exports[`renders message box when logged in 1`] = `
       </div>
       <form
         autoComplete="off"
+        className="coral coral-createComment"
         id="comments-postCommentForm-form"
         onSubmit={[Function]}
       >
@@ -281,7 +282,7 @@ exports[`renders message box when logged in 1`] = `
             </label>
             <div>
               <div
-                className=""
+                className="coral coral-createComment-box"
               >
                 <div
                   className="RTE-contentEditableContainer"
@@ -366,7 +367,7 @@ exports[`renders message box when logged in 1`] = `
             className="Box-root Flex-root Flex-flex Flex-alignFlexEnd Flex-directionColumn"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createComment-submit"
               disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -536,7 +537,9 @@ exports[`renders message box when not logged in 1`] = `
         Register
       </button>
     </div>
-    <div>
+    <div
+      className="coral coral-createComment"
+    >
       <div
         className="MessageBox-root PostCommentFormFake-messageBox"
       >
@@ -561,6 +564,7 @@ exports[`renders message box when not logged in 1`] = `
       >
         <div
           aria-hidden="true"
+          className="coral coral-createComment-box"
         >
           <div>
             <div
@@ -644,7 +648,7 @@ exports[`renders message box when not logged in 1`] = `
           </div>
         </div>
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
index f57c12e0f..e87659923 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
@@ -11,6 +11,7 @@ exports[`renders reply list 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-with-replies"
     >
       <div
@@ -50,7 +51,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Markus
                         </span>
@@ -74,7 +75,7 @@ exports[`renders reply list 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
@@ -232,6 +233,7 @@ exports[`renders reply list 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
+          className="coral coral-comment"
           data-testid="comment-comment-3"
         >
           <div
@@ -271,7 +273,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                             >
                               Isabelle
                             </span>
@@ -295,7 +297,7 @@ exports[`renders reply list 1`] = `
                         className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
-                          className="Timestamp-root RelativeTime-root"
+                          className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                           dateTime="2018-07-06T18:24:00.000Z"
                           title="2018-07-06T18:24:00.000Z"
                         >
@@ -448,6 +450,7 @@ exports[`renders reply list 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
+          className="coral coral-comment"
           data-testid="comment-comment-4"
         >
           <div
@@ -487,7 +490,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                             >
                               Isabelle
                             </span>
@@ -511,7 +514,7 @@ exports[`renders reply list 1`] = `
                         className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
-                          className="Timestamp-root RelativeTime-root"
+                          className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                           dateTime="2018-07-06T18:24:00.000Z"
                           title="2018-07-06T18:24:00.000Z"
                         >
@@ -666,6 +669,7 @@ exports[`renders reply list 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-5"
     >
       <div
@@ -705,7 +709,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Isabelle
                         </span>
@@ -729,7 +733,7 @@ exports[`renders reply list 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
index 60c45aa59..1725d2b1f 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders comment stream 1`] = `
   className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
 >
   <ul
-    className="TabBar-root TabBar-primary"
+    className="TabBar-root TabBar-primary coral coral-tabBar"
     role="tablist"
   >
     <li
@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
       <button
         aria-controls="tabPane-COMMENTS"
         aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -70,12 +70,15 @@ exports[`renders comment stream 1`] = `
           Register
         </button>
       </div>
-      <div>
+      <div
+        className="coral coral-createComment"
+      >
         <div
           className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
         >
           <div
             aria-hidden="true"
+            className="coral coral-createComment-box"
           >
             <div>
               <div
@@ -159,7 +162,7 @@ exports[`renders comment stream 1`] = `
             </div>
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -286,6 +289,7 @@ exports[`renders comment stream 1`] = `
               className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <div
+                className="coral coral-comment"
                 data-testid="comment-comment-0"
               >
                 <div
@@ -325,7 +329,7 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                   >
                                     Markus
                                   </span>
@@ -349,7 +353,7 @@ exports[`renders comment stream 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                             >
                               <time
-                                className="Timestamp-root RelativeTime-root"
+                                className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                                 dateTime="2018-07-06T18:24:00.000Z"
                                 title="2018-07-06T18:24:00.000Z"
                               >
@@ -475,6 +479,7 @@ exports[`renders comment stream 1`] = `
               className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <div
+                className="coral coral-comment"
                 data-testid="comment-comment-from-staff-0"
               >
                 <div
@@ -514,7 +519,7 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                                   >
                                     Moderator
                                   </span>
@@ -534,7 +539,7 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <span
-                                className="Tag-root Tag-colorGrey"
+                                className="Tag-root coral coral-comment-userTag Tag-colorGrey"
                               >
                                 Staff
                               </span>
@@ -543,7 +548,7 @@ exports[`renders comment stream 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                             >
                               <time
-                                className="Timestamp-root RelativeTime-root"
+                                className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                                 dateTime="2018-07-06T18:24:00.000Z"
                                 title="2018-07-06T18:24:00.000Z"
                               >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
index 98f9a17a6..617b6c557 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
@@ -493,7 +493,7 @@ exports[`report comment as offensive 1`] = `
             We’ve received your message. Reports from members like you keep the community safe.
              
             <button
-              className="BaseButton-root Button-root ThankYou-dismiss Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined ThankYou-dismiss"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
index 551341ea3..0a3fbbe83 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
@@ -11,6 +11,7 @@ exports[`renders comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-1"
     >
       <div
@@ -50,7 +51,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Lukas
                         </span>
@@ -74,7 +75,7 @@ exports[`renders comment stream 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
index a63d9778d..cc993294a 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders deepest comment with link 1`] = `
 <div
+  className="coral coral-comment"
   data-testid="comment-comment-with-deepest-replies-5"
 >
   <div
@@ -41,7 +42,7 @@ exports[`renders deepest comment with link 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                     >
                       Markus
                     </span>
@@ -65,7 +66,7 @@ exports[`renders deepest comment with link 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
-                  className="Timestamp-root RelativeTime-root"
+                  className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
index 220750860..21c347e55 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
@@ -12,6 +12,7 @@ exports[`renders app with comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-2"
     >
       <div
@@ -51,7 +52,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Isabelle
                         </span>
@@ -75,7 +76,7 @@ exports[`renders app with comment stream 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
@@ -201,6 +202,7 @@ exports[`renders app with comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
+      className="coral coral-comment"
       data-testid="comment-comment-3"
     >
       <div
@@ -240,7 +242,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
                         >
                           Isabelle
                         </span>
@@ -264,7 +266,7 @@ exports[`renders app with comment stream 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
-                      className="Timestamp-root RelativeTime-root"
+                      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
                       dateTime="2018-07-06T18:24:00.000Z"
                       title="2018-07-06T18:24:00.000Z"
                     >
diff --git a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
index 2fbc85dcc..e9ea6261a 100644
--- a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
+++ b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
@@ -275,7 +275,7 @@ no new comments may be submitted and all previously submitted comments
 will still be displayed.
         </p>
         <button
-          className="BaseButton-root Button-root CloseStream-button Button-sizeRegular Button-colorError Button-variantOutlined"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
diff --git a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
index 98cd43320..66e1b186a 100644
--- a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
@@ -20,7 +20,7 @@ exports[`renders profile 1`] = `
       Story: title
     </h1>
     <time
-      className="Timestamp-root RelativeTime-root"
+      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
       dateTime="2018-07-06T18:24:00.000Z"
       title="2018-07-06T18:24:00.000Z"
     >
@@ -61,7 +61,7 @@ exports[`renders profile 1`] = `
       Story: title
     </h1>
     <time
-      className="Timestamp-root RelativeTime-root"
+      className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
       dateTime="2018-07-06T18:24:00.000Z"
       title="2018-07-06T18:24:00.000Z"
     >
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index 09a315dd7..7735fe20a 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -75,27 +75,31 @@ export class Button extends React.Component<Props> {
       ...rest
     } = this.props;
 
-    const rootClassName = cn(classes.root, className, {
-      [classes.sizeRegular]: size === "regular",
-      [classes.sizeSmall]: size === "small",
-      [classes.sizeLarge]: size === "large",
-      [classes.colorRegular]: color === "regular",
-      [classes.colorLight]: color === "light",
-      [classes.colorPrimary]: color === "primary",
-      [classes.colorError]: color === "error",
-      [classes.colorSuccess]: color === "success",
-      [classes.colorBrand]: color === "brand",
-      [classes.colorDark]: color === "dark",
-      [classes.variantRegular]: variant === "regular",
-      [classes.variantFilled]: variant === "filled",
-      [classes.variantOutlined]: variant === "outlined",
-      [classes.variantGhost]: variant === "ghost",
-      [classes.variantAdornment]: variant === "adornment",
-      [classes.variantUnderlined]: variant === "underlined",
-      [classes.fullWidth]: fullWidth,
-      [classes.active]: active,
-      [classes.disabled]: disabled,
-    });
+    const rootClassName = cn(
+      classes.root,
+      {
+        [classes.sizeRegular]: size === "regular",
+        [classes.sizeSmall]: size === "small",
+        [classes.sizeLarge]: size === "large",
+        [classes.colorRegular]: color === "regular",
+        [classes.colorLight]: color === "light",
+        [classes.colorPrimary]: color === "primary",
+        [classes.colorError]: color === "error",
+        [classes.colorSuccess]: color === "success",
+        [classes.colorBrand]: color === "brand",
+        [classes.colorDark]: color === "dark",
+        [classes.variantRegular]: variant === "regular",
+        [classes.variantFilled]: variant === "filled",
+        [classes.variantOutlined]: variant === "outlined",
+        [classes.variantGhost]: variant === "ghost",
+        [classes.variantAdornment]: variant === "adornment",
+        [classes.variantUnderlined]: variant === "underlined",
+        [classes.fullWidth]: fullWidth,
+        [classes.active]: active,
+        [classes.disabled]: disabled,
+      },
+      className
+    );
 
     return (
       <BaseButton
diff --git a/src/core/client/ui/components/Delay/Delay.tsx b/src/core/client/ui/components/Delay/Delay.tsx
index 6b06b3441..0210a106c 100644
--- a/src/core/client/ui/components/Delay/Delay.tsx
+++ b/src/core/client/ui/components/Delay/Delay.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Component } from "react";
+import React, { Component } from "react";
 
 interface Props {
   ms?: number;
diff --git a/src/core/client/ui/components/Marker/Count.tsx b/src/core/client/ui/components/Marker/Count.tsx
index a236c1610..96f13ae8c 100644
--- a/src/core/client/ui/components/Marker/Count.tsx
+++ b/src/core/client/ui/components/Marker/Count.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "coral-ui/hocs";
 
diff --git a/src/core/client/ui/components/Marker/Marker.tsx b/src/core/client/ui/components/Marker/Marker.tsx
index 1500f5034..7981d7122 100644
--- a/src/core/client/ui/components/Marker/Marker.tsx
+++ b/src/core/client/ui/components/Marker/Marker.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "coral-ui/hocs";
 
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
index 152c1ced9..92b79f6f5 100644
--- a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
+++ b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
@@ -29,7 +29,7 @@ const RelativeTime: React.FunctionComponent<Props> = props => {
       {({ timeagoFormatter }) => (
         <TimeAgo
           date={date}
-          className={cn(className, classes.root)}
+          className={cn(classes.root, className)}
           live={live}
           formatter={timeagoFormatter || formatter || defaultFormatter}
         />
diff --git a/src/core/client/ui/components/SelectField/OptGroup.tsx b/src/core/client/ui/components/SelectField/OptGroup.tsx
index 0975a0131..04e3d2c93 100644
--- a/src/core/client/ui/components/SelectField/OptGroup.tsx
+++ b/src/core/client/ui/components/SelectField/OptGroup.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 export interface OptGroupProps {
   label: string;
diff --git a/src/core/client/ui/components/SelectField/Option.tsx b/src/core/client/ui/components/SelectField/Option.tsx
index dd928d0b4..672cb3d15 100644
--- a/src/core/client/ui/components/SelectField/Option.tsx
+++ b/src/core/client/ui/components/SelectField/Option.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 export interface OptionProps {
   value?: string;
diff --git a/src/core/client/ui/components/Tag/Tag.tsx b/src/core/client/ui/components/Tag/Tag.tsx
index 873e7e25e..c612361cc 100644
--- a/src/core/client/ui/components/Tag/Tag.tsx
+++ b/src/core/client/ui/components/Tag/Tag.tsx
@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "coral-ui/hocs";
 
diff --git a/src/core/client/ui/hocs/withKeyboardFocus.tsx b/src/core/client/ui/hocs/withKeyboardFocus.tsx
index be155ccf6..547c39bc5 100644
--- a/src/core/client/ui/hocs/withKeyboardFocus.tsx
+++ b/src/core/client/ui/hocs/withKeyboardFocus.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FocusEvent } from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
 
diff --git a/src/core/client/ui/hocs/withMouseHover.tsx b/src/core/client/ui/hocs/withMouseHover.tsx
index 4acfc9bd3..9ff21c461 100644
--- a/src/core/client/ui/hocs/withMouseHover.tsx
+++ b/src/core/client/ui/hocs/withMouseHover.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { MouseEvent, TouchEvent } from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";