[CORL-550] More stable css classes (#2515)

* feat: more stable css classes

* chore: renamee ValidationMessageHelper to FormValidationMessage

* chore: Rename FormValidationMessage to FieldValidationMessage

* feat: more css classes, icons use <i> tag

* feat: stable classnames for gdpr features

* feat: more css stable classnames

src/core/client/stream/App/App.tsx

@@ -1,6 +1,9 @@
+import cn from "classnames";
 import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
+
 import Comments from "../tabs/Comments";
 import Configure from "../tabs/Configure";
 import Profile from "../tabs/Profile";
@@ -16,16 +19,28 @@ export interface AppProps {
 
 const App: FunctionComponent<AppProps> = props => {
   return (
-    <HorizontalGutter className={styles.root}>
+    <HorizontalGutter className={cn(CLASSES.app, styles.root)}>
       <TabBarQuery />
       <TabContent activeTab={props.activeTab} className={styles.tabContent}>
-        <TabPane tabID="COMMENTS" data-testid="current-tab-pane">
+        <TabPane
+          className={CLASSES.commentsTabPane.$root}
+          tabID="COMMENTS"
+          data-testid="current-tab-pane"
+        >
           <Comments />
         </TabPane>
-        <TabPane tabID="PROFILE" data-testid="current-tab-pane">
+        <TabPane
+          className={CLASSES.myProfileTabPane.$root}
+          tabID="PROFILE"
+          data-testid="current-tab-pane"
+        >
           <Profile />
         </TabPane>
-        <TabPane tabID="CONFIGURE" data-testid="current-tab-pane">
+        <TabPane
+          className={CLASSES.configureTabPane.$root}
+          tabID="CONFIGURE"
+          data-testid="current-tab-pane"
+        >
           <Configure />
         </TabPane>
       </TabContent>

src/core/client/stream/App/__snapshots__/App.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
-  className="App-root"
+  className="coral coral-stream App-root"
 >
   <withContext(withLocalStateContainer(TabBarQuery)) />
   <TabContent
@@ -10,18 +10,21 @@ exports[`renders correctly 1`] = `
     className="App-tabContent"
   >
     <TabPane
+      className="coral coral-comments"
       data-testid="current-tab-pane"
       tabID="COMMENTS"
     >
       <CommentsPane />
     </TabPane>
     <TabPane
+      className="coral coral-myProfile"
       data-testid="current-tab-pane"
       tabID="PROFILE"
     >
       <withContext(withLocalStateContainer(ProfileQuery)) />
     </TabPane>
     <TabPane
+      className="coral coral-configure"
       data-testid="current-tab-pane"
       tabID="CONFIGURE"
     >

src/core/client/stream/classes.ts

@@ -1,4 +1,9 @@
 const CLASSES = {
+  /**
+   * app is the container of the app.
+   */
+  app: "coral coral-stream",
+
   /**
    * guidlines represents the box containing the guidlines.
    */
@@ -76,7 +81,7 @@ const CLASSES = {
     featured: "coral coral-tabBarSecondary-tab coral-tabBarComments-featured",
 
     /**
-     * featuredTooltip is the tooltip next to the fextured tab.
+     * featuredTooltip is the tooltip next to the featured tab.
      */
     featuredTooltip: "coral coral-tabBarComments-featuredTooltip",
   },
@@ -130,6 +135,17 @@ const CLASSES = {
      * signIn is the button for submitting a new comment and signing in.
      */
     signIn: "coral coral-createComment-signIn",
+
+    /**
+     * inReview is the message notifying the user that the posted comment is
+     * in review.
+     */
+    inReview: "coral coral-createComment-inReview",
+
+    /**
+     * dismissButton is the button to dismiss the in review message.
+     */
+    dismissButton: "coral coral-createComment-dismissButton",
   },
 
   /**
@@ -142,6 +158,12 @@ const CLASSES = {
      */
     $root: "coral coral-createReplyComment",
 
+    /**
+     * inReview is the message notifying the user that the posted comment is
+     * in review.
+     */
+    inReview: "coral coral-createReplyComment-inReview",
+
     /**
      * submit is the button for submitting a new reply.
      */
@@ -156,6 +178,15 @@ const CLASSES = {
      * dimiss is the button to dismiss the message after submit.
      */
     dismiss: "coral coral-createReplyComment-dismiss",
+
+    /**
+     * replyTo shows the author of the parent comment.
+     */
+    replyTo: {
+      $root: "coral coral-createReplyComment-replyTo",
+      text: "coral coral-createReplyComment-replyToText",
+      username: "coral coral-createReplyComment-replyToUsername",
+    },
   },
 
   /**
@@ -167,6 +198,22 @@ const CLASSES = {
      */
     $root: "coral coral-editComment",
 
+    /**
+     * inReview is the message notifying the user that the edited comment is
+     * in review.
+     */
+    inReview: "coral coral-editComment-inReview",
+
+    /**
+     * remainingTime is the message telling the user the remaining time.
+     */
+    remainingTime: "coral coral-editComment-remainingTime",
+
+    /**
+     * expiredTime appears when the comment can no longer be edited.
+     */
+    expiredTime: "coral coral-editComment-expiredTime",
+
     /**
      * submit is the button for submitting the edit.
      */
@@ -198,36 +245,601 @@ const CLASSES = {
     $root: "coral coral-comment",
 
     /**
-     * username is the text display for any given Username in the system.
+     * topBar is the uppper bar of the comment.
      */
-    username: "coral coral-comment-username",
+    topBar: {
+      /**
+       * $root represents the container of the top bar.
+       */
+      $root: "coral coral-comment-topBar",
+
+      /**
+       * username is the text display for any given Username in the system.
+       */
+      username: "coral coral-username coral-comment-username",
+
+      /**
+       * timestamp is the text that contains the time since the comment was
+       * published.
+       */
+      timestamp: "coral coral-timestamp coral-comment-timestamp",
+
+      /**
+       * edited is the text that indicated that a comment was edited.
+       */
+      edited: "coral coral-comment-edited",
+
+      /**
+       * userTag can be used to target a tag associated with a User.
+       */
+      userTag: "coral coral-userTag coral-comment-userTag",
+
+      /**
+       * userBadge can be used to target a badge associated with a User.
+       */
+      userBadge: "coral coral-userBadge coral-comment-userBadge",
+
+      /**
+       * commentTag can be used to target a tag associated with a Comment.
+       */
+      commentTag: "coral coral-commentTag coral-comment-commentTag",
+
+      /**
+       * caretButton can be used to target the caret that opens the moderation dropdown.
+       */
+      caretButton: "coral coral-comment-caret",
+
+      /**
+       * editButton can be used to target the edit button.
+       */
+      editButton: "coral coral-comment-editButton",
+    },
 
     /**
-     * timestamp is the text that contains the time since the comment was
-     * published.
+     * content is the html text body of the comment.
      */
-    timestamp: "coral coral-comment-timestamp",
+    content: "coral coral-content coral-comment-content",
 
     /**
-     * userTag can be used to target a tag associated with a User.
+     * readMoreOfConversation is the link that continues the
+     * thread of the conversation on a deeper level.
      */
-    userTag: "coral coral-comment-userTag",
-
-    /**
-     * userBadge can be used to target a badge associated with a User.
-     */
-    userBadge: "coral coral-comment-userBadge",
-
-    /**
-     * commentTag can be used to target a tag associated with a Comment.
-     */
-    commentTag: "coral coral-comment-commentTag",
+    readMoreOfConversation: "coral coral-comment-readMoreOfConveration",
 
     /**
      * inReplyTo shows the author of the parent comment.
      */
-    inReplyTo: "coral coral-comment-inReplyTo",
+    inReplyTo: {
+      $root: "coral coral-comment-inReplyTo",
+      text: "coral coral-comment-inReplyToText",
+      username: "coral coral-comment-inReplyToUsername",
+    },
+
+    /**
+     * actionBar is the lower bar of the comment.
+     */
+    actionBar: {
+      /**
+       * $root represents the container of action bar.
+       */
+      $root: "coral coral-comment-actionBar",
+      /**
+       * reactButton is the reaction button.
+       */
+      reactButton: "coral coral-reactButton coral-comment-reactButton",
+      /**
+       * reactedButton is the class added to the reaction button
+       * when the viewer has already reacted to the comment.
+       */
+      reactedButton: "coral-reactedButton coral-comment-reactedButton",
+      /**
+       * replyButton is button that triggers the reply form.
+       */
+      replyButton: "coral coral-comment-replyButton",
+      /**
+       * shareButton is the button that will show the permalink popover.
+       */
+      shareButton: "coral coral-comment-shareButton",
+      /**
+       * reportButton is the button that triggers the report feature.
+       */
+      reportButton: "coral coral-reportButton coral-comment-reportButton",
+      /**
+       * reportedButton is added to report button when the viewer
+       * has already reported the comment.
+       */
+      reportedButton: "coral-reportedButton coral-comment-reportedButton",
+    },
+
+    /**
+     * indentation classes for the different levels.
+     */
+    indent: [
+      "",
+      "coral coral-indent-1",
+      "coral coral-indent-2",
+      "coral coral-indent-3",
+      "coral coral-indent-4",
+      "coral coral-indent-5",
+      "coral coral-indent-6",
+    ],
   },
+
+  /**
+   * rejectedTombstone is shown when a comment got rejected.
+   */
+  rejectedTombstone: {
+    $root: "coral coral-rejectedtombstone",
+    goToModerateButton: "coral coral-rejectedtombstone-goToModerateButton",
+  },
+  /**
+   * deletedTombstone is shown when a comment has been deleted.
+   */
+  deletedTombstone: "coral coral-rejectedtombstone",
+
+  /**
+   * ignoredTombstown is shown when a comment got ignored.
+   */
+  ignoredTombstone: "coral coral-ignoredTombstone",
+
+  /**
+   * replyList represents the list of replies to a comment.
+   */
+  replyList: {
+    /**
+     * showAllButton is the button to show all replies.
+     */
+    showAllButton: "coral coral-replyList-showAllButton",
+    /**
+     * showAllButton is the button to show incoming live replies.
+     */
+    showMoreReplies: "coral coral-replyList-showMoreButton",
+  },
+
+  /**
+   * comment is the visual representation of a featured comment.
+   */
+  featuredComment: {
+    /**
+     * $root represents the container containing a featured comment.
+     */
+    $root: "coral coral-featuredComment",
+
+    /**
+     * authorBar is the uppper bar of the comment.
+     */
+    authorBar: {
+      $root: "coral coral-featuredComment-authorBar",
+
+      /**
+       * username is the text display for any given Username in the system.
+       */
+      username: "coral coral-username coral-comment-username",
+
+      /**
+       * timestamp is the text that contains the time since the comment was
+       * published.
+       */
+      timestamp: "coral coral-timestamp coral-comment-timestamp",
+
+      /**
+       * userTag can be used to target a tag associated with a User.
+       */
+      userTag: "coral coral-userTag coral-comment-userTag",
+    },
+
+    /**
+     * content is the html text body of the featured comment.
+     */
+    content: "coral coral-content coral-featuredComment-content",
+
+    /**
+     * actionBar is the lower bar of the featured comment.
+     */
+    actionBar: {
+      /**
+       * $root represents the container of action bar.
+       */
+      $root: "coral coral-featuredComment-actionBar",
+
+      /**
+       * replies indicates the amount of replies this comment has.
+       */
+      replies: "coral coral-featuredComment-replies",
+
+      /**
+       * reactButton is the reaction button.
+       */
+      reactButton: "coral coral-reactButton coral-featuredComment-reactButton",
+      /**
+       * reactedButton is the class added to the reaction button
+       * when the viewer has already reacted to the comment.
+       */
+      reactedButton: "coral-reactedButton coral-featuredComment-reactedButton",
+      /**
+       * goToConversation is the link that leads to the whole conversation.
+       */
+      goToConversation: "coral coral-featuredComment-goToConversationButton",
+    },
+  },
+
+  /**
+   * userPopover is the popover that appears when clicking on the username.
+   */
+  userPopover: {
+    /**
+     * $root is the container of the user popover.
+     */
+    $root: "coral coral-userPopover",
+    /**
+     * username that is rendeed inside the user popover.
+     */
+    username: "coral coral-username coral-userPopover-username",
+    /**
+     * ignoreButton that will trigger the ignore user popover.
+     */
+    ignoreButton: "coral coral-userPopover-ignoreButton",
+  },
+
+  /**
+   * ignoreUserPopover is the popover that allow the
+   * viewer to ignore a user.
+   */
+  ignoreUserPopover: {
+    /**
+     * $root is the container of the ignore user popover.
+     */
+    $root: "coral coral-ignoreUserPopover",
+    cancelButton: "coral coral-ignoreUserPopover-cancelButton",
+    ignoreButton: "coral coral-ignoreUserPopover-ignoreButton",
+  },
+
+  /**
+   * sharePopover is the popover that shows the permalink of the comment.
+   */
+  sharePopover: {
+    $root: "coral coral-sharePopover",
+    copyButton: "coral coral-sharePopover-copyButotn",
+  },
+
+  /**
+   * reportPopover is the popover that appears when the viewer clicks on the
+   * report button.
+   */
+  reportPopover: {
+    $root: "coral coral-reportPopover",
+    closeButton: "coral coral-reportPopover-closeButton",
+    cancelButton: "coral coral-reportPopover-cancelButton",
+    submitButton: "coral coral-reportPopover-submitButton",
+  },
+
+  /**
+   * moderationDropdown is the dropdown that appears when clicking on the
+   * caret as a priviledged user (at least moderator).
+   */
+  moderationDropdown: {
+    $root: "coral coral-moderationDropdown",
+    approveButton:
+      "coral coral-dropdownButton coral-moderationDropdown-approveButton",
+    approvedButton:
+      "coral coral-dropdownButton coral-moderationDropdown-approveedButton",
+    rejectButton:
+      "coral coral-dropdownButton coral-moderationDropdown-rejectButton",
+    rejectedButton:
+      "coral coral-dropdownButton coral-moderationDropdown-rejectedButton",
+    featureButton:
+      "coral coral-dropdownButton coral-moderationDropdown-featureButton",
+    unfeatureButton:
+      "coral coral-dropdownButton coral-moderationDropdown-unfeatureButton",
+    banUserButton:
+      "coral coral-dropdownButton coral-moderationDropdown-banUserButton",
+    bannedButton:
+      "coral coral-dropdownButton coral-moderationDropdown-bannedButton",
+    goToModerateButton:
+      "coral coral-dropdownButton coral-moderationDropdown-goToModerateButton",
+  },
+
+  /**
+   * banUserPopover is the popover that allows the viewer to ban users.
+   */
+  banUserPopover: {
+    $root: "coral coral-banUserPopover",
+    cancelButton: "coral coral-banUserPopover-cancelButton",
+    banButton: "coral coral-banUserPopover-banButton",
+  },
+
+  /**
+   * viewerBox is the box that indicates which user is logged in and
+   * provides login, signout or register functionality.
+   */
+  viewerBox: {
+    $root: "coral coral-viewerBox",
+    logoutButton: "coral coral-viewerBox-logoutButton",
+    signInButton: "coral coral-viewerBox-signInButton",
+    registerButton: "coral coral-viewerBox-registerButton",
+  },
+
+  /**
+   * comments tab pane is the default tab pane.
+   */
+  commentsTabPane: {
+    /**
+     * $root is the container for the comments tab pane.
+     */
+    $root: "coral coral-comments",
+    /**
+     * authenticated will indicate that the user is logged in.
+     */
+    authenticated: "coral coral-authenticated",
+    /**
+     * unauthenticated will indicate that the user hasn't logged in yet.
+     */
+    unauthenticated: "coral coral-unauthenticated",
+  },
+
+  /**
+   * allCommentsTabPane is the tab pane that shows all comments.
+   */
+  allCommentsTabPane: {
+    $root: "coral coral-allComments",
+    /**
+     * loadMoreButton is the button to paginate.
+     */
+    loadMoreButton:
+      "coral coral-loadMoreButton coral-allComments-loadMoreButton",
+    /**
+     * viewNewButton is the button that reveals newer comments.
+     */
+    viewNewButton: "coral coral-allComments-viewNewButton",
+  },
+
+  /**
+   * featuredCommentsTabPane is the tab pane that shows featured comments.
+   */
+  featuredCommentsTabPane: {
+    $root: "coral coral-featuredComments",
+    loadMoreButton:
+      "coral coral-loadMoreButton coral-featuredComments-loadMoreButton",
+  },
+
+  /**
+   * permalinkView is the tab pane that shows the conversation of a comment.
+   */
+  permalinkView: {
+    /**
+     * $root is the container for the permalink tab pane.
+     */
+    $root: "coral coral-permalink",
+    /**
+     * authenticated will be applied to the container when the user is logged in.
+     */
+    authenticated: "coral-authenticated",
+    /**
+     * unauthenticated will be applied to the container when the user has not logged in yet.
+     */
+    unauthenticated: "coral-unauthenticated",
+
+    /**
+     * viewFullDiscussionButton is the button that leads to the full comment stream.
+     */
+    viewFullDiscussionButton: "coral coral-permalink-viewFullDiscussionButton",
+  },
+
+  /**
+   * conversationThread shows the thread of comments that lead to the permalinked comment.
+   */
+  conversationThread: {
+    $root: "coral coral-conversationThread",
+    /**
+     * rootParent is the root comment that is shown in the thread before it has been
+     * expanded.
+     */
+    rootParent: {
+      $root: "coral coral-rootParent",
+      username: "coral coral-username coral-rootParent-username",
+      timestamp: "coral coral-timestamp coral-rootParent-timestamp",
+      userTag: "coral coral-userTag coral-rootParent-userTag",
+    },
+    /**
+     * showMore is the button that reveals all comments between root parent and highlighted comment.
+     */
+    showMore: "coral coral-conversationThread-showMore",
+    /**
+     * highlighted is the comment that is targeted by the permalink.
+     */
+    hightlighted: "coral coral-conversationThread-highlighted",
+  },
+
+  /**
+   * myProfileTabPane is the tab pane that shows the profile of the viewer.
+   */
+  myProfileTabPane: {
+    $root: "coral coral-myProfile",
+  },
+
+  /**
+   * myUsername is the username part of my profile.
+   */
+  myUsername: {
+    username: "coral coral-myUsername",
+    editButton: "coral coral-myUsername-editButton",
+    form: {
+      $root: "coral coral-changeMyUsername",
+      username: "coral coral-changeMyUsername-username",
+      cancelButton: "coral coral-changeMyUsername-cancelButton",
+      saveButton: "coral coral-changeMyUsername-saveButton",
+      closeButton: "coral coral-changeMyUsername-closeButton",
+      errorMessage: "coral coral-changeMyEmail-errorMessage",
+    },
+  },
+
+  /**
+   * myUsername is the email part of my profile.
+   */
+  myEmail: {
+    email: "coral coral-myEmail",
+    unverified: "coral coral-myEmail-unverified",
+    editButton: "coral coral-myEmail-editButton",
+    form: {
+      $root: "coral coral-changeMyEmail",
+      currentEmail: "coral coral-changeMyEmail-currentEmail",
+      cancelButton: "coral coral-changeMyEmail-cancelButton",
+      saveButton: "coral coral-changeMyEmail-saveButton",
+      errorMessage: "coral coral-changeMyEmail-errorMessage",
+    },
+  },
+
+  /**
+   * myUsername is the verify email part of my profile.
+   */
+  verifyEmail: {
+    $root: "coral coral-verifyEmail",
+    resendButton: "coral coral-verifyEmail-resendButton",
+    resentMessage: "coral coral-verifyEmail-resentMessage",
+  },
+
+  /**
+   * myCommentsTabPane is the tab pane that shows viewers comments.
+   */
+  myCommentsTabPane: {
+    $root: "coral coral-myComments",
+    loadMoreButton:
+      "coral coral-loadMoreButton coral-myComments-loadMoreButton",
+  },
+
+  /**
+   * myComment is the comment that shows up in the viewers comment history.
+   */
+  myComment: {
+    $root: "coral coral-myComment",
+    story: "coral coral-myComment-story",
+    timestamp: "coral coral-myComment-timestamp",
+    content: "coral coral-myComment-content",
+    replies: "coral coral-myComment-replies",
+    viewConversationButton: "coral coral-myComment-viewConversationButton",
+  },
+
+  /**
+   * settingsTabPane is the tab pane that shows viewers settings.
+   */
+  settingsTabPane: {
+    $root: "coral coral-settings",
+  },
+
+  /**
+   * ignoredCommenters is ignored commenters settings.
+   */
+  ignoredCommenters: {
+    $root: "coral coral-ignoredCommenters",
+    username: "coral coral-ignoredCommenters-username",
+    stopIgnoreButton: "coral coral-ignoredCommenters-stopIgnoreButton",
+  },
+
+  /**
+   * changePassword allows the viewer to change password in settings.
+   */
+  changePassword: {
+    $root: "coral coral-changePassword",
+    forgotButton: "coral coral-changePassword-forgotButton",
+    changeButton: "coral coral-changePassword-changeButton",
+    successMessage: "coral coral-changePassword-successMessage",
+    errorMessage: "coral coral-changePassword-errorMessage",
+  },
+
+  /**
+   * downloadCommentHistory allows the viewer to download the comment
+   * history in settings.
+   */
+  downloadCommentHistory: {
+    $root: "coral coral-downloadCommentHistory",
+    requestButton: "coral coral-downloadCommentHistory-requestButton",
+    recentRequest: "coral coral-downloadCommentHistory-recentRequest",
+    requestLater: "coral coral-downloadCommentHistory-requestLater",
+  },
+
+  /**
+   * deleteMyAccount allows the viewer to delete their account.
+   */
+  deleteMyAccount: {
+    $root: "coral coral-deleteMyAccount",
+    requestButton: "coral coral-deleteMyAccount-requestButton",
+    cancelRequestButton: "coral coral-deleteMyAccount-cancelRequestButton",
+  },
+
+  /**
+   * pendingAccountDeletion is the message box informing the viewer
+   * about a pending account deletion.
+   */
+  pendingAccountDeletion: {
+    $root: "coral coral-pendingAccountDeletion",
+    cancelRequestButton:
+      "coral coral-pendingAccountDeletion-cancelRequestButton",
+  },
+
+  /**
+   * deleteMyAccount allows the viewer to delete their account.
+   */
+  deleteMyAccountModal: {
+    $root: "coral coral-deleteMyAccountModal",
+    header: "coral coral-deleteMyAccountModal-header",
+    cancelButton: "coral coral-deleteMyAccountModal-cancelButton",
+    proceedButton: "coral coral-deleteMyAccountModal-proceedButton",
+    doneButton: "coral coral-deleteMyAccountModal-doneButton",
+    deleteMyAccountButton: "coral coral-deleteMyAccount-deleteMyAccountButton",
+  },
+
+  /**
+   * configureTabPane is the tab pane that lets priviledged users to
+   * change settings of the stream.
+   */
+  configureTabPane: {
+    $root: "coral coral-configure",
+  },
+
+  /**
+   * configureMessageBox is the message box section in the stream configure.
+   */
+  configureMessageBox: {
+    $root: "coral coral-configureMessageBox",
+    messageBox: "coral coral-configureMessageBox-messageBox",
+    option: "coral coral-configureMessageBox-option",
+  },
+
+  /**
+   * configureCommentStream allows priviledged users to adjust settings of
+   * the stream.
+   */
+  configureCommentStream: {
+    $root: "coral coral-configureCommentStream",
+    applyButton: "coral coral-configureCommentStream-applyButton",
+    errorMessage: "coral coral-configureCommentStream-errorMessage",
+  },
+
+  /**
+   * closeCommentStream allows priviledged users to close the stream.
+   */
+  closeCommentStream: {
+    $root: "coral coral-closeCommentStream",
+    closeButton: "coral coral-closeCommentStream-closeButton",
+  },
+
+  /**
+   * openCommentStream allows priviledged users to open the stream.
+   */
+  openCommentStream: {
+    $root: "coral coral-openCommentStream",
+    openButton: "coral coral-openCommentStream-openButton",
+  },
+
+  /**
+   * spinner is the loading indicator.
+   */
+  spinner: "coral-spinner",
+
+  /**
+   * validation message that shows up on form errors.
+   */
+  validationMessage: "coral-validation-message",
 };
 
 export default CLASSES;

src/core/client/stream/common/Counter.ts

@@ -5,8 +5,11 @@ import CLASSES from "coral-stream/classes";
 import { Counter } from "coral-ui/components";
 import { PropTypesOf } from "coral-ui/types";
 
+/**
+ * Like <Counter /> from coral ui but with a stable css classname.
+ */
 export default withProps<
-  PropTypesOf<typeof Counter>,
+  Partial<PropTypesOf<typeof Counter>>,
   PropTypesOf<typeof Counter>
 >(({ className }) => ({
   className: cn(className, CLASSES.counter),

src/core/client/stream/common/FieldValidationMessage.ts

@@ -0,0 +1,16 @@
+import cn from "classnames";
+import { withProps } from "recompose";
+
+import { ValidationMessage } from "coral-framework/lib/form";
+import CLASSES from "coral-stream/classes";
+import { PropTypesOf } from "coral-ui/types";
+
+/**
+ * Like <ValidationMessage /> from the form library but with a stable css classname.
+ */
+export default withProps<
+  Partial<PropTypesOf<typeof ValidationMessage>>,
+  PropTypesOf<typeof ValidationMessage>
+>(({ className }) => ({
+  className: cn(className, CLASSES.validationMessage),
+}))(ValidationMessage);

src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap

@@ -12,12 +12,12 @@ exports[`renders icon 1`] = `
 <div
   className="MessageBox-root"
 >
-  <span
+  <i
     aria-hidden="true"
     className="Icon-root Icon-md MessageBoxIcon-root"
   >
     alert
-  </span>
+  </i>
   Alert MessageBox
 </div>
 `;

src/core/client/stream/common/Spinner.ts

@@ -0,0 +1,16 @@
+import cn from "classnames";
+import { withProps } from "recompose";
+
+import CLASSES from "coral-stream/classes";
+import { Spinner } from "coral-ui/components";
+import { PropTypesOf } from "coral-ui/types";
+
+/**
+ * Like <Spinner /> from coral ui but with a stable css classname.
+ */
+export default withProps<
+  Partial<PropTypesOf<typeof Spinner>>,
+  PropTypesOf<typeof Spinner>
+>(({ className }) => ({
+  className: cn(className, CLASSES.spinner),
+}))(Spinner);

src/core/client/stream/common/Timestamp/Timestamp.tsx

@@ -1,7 +1,6 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
-import CLASSES from "coral-stream/classes";
 import { RelativeTime } from "coral-ui/components";
 
 import styles from "./Timestamp.css";
@@ -13,7 +12,7 @@ export interface TimestampProps {
 
 const Timestamp: FunctionComponent<TimestampProps> = props => (
   <RelativeTime
-    className={cn(styles.root, props.className, CLASSES.comment.timestamp)}
+    className={cn(styles.root, props.className)}
     date={props.children}
   />
 );

src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
-  className="Timestamp-root coral coral-comment-timestamp"
+  className="Timestamp-root"
   date="1995-12-17T03:24:00.000Z"
 />
 `;

src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx

@@ -1,6 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 export interface UserBoxAuthenticatedProps {
@@ -19,7 +20,7 @@ const UserBoxAuthenticated: FunctionComponent<
   );
 
   return (
-    <Flex itemGutter="half" wrap>
+    <Flex itemGutter="half" className={CLASSES.viewerBox.$root} wrap>
       <Localized
         id="general-userBoxAuthenticated-signedInAs"
         Username={<Username />}
@@ -37,6 +38,7 @@ const UserBoxAuthenticated: FunctionComponent<
               size="small"
               variant="underlined"
               onClick={props.onSignOut}
+              className={CLASSES.viewerBox.logoutButton}
             />
           }
         >

src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx

@@ -1,6 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 import MatchMedia from "coral-ui/components/MatchMedia";
 
@@ -16,7 +17,7 @@ const UserBoxUnauthenticated: FunctionComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter alignItems="center">
+    <Flex itemGutter alignItems="center" className={CLASSES.viewerBox.$root}>
       <MatchMedia gteWidth="sm">
         <Localized id="general-userBoxUnauthenticated-joinTheConversation">
           <Typography
@@ -37,6 +38,7 @@ const UserBoxUnauthenticated: FunctionComponent<
           size="small"
           variant="underlined"
           onClick={props.onSignIn}
+          className={CLASSES.viewerBox.signInButton}
         >
           Sign in
         </Button>
@@ -48,6 +50,7 @@ const UserBoxUnauthenticated: FunctionComponent<
             size="small"
             variant="outlined"
             onClick={props.onRegister}
+            className={CLASSES.viewerBox.registerButton}
           >
             Register
           </Button>

src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`renders correctly with logout button 1`] = `
 <ForwardRef(forwardRef)
+  className="coral coral-viewerBox"
   itemGutter="half"
   wrap={true}
 >
@@ -19,6 +20,7 @@ exports[`renders correctly with logout button 1`] = `
   <Localized
     button={
       <ForwardRef(forwardRef)
+        className="coral coral-viewerBox-logoutButton"
         color="primary"
         onClick={[Function]}
         size="small"
@@ -44,6 +46,7 @@ exports[`renders correctly with logout button 1`] = `
 
 exports[`renders correctly without logout button 1`] = `
 <ForwardRef(forwardRef)
+  className="coral coral-viewerBox"
   itemGutter="half"
   wrap={true}
 >

src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   alignItems="center"
+  className="coral coral-viewerBox"
   itemGutter={true}
 >
   <MatchMediaWithContext
@@ -30,6 +31,7 @@ exports[`renders correctly 1`] = `
     id="general-userBoxUnauthenticated-signIn"
   >
     <ForwardRef(forwardRef)
+      className="coral coral-viewerBox-signInButton"
       color="primary"
       onClick={[Function]}
       size="small"
@@ -42,6 +44,7 @@ exports[`renders correctly 1`] = `
     id="general-userBoxUnauthenticated-register"
   >
     <ForwardRef(forwardRef)
+      className="coral coral-viewerBox-registerButton"
       color="primary"
       onClick={[Function]}
       size="small"
@@ -56,6 +59,7 @@ exports[`renders correctly 1`] = `
 exports[`renders correctly hides showRegisterButton 1`] = `
 <ForwardRef(forwardRef)
   alignItems="center"
+  className="coral coral-viewerBox"
   itemGutter={true}
 >
   <MatchMediaWithContext
@@ -83,6 +87,7 @@ exports[`renders correctly hides showRegisterButton 1`] = `
     id="general-userBoxUnauthenticated-signIn"
   >
     <ForwardRef(forwardRef)
+      className="coral coral-viewerBox-signInButton"
       color="primary"
       onClick={[Function]}
       size="small"

src/core/client/stream/common/ValidationMessage.ts

@@ -0,0 +1,16 @@
+import cn from "classnames";
+import { withProps } from "recompose";
+
+import CLASSES from "coral-stream/classes";
+import { ValidationMessage } from "coral-ui/components";
+import { PropTypesOf } from "coral-ui/types";
+
+/**
+ * Like <ValidationMessage /> from coral ui but with a stable css classname.
+ */
+export default withProps<
+  Partial<PropTypesOf<typeof ValidationMessage>>,
+  PropTypesOf<typeof ValidationMessage>
+>(({ className }) => ({
+  className: cn(className, CLASSES.validationMessage),
+}))(ValidationMessage);

src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx

@@ -4,21 +4,24 @@ import { graphql } from "react-relay";
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
 import { AuthorBadgesContainer_comment as CommentData } from "coral-stream/__generated__/AuthorBadgesContainer_comment.graphql";
 
-import CLASSES from "coral-stream/classes";
 import { Tag } from "coral-ui/components";
 
 interface Props {
   comment: CommentData;
+  className?: string;
 }
 
-const AuthorBadgesContainer: FunctionComponent<Props> = ({ comment }) => {
+const AuthorBadgesContainer: FunctionComponent<Props> = ({
+  comment,
+  className,
+}) => {
   if (!comment.author || !comment.author.badges) {
     return null;
   }
   return (
     <>
       {comment.author.badges.map(badge => (
-        <Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
+        <Tag key={badge} color="dark" className={className}>
           {badge}
         </Tag>
       ))}

src/core/client/stream/tabs/Comments/Comment/Comment.tsx

@@ -1,6 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
 import { Flex, HorizontalGutter } from "coral-ui/components";
@@ -30,15 +31,23 @@ const Comment: FunctionComponent<CommentProps> = props => {
       role="article"
       className={cn(styles.root, { [styles.highlight]: props.highlight })}
     >
-      <Flex direction="row" justifyContent="space-between">
+      <Flex
+        direction="row"
+        justifyContent="space-between"
+        className={CLASSES.comment.topBar.$root}
+      >
         <TopBarLeft>
           <Flex direction="row" alignItems="center" itemGutter="half">
             {props.username && props.username}
             {props.userTags}
           </Flex>
           <Flex direction="row" alignItems="baseline" itemGutter>
-            <Timestamp>{props.createdAt}</Timestamp>
-            {props.showEditedMarker && <EditedMarker />}
+            <Timestamp className={CLASSES.comment.topBar.timestamp}>
+              {props.createdAt}
+            </Timestamp>
+            {props.showEditedMarker && (
+              <EditedMarker className={CLASSES.comment.topBar.edited} />
+            )}
           </Flex>
         </TopBarLeft>
         {props.topBarRight && <div>{props.topBarRight}</div>}
@@ -50,7 +59,9 @@ const Comment: FunctionComponent<CommentProps> = props => {
       )}
 
       <HorizontalGutter spacing={1}>
-        <HTMLContent>{props.body || ""}</HTMLContent>
+        <HTMLContent className={CLASSES.comment.content}>
+          {props.body || ""}
+        </HTMLContent>
         {props.footer}
       </HorizontalGutter>
     </div>

src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { Component, MouseEvent } from "react";
 import { graphql } from "react-relay";
@@ -56,6 +57,7 @@ interface Props {
   /** showConversationLink will render a link to the conversation */
   showConversationLink?: boolean;
   highlight?: boolean;
+  className?: string;
 }
 
 interface State {
@@ -164,6 +166,7 @@ export class CommentContainer extends Component<Props, State> {
       showConversationLink,
       highlight,
       viewer,
+      className,
     } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
     const hasFeaturedTag = Boolean(
@@ -173,7 +176,7 @@ export class CommentContainer extends Component<Props, State> {
       <>
         {hasFeaturedTag && (
           <Tag
-            className={CLASSES.comment.commentTag}
+            className={CLASSES.comment.topBar.commentTag}
             color="primary"
             variant="pill"
           >
@@ -222,7 +225,7 @@ export class CommentContainer extends Component<Props, State> {
     }
     return (
       <div
-        className={CLASSES.comment.$root}
+        className={cn(CLASSES.comment.$root, className)}
         data-testid={`comment-${comment.id}`}
       >
         <HorizontalGutter>
@@ -243,11 +246,18 @@ export class CommentContainer extends Component<Props, State> {
                 comment.author && (
                   <>
                     <UsernameWithPopoverContainer
+                      className={CLASSES.comment.topBar.username}
                       viewer={viewer}
                       user={comment.author}
                     />
-                    <UserTagsContainer comment={comment} />
-                    <UserBadgesContainer comment={comment} />
+                    <UserTagsContainer
+                      className={CLASSES.comment.topBar.userTag}
+                      comment={comment}
+                    />
+                    <UserBadgesContainer
+                      className={CLASSES.comment.topBar.userBadge}
+                      comment={comment}
+                    />
                   </>
                 )
               }
@@ -260,6 +270,7 @@ export class CommentContainer extends Component<Props, State> {
                         color="primary"
                         variant="underlined"
                         onClick={this.openEditDialog}
+                        className={CLASSES.comment.topBar.editButton}
                       >
                         Edit
                       </Button>
@@ -276,13 +287,20 @@ export class CommentContainer extends Component<Props, State> {
               }
               footer={
                 <>
-                  <Flex justifyContent="space-between">
+                  <Flex
+                    justifyContent="space-between"
+                    className={CLASSES.comment.actionBar.$root}
+                  >
                     <ButtonsBar>
                       <ReactionButtonContainer
                         comment={comment}
                         settings={settings}
                         viewer={viewer}
                         readOnly={banned || suspended}
+                        className={CLASSES.comment.actionBar.reactButton}
+                        reactedClassName={
+                          CLASSES.comment.actionBar.reactedButton
+                        }
                       />
                       {!disableReplies &&
                         !banned &&
@@ -298,11 +316,13 @@ export class CommentContainer extends Component<Props, State> {
                               settings.disableCommenting.enabled ||
                               story.isClosed
                             }
+                            className={CLASSES.comment.actionBar.replyButton}
                           />
                         )}
                       <PermalinkButtonContainer
                         story={story}
                         commentID={comment.id}
+                        className={CLASSES.comment.actionBar.shareButton}
                       />
                     </ButtonsBar>
                     <ButtonsBar>
@@ -310,12 +330,17 @@ export class CommentContainer extends Component<Props, State> {
                         <ReportButtonContainer
                           comment={comment}
                           viewer={viewer}
+                          className={CLASSES.comment.actionBar.reportButton}
+                          reportedClassName={
+                            CLASSES.comment.actionBar.reportedButton
+                          }
                         />
                       )}
                     </ButtonsBar>
                   </Flex>
                   {showConversationLink && (
                     <ShowConversationLink
+                      className={CLASSES.comment.readMoreOfConversation}
                       id={`comments-commentContainer-showConversation-${
                         comment.id
                       }`}

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx

@@ -7,6 +7,7 @@ import { Field, Form } from "react-final-form";
 import { OnSubmit } from "coral-framework/lib/form";
 import CLASSES from "coral-stream/classes";
 import Timestamp from "coral-stream/common/Timestamp";
+import ValidationMessage from "coral-stream/common/ValidationMessage";
 import {
   AriaInfo,
   Button,
@@ -16,7 +17,6 @@ import {
   Message,
   MessageIcon,
   RelativeTime,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";
@@ -98,14 +98,20 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
                     </Localized>
                     {props.expired ? (
                       <Localized id="comments-editCommentForm-editTimeExpired">
-                        <ValidationMessage fullWidth>
+                        <ValidationMessage
+                          className={CLASSES.editComment.expiredTime}
+                          fullWidth
+                        >
                           Edit time has expired. You can no longer edit this
                           comment. Why not post another one?
                         </ValidationMessage>
                       </Localized>
                     ) : (
                       <>
-                        <Message fullWidth>
+                        <Message
+                          className={CLASSES.editComment.remainingTime}
+                          fullWidth
+                        >
                           <MessageIcon>alarm</MessageIcon>
                           <Localized
                             id="comments-editCommentForm-editRemainingTime"

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx

@@ -124,6 +124,7 @@ export class EditCommentFormContainer extends Component<Props, State> {
           status={this.state.submitStatus}
           onDismiss={this.handleOnCancelOrClose}
           buttonClassName={CLASSES.editComment.dismiss}
+          inReviewClassName={CLASSES.editComment.inReview}
         />
       );
     }

src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx

@@ -1,10 +1,15 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import styles from "./EditedMarker.css";
 
-const EditedMarker: FunctionComponent = () => (
-  <div className={styles.root}>
+interface Props {
+  className?: string;
+}
+
+const EditedMarker: FunctionComponent<Props> = props => (
+  <div className={cn(styles.root, props.className)}>
     (
     <Localized id="comments-editedMarker-edited">
       <span>Edited</span>

src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
@@ -12,19 +13,23 @@ interface Props {
 
 const InReplyTo: FunctionComponent<Props> = ({ username }) => {
   const Username = () => (
-    <Typography variant="heading5" container="span" className={styles.username}>
+    <Typography
+      variant="heading5"
+      container="span"
+      className={cn(styles.username, CLASSES.comment.inReplyTo.username)}
+    >
       {username}
     </Typography>
   );
 
   return (
-    <Flex alignItems="center" className={CLASSES.comment.inReplyTo}>
+    <Flex alignItems="center" className={CLASSES.comment.inReplyTo.$root}>
       <Icon className={styles.icon}>reply</Icon>{" "}
       <Localized id="comments-inReplyTo" Username={<Username />}>
         <Typography
           variant="timestamp"
           container="span"
-          className={styles.inReplyTo}
+          className={cn(styles.inReplyTo, CLASSES.comment.inReplyTo.text)}
         >
           {"In reply to <Username></Username>"}
         </Typography>

src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
@@ -6,6 +7,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
 import { CaretContainer_comment } from "coral-stream/__generated__/CaretContainer_comment.graphql";
 import { CaretContainer_story } from "coral-stream/__generated__/CaretContainer_story.graphql";
 import { CaretContainer_viewer } from "coral-stream/__generated__/CaretContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import { Button, ClickOutside, Icon, Popover } from "coral-ui/components";
 
 import ModerationDropdownContainer from "./ModerationDropdownContainer";
@@ -49,7 +51,7 @@ const CaretContainer: FunctionComponent<Props> = props => {
             <Button
               variant="ghost"
               size="small"
-              className={styles.root}
+              className={cn(styles.root, CLASSES.comment.topBar.caretButton)}
               onClick={toggleVisibility}
               aria-controls={popoverID}
               active={visible}

src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionBanContainer.tsx

@@ -5,7 +5,9 @@ import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { ModerationActionBanContainer_user } from "coral-stream/__generated__/ModerationActionBanContainer_user.graphql";
-import { DropdownButton, Icon, Spinner } from "coral-ui/components";
+import CLASSES from "coral-stream/classes";
+import Spinner from "coral-stream/common/Spinner";
+import { DropdownButton, Icon } from "coral-ui/components";
 
 import styles from "./ModerationActionBanContainer.css";
 
@@ -29,6 +31,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
             </div>
           }
           adornment={<Spinner size="xs" className={styles.spinner} />}
+          className={CLASSES.moderationDropdown.banUserButton}
           disabled
         >
           Ban User
@@ -46,7 +49,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
               <Icon size="sm">block</Icon>
             </div>
           }
-          className={styles.banned}
+          className={cn(styles.banned, CLASSES.moderationDropdown.bannedButton)}
           disabled
         >
           Banned
@@ -63,6 +66,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
           </div>
         }
         onClick={onBan}
+        className={CLASSES.moderationDropdown.banUserButton}
       >
         Ban User
       </DropdownButton>

src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx

@@ -7,6 +7,7 @@ import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { ModerationActionsContainer_comment } from "coral-stream/__generated__/ModerationActionsContainer_comment.graphql";
 import { ModerationActionsContainer_story } from "coral-stream/__generated__/ModerationActionsContainer_story.graphql";
 import { ModerationActionsContainer_viewer } from "coral-stream/__generated__/ModerationActionsContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import { DropdownButton, DropdownDivider, Icon } from "coral-ui/components";
 
 import ApproveCommentMutation from "./ApproveCommentMutation";
@@ -85,7 +86,10 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
                 star
               </Icon>
             }
-            className={styles.featured}
+            className={cn(
+              styles.featured,
+              CLASSES.moderationDropdown.unfeatureButton
+            )}
             onClick={onUnfeature}
           >
             Un-Feature
@@ -94,6 +98,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
       ) : (
         <Localized id="comments-moderationDropdown-feature">
           <DropdownButton
+            className={CLASSES.moderationDropdown.featureButton}
             icon={<Icon size="md">star_border</Icon>}
             onClick={onFeature}
           >
@@ -112,7 +117,10 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
                 check
               </Icon>
             }
-            className={styles.approved}
+            className={cn(
+              styles.approved,
+              CLASSES.moderationDropdown.approvedButton
+            )}
             disabled
           >
             Approved
@@ -121,6 +129,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
       ) : (
         <Localized id="comments-moderationDropdown-approve">
           <DropdownButton
+            className={CLASSES.moderationDropdown.approveButton}
             icon={
               <Icon size="md" className={styles.approveIcon}>
                 check
@@ -143,7 +152,10 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
                 close
               </Icon>
             }
-            className={styles.rejected}
+            className={cn(
+              styles.rejected,
+              CLASSES.moderationDropdown.rejectedButton
+            )}
             disabled
           >
             Rejected
@@ -158,6 +170,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
               </Icon>
             }
             onClick={onReject}
+            className={CLASSES.moderationDropdown.rejectButton}
           >
             Reject
           </DropdownButton>
@@ -172,6 +185,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
       <DropdownDivider />
       <Localized id="comments-moderationDropdown-goToModerate">
         <DropdownButton
+          className={CLASSES.moderationDropdown.goToModerateButton}
           href={`/admin/moderate/comment/${comment.id}`}
           target="_blank"
           anchor

src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx

@@ -5,6 +5,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
 import { ModerationDropdownContainer_comment } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
 import { ModerationDropdownContainer_story } from "coral-stream/__generated__/ModerationDropdownContainer_story.graphql";
 import { ModerationDropdownContainer_viewer } from "coral-stream/__generated__/ModerationDropdownContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import { Dropdown } from "coral-ui/components";
 
 import UserBanPopoverContainer from "../UserBanPopover/UserBanPopoverContainer";
@@ -36,7 +37,7 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
   return (
     <div>
       {view === "MODERATE" ? (
-        <Dropdown>
+        <Dropdown className={CLASSES.moderationDropdown.$root}>
           <ModerationActionsContainer
             comment={comment}
             story={story}

src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/RejectedTombstoneContainer.tsx

@@ -1,10 +1,11 @@
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { RejectedTombstoneContainer_comment as CommentData } from "coral-stream/__generated__/RejectedTombstoneContainer_comment.graphql";
+import CLASSES from "coral-stream/classes";
 import { CallOut, TextLink } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
 
 interface Props {
   comment: CommentData;
@@ -13,14 +14,22 @@ interface Props {
 const RejectedTombstoneContainer: FunctionComponent<Props> = ({ comment }) => {
   const Link = useMemo<React.FunctionComponent>(
     () => ({ children }) => (
-      <TextLink href={`/admin/moderate/comment/${comment.id}`} target="_blank">
+      <TextLink
+        className={CLASSES.rejectedTombstone.goToModerateButton}
+        href={`/admin/moderate/comment/${comment.id}`}
+        target="_blank"
+      >
         {children}
       </TextLink>
     ),
     [comment]
   );
   return (
-    <CallOut color="primary" fullWidth>
+    <CallOut
+      className={CLASSES.rejectedTombstone.$root}
+      color="primary"
+      fullWidth
+    >
       <Localized id="comments-rejectedTombstone" TextLink={<Link />}>
         <div>
           You have rejected this comment.{" "}

src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx

@@ -16,9 +16,14 @@ import styles from "./PermalinkButton.css";
 interface PermalinkProps {
   commentID: string;
   url: string;
+  className?: string;
 }
 
-const Permalink: FunctionComponent<PermalinkProps> = ({ commentID, url }) => {
+const Permalink: FunctionComponent<PermalinkProps> = ({
+  commentID,
+  url,
+  className,
+}) => {
   const popoverID = `permalink-popover-${commentID}`;
   return (
     <Localized id="comments-permalinkPopover" attrs={{ description: true }}>
@@ -41,6 +46,7 @@ const Permalink: FunctionComponent<PermalinkProps> = ({ commentID, url }) => {
             variant="ghost"
             active={visible}
             size="small"
+            className={className}
           >
             <MatchMedia gtWidth="xs">
               <ButtonIcon>share</ButtonIcon>

src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx

@@ -9,14 +9,17 @@ import PermalinkButton from "./PermalinkButton";
 interface Props {
   story: StoryData;
   commentID: string;
+  className?: string;
 }
 
 export const PermalinkButtonContainer: FunctionComponent<Props> = ({
   story,
   commentID,
+  className,
 }) => {
   return (
     <PermalinkButton
+      className={className}
       commentID={commentID}
       url={getURLWithCommentID(story.url, commentID)}
     />

src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import React from "react";
 
 import { CopyButton } from "coral-framework/components";
+import CLASSES from "coral-stream/classes";
 import { Flex, TextField } from "coral-ui/components";
 
 import styles from "./PermalinkPopover.css";
@@ -13,13 +15,19 @@ class PermalinkPopover extends React.Component<Props> {
   public render() {
     const { permalinkURL } = this.props;
     return (
-      <Flex itemGutter="half" className={styles.root}>
+      <Flex
+        itemGutter="half"
+        className={cn(styles.root, CLASSES.sharePopover.$root)}
+      >
         <TextField
           defaultValue={permalinkURL}
           className={styles.textField}
           readOnly
         />
-        <CopyButton text={permalinkURL} />
+        <CopyButton
+          text={permalinkURL}
+          className={CLASSES.sharePopover.copyButton}
+        />
       </Flex>
     );
   }

src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { ReactionButtonContainer_comment as CommentData } from "coral-stream/__generated__/ReactionButtonContainer_comment.graphql";
 import { ReactionButtonContainer_settings as SettingsData } from "coral-stream/__generated__/ReactionButtonContainer_settings.graphql";
@@ -28,6 +29,8 @@ interface Props {
   viewer: ViewerData | null;
   showAuthPopup: ShowAuthPopupMutation;
   readOnly?: boolean;
+  className?: string;
+  reactedClassName?: string;
 }
 
 class ReactionButtonContainer extends React.Component<Props> {
@@ -56,7 +59,7 @@ class ReactionButtonContainer extends React.Component<Props> {
   };
 
   public render() {
-    const { readOnly } = this.props;
+    const { readOnly, className, reactedClassName = "" } = this.props;
     const {
       actionCounts: {
         reaction: { total: totalReactions },
@@ -72,6 +75,7 @@ class ReactionButtonContainer extends React.Component<Props> {
 
     return !readOnly || totalReactions > 0 ? (
       <ReactionButton
+        className={cn(className, { [reactedClassName]: reacted })}
         onClick={this.handleClick}
         totalReactions={totalReactions}
         reacted={reacted}

src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx

@@ -8,10 +8,12 @@ interface Props {
   onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
   active?: boolean;
   disabled?: boolean;
+  className?: string;
 }
 
 const ReplyButton: FunctionComponent<Props> = props => (
   <Button
+    className={props.className}
     id={props.id}
     onClick={props.onClick}
     variant="ghost"

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx

@@ -7,13 +7,13 @@ import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "coral-framework/lib/form";
 import CLASSES from "coral-stream/classes";
+import ValidationMessage from "coral-stream/common/ValidationMessage";
 import {
   AriaInfo,
   Button,
   Flex,
   HorizontalGutter,
   MatchMedia,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -168,6 +168,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
           status={this.state.submitStatus}
           onDismiss={this.handleOnCancelOrDismiss}
           buttonClassName={CLASSES.createReplyComment.dismiss}
+          inReviewClassName={CLASSES.createReplyComment.inReview}
         />
       );
     }

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Flex, Icon, Typography } from "coral-ui/components";
 
 import styles from "./ReplyTo.css";
@@ -11,16 +13,29 @@ interface Props {
 
 const ReplyTo: FunctionComponent<Props> = ({ username }) => {
   const Username = () => (
-    <Typography variant="heading4" container="span" className={styles.username}>
+    <Typography
+      variant="heading4"
+      container="span"
+      className={cn(
+        styles.username,
+        CLASSES.createReplyComment.replyTo.username
+      )}
+    >
       {username}
     </Typography>
   );
 
   return (
-    <Flex alignItems="center" className={styles.root}>
+    <Flex
+      alignItems="center"
+      className={cn(styles.root, CLASSES.createReplyComment.replyTo.$root)}
+    >
       <Icon>reply</Icon>{" "}
       <Localized id="comments-replyTo" Username={<Username />}>
-        <Typography container="span" className={styles.text}>
+        <Typography
+          container="span"
+          className={cn(styles.text, CLASSES.createReplyComment.replyTo.text)}
+        >
           {"Replying to: <Username></Username>"}
         </Typography>
       </Localized>

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   alignItems="center"
-  className="ReplyTo-root"
+  className="ReplyTo-root coral coral-createReplyComment-replyTo"
 >
   <ForwardRef(forwardRef)>
     reply
@@ -14,7 +14,7 @@ exports[`renders correctly 1`] = `
     id="comments-replyTo"
   >
     <ForwardRef(forwardRef)
-      className="ReplyTo-text"
+      className="ReplyTo-text coral coral-createReplyComment-replyToText"
       container="span"
     >
       Replying to: &lt;Username&gt;&lt;/Username&gt;

src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React from "react";
 
@@ -10,10 +11,11 @@ import styles from "./ReplyEditSubmitStatus.css";
 interface Props {
   status: SubmitStatus;
   buttonClassName?: string;
+  inReviewClassName?: string;
   onDismiss: () => void;
 }
 
-function getMessage(status: SubmitStatus) {
+function getMessage(status: SubmitStatus, inReviewClassName: string = "") {
   switch (status) {
     case "RETRY":
       throw new Error(`Invalid status ${status}`);
@@ -22,7 +24,11 @@ function getMessage(status: SubmitStatus) {
     case "IN_REVIEW":
       return (
         <Localized id="comments-submitStatus-submittedAndWillBeReviewed">
-          <CallOut className={styles.callout} color="primary" fullWidth>
+          <CallOut
+            className={cn(inReviewClassName, styles.callout)}
+            color="primary"
+            fullWidth
+          >
             Your comment has been submitted and will be reviewed by a moderator
           </CallOut>
         </Localized>
@@ -38,7 +44,7 @@ function getMessage(status: SubmitStatus) {
 export default function ReplyEditSubmitStatus(props: Props) {
   return (
     <HorizontalGutter>
-      {getMessage(props.status)}
+      {getMessage(props.status, props.inReviewClassName)}
       <Flex justifyContent="flex-end">
         <Localized id="comments-submitStatus-dismiss">
           <Button

src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React from "react";
 import { graphql } from "react-relay";
 
@@ -17,6 +18,8 @@ interface ReportButtonContainerProps {
   comment: CommentData;
   viewer: ViewerData | null;
   showAuthPopup: ShowAuthPopupMutation;
+  className?: string;
+  reportedClassName?: string;
 }
 
 class ReportButtonContainer extends React.Component<
@@ -28,6 +31,7 @@ class ReportButtonContainer extends React.Component<
   private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
 
   public render() {
+    const { className, reportedClassName = "" } = this.props;
     const reported =
       this.props.comment.viewerActionPresence &&
       (this.props.comment.viewerActionPresence.flag ||
@@ -35,11 +39,16 @@ class ReportButtonContainer extends React.Component<
 
     return this.loggedIn ? (
       <ReportButtonWithPopover
+        className={cn(className, { [reportedClassName]: Boolean(reported) })}
         comment={this.props.comment}
         reported={!!reported}
       />
     ) : (
-      <ReportButton onClick={this.handleSignIn} reported={!!reported} />
+      <ReportButton
+        className={cn(className, { [reportedClassName]: Boolean(reported) })}
+        onClick={this.handleSignIn}
+        reported={Boolean(reported)}
+      />
     );
   }
 }

src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx

@@ -11,11 +11,13 @@ import { PropTypesOf } from "coral-ui/types";
 interface Props {
   comment: { id: string } & PropTypesOf<typeof ReportPopover>["comment"];
   reported: boolean;
+  className?: string;
 }
 
 const ReportButtonWithPopover: React.FunctionComponent<Props> = ({
   comment,
   reported,
+  className,
 }) => {
   const popoverID = `report-popover-${comment.id}`;
   return (
@@ -41,6 +43,7 @@ const ReportButtonWithPopover: React.FunctionComponent<Props> = ({
       >
         {({ toggleVisibility, ref, visible }) => (
           <ReportButton
+            className={className}
             onClick={evt => !reported && toggleVisibility(evt)}
             aria-controls={popoverID}
             ref={ref}

src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx

@@ -6,16 +6,18 @@ import { Field, Form } from "react-final-form";
 import { OnSubmit } from "coral-framework/lib/form";
 import { validateMaxLength } from "coral-framework/lib/validation";
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
+import ValidationMessage from "coral-stream/common/ValidationMessage";
 import {
   Button,
   Flex,
   HorizontalGutter,
   RadioButton,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import PropagateMount from "./PropagateMount";
+
 import styles from "./ReportCommentForm.css";
 
 const RadioField: FunctionComponent<
@@ -195,12 +197,18 @@ class ReportCommentForm extends React.Component<Props> {
               {get(form.getFieldState("reason"), "value") && (
                 <Flex alignItems="center" justifyContent="flex-end">
                   <Localized id="comments-reportPopover-cancel">
-                    <Button color="primary" size="small" onClick={onCancel}>
+                    <Button
+                      className={CLASSES.reportPopover.cancelButton}
+                      color="primary"
+                      size="small"
+                      onClick={onCancel}
+                    >
                       Cancel
                     </Button>
                   </Localized>
                   <Localized id="comments-reportPopover-submit">
                     <Button
+                      className={CLASSES.reportPopover.submitButton}
                       color="primary"
                       size="small"
                       variant="filled"

src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.tsx

@@ -1,5 +1,7 @@
+import cn from "classnames";
 import React from "react";
 
+import CLASSES from "coral-stream/classes";
 import { BaseButton, Icon } from "coral-ui/components";
 import { PropTypesOf } from "coral-ui/types";
 
@@ -16,10 +18,10 @@ class ReportPopover extends React.Component<Props> {
   public render() {
     const { onClose, onResize, comment } = this.props;
     return (
-      <div className={styles.root}>
+      <div className={cn(styles.root, CLASSES.reportPopover.$root)}>
         <BaseButton
           onClick={onClose}
-          className={styles.close}
+          className={cn(styles.close, CLASSES.reportPopover.closeButton)}
           aria-label="Close Popover"
         >
           <Icon>close</Icon>

src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="ReportPopover-root"
+  className="ReportPopover-root coral coral-reportPopover"
 >
   <ForwardRef(forwardRef)
     aria-label="Close Popover"
-    className="ReportPopover-close"
+    className="ReportPopover-close coral coral-reportPopover-closeButton"
     onClick={[Function]}
   >
     <ForwardRef(forwardRef)>

src/core/client/stream/tabs/Comments/Comment/RootParent.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import Timestamp from "coral-stream/common/Timestamp";
 import { Flex } from "coral-ui/components";
 
@@ -15,14 +16,31 @@ export interface RootParentProps {
 
 const RootParent: FunctionComponent<RootParentProps> = props => {
   return (
-    <Flex direction="row" justifyContent="space-between" id={props.id}>
+    <Flex
+      className={CLASSES.conversationThread.rootParent.$root}
+      direction="row"
+      justifyContent="space-between"
+      id={props.id}
+    >
       <TopBarLeft>
         <Flex direction="row" alignItems="center" itemGutter="half">
-          <div>{props.username && <Username>{props.username}</Username>}</div>
+          <div>
+            {props.username && (
+              <Username
+                className={CLASSES.conversationThread.rootParent.username}
+              >
+                {props.username}
+              </Username>
+            )}
+          </div>
           {props.tags}
         </Flex>
         <Flex direction="row" alignItems="baseline" itemGutter>
-          <Timestamp>{props.createdAt}</Timestamp>
+          <Timestamp
+            className={CLASSES.conversationThread.rootParent.timestamp}
+          >
+            {props.createdAt}
+          </Timestamp>
         </Flex>
       </TopBarLeft>
     </Flex>

src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx

@@ -8,6 +8,7 @@ export interface ShowConversationLinkProps {
   id?: string;
   href?: string;
   onClick?: EventHandler<MouseEvent>;
+  className?: string;
 }
 
 const ShowConversationLink: FunctionComponent<
@@ -17,6 +18,7 @@ const ShowConversationLink: FunctionComponent<
     <Localized id="comments-showConversationLink-readMore">
       <Button
         id={props.id}
+        className={props.className}
         variant="underlined"
         color="primary"
         href={props.href}

src/core/client/stream/tabs/Comments/Comment/UserBanPopover/UserBanPopoverContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
@@ -6,6 +7,7 @@ import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { getMessage } from "coral-framework/lib/i18n";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { UserBanPopoverContainer_comment } from "coral-stream/__generated__/UserBanPopoverContainer_comment.graphql";
+import CLASSES from "coral-stream/classes";
 import { Box, Button, Flex, Typography } from "coral-ui/components";
 
 import RejectCommentMutation from "../ModerationDropdown/RejectCommentMutation";
@@ -44,7 +46,7 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
     onDismiss();
   }, [user, banUser, onDismiss, localeBundles]);
   return (
-    <Box className={styles.root} p={3}>
+    <Box className={cn(styles.root, CLASSES.banUserPopover.$root)} p={3}>
       <Localized id="comments-userBanPopover-title" $username={user.username}>
         <Typography variant="heading3" mb={2}>
           Ban {user.username}?
@@ -58,12 +60,22 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
       </Localized>
       <Flex justifyContent="flex-end" itemGutter="half">
         <Localized id="comments-userBanPopover-cancel">
-          <Button variant="outlined" size="small" onClick={onDismiss}>
+          <Button
+            className={CLASSES.banUserPopover.cancelButton}
+            variant="outlined"
+            size="small"
+            onClick={onDismiss}
+          >
             Cancel
           </Button>
         </Localized>
         <Localized id="comments-userBanPopover-ban">
-          <Button variant="filled" size="small" onClick={onBan}>
+          <Button
+            className={CLASSES.banUserPopover.banButton}
+            variant="filled"
+            size="small"
+            onClick={onBan}
+          >
             Ban
           </Button>
         </Localized>

src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx

@@ -1,8 +1,10 @@
+import cn from "classnames";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { UserIgnorePopoverContainer_user as UserData } from "coral-stream/__generated__/UserIgnorePopoverContainer_user.graphql";
+import CLASSES from "coral-stream/classes";
 import { Box, Button, Flex, Typography } from "coral-ui/components";
 
 import IgnoreUserMutation from "./IgnoreUserMutation";
@@ -25,7 +27,7 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
     onDismiss();
   }, [user.id, ignoreUser]);
   return (
-    <Box className={styles.root} p={3}>
+    <Box p={3} className={cn(styles.root, CLASSES.ignoreUserPopover.$root)}>
       <Localized
         id="comments-userIgnorePopover-ignoreUser"
         $username={user.username}
@@ -42,12 +44,22 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
       </Localized>
       <Flex justifyContent="flex-end" itemGutter="half">
         <Localized id="comments-userIgnorePopover-cancel">
-          <Button variant="outlined" size="small" onClick={onDismiss}>
+          <Button
+            className={CLASSES.ignoreUserPopover.cancelButton}
+            variant="outlined"
+            size="small"
+            onClick={onDismiss}
+          >
             Cancel
           </Button>
         </Localized>
         <Localized id="comments-userIgnorePopover-ignore">
-          <Button variant="filled" size="small" onClick={onIgnore}>
+          <Button
+            className={CLASSES.ignoreUserPopover.ignoreButton}
+            variant="filled"
+            size="small"
+            onClick={onIgnore}
+          >
             Ignore
           </Button>
         </Localized>

src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
@@ -5,6 +6,7 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { UserPopoverOverviewContainer_user as UserData } from "coral-stream/__generated__/UserPopoverOverviewContainer_user.graphql";
 import { UserPopoverOverviewContainer_viewer as ViewerData } from "coral-stream/__generated__/UserPopoverOverviewContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   Flex,
@@ -33,10 +35,15 @@ export const UserPopoverOverviewContainer: FunctionComponent<Props> = ({
     viewer.ignoredUsers.every(u => u.id !== user.id) &&
     user.ignoreable;
   return (
-    <HorizontalGutter spacing={3} className={styles.root}>
+    <HorizontalGutter
+      spacing={3}
+      className={cn(styles.root, CLASSES.userPopover.$root)}
+    >
       <HorizontalGutter spacing={2}>
         <div>
-          <Username>{user.username!}</Username>
+          <Username className={CLASSES.userPopover.username}>
+            {user.username!}
+          </Username>
         </div>
         <Localized
           id="comments-userPopover-memberSince"
@@ -50,7 +57,12 @@ export const UserPopoverOverviewContainer: FunctionComponent<Props> = ({
       {canIgnore && (
         <Flex justifyContent="flex-end">
           <Localized id="comments-userPopover-ignore">
-            <Button variant="outlined" size="small" onClick={onIgnore}>
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={onIgnore}
+              className={CLASSES.userPopover.ignoreButton}
+            >
               Ignore
             </Button>
           </Localized>

src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx

@@ -4,11 +4,11 @@ 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 {
   comment: CommentData;
+  className?: string;
 }
 
 const UserTagsContainer: FunctionComponent<Props> = props => {
@@ -18,7 +18,7 @@ const UserTagsContainer: FunctionComponent<Props> = props => {
     <>
       {staffTag && (
         <Localized id="comments-staffTag">
-          <Tag className={CLASSES.comment.userTag}>Staff</Tag>
+          <Tag className={props.className}>Staff</Tag>
         </Localized>
       )}
     </>

src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx

@@ -1,20 +1,20 @@
 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";
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
 const Username: FunctionComponent<Props> = props => {
   return (
     <Typography
       variant={"heading3"}
-      className={cn(styles.root, CLASSES.comment.username)}
+      className={cn(styles.root, props.className)}
       container="span"
     >
       {props.children}

src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx

@@ -13,6 +13,7 @@ import Username from "./Username";
 interface Props {
   user: UserData;
   viewer: ViewerData | null;
+  className?: string;
 }
 
 const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
@@ -38,6 +39,7 @@ const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
             onClick={toggleVisibility}
             aria-controls={popoverID}
             ref={ref}
+            className={props.className}
           >
             <Username>{props.user.username!}</Username>
           </BaseButton>

src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`renders username and body 1`] = `
   role="article"
 >
   <ForwardRef(forwardRef)
+    className="coral coral-comment-topBar"
     direction="row"
     justifyContent="space-between"
   >
@@ -22,10 +23,14 @@ exports[`renders username and body 1`] = `
         direction="row"
         itemGutter={true}
       >
-        <Timestamp>
+        <Timestamp
+          className="coral coral-timestamp coral-comment-timestamp"
+        >
           1995-12-17T03:24:00.000Z
         </Timestamp>
-        <EditedMarker />
+        <EditedMarker
+          className="coral coral-comment-edited"
+        />
       </ForwardRef(forwardRef)>
     </TopBarLeft>
     <div>
@@ -35,7 +40,9 @@ exports[`renders username and body 1`] = `
   <ForwardRef(forwardRef)
     spacing={1}
   >
-    <HTMLContent>
+    <HTMLContent
+      className="coral coral-content coral-comment-content"
+    >
       Woof
     </HTMLContent>
     footer

src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap

@@ -13,10 +13,12 @@ exports[`hide reply button 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -39,6 +41,7 @@ exports[`hide reply button 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -50,6 +53,7 @@ exports[`hide reply button 1`] = `
                 viewer={null}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -61,6 +65,7 @@ exports[`hide reply button 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -83,6 +88,7 @@ exports[`hide reply button 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -103,6 +109,7 @@ exports[`hide reply button 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -113,6 +120,7 @@ exports[`hide reply button 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -137,6 +145,7 @@ exports[`hide reply button 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -180,10 +189,12 @@ exports[`renders body only 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -206,6 +217,7 @@ exports[`renders body only 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -218,11 +230,13 @@ exports[`renders body only 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={false}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -234,6 +248,7 @@ exports[`renders body only 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -256,6 +271,7 @@ exports[`renders body only 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -276,6 +292,7 @@ exports[`renders body only 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -286,6 +303,7 @@ exports[`renders body only 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -310,6 +328,7 @@ exports[`renders body only 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -353,10 +372,12 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -379,6 +400,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -391,11 +413,13 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={true}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -407,6 +431,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -429,6 +454,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -449,6 +475,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -459,6 +486,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -483,6 +511,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -526,10 +555,12 @@ exports[`renders disabled reply when story is closed 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -552,6 +583,7 @@ exports[`renders disabled reply when story is closed 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -564,11 +596,13 @@ exports[`renders disabled reply when story is closed 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={true}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -580,6 +614,7 @@ exports[`renders disabled reply when story is closed 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -602,6 +637,7 @@ exports[`renders disabled reply when story is closed 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -622,6 +658,7 @@ exports[`renders disabled reply when story is closed 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -632,6 +669,7 @@ exports[`renders disabled reply when story is closed 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -656,6 +694,7 @@ exports[`renders disabled reply when story is closed 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -699,10 +738,12 @@ exports[`renders in reply to 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -729,6 +770,7 @@ exports[`renders in reply to 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -741,11 +783,13 @@ exports[`renders in reply to 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={false}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -757,6 +801,7 @@ exports[`renders in reply to 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -783,6 +828,7 @@ exports[`renders in reply to 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -803,6 +849,7 @@ exports[`renders in reply to 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -813,6 +860,7 @@ exports[`renders in reply to 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -841,6 +889,7 @@ exports[`renders in reply to 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -888,10 +937,12 @@ exports[`renders username and body 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -914,6 +965,7 @@ exports[`renders username and body 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -926,11 +978,13 @@ exports[`renders username and body 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={false}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -942,6 +996,7 @@ exports[`renders username and body 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -964,6 +1019,7 @@ exports[`renders username and body 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
@@ -984,6 +1040,7 @@ exports[`renders username and body 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -994,6 +1051,7 @@ exports[`renders username and body 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -1018,6 +1076,7 @@ exports[`renders username and body 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {
@@ -1070,10 +1129,12 @@ exports[`shows conversation link 1`] = `
       footer={
         <React.Fragment>
           <ForwardRef(forwardRef)
+            className="coral coral-comment-actionBar"
             justifyContent="space-between"
           >
             <ButtonsBar>
               <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
                     "author": Object {
@@ -1096,6 +1157,7 @@ exports[`shows conversation link 1`] = `
                     "tags": Array [],
                   }
                 }
+                reactedClassName="coral-reactedButton coral-comment-reactedButton"
                 readOnly={false}
                 settings={
                   Object {
@@ -1108,11 +1170,13 @@ exports[`shows conversation link 1`] = `
               />
               <ReplyButton
                 active={false}
+                className="coral coral-comment-replyButton"
                 disabled={false}
                 id="comments-commentContainer-replyButton-comment-id"
                 onClick={[Function]}
               />
               <Relay(PermalinkButtonContainer)
+                className="coral coral-comment-shareButton"
                 commentID="comment-id"
                 story={
                   Object {
@@ -1124,6 +1188,7 @@ exports[`shows conversation link 1`] = `
             </ButtonsBar>
             <ButtonsBar>
               <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
                     "author": Object {
@@ -1146,11 +1211,13 @@ exports[`shows conversation link 1`] = `
                     "tags": Array [],
                   }
                 }
+                reportedClassName="coral-reportedButton coral-comment-reportedButton"
                 viewer={null}
               />
             </ButtonsBar>
           </ForwardRef(forwardRef)>
           <ShowConversationLink
+            className="coral coral-comment-readMoreOfConveration"
             href="http://localhost/story?commentID=comment-id"
             id="comments-commentContainer-showConversation-comment-id"
             onClick={[Function]}
@@ -1171,6 +1238,7 @@ exports[`shows conversation link 1`] = `
       username={
         <React.Fragment>
           <Relay(UsernameWithPopoverContainer)
+            className="coral coral-username coral-comment-username"
             user={
               Object {
                 "badges": Array [],
@@ -1181,6 +1249,7 @@ exports[`shows conversation link 1`] = `
             viewer={null}
           />
           <Relay(UserTagsContainer)
+            className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
                 "author": Object {
@@ -1205,6 +1274,7 @@ exports[`shows conversation link 1`] = `
             }
           />
           <Relay(AuthorBadgesContainer)
+            className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
                 "author": Object {

src/core/client/stream/tabs/Comments/Comment/__snapshots__/InReplyTo.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
     id="comments-inReplyTo"
   >
     <ForwardRef(forwardRef)
-      className="InReplyTo-inReplyTo"
+      className="InReplyTo-inReplyTo coral coral-comment-inReplyToText"
       container="span"
       variant="timestamp"
     >

src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx

@@ -10,6 +10,7 @@ import { usePrevious } from "coral-framework/hooks";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import { IgnoredTombstoneOrHideContainer_comment as CommentData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_comment.graphql";
 import { IgnoredTombstoneOrHideContainer_viewer as ViewerData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import { CallOut } from "coral-ui/components";
 
 interface Props {
@@ -48,7 +49,7 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent<Props> = ({
     return (
       <>
         <Localized id="comments-tombstone-deleted">
-          <CallOut fullWidth>
+          <CallOut className={CLASSES.deletedTombstone} fullWidth>
             This comment is no longer available. The commenter has deleted their
             account.
           </CallOut>
@@ -75,7 +76,7 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent<Props> = ({
         id="comments-tombstone-ignore"
         $username={comment.author!.username}
       >
-        <CallOut fullWidth>
+        <CallOut className={CLASSES.ignoredTombstone} fullWidth>
           This comment is hidden because you ignored {comment.author!.username}
         </CallOut>
       </Localized>

src/core/client/stream/tabs/Comments/Indent.tsx

@@ -1,6 +1,8 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
+
 import styles from "./Indent.css";
 
 export interface IndentProps {
@@ -24,7 +26,7 @@ function getLevelClassName(level: number = 0) {
   if (!(level in levels)) {
     throw new Error(`Indent level ${level} does not exist`);
   }
-  return levels[level];
+  return cn(levels[level], CLASSES.comment.indent[level]);
 }
 
 const Indent: FunctionComponent<IndentProps> = props => {

src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import { Child as PymChild } from "pym.js";
 import React from "react";
@@ -10,6 +11,7 @@ import { ConversationThreadContainer_settings as SettingsData } from "coral-stre
 import { ConversationThreadContainer_story as StoryData } from "coral-stream/__generated__/ConversationThreadContainer_story.graphql";
 import { ConversationThreadContainer_viewer as ViewerData } from "coral-stream/__generated__/ConversationThreadContainer_viewer.graphql";
 import { ConversationThreadContainerPaginationQueryVariables } from "coral-stream/__generated__/ConversationThreadContainerPaginationQuery.graphql";
+import CLASSES from "coral-stream/classes";
 import Counter from "coral-stream/common/Counter";
 import {
   SetCommentIDMutation,
@@ -83,7 +85,10 @@ class ConversationThreadContainer extends React.Component<
       );
     }
     return (
-      <div className={styles.root} data-testid={dataTestID}>
+      <div
+        className={cn(CLASSES.conversationThread.$root, styles.root)}
+        data-testid={dataTestID}
+      >
         <HorizontalGutter container={<Line dotted />}>
           {rootParent && (
             <Circle>
@@ -91,7 +96,12 @@ class ConversationThreadContainer extends React.Component<
                 id={rootParent.id}
                 username={rootParent.author && rootParent.author.username}
                 createdAt={rootParent.createdAt}
-                tags={<UserTagsContainer comment={rootParent} />}
+                tags={
+                  <UserTagsContainer
+                    className={CLASSES.conversationThread.rootParent.userTag}
+                    comment={rootParent}
+                  />
+                }
               />
             </Circle>
           )}
@@ -103,7 +113,10 @@ class ConversationThreadContainer extends React.Component<
                   $count={remaining}
                 >
                   <Button
-                    className={styles.showMoreButton}
+                    className={cn(
+                      CLASSES.conversationThread.showMore,
+                      styles.showMoreButton
+                    )}
                     onClick={this.loadMore}
                     disabled={this.state.disableLoadMore}
                     variant="underlined"
@@ -139,6 +152,7 @@ class ConversationThreadContainer extends React.Component<
           ))}
           <Circle end>
             <CommentContainer
+              className={CLASSES.conversationThread.hightlighted}
               comment={comment}
               story={story}
               settings={settings}

src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx

@@ -1,7 +1,9 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, MouseEvent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   CallOut,
@@ -43,7 +45,13 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
   viewer,
 }) => {
   return (
-    <HorizontalGutter className={styles.root} size="double">
+    <HorizontalGutter
+      className={cn(styles.root, CLASSES.permalinkView.$root, {
+        [CLASSES.permalinkView.authenticated]: Boolean(viewer),
+        [CLASSES.permalinkView.unauthenticated]: !Boolean(viewer),
+      })}
+      size="double"
+    >
       <UserBoxContainer viewer={viewer} settings={settings} />
       <Flex alignItems="center" justifyContent="center" direction="column">
         <Localized id="comments-permalinkView-currentViewing">
@@ -57,6 +65,7 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
         {showAllCommentsHref && (
           <Localized id="comments-permalinkView-viewFullDiscussion">
             <Button
+              className={CLASSES.permalinkView.viewFullDiscussionButton}
               variant="underlined"
               color="primary"
               onClick={onShowAllComments}

src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx

@@ -9,7 +9,8 @@ import {
 } from "coral-framework/lib/relay";
 import { PermalinkViewQuery as QueryTypes } from "coral-stream/__generated__/PermalinkViewQuery.graphql";
 import { PermalinkViewQueryLocal as Local } from "coral-stream/__generated__/PermalinkViewQueryLocal.graphql";
-import { Delay, Spinner } from "coral-ui/components";
+import Spinner from "coral-stream/common/Spinner";
+import { Delay } from "coral-ui/components";
 
 import PermalinkViewContainer from "./PermalinkViewContainer";
 

src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment not found 1`] = `
 <ForwardRef(forwardRef)
-  className="PermalinkView-root"
+  className="PermalinkView-root coral coral-permalink coral-authenticated"
   size="double"
 >
   <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
@@ -37,6 +37,7 @@ exports[`renders comment not found 1`] = `
     >
       <ForwardRef(forwardRef)
         anchor={true}
+        className="coral coral-permalink-viewFullDiscussionButton"
         color="primary"
         href="http://localhost/link"
         onClick={[Function]}
@@ -63,7 +64,7 @@ exports[`renders comment not found 1`] = `
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
-  className="PermalinkView-root"
+  className="PermalinkView-root coral coral-permalink coral-authenticated"
   size="double"
 >
   <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
@@ -98,6 +99,7 @@ exports[`renders correctly 1`] = `
     >
       <ForwardRef(forwardRef)
         anchor={true}
+        className="coral coral-permalink-viewFullDiscussionButton"
         color="primary"
         href="http://localhost/link"
         onClick={[Function]}

src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkViewQuery.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`renders loading 1`] = `
 <Delay
   ms={500}
 >
-  <withPropsOnChange(Spinner) />
+  <withProps(withPropsOnChange(Spinner)) />
 </Delay>
 `;
 

src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
 
 import FadeInTransition from "coral-framework/components/FadeInTransition";
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import { Button, HorizontalGutter } from "coral-ui/components";
 
 import CommentContainer from "../Comment";
@@ -77,6 +78,7 @@ const ReplyList: FunctionComponent<ReplyListProps> = props => {
               aria-controls={`coral-comments-replyList-log--${
                 props.comment.id
               }`}
+              className={CLASSES.replyList.showAllButton}
               onClick={props.onShowAll}
               disabled={props.disableShowAll}
               variant="outlined"
@@ -95,6 +97,7 @@ const ReplyList: FunctionComponent<ReplyListProps> = props => {
                 props.comment.id
               }`}
               onClick={props.onViewNew}
+              className={CLASSES.replyList.showMoreReplies}
               variant="outlined"
               fullWidth
             >

src/core/client/stream/tabs/Comments/ReplyList/__snapshots__/ReplyList.spec.tsx.snap

@@ -198,6 +198,7 @@ exports[`when there is more disables load more button 1`] = `
     >
       <ForwardRef(forwardRef)
         aria-controls="coral-comments-replyList-log--comment-id"
+        className="coral coral-replyList-showAllButton"
         disabled={true}
         fullWidth={true}
         id="coral-comments-replyList-showAll--comment-id"
@@ -310,6 +311,7 @@ exports[`when there is more renders a load more button 1`] = `
     >
       <ForwardRef(forwardRef)
         aria-controls="coral-comments-replyList-log--comment-id"
+        className="coral coral-replyList-showAllButton"
         disabled={false}
         fullWidth={true}
         id="coral-comments-replyList-showAll--comment-id"

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useEffect } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
@@ -16,8 +17,8 @@ import { AllCommentsTabContainer_story } from "coral-stream/__generated__/AllCom
 import { AllCommentsTabContainer_viewer } from "coral-stream/__generated__/AllCommentsTabContainer_viewer.graphql";
 import { AllCommentsTabContainerLocal } from "coral-stream/__generated__/AllCommentsTabContainerLocal.graphql";
 import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
+import CLASSES from "coral-stream/classes";
 import { Box, Button, HorizontalGutter } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
 
 import { CommentContainer } from "../../Comment";
 import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
@@ -108,6 +109,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
             variant="outlined"
             color="primary"
             onClick={onViewMore}
+            className={CLASSES.allCommentsTabPane.viewNewButton}
             fullWidth
           >
             <Localized id="comments-viewNew" $count={viewNewCount}>
@@ -154,6 +156,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
               fullWidth
               disabled={isLoadingMore}
               aria-controls="comments-allComments-log"
+              className={CLASSES.allCommentsTabPane.loadMoreButton}
             >
               Load More
             </Button>

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx

@@ -5,7 +5,8 @@ import {
 } from "coral-framework/lib/relay";
 import { AllCommentsTabQuery as QueryTypes } from "coral-stream/__generated__/AllCommentsTabQuery.graphql";
 import { AllCommentsTabQueryLocal as Local } from "coral-stream/__generated__/AllCommentsTabQueryLocal.graphql";
-import { Flex, Spinner } from "coral-ui/components";
+import Spinner from "coral-stream/common/Spinner";
+import { Flex } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx

@@ -1,6 +1,8 @@
-import { Flex, Spinner } from "coral-ui/components";
 import React, { FunctionComponent, useEffect, useState } from "react";
 
+import Spinner from "coral-stream/common/Spinner";
+import { Flex } from "coral-ui/components";
+
 interface Props {
   children: React.ReactNode;
 }

src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx

@@ -14,6 +14,7 @@ import {
   Typography,
 } from "coral-ui/components";
 
+import CLASSES from "coral-stream/classes";
 import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation";
 
 import { StreamDeletionRequestCalloutContainer_viewer } from "coral-stream/__generated__/StreamDeletionRequestCalloutContainer_viewer.graphql";
@@ -67,7 +68,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
   return (
     <>
       {deletionDate && (
-        <CallOut color="error">
+        <CallOut color="error" className={CLASSES.pendingAccountDeletion.$root}>
           <HorizontalGutter className={styles.gutter}>
             <Flex>
               <Icon size="md" className={styles.icon}>
@@ -108,6 +109,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
                 variant="underlined"
                 color="primary"
                 onClick={cancelDeletion}
+                className={CLASSES.pendingAccountDeletion.cancelRequestButton}
               >
                 Cancel account deletion request
               </Button>

src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx

@@ -1,3 +1,5 @@
+import cn from "classnames";
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, MouseEvent, useCallback } from "react";
 import { graphql } from "react-relay";
 
@@ -8,6 +10,7 @@ import { FeaturedCommentContainer_comment as CommentData } from "coral-stream/__
 import { FeaturedCommentContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentContainer_settings.graphql";
 import { FeaturedCommentContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentContainer_story.graphql";
 import { FeaturedCommentContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
 import {
@@ -20,7 +23,6 @@ import { UserTagsContainer } from "../../Comment";
 import ReactionButtonContainer from "../../Comment/ReactionButton";
 import { UsernameWithPopoverContainer } from "../../Comment/Username";
 
-import { Localized } from "fluent-react/compat";
 import styles from "./FeaturedCommentContainer.css";
 
 interface Props {
@@ -46,40 +48,73 @@ const FeaturedCommentContainer: FunctionComponent<Props> = props => {
   );
 
   return (
-    <div className={styles.root} data-testid={`featuredComment-${comment.id}`}>
-      <HTMLContent>{comment.body || ""}</HTMLContent>
-      <Flex direction="row" alignItems="center" mt={4}>
+    <div
+      className={cn(CLASSES.featuredComment.$root, styles.root)}
+      data-testid={`featuredComment-${comment.id}`}
+    >
+      <HTMLContent className={CLASSES.featuredComment.content}>
+        {comment.body || ""}
+      </HTMLContent>
+      <Flex
+        direction="row"
+        alignItems="center"
+        mt={4}
+        className={CLASSES.featuredComment.authorBar.$root}
+      >
         {comment.author && (
-          <UsernameWithPopoverContainer user={comment.author} viewer={viewer} />
+          <UsernameWithPopoverContainer
+            className={CLASSES.featuredComment.authorBar.username}
+            user={comment.author}
+            viewer={viewer}
+          />
         )}
         <Box ml={1} container="span">
-          <UserTagsContainer comment={comment} />
+          <UserTagsContainer
+            className={CLASSES.featuredComment.authorBar.userTag}
+            comment={comment}
+          />
         </Box>
         <Box ml={2} clone>
-          <Timestamp>{comment.createdAt}</Timestamp>
+          <Timestamp className={CLASSES.featuredComment.authorBar.timestamp}>
+            {comment.createdAt}
+          </Timestamp>
         </Box>
       </Flex>
-      <Flex justifyContent="space-between" mt={2}>
+      <Flex
+        justifyContent="space-between"
+        mt={2}
+        className={CLASSES.featuredComment.actionBar.$root}
+      >
         <ReactionButtonContainer
           comment={comment}
           settings={settings}
           viewer={viewer}
           readOnly={banned}
+          className={CLASSES.featuredComment.actionBar.reactButton}
+          reactedClassName={CLASSES.featuredComment.actionBar.reactedButton}
         />
         <Flex alignItems="center">
           {comment.replyCount > 0 && (
             <Flex alignItems="center" className={styles.replies}>
-              <Icon size="md">reply</Icon>
-              <Localized id="comments-featured-replies">
-                <Box mx={1}>Replies</Box>
-              </Localized>
-              <Box>{comment.replyCount}</Box>
+              <Flex
+                alignItems="center"
+                className={CLASSES.featuredComment.actionBar.replies}
+              >
+                <Icon size="md">reply</Icon>
+                <Localized id="comments-featured-replies">
+                  <Box mx={1}>Replies</Box>
+                </Localized>
+                <Box>{comment.replyCount}</Box>
+              </Flex>
               <Box mx={2}>|</Box>
             </Flex>
           )}
           <div>
             <TextLink
-              className={styles.gotoConversation}
+              className={cn(
+                CLASSES.featuredComment.actionBar.goToConversation,
+                styles.gotoConversation
+              )}
               onClick={onGotoConversation}
               href={getURLWithCommentID(story.url, comment.id)}
             >

src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx

@@ -10,6 +10,7 @@ import { FeaturedCommentsContainer_settings as SettingsData } from "coral-stream
 import { FeaturedCommentsContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentsContainer_story.graphql";
 import { FeaturedCommentsContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentsContainer_viewer.graphql";
 import { FeaturedCommentsContainerPaginationQueryVariables } from "coral-stream/__generated__/FeaturedCommentsContainerPaginationQuery.graphql";
+import CLASSES from "coral-stream/classes";
 import { Button, HorizontalGutter } from "coral-ui/components";
 import { Localized } from "fluent-react/compat";
 
@@ -57,6 +58,7 @@ export const FeaturedCommentsContainer: FunctionComponent<Props> = props => {
               fullWidth
               disabled={isLoadingMore}
               aria-controls="comments-featuredComments-log"
+              className={CLASSES.featuredCommentsTabPane.loadMoreButton}
             >
               Load More
             </Button>

src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx

@@ -1,3 +1,6 @@
+import React, { FunctionComponent } from "react";
+import { ReadyState } from "react-relay";
+
 import {
   graphql,
   QueryRenderer,
@@ -5,9 +8,8 @@ import {
 } from "coral-framework/lib/relay";
 import { FeaturedCommentsQuery as QueryTypes } from "coral-stream/__generated__/FeaturedCommentsQuery.graphql";
 import { FeaturedCommentsQueryLocal as Local } from "coral-stream/__generated__/FeaturedCommentsQueryLocal.graphql";
-import { Delay, Flex, Spinner } from "coral-ui/components";
-import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";
+import Spinner from "coral-stream/common/Spinner";
+import { Delay, Flex } from "coral-ui/components";
 
 import FeaturedCommentsContainer from "./FeaturedCommentsContainer";
 

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx

@@ -7,13 +7,8 @@ import { Field, Form, FormSpy } from "react-final-form";
 
 import { OnSubmit } from "coral-framework/lib/form";
 import CLASSES from "coral-stream/classes";
-import {
-  AriaInfo,
-  Button,
-  Flex,
-  HorizontalGutter,
-  ValidationMessage,
-} from "coral-ui/components";
+import ValidationMessage from "coral-stream/common/ValidationMessage";
+import { AriaInfo, Button, Flex, HorizontalGutter } from "coral-ui/components";
 
 import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";
 import RemainingCharactersContainer from "../../RemainingCharacters";

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx

@@ -1,6 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Message } from "coral-ui/components";
 
 import styles from "./PostCommentInReviewMessage.css";
@@ -13,7 +14,11 @@ const PostCommentInReview: FunctionComponent<
   PostCommentInReviewProps
 > = props => {
   return (
-    <Message color="primary" fullWidth>
+    <Message
+      color="primary"
+      className={CLASSES.createComment.inReview}
+      fullWidth
+    >
       <Flex justifyContent="space-between" className={styles.flex}>
         <Localized id="comments-submitStatus-submittedAndWillBeReviewed">
           <div>
@@ -23,6 +28,7 @@ const PostCommentInReview: FunctionComponent<
         <div className={styles.buttonWrapper}>
           <Localized id="comments-submitStatus-dismiss">
             <Button
+              className={CLASSES.createComment.dismissButton}
               onClick={props.onDismiss}
               variant="underlined"
               color="light"

src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx

@@ -114,7 +114,13 @@ export const StreamContainer: FunctionComponent<Props> = props => {
   return (
     <>
       <StoryClosedTimeoutContainer story={props.story} />
-      <HorizontalGutter className={styles.root} size="double">
+      <HorizontalGutter
+        className={cn(styles.root, {
+          [CLASSES.commentsTabPane.authenticated]: Boolean(props.viewer),
+          [CLASSES.commentsTabPane.unauthenticated]: !Boolean(props.viewer),
+        })}
+        size="double"
+      >
         <UserBoxContainer viewer={props.viewer} settings={props.settings} />
         {props.viewer && (
           <StreamDeletionRequestCalloutContainer viewer={props.viewer} />
@@ -189,10 +195,16 @@ export const StreamContainer: FunctionComponent<Props> = props => {
             </Tab>
           </TabBar>
           <TabContent activeTab={local.commentsTab}>
-            <TabPane tabID="FEATURED_COMMENTS">
+            <TabPane
+              className={CLASSES.featuredCommentsTabPane.$root}
+              tabID="FEATURED_COMMENTS"
+            >
               <FeaturedComments />
             </TabPane>
-            <TabPane tabID="ALL_COMMENTS">
+            <TabPane
+              className={CLASSES.allCommentsTabPane.$root}
+              tabID="ALL_COMMENTS"
+            >
               <AllCommentsTab />
             </TabPane>
           </TabContent>

src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx

@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { ReadyState } from "react-relay";
+
 import {
   graphql,
   QueryRenderer,
@@ -6,10 +10,8 @@ import {
 import { COMMENTS_TAB } from "coral-stream/__generated__/StreamContainerLocal.graphql";
 import { StreamQuery as QueryTypes } from "coral-stream/__generated__/StreamQuery.graphql";
 import { StreamQueryLocal as Local } from "coral-stream/__generated__/StreamQueryLocal.graphql";
-import { Delay, Flex, Spinner } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { ReadyState } from "react-relay";
+import Spinner from "coral-stream/common/Spinner";
+import { Delay, Flex } from "coral-ui/components";
 
 import { AllCommentsTabQuery } from "./AllCommentsTab";
 import StreamContainer from "./StreamContainer";

src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap

@@ -46,12 +46,12 @@ exports[`renders correctly on big screens 1`] = `
       aria-hidden={true}
       className="SelectField-afterWrapper undefined"
     >
-      <span
+      <i
         aria-hidden="true"
         className="Icon-root Icon-sm"
       >
         expand_more
-      </span>
+      </i>
     </span>
   </span>
 </div>
@@ -97,12 +97,12 @@ exports[`renders correctly on small screens 1`] = `
       aria-hidden={true}
       className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
     >
-      <span
+      <i
         aria-hidden="true"
         className="Icon-root Icon-sm"
       >
         sort
-      </span>
+      </i>
     </span>
   </span>
 </div>

src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`renders level1 1`] = `
   className="Indent-root"
 >
   <div
-    className="Indent-level1"
+    className="Indent-level1 coral coral-indent-1"
   >
     <div>
       Hello World
@@ -33,7 +33,7 @@ exports[`renders without border 1`] = `
   className="Indent-root"
 >
   <div
-    className="Indent-level1 Indent-noBorder"
+    className="Indent-level1 coral coral-indent-1 Indent-noBorder"
   >
     <div>
       Hello World

src/core/client/stream/tabs/Configure/ConfigureQuery.tsx

@@ -10,7 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { ConfigureQuery as QueryTypes } from "coral-stream/__generated__/ConfigureQuery.graphql";
 import { ConfigureQueryLocal as Local } from "coral-stream/__generated__/ConfigureQueryLocal.graphql";
-import { Delay, Spinner } from "coral-ui/components";
+import Spinner from "coral-stream/common/Spinner";
+import { Delay } from "coral-ui/components";
 
 const loadConfigureContainer = () =>
   import("./ConfigureContainer" /* webpackChunkName: "configure" */);

src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx

@@ -5,6 +5,7 @@ import { Form } from "react-final-form";
 
 import { FormInitializer } from "coral-framework/lib/form";
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   CallOut,
@@ -37,7 +38,12 @@ const ConfigureStream: FunctionComponent<Props> = ({
     {({ handleSubmit, submitting, pristine, form, submitError }) => (
       <FormInitializer form={form}>
         {({ onInitValues }) => (
-          <form autoComplete="off" onSubmit={handleSubmit} id="configure-form">
+          <form
+            className={CLASSES.configureCommentStream.$root}
+            autoComplete="off"
+            onSubmit={handleSubmit}
+            id="configure-form"
+          >
             <Flex
               justifyContent="space-between"
               alignItems="flex-start"
@@ -50,6 +56,7 @@ const ConfigureStream: FunctionComponent<Props> = ({
               </Localized>
               <Localized id="configure-stream-apply">
                 <Button
+                  className={CLASSES.configureCommentStream.applyButton}
                   color="success"
                   variant="filled"
                   type="submit"
@@ -60,7 +67,14 @@ const ConfigureStream: FunctionComponent<Props> = ({
               </Localized>
             </Flex>
             <HorizontalGutter size="double">
-              {submitError && <CallOut color="error">{submitError}</CallOut>}
+              {submitError && (
+                <CallOut
+                  className={CLASSES.configureCommentStream.errorMessage}
+                  color="error"
+                >
+                  {submitError}
+                </CallOut>
+              )}
               <LiveUpdatesConfigContainer
                 onInitValues={onInitValues}
                 storySettings={storySettings}

src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx

@@ -7,17 +7,18 @@ import {
   formatEmpty,
   parseBool,
   parseEmptyAsNull,
-  ValidationMessage,
 } from "coral-framework/lib/form";
+import CLASSES from "coral-stream/classes";
+import FieldValidationMessage from "coral-stream/common/FieldValidationMessage";
 import {
   MessageBox,
   MessageBoxContent,
   MessageBoxIcon,
 } from "coral-stream/common/MessageBox";
+import Spinner from "coral-stream/common/Spinner";
 import {
   HorizontalGutter,
   Icon,
-  Spinner,
   TileOption,
   TileSelector,
   Typography,
@@ -36,6 +37,7 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
   <Field name="messageBox.enabled" type="checkbox" parse={parseBool}>
     {({ input }) => (
       <ToggleConfig
+        className={CLASSES.configureMessageBox.$root}
         id={input.name}
         disabled={disabled}
         {...input}
@@ -73,7 +75,9 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                             PREVIEW
                           </Typography>
                         </Localized>
-                        <MessageBox>
+                        <MessageBox
+                          className={CLASSES.configureMessageBox.messageBox}
+                        >
                           {iconInput.value && (
                             <MessageBoxIcon>{iconInput.value}</MessageBoxIcon>
                           )}
@@ -95,22 +99,42 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                           onChange={iconInput.onChange}
                           value={iconInput.value}
                         >
-                          <TileOption value="question_answer">
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value="question_answer"
+                          >
                             <Icon size="md">question_answer</Icon>
                           </TileOption>
-                          <TileOption value="today">
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value="today"
+                          >
                             <Icon size="md">today</Icon>
                           </TileOption>
-                          <TileOption value="help_outline">
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value="help_outline"
+                          >
                             <Icon size="md">help_outline</Icon>
                           </TileOption>
-                          <TileOption value="warning">
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value="warning"
+                          >
                             <Icon size="md">warning</Icon>
                           </TileOption>
-                          <TileOption value="chat_bubble_outline">
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value="chat_bubble_outline"
+                          >
                             <Icon size="md">chat_bubble_outline</Icon>
                           </TileOption>
-                          <TileOption value="">No Icon</TileOption>
+                          <TileOption
+                            className={CLASSES.configureMessageBox.option}
+                            value=""
+                          >
+                            No Icon
+                          </TileOption>
                         </TileSelector>
                       </HorizontalGutter>
                       <HorizontalGutter size="half" container="section">
@@ -134,7 +158,7 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                             value={contentInput.value}
                           />
                         </Suspense>
-                        <ValidationMessage meta={meta} />
+                        <FieldValidationMessage meta={meta} />
                       </HorizontalGutter>
                     </>
                   )}

src/core/client/stream/tabs/Configure/OpenOrCloseStream/CloseStream.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import styles from "./CloseStream.css";
@@ -11,7 +13,7 @@ interface Props {
 }
 
 const CloseStream: FunctionComponent<Props> = ({ onClick, disableButton }) => (
-  <div>
+  <div className={CLASSES.closeCommentStream.$root}>
     <Localized id="configure-closeStream-title">
       <Typography variant="heading2" className={styles.heading}>
         Close Comment Stream
@@ -29,7 +31,7 @@ const CloseStream: FunctionComponent<Props> = ({ onClick, disableButton }) => (
         <Button
           variant="outlined"
           color="error"
-          className={styles.button}
+          className={cn(styles.button, CLASSES.closeCommentStream.closeButton)}
           onClick={onClick}
           disabled={disableButton}
         >

src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenStream.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import styles from "./OpenStream.css";
@@ -11,7 +13,7 @@ interface Props {
 }
 
 const OpenStream: FunctionComponent<Props> = ({ onClick, disableButton }) => (
-  <div>
+  <div className={CLASSES.openCommentStream.$root}>
     <Localized id="configure-openStream-title">
       <Typography variant="heading2" className={styles.heading}>
         Open Stream
@@ -28,7 +30,7 @@ const OpenStream: FunctionComponent<Props> = ({ onClick, disableButton }) => (
         <Button
           variant="outlined"
           color="error"
-          className={styles.button}
+          className={cn(styles.button, CLASSES.openCommentStream.openButton)}
           onClick={onClick}
           disabled={disableButton}
         >

src/core/client/stream/tabs/Profile/ChangeEmail/ChangeEmailContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { FORM_ERROR, FormApi, FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, {
@@ -12,7 +13,7 @@ import { Environment } from "relay-runtime";
 import { PasswordField } from "coral-framework/components";
 import getAuthenticationIntegrations from "coral-framework/helpers/getAuthenticationIntegrations";
 import { InvalidRequestError } from "coral-framework/lib/errors";
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import { colorFromMeta } from "coral-framework/lib/form";
 import { createFetch, useFetch } from "coral-framework/lib/relay";
 import {
   graphql,
@@ -24,6 +25,10 @@ import {
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
+import { ChangeEmailContainer_settings as SettingsData } from "coral-stream/__generated__/ChangeEmailContainer_settings.graphql";
+import { ChangeEmailContainer_viewer as ViewerData } from "coral-stream/__generated__/ChangeEmailContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
+import FieldValidationMessage from "coral-stream/common/FieldValidationMessage";
 import {
   Button,
   ButtonIcon,
@@ -37,9 +42,6 @@ import {
   Typography,
 } from "coral-ui/components";
 
-import { ChangeEmailContainer_settings as SettingsData } from "coral-stream/__generated__/ChangeEmailContainer_settings.graphql";
-import { ChangeEmailContainer_viewer as ViewerData } from "coral-stream/__generated__/ChangeEmailContainer_viewer.graphql";
-
 import UpdateEmailMutation from "./UpdateEmailMutation";
 
 import styles from "./ChangeEmailContainer.css";
@@ -142,18 +144,32 @@ const changeEmailContainer: FunctionComponent<Props> = ({
   };
 
   return (
-    <HorizontalGutter spacing={5} data-testid="profile-changeEmail">
+    <HorizontalGutter
+      className={CLASSES.myEmail.email}
+      spacing={5}
+      data-testid="profile-changeEmail"
+    >
       {!showEditForm && (
         <Flex alignItems="center">
           <Typography>{viewer.email}</Typography>{" "}
           {!viewer.emailVerified && (
             <Localized id="profile-changeEmail-unverified">
-              <Typography color="textSecondary">(Unverified)</Typography>
+              <Typography
+                className={CLASSES.myEmail.unverified}
+                color="textSecondary"
+              >
+                (Unverified)
+              </Typography>
             </Localized>
           )}
           {canChangeEmail && (
             <Localized id="profile-changeEmail-edit">
-              <Button size="small" color="primary" onClick={toggleEditForm}>
+              <Button
+                className={CLASSES.myEmail.editButton}
+                size="small"
+                color="primary"
+                onClick={toggleEditForm}
+              >
                 Edit
               </Button>
             </Localized>
@@ -161,7 +177,7 @@ const changeEmailContainer: FunctionComponent<Props> = ({
         </Flex>
       )}
       {!viewer.emailVerified && !showEditForm && (
-        <CallOut>
+        <CallOut className={CLASSES.verifyEmail.$root}>
           <Flex itemGutter>
             <div>
               <Icon size="lg">email</Icon>
@@ -187,7 +203,10 @@ const changeEmailContainer: FunctionComponent<Props> = ({
               <Localized id="profile-changeEmail-resend">
                 <Button
                   onClick={resend}
-                  className={styles.resendButton}
+                  className={cn(
+                    styles.resendButton,
+                    CLASSES.verifyEmail.resendButton
+                  )}
                   color="primary"
                 >
                   Resend verification
@@ -198,14 +217,21 @@ const changeEmailContainer: FunctionComponent<Props> = ({
         </CallOut>
       )}
       {confirmationResent && (
-        <CallOut fullWidth color="primary">
+        <CallOut
+          className={CLASSES.verifyEmail.resentMessage}
+          fullWidth
+          color="primary"
+        >
           <Localized id="profile-changeEmail-resent">
             <Typography>Your confirmation email has been re-sent.</Typography>
           </Localized>
         </CallOut>
       )}
       {showEditForm && (
-        <CallOut className={styles.callOut} color="primary">
+        <CallOut
+          className={cn(styles.callOut, CLASSES.myEmail.form.$root)}
+          color="primary"
+        >
           <HorizontalGutter spacing={4}>
             <div>
               <Localized id="profile-changeEmail-heading">
@@ -229,7 +255,12 @@ const changeEmailContainer: FunctionComponent<Props> = ({
                   Current email
                 </Typography>
               </Localized>
-              <Typography variant="heading2">{viewer.email}</Typography>
+              <Typography
+                variant="heading2"
+                className={CLASSES.myEmail.form.currentEmail}
+              >
+                {viewer.email}
+              </Typography>
             </div>
             <Form onSubmit={onSubmit}>
               {({
@@ -262,7 +293,7 @@ const changeEmailContainer: FunctionComponent<Props> = ({
                                 fullWidth
                                 id="profile-changeEmail-Email"
                               />
-                              <ValidationMessage meta={meta} />
+                              <FieldValidationMessage meta={meta} />
                             </>
                           )}
                         </Field>
@@ -294,26 +325,35 @@ const changeEmailContainer: FunctionComponent<Props> = ({
                                   {...input}
                                 />
                               </Localized>
-                              <ValidationMessage meta={meta} fullWidth />
+                              <FieldValidationMessage meta={meta} fullWidth />
                             </FormField>
                           )}
                         </Field>
                       </HorizontalGutter>
                     </FormField>
                     {submitError && (
-                      <CallOut color="error" fullWidth>
+                      <CallOut
+                        className={CLASSES.myEmail.form.errorMessage}
+                        color="error"
+                        fullWidth
+                      >
                         {submitError}
                       </CallOut>
                     )}
                   </HorizontalGutter>
                   <Flex justifyContent="flex-end" className={styles.footer}>
                     <Localized id="profile-changeEmail-cancel">
-                      <Button type="button" onClick={toggleEditForm}>
+                      <Button
+                        className={CLASSES.myEmail.form.cancelButton}
+                        type="button"
+                        onClick={toggleEditForm}
+                      >
                         Cancel
                       </Button>
                     </Localized>
                     <Localized id="profile-changeEmail-submit">
                       <Button
+                        className={CLASSES.myEmail.form.saveButton}
                         variant={
                           preventSubmit(formProps) ? "outlined" : "filled"
                         }

src/core/client/stream/tabs/Profile/ChangeUsername/ChangeUsernameContainer.tsx

@@ -1,4 +1,4 @@
-import { useCoralContext } from "coral-framework/lib/bootstrap";
+import cn from "classnames";
 import { FORM_ERROR, FormApi } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, {
@@ -12,8 +12,8 @@ import { Field, Form } from "react-final-form";
 import { ALLOWED_USERNAME_CHANGE_FREQUENCY } from "coral-common/constants";
 import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
 import getAuthenticationIntegrations from "coral-framework/helpers/getAuthenticationIntegrations";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { InvalidRequestError } from "coral-framework/lib/errors";
-import { ValidationMessage } from "coral-framework/lib/form";
 import {
   graphql,
   useMutation,
@@ -27,6 +27,8 @@ import {
 } from "coral-framework/lib/validation";
 import { ChangeUsernameContainer_settings as SettingsData } from "coral-stream/__generated__/ChangeUsernameContainer_settings.graphql";
 import { ChangeUsernameContainer_viewer as ViewerData } from "coral-stream/__generated__/ChangeUsernameContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
+import FieldValidationMessage from "coral-stream/common/FieldValidationMessage";
 import {
   Box,
   Button,
@@ -167,18 +169,28 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
       )}
       {!showEditForm && (
         <Flex alignItems="baseline">
-          <Typography variant="header2">{viewer.username}</Typography>
+          <Typography variant="header2" className={CLASSES.myUsername.username}>
+            {viewer.username}
+          </Typography>
           {canChangeLocalAuth && settings.accountFeatures.changeUsername && (
             <Localized id="profile-changeUsername-edit">
-              <Button size="small" color="primary" onClick={toggleEditForm}>
-                edit
+              <Button
+                className={CLASSES.myUsername.editButton}
+                size="small"
+                color="primary"
+                onClick={toggleEditForm}
+              >
+                Edit
               </Button>
             </Localized>
           )}
         </Flex>
       )}
       {showEditForm && (
-        <CallOut className={styles.callOut} color="primary">
+        <CallOut
+          className={cn(styles.callOut, CLASSES.myUsername.form.$root)}
+          color="primary"
+        >
           <HorizontalGutter spacing={4}>
             <div>
               <Localized id="profile-changeUsername-heading">
@@ -205,7 +217,10 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
             <div>
               <Localized id="profile-changeUsername-current">
                 <Typography
-                  className={styles.currentUsername}
+                  className={cn(
+                    styles.currentUsername,
+                    CLASSES.myUsername.form.username
+                  )}
                   variant="bodyCopyBold"
                 >
                   Current username
@@ -242,7 +257,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                                   {...input}
                                   id="profile-changeUsername-username"
                                 />
-                                <ValidationMessage meta={meta} />
+                                <FieldValidationMessage meta={meta} />
                               </>
                             )}
                           </Field>
@@ -268,21 +283,29 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                                   {...input}
                                   id="profile-changeUsername-username-confirm"
                                 />
-                                <ValidationMessage meta={meta} />
+                                <FieldValidationMessage meta={meta} />
                               </>
                             )}
                           </Field>
                         </HorizontalGutter>
                       </FormField>
                       {submitError && (
-                        <CallOut color="error" fullWidth>
+                        <CallOut
+                          className={CLASSES.myUsername.form.errorMessage}
+                          color="error"
+                          fullWidth
+                        >
                           {submitError}
                         </CallOut>
                       )}
                     </HorizontalGutter>
                     <Flex justifyContent="flex-end" className={styles.footer}>
                       <Localized id="profile-changeUsername-cancel">
-                        <Button type="button" onClick={toggleEditForm}>
+                        <Button
+                          className={CLASSES.myUsername.form.cancelButton}
+                          type="button"
+                          onClick={toggleEditForm}
+                        >
                           Cancel
                         </Button>
                       </Localized>
@@ -292,6 +315,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                         span={<span />}
                       >
                         <Button
+                          className={CLASSES.myUsername.form.saveButton}
                           variant={pristine || invalid ? "outlined" : "filled"}
                           type="submit"
                           data-testid="profile-changeUsername-save"
@@ -341,6 +365,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                       variant="filled"
                       type="button"
                       onClick={toggleEditForm}
+                      className={CLASSES.myUsername.form.closeButton}
                     >
                       Close
                     </Button>

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   Flex,
@@ -67,6 +68,7 @@ const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
             fullWidth
             disabled={props.disableLoadMore}
             aria-controls="coral-profile-commentHistory-log"
+            className={CLASSES.myCommentsTabPane.loadMoreButton}
           >
             Load More
           </Button>

src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
 import {
@@ -29,20 +31,31 @@ export interface HistoryCommentProps {
 
 const HistoryComment: FunctionComponent<HistoryCommentProps> = props => {
   return (
-    <HorizontalGutter data-testid={`historyComment-${props.id}`}>
+    <HorizontalGutter
+      className={CLASSES.myComment.$root}
+      data-testid={`historyComment-${props.id}`}
+    >
       <Localized
         id="profile-historyComment-story"
         $title={props.story.metadata ? props.story.metadata.title : "N/A"} // FIXME: (wyattjoh) When a title for a Story isn't available, we need a fallback.
       >
-        <Typography variant="heading4">{"Story: {$title}"}</Typography>
+        <Typography className={CLASSES.myComment.story} variant="heading4">
+          {"Story: {$title}"}
+        </Typography>
       </Localized>
-      <Timestamp>{props.createdAt}</Timestamp>
+      <Timestamp className={CLASSES.myComment.timestamp}>
+        {props.createdAt}
+      </Timestamp>
       <Typography variant="bodyCopy" container="div">
-        {props.body && <HTMLContent>{props.body}</HTMLContent>}
+        {props.body && (
+          <HTMLContent className={CLASSES.myComment.content}>
+            {props.body}
+          </HTMLContent>
+        )}
       </Typography>
       <Flex direction="row" alignItems="center" itemGutter>
         {!!props.replyCount && (
-          <div className={styles.replies}>
+          <div className={cn(styles.replies, CLASSES.myComment.replies)}>
             <Icon className={styles.icon}>reply</Icon>
             <Localized
               id="profile-historyComment-replies"
@@ -57,7 +70,10 @@ const HistoryComment: FunctionComponent<HistoryCommentProps> = props => {
             target="_parent"
             href={props.conversationURL}
             onClick={props.onGotoConversation}
-            className={styles.viewConversation}
+            className={cn(
+              styles.viewConversation,
+              CLASSES.myComment.viewConversationButton
+            )}
           >
             View Conversation
           </TextLink>

src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap

@@ -35,6 +35,7 @@ exports[`has more disables load more 1`] = `
   >
     <ForwardRef(forwardRef)
       aria-controls="coral-profile-commentHistory-log"
+      className="coral coral-loadMoreButton coral-myComments-loadMoreButton"
       disabled={true}
       fullWidth={true}
       id="coral-profile-commentHistory-loadMore"
@@ -82,6 +83,7 @@ exports[`has more renders correctly 1`] = `
   >
     <ForwardRef(forwardRef)
       aria-controls="coral-profile-commentHistory-log"
+      className="coral coral-loadMoreButton coral-myComments-loadMoreButton"
       disabled={false}
       fullWidth={true}
       id="coral-profile-commentHistory-loadMore"

src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/HistoryComment.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
+  className="coral coral-myComment"
   data-testid="historyComment-comment-id"
 >
   <Localized
@@ -9,19 +10,24 @@ exports[`renders correctly 1`] = `
     id="profile-historyComment-story"
   >
     <ForwardRef(forwardRef)
+      className="coral coral-myComment-story"
       variant="heading4"
     >
       Story: {$title}
     </ForwardRef(forwardRef)>
   </Localized>
-  <Timestamp>
+  <Timestamp
+    className="coral coral-myComment-timestamp"
+  >
     2018-07-06T18:24:00.000Z
   </Timestamp>
   <ForwardRef(forwardRef)
     container="div"
     variant="bodyCopy"
   >
-    <HTMLContent>
+    <HTMLContent
+      className="coral coral-myComment-content"
+    >
       Hello World
     </HTMLContent>
   </ForwardRef(forwardRef)>
@@ -31,7 +37,7 @@ exports[`renders correctly 1`] = `
     itemGutter={true}
   >
     <div
-      className="HistoryComment-replies"
+      className="HistoryComment-replies coral coral-myComment-replies"
     >
       <ForwardRef(forwardRef)
         className="HistoryComment-icon"
@@ -51,7 +57,7 @@ exports[`renders correctly 1`] = `
       id="profile-historyComment-viewConversation"
     >
       <withPropsOnChange(TextLinkProps)
-        className="HistoryComment-viewConversation"
+        className="HistoryComment-viewConversation coral coral-myComment-viewConversationButton"
         href="http://localhost/conversation"
         onClick={[Function]}
         target="_parent"

src/core/client/stream/tabs/Profile/DeletionRequest/DeletionRequestCalloutContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
@@ -7,6 +8,7 @@ import {
   useMutation,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   CallOut,
@@ -52,7 +54,11 @@ const DeletionRequestCalloutContainer: FunctionComponent<Props> = ({
     : null;
 
   return (
-    <CallOut color="error" fullWidth className={styles.callout}>
+    <CallOut
+      color="error"
+      className={cn(styles.callout, CLASSES.pendingAccountDeletion.$root)}
+      fullWidth
+    >
       <HorizontalGutter>
         <Flex>
           <Icon size="md" className={styles.icon}>
@@ -70,7 +76,12 @@ const DeletionRequestCalloutContainer: FunctionComponent<Props> = ({
       </HorizontalGutter>
       <HorizontalGutter className={styles.action}>
         <Localized id="profile-accountDeletion-cancelDeletion">
-          <Button variant="underlined" color="primary" onClick={cancelDeletion}>
+          <Button
+            className={CLASSES.pendingAccountDeletion.cancelRequestButton}
+            variant="underlined"
+            color="primary"
+            onClick={cancelDeletion}
+          >
             Cancel account deletion request
           </Button>
         </Localized>

src/core/client/stream/tabs/Profile/Profile.tsx

@@ -73,10 +73,13 @@ const Profile: FunctionComponent<ProfileProps> = props => {
         </Tab>
       </TabBar>
       <TabContent activeTab={local.profileTab}>
-        <TabPane tabID="MY_COMMENTS">
+        <TabPane
+          className={CLASSES.myCommentsTabPane.$root}
+          tabID="MY_COMMENTS"
+        >
           <CommentHistoryContainer viewer={props.viewer} story={props.story} />
         </TabPane>
-        <TabPane tabID="SETTINGS">
+        <TabPane className={CLASSES.settingsTabPane.$root} tabID="SETTINGS">
           <SettingsContainer viewer={props.viewer} settings={props.settings} />
         </TabPane>
       </TabContent>

src/core/client/stream/tabs/Profile/ProfileQuery.tsx

@@ -10,7 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { ProfileQuery as QueryTypes } from "coral-stream/__generated__/ProfileQuery.graphql";
 import { ProfileQueryLocal as Local } from "coral-stream/__generated__/ProfileQueryLocal.graphql";
-import { CallOut, Delay, Spinner } from "coral-ui/components";
+import Spinner from "coral-stream/common/Spinner";
+import { CallOut, Delay } from "coral-ui/components";
 
 const loadProfileContainer = () =>
   import("./ProfileContainer" /* webpackChunkName: "profile" */);

src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx

@@ -1,15 +1,18 @@
 import { FORM_ERROR, FormApi } from "final-form";
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { InvalidRequestError } from "coral-framework/lib/errors";
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import { colorFromMeta } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import {
   composeValidators,
   required,
   validatePassword,
 } from "coral-framework/lib/validation";
+import CLASSES from "coral-stream/classes";
+import FieldValidationMessage from "coral-stream/common/FieldValidationMessage";
 import {
   Button,
   CallOut,
@@ -22,7 +25,6 @@ import {
   Typography,
 } from "coral-ui/components";
 
-import { Localized } from "fluent-react/compat";
 import UpdatePasswordMutation from "./UpdatePasswordMutation";
 
 interface Props {
@@ -59,7 +61,10 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
   );
 
   return (
-    <div data-testid="profile-settings-changePassword">
+    <div
+      className={CLASSES.changePassword.$root}
+      data-testid="profile-settings-changePassword"
+    >
       <Form onSubmit={onSubmit}>
         {({
           handleSubmit,
@@ -93,7 +98,7 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                         autoComplete="current-password"
                         {...input}
                       />
-                      <ValidationMessage fullWidth meta={meta} />
+                      <FieldValidationMessage fullWidth meta={meta} />
 
                       <Flex justifyContent="flex-end">
                         <Localized id="profile-settings-changePassword-forgotPassword">
@@ -101,6 +106,7 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                             variant="underlined"
                             color="primary"
                             onClick={onResetPassword}
+                            className={CLASSES.changePassword.forgotButton}
                           >
                             Forgot your password?
                           </Button>
@@ -128,18 +134,26 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                         autoComplete="new-password"
                         {...input}
                       />
-                      <ValidationMessage fullWidth meta={meta} />
+                      <FieldValidationMessage fullWidth meta={meta} />
                     </FormField>
                   )}
                 </Field>
                 {submitError && (
-                  <CallOut color="error" fullWidth>
+                  <CallOut
+                    className={CLASSES.changePassword.errorMessage}
+                    color="error"
+                    fullWidth
+                  >
                     {submitError}
                   </CallOut>
                 )}
                 {submitSucceeded && (
                   <Localized id="profile-settings-changePassword-updated">
-                    <CallOut color="success" fullWidth>
+                    <CallOut
+                      className={CLASSES.changePassword.successMessage}
+                      color="success"
+                      fullWidth
+                    >
                       Your password has been updated
                     </CallOut>
                   </Localized>
@@ -151,6 +165,7 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                       variant="filled"
                       type="submit"
                       disabled={submitting || pristine}
+                      className={CLASSES.changePassword.changeButton}
                     >
                       Change Password
                     </Button>

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
@@ -7,6 +8,7 @@ import {
   useMutation,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
+import CLASSES from "coral-stream/classes";
 import { Icon, Typography } from "coral-ui/components";
 import { Button } from "coral-ui/components/Button";
 
@@ -57,7 +59,7 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
     : null;
 
   return (
-    <div className={styles.root}>
+    <div className={cn(styles.root, CLASSES.deleteMyAccount.$root)}>
       <DeleteAccountModal
         open={deletePopoverVisible}
         onClose={hidePopover}
@@ -90,7 +92,12 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
               request until that time.
             </Typography>
           </Localized>
-          <Button variant="filled" size="small" onClick={cancelDeletion}>
+          <Button
+            variant="filled"
+            size="small"
+            onClick={cancelDeletion}
+            className={CLASSES.deleteMyAccount.cancelRequestButton}
+          >
             <Icon size="sm" className={styles.icon}>
               block
             </Icon>
@@ -100,7 +107,12 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
           </Button>
         </>
       ) : (
-        <Button variant="outlined" size="small" onClick={showPopover}>
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={showPopover}
+          className={CLASSES.deleteMyAccount.requestButton}
+        >
           <Icon size="sm" className={styles.icon}>
             cancel
           </Icon>

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountModalContents.tsx

@@ -1,5 +1,7 @@
+import cn from "classnames";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Box } from "coral-ui/components";
 
 import CompletionPage from "./Pages/CompletionPage";
@@ -33,7 +35,7 @@ const DeleteAccountModalContents: FunctionComponent<Props> = ({
   }, [step, setStep, closeModal]);
 
   return (
-    <Box className={styles.root}>
+    <Box className={cn(styles.root, CLASSES.deleteMyAccountModal.$root)}>
       {step === 0 && (
         <DescriptionPage
           step={0}

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/CompletionPage.tsx

@@ -1,7 +1,9 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
 import { useCoralContext } from "coral-framework/lib/bootstrap";
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import PageStepBar from "./Common/PageStepBar";
@@ -43,7 +45,7 @@ const CompletionPage: FunctionComponent<Props> = ({
       <Flex
         alignItems="center"
         justifyContent="center"
-        className={styles.header}
+        className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
         <Localized id="profile-settings-deleteAccount-pages-completeHeader">
           <Typography variant="header2" className={styles.headerText}>
@@ -106,6 +108,7 @@ const CompletionPage: FunctionComponent<Props> = ({
             color="primary"
             fullWidth
             onClick={onDoneClicked}
+            className={CLASSES.deleteMyAccountModal.doneButton}
           >
             <Localized id="profile-settings-deleteAccount-pages-done">
               Done

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx

@@ -1,16 +1,19 @@
+import cn from "classnames";
 import { FORM_ERROR, FormApi, FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { InvalidRequestError } from "coral-framework/lib/errors";
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import { colorFromMeta } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import {
   composeValidators,
   required,
   validateDeleteConfirmation,
 } from "coral-framework/lib/validation";
+import CLASSES from "coral-stream/classes";
+import FieldValidationMessage from "coral-stream/common/FieldValidationMessage";
 import {
   Button,
   CallOut,
@@ -94,7 +97,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
       <Flex
         alignItems="center"
         justifyContent="center"
-        className={sharedStyles.header}
+        className={cn(sharedStyles.header, CLASSES.deleteMyAccountModal.header)}
       >
         <Localized id="profile-settings-deleteAccount-pages-confirmHeader">
           <Typography variant="header2" className={sharedStyles.headerText}>
@@ -162,7 +165,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                           autoComplete="confirmation"
                           {...input}
                         />
-                        <ValidationMessage fullWidth meta={meta} />
+                        <FieldValidationMessage fullWidth meta={meta} />
                       </FormField>
                     )}
                   </Field>
@@ -183,7 +186,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                           autoComplete="password"
                           {...input}
                         />
-                        <ValidationMessage fullWidth meta={meta} />
+                        <FieldValidationMessage fullWidth meta={meta} />
                       </FormField>
                     )}
                   </Field>
@@ -201,7 +204,10 @@ const ConfirmPage: FunctionComponent<Props> = ({
                     <Localized id="profile-settings-deleteAccount-pages-cancel">
                       <Button
                         variant="outlined"
-                        className={sharedStyles.cancelButton}
+                        className={cn(
+                          sharedStyles.cancelButton,
+                          CLASSES.deleteMyAccountModal.cancelButton
+                        )}
                         onClick={onCancelClicked}
                       >
                         Cancel
@@ -213,7 +219,10 @@ const ConfirmPage: FunctionComponent<Props> = ({
                         variant="filled"
                         type="submit"
                         disabled={preventSubmit(formProps)}
-                        className={sharedStyles.deleteButton}
+                        className={cn(
+                          sharedStyles.deleteButton,
+                          CLASSES.deleteMyAccountModal.deleteMyAccountButton
+                        )}
                       >
                         Delete my account
                       </Button>

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DescriptionPage.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import PageStepBar from "./Common/PageStepBar";
@@ -30,7 +32,7 @@ const DescriptionPage: FunctionComponent<Props> = ({
       <Flex
         alignItems="center"
         justifyContent="center"
-        className={styles.header}
+        className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
         <Localized id="profile-settings-deleteAccount-pages-descriptionHeader">
           <Typography variant="header2" className={styles.headerText}>
@@ -72,7 +74,10 @@ const DescriptionPage: FunctionComponent<Props> = ({
           <Button
             variant="filled"
             color="primary"
-            className={styles.proceedButton}
+            className={cn(
+              styles.proceedButton,
+              CLASSES.deleteMyAccountModal.proceedButton
+            )}
             onClick={onProceedClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-proceed">
@@ -81,7 +86,10 @@ const DescriptionPage: FunctionComponent<Props> = ({
           </Button>
           <Button
             variant="outlined"
-            className={styles.cancelButton}
+            className={cn(
+              styles.cancelButton,
+              CLASSES.deleteMyAccountModal.cancelButton
+            )}
             onClick={onCancelClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-cancel">

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DownloadCommentsPage.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import PageStepBar from "./Common/PageStepBar";
@@ -30,7 +32,7 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
       <Flex
         alignItems="center"
         justifyContent="center"
-        className={styles.header}
+        className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
         <Localized id="profile-settings-deleteAccount-pages-downloadCommentHeader">
           <Typography variant="header2" className={styles.headerText}>
@@ -58,7 +60,10 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
           <Button
             variant="filled"
             color="primary"
-            className={styles.proceedButton}
+            className={cn(
+              styles.proceedButton,
+              CLASSES.deleteMyAccountModal.proceedButton
+            )}
             onClick={onProceedClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-proceed">
@@ -67,7 +72,10 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
           </Button>
           <Button
             variant="outlined"
-            className={styles.cancelButton}
+            className={cn(
+              styles.cancelButton,
+              CLASSES.deleteMyAccountModal.cancelButton
+            )}
             onClick={onCancelClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-cancel">

src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/WhenPage.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Button, Flex, Typography } from "coral-ui/components";
 
 import PageStepBar from "./Common/PageStepBar";
@@ -26,7 +28,7 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
       <Flex
         alignItems="center"
         justifyContent="center"
-        className={styles.header}
+        className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
         <Localized id="profile-settings-deleteAccount-pages-whenHeader">
           <Typography variant="header2" className={styles.headerText}>
@@ -64,7 +66,10 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
           <Button
             variant="filled"
             color="primary"
-            className={styles.proceedButton}
+            className={cn(
+              styles.proceedButton,
+              CLASSES.deleteMyAccountModal.proceedButton
+            )}
             onClick={onProceedClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-proceed">
@@ -73,7 +78,10 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
           </Button>
           <Button
             variant="outlined"
-            className={styles.cancelButton}
+            className={cn(
+              styles.cancelButton,
+              CLASSES.deleteMyAccountModal.cancelButton
+            )}
             onClick={onCancelClicked}
           >
             <Localized id="profile-settings-deleteAccount-pages-cancel">

src/core/client/stream/tabs/Profile/Settings/DownloadCommentsContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
@@ -7,6 +8,7 @@ import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { DownloadCommentsContainer_viewer } from "coral-stream/__generated__/DownloadCommentsContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import { Button, CallOut, Icon, Typography } from "coral-ui/components";
 
 import RequestCommentsDownloadMutation from "./RequestCommentsDownloadMutation";
@@ -49,7 +51,7 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
   ]);
 
   return (
-    <div className={styles.root}>
+    <div className={cn(styles.root, CLASSES.downloadCommentHistory.$root)}>
       <Localized id="profile-settings-download-comments-title">
         <Typography variant="heading3" className={styles.title}>
           Download my comment history
@@ -69,13 +71,24 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
           id="profile-settings-download-comments-recentRequest"
           $timeStamp={formatter.format(lastDownloadedAt)}
         >
-          <Typography variant="bodyCopy" className={styles.recentRequest}>
+          <Typography
+            variant="bodyCopy"
+            className={cn(
+              styles.recentRequest,
+              CLASSES.downloadCommentHistory.recentRequest
+            )}
+          >
             Your most recent request: {formatter.format(lastDownloadedAt)}
           </Typography>
         </Localized>
       )}
       {canDownload ? (
-        <Button variant="outlined" size="small" onClick={onClick}>
+        <Button
+          className={CLASSES.downloadCommentHistory.requestButton}
+          variant="outlined"
+          size="small"
+          onClick={onClick}
+        >
           <Localized
             id="profile-settings-download-comments-request-icon"
             attrs={{ title: true }}
@@ -89,7 +102,13 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
           </Localized>
         </Button>
       ) : (
-        <CallOut fullWidth className={styles.callout}>
+        <CallOut
+          className={cn(
+            styles.callout,
+            CLASSES.downloadCommentHistory.requestLater
+          )}
+          fullWidth
+        >
           <Icon size="lg" className={styles.icon}>
             query_builder
           </Icon>

src/core/client/stream/tabs/Profile/Settings/IgnoreUserSettingsContainer.tsx

@@ -4,6 +4,7 @@ import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { IgnoreUserSettingsContainer_viewer as ViewerData } from "coral-stream/__generated__/IgnoreUserSettingsContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   Flex,
@@ -23,7 +24,10 @@ interface Props {
 const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
   const removeUserIgnore = useMutation(RemoveUserIgnoreMutation);
   return (
-    <div data-testid="profile-settings-ignoredCommenters">
+    <div
+      className={CLASSES.ignoredCommenters.$root}
+      data-testid="profile-settings-ignoredCommenters"
+    >
       <Localized id="profile-settings-ignoredCommenters">
         <Typography variant="heading3">Ignored Commenters</Typography>
       </Localized>
@@ -40,8 +44,11 @@ const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
             justifyContent="space-between"
             alignItems="center"
           >
-            <Username>{user.username}</Username>
+            <Username className={CLASSES.ignoredCommenters.username}>
+              {user.username}
+            </Username>
             <Button
+              className={CLASSES.ignoredCommenters.stopIgnoreButton}
               size="small"
               color="primary"
               onClick={() => removeUserIgnore({ userID: user.id })}

src/core/client/stream/tabs/Profile/Settings/Username.tsx

@@ -1,9 +1,15 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import styles from "./Username.css";
 
-const Username: FunctionComponent = ({ children }) => (
-  <span className={styles.root}>{children}</span>
+interface Props {
+  className: string;
+  children: React.ReactNode;
+}
+
+const Username: FunctionComponent<Props> = ({ className, children }) => (
+  <span className={cn(className, styles.root)}>{children}</span>
 );
 
 export default Username;

src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
 >
   <ul
     className="TabBar-root TabBar-primary coral coral-tabBar"
@@ -34,19 +34,19 @@ exports[`renders comment stream 1`] = `
   </ul>
   <section
     aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
+    className="App-tabContent coral coral-comments"
     data-testid="current-tab-pane"
     id="tabPane-COMMENTS"
     role="tabpanel"
   >
     <div
-      className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root StreamContainer-root coral coral-unauthenticated HorizontalGutter-double"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+        className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
           data-color="primary"
           data-variant="underlined"
           onBlur={[Function]}
@@ -60,7 +60,7 @@ exports[`renders comment stream 1`] = `
           Sign in
         </button>
         <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
           data-color="primary"
           data-variant="outlined"
           onBlur={[Function]}
@@ -125,12 +125,12 @@ exports[`renders comment stream 1`] = `
                     title="Bold"
                     type="button"
                   >
-                    <span
+                    <i
                       aria-hidden="true"
                       className="Icon-root Icon-md"
                     >
                       format_bold
-                    </span>
+                    </i>
                   </button>
                   <button
                     className="Button-button"
@@ -139,12 +139,12 @@ exports[`renders comment stream 1`] = `
                     title="Italic"
                     type="button"
                   >
-                    <span
+                    <i
                       aria-hidden="true"
                       className="Icon-root Icon-md"
                     >
                       format_italic
-                    </span>
+                    </i>
                   </button>
                   <button
                     className="Button-button"
@@ -153,12 +153,12 @@ exports[`renders comment stream 1`] = `
                     title="Blockquote"
                     type="button"
                   >
-                    <span
+                    <i
                       aria-hidden="true"
                       className="Icon-root Icon-md"
                     >
                       format_quote
-                    </span>
+                    </i>
                   </button>
                 </div>
               </div>
@@ -228,12 +228,12 @@ exports[`renders comment stream 1`] = `
               aria-hidden={true}
               className="SelectField-afterWrapper undefined"
             >
-              <span
+              <i
                 aria-hidden="true"
                 className="Icon-root Icon-sm"
               >
                 expand_more
-              </span>
+              </i>
             </span>
           </span>
         </div>
@@ -280,6 +280,7 @@ exports[`renders comment stream 1`] = `
         </ul>
         <section
           aria-labelledby="tab-FEATURED_COMMENTS"
+          className="coral coral-featuredComments"
           id="tabPane-FEATURED_COMMENTS"
           role="tabpanel"
         >
@@ -291,11 +292,11 @@ exports[`renders comment stream 1`] = `
             role="log"
           >
             <div
-              className="FeaturedCommentContainer-root"
+              className="coral coral-featuredComment FeaturedCommentContainer-root"
               data-testid="featuredComment-comment-0"
             >
               <div
-                className="HTMLContent-root"
+                className="HTMLContent-root coral coral-content coral-featuredComment-content"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "Joining Too",
@@ -303,14 +304,14 @@ exports[`renders comment stream 1`] = `
                 }
               />
               <div
-                className="Box-root Flex-root Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
+                className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="username-popover"
-                    className="BaseButton-root"
+                    className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -320,7 +321,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -343,7 +344,7 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Box-ml-1"
                 />
                 <time
-                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
+                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -351,10 +352,10 @@ exports[`renders comment stream 1`] = `
                 </time>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Box-mt-2"
+                className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-featuredComment-reactButton"
                   data-color="regular"
                   data-variant="ghost"
                   disabled={false}
@@ -375,7 +376,7 @@ exports[`renders comment stream 1`] = `
                 >
                   <div>
                     <a
-                      className="TextLink-root FeaturedCommentContainer-gotoConversation"
+                      className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
                       href="http://localhost/stories/story-with-featured-comments?commentID=comment-0"
                       onClick={[Function]}
                     >
@@ -393,11 +394,11 @@ exports[`renders comment stream 1`] = `
               </div>
             </div>
             <div
-              className="FeaturedCommentContainer-root"
+              className="coral coral-featuredComment FeaturedCommentContainer-root"
               data-testid="featuredComment-comment-1"
             >
               <div
-                className="HTMLContent-root"
+                className="HTMLContent-root coral coral-content coral-featuredComment-content"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "What's up?",
@@ -405,14 +406,14 @@ exports[`renders comment stream 1`] = `
                 }
               />
               <div
-                className="Box-root Flex-root Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
+                className="Box-root Flex-root coral coral-featuredComment-authorBar Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="username-popover"
-                    className="BaseButton-root"
+                    className="BaseButton-root coral coral-username coral-comment-username"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -422,7 +423,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Lukas
                     </span>
@@ -445,7 +446,7 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Box-ml-1"
                 />
                 <time
-                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
+                  className="RelativeTime-root Timestamp-root Box-root Box-ml-2"
                   dateTime="2018-07-06T18:24:00.000Z"
                   title="2018-07-06T18:24:00.000Z"
                 >
@@ -453,10 +454,10 @@ exports[`renders comment stream 1`] = `
                 </time>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Box-mt-2"
+                className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-featuredComment-reactButton"
                   data-color="regular"
                   data-variant="ghost"
                   disabled={false}
@@ -477,7 +478,7 @@ exports[`renders comment stream 1`] = `
                 >
                   <div>
                     <a
-                      className="TextLink-root FeaturedCommentContainer-gotoConversation"
+                      className="TextLink-root coral coral-featuredComment-goToConversationButton FeaturedCommentContainer-gotoConversation"
                       href="http://localhost/stories/story-with-featured-comments?commentID=comment-1"
                       onClick={[Function]}
                     >