[CORL-561, CORL-562] Comment stream and account profile styling cleanup (#2517)

* update styles for comment stream

* more comment styling fixes

* reconfigure settings tab and account settings in stream

* add new button variant

* style settings tab

* style change username/email/password

* clean up settings tab

* integrate account deletion to account settings

* update comment history styles

* more history comment styles

* update snaps

* move userbox

* fix tests

* fix delete account tests

* update message box styling

* update snap

* update snaps

* fix lints

* update snaps again

* userbox styles

* history comment styling

* update snaps

* fix ts

* Integrate notifications settings

* clean up account setting styles

* update snaps and tests

* fix lints

* fix: PENDING_DELETION permissions

* chore: sync stable classnames, rename settings to account

* simplify css

* update snaps

src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap

@@ -873,9 +873,9 @@ based on the needs of your community.
                       Preview
                     </h1>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={true}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -932,9 +932,9 @@ based on the needs of your community.
                       Preview
                     </h1>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={true}
                       onBlur={[Function]}
                       onClick={[Function]}

src/core/client/stream/classes.ts

@@ -101,6 +101,12 @@ const CLASSES = {
     myComments:
       "coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments",
 
+    /**
+     * notifications is the button for the "Notifications" tab.
+     */
+    notifications:
+      "coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications",
+
     /**
      * settings is the button for the "Settings" tab.
      */
@@ -720,10 +726,17 @@ const CLASSES = {
   },
 
   /**
-   * settingsTabPane is the tab pane that shows viewers settings.
+   * notificationsTabPane is the tab pane that shows notifications settings.
    */
-  settingsTabPane: {
-    $root: "coral coral-settings",
+  notificationsTabPane: {
+    $root: "coral coral-notifications",
+  },
+
+  /**
+   * accountTabPane is the tab pane that shows account settings.
+   */
+  accountTabPane: {
+    $root: "coral coral-account",
   },
 
   /**
@@ -731,19 +744,25 @@ const CLASSES = {
    */
   ignoredCommenters: {
     $root: "coral coral-ignoredCommenters",
+    manageButton: "coral coral-ignoredComments-manageButton",
     username: "coral coral-ignoredCommenters-username",
     stopIgnoreButton: "coral coral-ignoredCommenters-stopIgnoreButton",
   },
 
   /**
-   * changePassword allows the viewer to change password in settings.
+   * myPassword 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",
+  myPassword: {
+    $root: "coral coral-myPassword",
+    editButton: "coral coral-myPassword-editButton",
+    form: {
+      $root: "coral coral-changePassword",
+      cancelButton: "coral coral-changePassword-cancelButton",
+      forgotButton: "coral coral-changePassword-forgotButton",
+      changeButton: "coral coral-changePassword-changeButton",
+      successMessage: "coral coral-changePassword-successMessage",
+      errorMessage: "coral coral-changePassword-errorMessage",
+    },
   },
 
   /**
@@ -831,6 +850,11 @@ const CLASSES = {
     openButton: "coral coral-openCommentStream-openButton",
   },
 
+  emailNotifications: {
+    $root: "coral coral-emailNotifications",
+    updateButton: "coral coral-emailNotifications-updateButton",
+  },
+
   /**
    * spinner is the loading indicator.
    */

src/core/client/stream/common/MessageBox/MessageBox.css

@@ -3,8 +3,10 @@
   position: relative;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.5 * var(--mini-unit) + 1px) var(--mini-unit);
+  padding: var(--spacing-3);
   box-sizing: border-box;
   width: 100%;
   background-color: var(--palette-text-primary);
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }

src/core/client/stream/common/MessageBox/MessageBoxIcon.css

@@ -4,6 +4,6 @@
   flex-shrink: 0;
   color: var(--palette-text-light);
   &:first-child {
-    margin-right: calc(0.5 * var(--mini-unit));
+    margin-right: var(--spacing-3);
   }
 }

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

@@ -1,3 +1,14 @@
 .child {
   width: initial;
 }
+
+.userBoxText {
+  font-size: var(--font-size-4);
+}
+
+.userBoxButton {
+  font-size: var(--font-size-4);
+  padding: 0;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: normal;
+}

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

@@ -1,9 +1,12 @@
+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 "./UserBoxAuthenticated.css";
+
 export interface UserBoxAuthenticatedProps {
   onSignOut?: () => void;
   username: string;
@@ -14,7 +17,7 @@ const UserBoxAuthenticated: FunctionComponent<
   UserBoxAuthenticatedProps
 > = props => {
   const Username = () => (
-    <Typography variant="bodyCopyBold" container="span">
+    <Typography variant="heading3" container="span">
       {props.username}
     </Typography>
   );
@@ -25,7 +28,11 @@ const UserBoxAuthenticated: FunctionComponent<
         id="general-userBoxAuthenticated-signedInAs"
         Username={<Username />}
       >
-        <Typography variant="bodyCopy" container="div">
+        <Typography
+          className={styles.userBoxText}
+          variant="bodyCopy"
+          container="div"
+        >
           {"Signed in as <Username></Username>."}
         </Typography>
       </Localized>
@@ -36,13 +43,20 @@ const UserBoxAuthenticated: FunctionComponent<
             <Button
               color="primary"
               size="small"
-              variant="underlined"
               onClick={props.onSignOut}
-              className={CLASSES.viewerBox.logoutButton}
+              variant="regular"
+              className={cn(
+                styles.userBoxButton,
+                CLASSES.viewerBox.logoutButton
+              )}
             />
           }
         >
-          <Typography variant="bodyCopy" container={Flex}>
+          <Typography
+            variant="bodyCopy"
+            className={styles.userBoxText}
+            container={Flex}
+          >
             {"Not you? <button>Sign Out</button>"}
           </Typography>
         </Localized>

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

@@ -11,6 +11,7 @@ exports[`renders correctly with logout button 1`] = `
     id="general-userBoxAuthenticated-signedInAs"
   >
     <ForwardRef(forwardRef)
+      className="UserBoxAuthenticated-userBoxText"
       container="div"
       variant="bodyCopy"
     >
@@ -20,16 +21,17 @@ exports[`renders correctly with logout button 1`] = `
   <Localized
     button={
       <ForwardRef(forwardRef)
-        className="coral coral-viewerBox-logoutButton"
+        className="UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
         color="primary"
         onClick={[Function]}
         size="small"
-        variant="underlined"
+        variant="regular"
       />
     }
     id="general-userBoxAuthenticated-notYou"
   >
     <ForwardRef(forwardRef)
+      className="UserBoxAuthenticated-userBoxText"
       container={
         Object {
           "$$typeof": Symbol(react.forward_ref),
@@ -55,6 +57,7 @@ exports[`renders correctly without logout button 1`] = `
     id="general-userBoxAuthenticated-signedInAs"
   >
     <ForwardRef(forwardRef)
+      className="UserBoxAuthenticated-userBoxText"
       container="div"
       variant="bodyCopy"
     >

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

@@ -11,7 +11,8 @@ enum TAB {
 
 enum PROFILE_TAB {
   MY_COMMENTS
-  SETTINGS
+  ACCOUNT
+  NOTIFICATIONS
 }
 
 enum COMMENTS_TAB {

src/core/client/stream/shared/htmlContent.css

@@ -1,5 +1,6 @@
 .root {
   composes: bodyCopy from "coral-ui/shared/typography.css";
+  color: var(--palette-text-dark);
   overflow-wrap: break-word;
 
   & * bold,

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

@@ -4,7 +4,7 @@ import { Flex } from "coral-ui/components";
 
 const ButtonsBar: FunctionComponent = props => {
   return (
-    <Flex direction="row" itemGutter="half">
+    <Flex direction="row" itemGutter="half" alignItems="center">
       {props.children}
     </Flex>
   );

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

@@ -1,5 +1,6 @@
 .root {
 }
+
 .highlight {
   background-color: var(--palette-primary-lightest);
   padding: var(--mini-unit);

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

@@ -27,9 +27,12 @@ export interface CommentProps {
 
 const Comment: FunctionComponent<CommentProps> = props => {
   return (
-    <div
+    <HorizontalGutter
       role="article"
-      className={cn(styles.root, { [styles.highlight]: props.highlight })}
+      size="half"
+      className={cn(styles.root, {
+        [styles.highlight]: props.highlight,
+      })}
     >
       <Flex
         direction="row"
@@ -58,13 +61,13 @@ const Comment: FunctionComponent<CommentProps> = props => {
         </div>
       )}
 
-      <HorizontalGutter spacing={1}>
+      <HorizontalGutter size="oneAndAHalf">
         <HTMLContent className={CLASSES.comment.content}>
           {props.body || ""}
         </HTMLContent>
         {props.footer}
       </HorizontalGutter>
-    </div>
+    </HorizontalGutter>
   );
 };
 

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

@@ -1,9 +1,7 @@
 .icon {
-  color: var(--palette-grey-light);
-}
-.inReplyTo {
-  color: var(--palette-grey-light);
-}
-.username {
-  color: var(--palette-grey-dark);
+  color: var(--palette-text-dark);
 }
+
+.username {}
+
+.inReplyTo {}

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

@@ -14,8 +14,9 @@ interface Props {
 const InReplyTo: FunctionComponent<Props> = ({ username }) => {
   const Username = () => (
     <Typography
-      variant="heading5"
+      variant="heading4"
       container="span"
+      color="textDark"
       className={cn(styles.username, CLASSES.comment.inReplyTo.username)}
     >
       {username}

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

@@ -3,8 +3,8 @@ import React, { FunctionComponent } from "react";
 
 import {
   Button,
-  ButtonIcon,
   ClickOutside,
+  Icon,
   MatchMedia,
   Popover,
 } from "coral-ui/components";
@@ -43,13 +43,14 @@ const Permalink: FunctionComponent<PermalinkProps> = ({
             onClick={toggleVisibility}
             aria-controls={popoverID}
             ref={ref}
-            variant="ghost"
+            variant="textUnderlined"
             active={visible}
             size="small"
+            color="primary"
             className={className}
           >
             <MatchMedia gtWidth="xs">
-              <ButtonIcon>share</ButtonIcon>
+              <Icon>share</Icon>
             </MatchMedia>
             <Localized id="comments-permalinkButton-share">
               <span>Share</span>

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

@@ -4,4 +4,4 @@
 
 .textField {
   flex-grow: 1;
-}
+}

src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.css

@@ -3,3 +3,7 @@
   color: var(--palette-text-primary) !important;
   opacity: 1 !important;
 }
+
+.button {
+  padding-left: 0;
+}

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

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React from "react";
 
-import { Button, ButtonIcon, MatchMedia } from "coral-ui/components";
+import { Button, Icon, MatchMedia } from "coral-ui/components";
 import { ButtonProps } from "coral-ui/components/Button";
 
 import styles from "./ReactionButton.css";
@@ -24,20 +24,25 @@ class ReactionButton extends React.Component<ReactionButtonProps> {
     const { totalReactions, reacted, readOnly, className } = this.props;
     return (
       <Button
-        variant="ghost"
+        variant="textUnderlined"
         size="small"
         onClick={this.props.onClick}
         disabled={readOnly}
-        className={cn({ [styles.readOnly]: readOnly }, className)}
+        color="primary"
+        className={cn(
+          { [styles.readOnly]: readOnly },
+          className,
+          styles.button
+        )}
       >
         <MatchMedia gtWidth="xs">
-          <ButtonIcon>
+          <Icon>
             {reacted
               ? this.props.iconActive
                 ? this.props.iconActive
                 : this.props.icon
               : this.props.icon}
-          </ButtonIcon>
+          </Icon>
         </MatchMedia>
         <span>{reacted ? this.props.labelActive : this.props.label}</span>
         {!!totalReactions && <span>{totalReactions}</span>}

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

@@ -0,0 +1 @@
+.root {}

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

@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { EventHandler, FunctionComponent, MouseEvent } from "react";
 
-import { Button, ButtonIcon, MatchMedia } from "coral-ui/components";
+import { Button, Icon, MatchMedia } from "coral-ui/components";
 
 interface Props {
   id?: string;
@@ -16,13 +16,14 @@ const ReplyButton: FunctionComponent<Props> = props => (
     className={props.className}
     id={props.id}
     onClick={props.onClick}
-    variant="ghost"
+    variant="textUnderlined"
+    color="primary"
     size="small"
     active={props.active}
     disabled={props.disabled}
   >
     <MatchMedia gtWidth="xs">
-      <ButtonIcon>reply</ButtonIcon>
+      <Icon>reply</Icon>
     </MatchMedia>
     <Localized id="comments-replyButton-reply">
       <span>Reply</span>

src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.css

@@ -3,4 +3,4 @@
     color: var(--palette-error-main);
     opacity: 1;
   }
-}
+}

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

@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { Ref } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Button, ButtonIcon, MatchMedia } from "coral-ui/components";
+import { Button, Icon, MatchMedia } from "coral-ui/components";
 import { withForwardRef } from "coral-ui/hocs";
 
 import styles from "./ReportButton.css";
@@ -28,13 +28,21 @@ class ReportButton extends React.Component<Props> {
         {...rest}
         active={active}
         disabled={!active && reported}
-        classes={(reported && !active && styles) || {}}
-        variant="ghost"
+        classes={
+          (reported &&
+            !active && {
+              variantGhost: styles.variantGhost,
+              colorRegular: styles.colorRegular,
+            }) ||
+          {}
+        }
+        variant="textUnderlined"
         size="small"
+        color="error"
         ref={ref}
       >
         <MatchMedia gtWidth="xs">
-          <ButtonIcon>flag</ButtonIcon>
+          <Icon>flag</Icon>
         </MatchMedia>
         {!reported && (
           <Localized id="comments-reportButton-report">

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

@@ -14,6 +14,7 @@ const Username: FunctionComponent<Props> = props => {
   return (
     <Typography
       variant={"heading3"}
+      color="textDark"
       className={cn(styles.root, props.className)}
       container="span"
     >

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

@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
+  alignItems="center"
   direction="row"
   itemGutter="half"
 >

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

@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders username and body 1`] = `
-<div
+<ForwardRef(forwardRef)
   className="Comment-root"
   role="article"
+  size="half"
 >
   <ForwardRef(forwardRef)
     className="coral coral-comment-topBar"
@@ -38,7 +39,7 @@ exports[`renders username and body 1`] = `
     </div>
   </ForwardRef(forwardRef)>
   <ForwardRef(forwardRef)
-    spacing={1}
+    size="oneAndAHalf"
   >
     <HTMLContent
       className="coral coral-content coral-comment-content"
@@ -47,5 +48,5 @@ exports[`renders username and body 1`] = `
     </HTMLContent>
     footer
   </ForwardRef(forwardRef)>
-</div>
+</ForwardRef(forwardRef)>
 `;

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

@@ -3,10 +3,11 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   active={true}
+  color="primary"
   id="id"
   onClick={[Function]}
   size="small"
-  variant="ghost"
+  variant="textUnderlined"
 >
   <MatchMediaWithContext
     gtWidth="xs"

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

@@ -0,0 +1,4 @@
+.stream > *:not(:first-child):not(button) {
+  border-top: 1px solid var(--palette-divider);
+  padding-top: var(--spacing-3)
+}

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

@@ -26,6 +26,8 @@ import { ReplyListContainer } from "../../ReplyList";
 import AllCommentsTabViewNewMutation from "./AllCommentsTabViewNewMutation";
 import CommentCreatedSubscription from "./CommentCreatedSubscription";
 
+import styles from "./AllCommentsTabContainer.css";
+
 interface Props {
   story: AllCommentsTabContainer_story;
   settings: AllCommentsTabContainer_settings;
@@ -123,6 +125,8 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
         data-testid="comments-allComments-log"
         role="log"
         aria-live="polite"
+        size="oneAndAHalf"
+        className={styles.stream}
       >
         {comments.map(comment => (
           <IgnoredTombstoneOrHideContainer
@@ -152,7 +156,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
           <Localized id="comments-loadMore">
             <Button
               onClick={loadMore}
-              variant="outlined"
+              variant="outlineFilled"
               fullWidth
               disabled={isLoadingMore}
               aria-controls="comments-allComments-log"

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

@@ -5,3 +5,7 @@
 .poweredBy {
   margin-top: calc(-0.5 * var(--mini-unit));
 }
+
+.rteBorderless {
+  border-top-width: 0;
+}

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

@@ -79,6 +79,11 @@ const PostCommentForm: FunctionComponent<Props> = props => (
                         onChange={({ html }) =>
                           input.onChange(cleanupRTEEmptyHTML(html))
                         }
+                        contentClassName={
+                          props.showMessageBox
+                            ? styles.rteBorderless
+                            : undefined
+                        }
                         value={input.value}
                         placeholder="Post a comment"
                         disabled={submitting || props.disabled}

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

@@ -28,11 +28,6 @@ interface CommentHistoryProps {
 const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
   return (
     <HorizontalGutter size="double" data-testid="profile-commentHistory">
-      {props.comments.length > 0 && (
-        <Localized id="profile-historyComment-commentHistory">
-          <Typography variant="heading3">Comment History</Typography>
-        </Localized>
-      )}
       {props.comments.length < 1 && (
         <Flex
           direction="column"
@@ -64,7 +59,7 @@ const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
           <Button
             id={"coral-profile-commentHistory-loadMore"}
             onClick={props.onLoadMore}
-            variant="outlined"
+            variant="outlineFilled"
             fullWidth
             disabled={props.disableLoadMore}
             aria-controls="coral-profile-commentHistory-log"

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

@@ -1,13 +1,34 @@
+.root:not(:first-child) {
+  border-top: 1px solid var(--palette-divider);
+  padding-top: var(--spacing-3)
+}
+
 .icon {
-  color: var(--palette-text-secondary);
+  color: var(--palette-text-primary);
   margin-right: calc(0.5 * var(--mini-unit));
 }
 
 .replies {
   composes: button from "coral-ui/shared/typography.css";
+  color: var(--palette-text-primary);
+  display: inline-flex;
+  align-items: center;
 }
 
 .viewConversation {
   composes: button from "coral-ui/shared/typography.css";
-  color: var(--palette-grey-main);
 }
+
+.container {
+  border-bottom: 1px solid var(--palette-divider);
+  padding-bottom: var(--spacing-3)
+}
+
+.commentOn {
+  font-weight: var(--font-weight-medium);
+  margin-bottom: 0;
+}
+
+.subBar {
+  margin-bottom: calc(0.5 * var(--mini-unit));
+}

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

@@ -5,6 +5,7 @@ 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 InReplyTo from "coral-stream/tabs/Comments/Comment/InReplyTo";
 import {
   Flex,
   HorizontalGutter,
@@ -20,6 +21,7 @@ export interface HistoryCommentProps {
   body: string | null;
   createdAt: string;
   replyCount: number | null;
+  parentAuthorName?: string | null;
   story: {
     metadata: {
       title: string | null;
@@ -32,28 +34,41 @@ export interface HistoryCommentProps {
 const HistoryComment: FunctionComponent<HistoryCommentProps> = props => {
   return (
     <HorizontalGutter
-      className={CLASSES.myComment.$root}
+      className={cn(styles.root, 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 className={CLASSES.myComment.story} variant="heading4">
-          {"Story: {$title}"}
+      <div>
+        <Localized id="profile-historyComment-comment-on">
+          <Typography variant="detail" className={styles.commentOn}>
+            Comment on:
+          </Typography>
+        </Localized>
+        <Typography
+          variant="heading4"
+          color="textDark"
+          className={CLASSES.myComment.story}
+        >
+          {props.story.metadata ? props.story.metadata.title : "N/A"}
         </Typography>
-      </Localized>
-      <Timestamp className={CLASSES.myComment.timestamp}>
-        {props.createdAt}
-      </Timestamp>
-      <Typography variant="bodyCopy" container="div">
-        {props.body && (
-          <HTMLContent className={CLASSES.myComment.content}>
-            {props.body}
-          </HTMLContent>
+      </div>
+      <div>
+        <Timestamp className={CLASSES.myComment.timestamp}>
+          {props.createdAt}
+        </Timestamp>
+        {props.parentAuthorName && (
+          <div className={styles.subBar}>
+            <InReplyTo username={props.parentAuthorName} />
+          </div>
         )}
-      </Typography>
-      <Flex direction="row" alignItems="center" itemGutter>
+        <Typography variant="bodyCopy" container="div">
+          {props.body && (
+            <HTMLContent className={CLASSES.myComment.content}>
+              {props.body}
+            </HTMLContent>
+          )}
+        </Typography>
+      </div>
+      <Flex direction="row" alignItems="center" itemGutter="double">
         {!!props.replyCount && (
           <div className={cn(styles.replies, CLASSES.myComment.replies)}>
             <Icon className={styles.icon}>reply</Icon>

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

@@ -31,6 +31,11 @@ export class HistoryCommentContainer extends React.Component<
     return (
       <HistoryComment
         {...this.props.comment}
+        parentAuthorName={
+          this.props.comment.parent &&
+          this.props.comment.parent.author &&
+          this.props.comment.parent.author.username
+        }
         conversationURL={getURLWithCommentID(
           this.props.comment.story.url,
           this.props.comment.id
@@ -54,6 +59,11 @@ const enhanced = withSetCommentIDMutation(
         body
         createdAt
         replyCount
+        parent {
+          author {
+            username
+          }
+        }
         story {
           id
           url

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

@@ -5,15 +5,6 @@ exports[`has more disables load more 1`] = `
   data-testid="profile-commentHistory"
   size="double"
 >
-  <Localized
-    id="profile-historyComment-commentHistory"
-  >
-    <ForwardRef(forwardRef)
-      variant="heading3"
-    >
-      Comment History
-    </ForwardRef(forwardRef)>
-  </Localized>
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
     comment={
       Object {
@@ -40,7 +31,7 @@ exports[`has more disables load more 1`] = `
       fullWidth={true}
       id="coral-profile-commentHistory-loadMore"
       onClick={[Function]}
-      variant="outlined"
+      variant="outlineFilled"
     >
       Load More
     </ForwardRef(forwardRef)>
@@ -53,15 +44,6 @@ exports[`has more renders correctly 1`] = `
   data-testid="profile-commentHistory"
   size="double"
 >
-  <Localized
-    id="profile-historyComment-commentHistory"
-  >
-    <ForwardRef(forwardRef)
-      variant="heading3"
-    >
-      Comment History
-    </ForwardRef(forwardRef)>
-  </Localized>
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
     comment={
       Object {
@@ -88,7 +70,7 @@ exports[`has more renders correctly 1`] = `
       fullWidth={true}
       id="coral-profile-commentHistory-loadMore"
       onClick={[Function]}
-      variant="outlined"
+      variant="outlineFilled"
     >
       Load More
     </ForwardRef(forwardRef)>
@@ -101,15 +83,6 @@ exports[`renders correctly 1`] = `
   data-testid="profile-commentHistory"
   size="double"
 >
-  <Localized
-    id="profile-historyComment-commentHistory"
-  >
-    <ForwardRef(forwardRef)
-      variant="heading3"
-    >
-      Comment History
-    </ForwardRef(forwardRef)>
-  </Localized>
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
     comment={
       Object {

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

@@ -2,39 +2,49 @@
 
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
-  className="coral coral-myComment"
+  className="HistoryComment-root coral coral-myComment"
   data-testid="historyComment-comment-id"
 >
-  <Localized
-    $title="Story Title"
-    id="profile-historyComment-story"
-  >
+  <div>
+    <Localized
+      id="profile-historyComment-comment-on"
+    >
+      <ForwardRef(forwardRef)
+        className="HistoryComment-commentOn"
+        variant="detail"
+      >
+        Comment on:
+      </ForwardRef(forwardRef)>
+    </Localized>
     <ForwardRef(forwardRef)
       className="coral coral-myComment-story"
+      color="textDark"
       variant="heading4"
     >
-      Story: {$title}
+      Story Title
     </ForwardRef(forwardRef)>
-  </Localized>
-  <Timestamp
-    className="coral coral-myComment-timestamp"
-  >
-    2018-07-06T18:24:00.000Z
-  </Timestamp>
-  <ForwardRef(forwardRef)
-    container="div"
-    variant="bodyCopy"
-  >
-    <HTMLContent
-      className="coral coral-myComment-content"
+  </div>
+  <div>
+    <Timestamp
+      className="coral coral-myComment-timestamp"
     >
-      Hello World
-    </HTMLContent>
-  </ForwardRef(forwardRef)>
+      2018-07-06T18:24:00.000Z
+    </Timestamp>
+    <ForwardRef(forwardRef)
+      container="div"
+      variant="bodyCopy"
+    >
+      <HTMLContent
+        className="coral coral-myComment-content"
+      >
+        Hello World
+      </HTMLContent>
+    </ForwardRef(forwardRef)>
+  </div>
   <ForwardRef(forwardRef)
     alignItems="center"
     direction="row"
-    itemGutter={true}
+    itemGutter="double"
   >
     <div
       className="HistoryComment-replies coral coral-myComment-replies"

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

@@ -14,25 +14,22 @@ import {
   TabPane,
 } from "coral-ui/components";
 
-import ChangeEmailContainer from "./ChangeEmail";
-import ChangeUsernameContainer from "./ChangeUsername";
 import CommentHistoryContainer from "./CommentHistory";
 import DeletionRequestCalloutContainer from "./DeletionRequest/DeletionRequestCalloutContainer";
-import SettingsContainer from "./Settings";
+import AccountSettingsContainer from "./Settings";
+import NotificationSettingsContainer from "./Settings/NotificationSettingsContainer";
 
 export interface ProfileProps {
   story: PropTypesOf<typeof CommentHistoryContainer>["story"];
   viewer: PropTypesOf<typeof UserBoxContainer>["viewer"] &
     PropTypesOf<typeof CommentHistoryContainer>["viewer"] &
-    PropTypesOf<typeof SettingsContainer>["viewer"] &
-    PropTypesOf<typeof ChangeUsernameContainer>["viewer"] &
-    PropTypesOf<typeof ChangeEmailContainer>["viewer"] &
-    PropTypesOf<typeof SettingsContainer>["viewer"] &
-    PropTypesOf<typeof DeletionRequestCalloutContainer>["viewer"];
+    PropTypesOf<typeof AccountSettingsContainer>["viewer"] &
+    PropTypesOf<typeof AccountSettingsContainer>["viewer"] &
+    PropTypesOf<typeof DeletionRequestCalloutContainer>["viewer"] &
+    PropTypesOf<typeof AccountSettingsContainer>["viewer"] &
+    PropTypesOf<typeof NotificationSettingsContainer>["viewer"];
   settings: PropTypesOf<typeof UserBoxContainer>["settings"] &
-    PropTypesOf<typeof ChangeEmailContainer>["settings"] &
-    PropTypesOf<typeof SettingsContainer>["settings"] &
-    PropTypesOf<typeof ChangeUsernameContainer>["settings"];
+    PropTypesOf<typeof AccountSettingsContainer>["settings"];
 }
 
 const Profile: FunctionComponent<ProfileProps> = props => {
@@ -46,15 +43,8 @@ const Profile: FunctionComponent<ProfileProps> = props => {
     [setLocal]
   );
   return (
-    <HorizontalGutter spacing={5}>
-      <HorizontalGutter spacing={2}>
-        <ChangeUsernameContainer
-          settings={props.settings}
-          viewer={props.viewer}
-        />
-        <ChangeEmailContainer settings={props.settings} viewer={props.viewer} />
-        <DeletionRequestCalloutContainer viewer={props.viewer} />
-      </HorizontalGutter>
+    <HorizontalGutter size="double">
+      <UserBoxContainer viewer={props.viewer} settings={props.settings} />
       <TabBar
         variant="secondary"
         activeTab={local.profileTab}
@@ -62,13 +52,21 @@ const Profile: FunctionComponent<ProfileProps> = props => {
         className={CLASSES.tabBarMyProfile.$root}
       >
         <Tab tabID="MY_COMMENTS" className={CLASSES.tabBarMyProfile.myComments}>
-          <Localized id="profile-myCommentsTab">
-            <span>My Comments</span>
+          <Localized id="profile-myCommentsTab-comments">
+            <span>My comments</span>
           </Localized>
         </Tab>
-        <Tab tabID="SETTINGS" className={CLASSES.tabBarMyProfile.settings}>
-          <Localized id="profile-settingsTab">
-            <span>Settings</span>
+        <Tab
+          tabID="NOTIFICATIONS"
+          className={CLASSES.tabBarMyProfile.notifications}
+        >
+          <Localized id="profile-notificationsTab">
+            <span>Notifications</span>
+          </Localized>
+        </Tab>
+        <Tab tabID="ACCOUNT" className={CLASSES.tabBarMyProfile.settings}>
+          <Localized id="profile-accountTab">
+            <span>Account</span>
           </Localized>
         </Tab>
       </TabBar>
@@ -79,8 +77,18 @@ const Profile: FunctionComponent<ProfileProps> = props => {
         >
           <CommentHistoryContainer viewer={props.viewer} story={props.story} />
         </TabPane>
-        <TabPane className={CLASSES.settingsTabPane.$root} tabID="SETTINGS">
-          <SettingsContainer viewer={props.viewer} settings={props.settings} />
+        <TabPane
+          className={CLASSES.notificationsTabPane.$root}
+          tabID="NOTIFICATIONS"
+        >
+          <NotificationSettingsContainer viewer={props.viewer} />
+        </TabPane>
+        <TabPane className={CLASSES.accountTabPane.$root} tabID="ACCOUNT">
+          <AccountSettingsContainer
+            viewer={props.viewer}
+            settings={props.settings}
+          />
+          <DeletionRequestCalloutContainer viewer={props.viewer} />
         </TabPane>
       </TabContent>
     </HorizontalGutter>

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

@@ -35,18 +35,17 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
     fragment ProfileContainer_viewer on User {
       ...UserBoxContainer_viewer
       ...CommentHistoryContainer_viewer
-      ...SettingsContainer_viewer
+      ...AccountSettingsContainer_viewer
       ...ChangeUsernameContainer_viewer
       ...ChangeEmailContainer_viewer
       ...DeletionRequestCalloutContainer_viewer
+      ...NotificationSettingsContainer_viewer
     }
   `,
   settings: graphql`
     fragment ProfileContainer_settings on Settings {
       ...UserBoxContainer_settings
-      ...ChangeEmailContainer_settings
-      ...ChangeUsernameContainer_settings
-      ...SettingsContainer_settings
+      ...AccountSettingsContainer_settings
     }
   `,
 })(ProfileContainer);

src/core/client/stream/tabs/Profile/Settings/AccountSettingsContainer.css

@@ -0,0 +1,4 @@
+.root > * {
+  border-bottom: 1px solid var(--palette-divider);
+  padding-bottom: var(--spacing-3);
+}

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

@@ -0,0 +1,73 @@
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { AccountSettingsContainer_settings } from "coral-stream/__generated__/AccountSettingsContainer_settings.graphql";
+import { AccountSettingsContainer_viewer } from "coral-stream/__generated__/AccountSettingsContainer_viewer.graphql";
+import { HorizontalGutter, Typography } from "coral-ui/components";
+
+import ChangeEmailContainer from "./ChangeEmail";
+import ChangePasswordContainer from "./ChangePasswordContainer";
+import ChangeUsernameContainer from "./ChangeUsername";
+import DeleteAccountContainer from "./DeleteAccount/DeleteAccountContainer";
+import DownloadCommentsContainer from "./DownloadCommentsContainer";
+import IgnoreUserSettingsContainer from "./IgnoreUserSettingsContainer";
+
+import { Localized } from "fluent-react/compat";
+import styles from "./AccountSettingsContainer.css";
+
+interface Props {
+  viewer: AccountSettingsContainer_viewer;
+  settings: AccountSettingsContainer_settings;
+}
+
+const AccountSettingsContainer: FunctionComponent<Props> = ({
+  viewer,
+  settings,
+}) => (
+  <HorizontalGutter size="oneAndAHalf">
+    <Localized id="accountSettings-manage-account">
+      <Typography variant="heading1">Manage your account</Typography>
+    </Localized>
+    <HorizontalGutter className={styles.root}>
+      <ChangeUsernameContainer settings={settings} viewer={viewer} />
+      <ChangeEmailContainer settings={settings} viewer={viewer} />
+      <ChangePasswordContainer settings={settings} />
+      <IgnoreUserSettingsContainer viewer={viewer} />
+      {settings.accountFeatures.downloadComments && (
+        <DownloadCommentsContainer viewer={viewer} />
+      )}
+      {settings.accountFeatures.deleteAccount && (
+        <DeleteAccountContainer viewer={viewer} settings={settings} />
+      )}
+    </HorizontalGutter>
+  </HorizontalGutter>
+);
+
+const enhanced = withFragmentContainer<Props>({
+  viewer: graphql`
+    fragment AccountSettingsContainer_viewer on User {
+      ...IgnoreUserSettingsContainer_viewer
+      ...DownloadCommentsContainer_viewer
+      ...DeleteAccountContainer_viewer
+      ...ChangeUsernameContainer_viewer
+      ...ChangeEmailContainer_viewer
+      ...UserBoxContainer_viewer
+    }
+  `,
+  settings: graphql`
+    fragment AccountSettingsContainer_settings on Settings {
+      accountFeatures {
+        downloadComments
+        deleteAccount
+      }
+      ...ChangePasswordContainer_settings
+      ...DeleteAccountContainer_settings
+      ...ChangeEmailContainer_settings
+      ...ChangeUsernameContainer_settings
+      ...UserBoxContainer_settings
+    }
+  `,
+})(AccountSettingsContainer);
+
+export default enhanced;

src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css

@@ -1,5 +1,4 @@
 .callOut {
-  max-width: 500px;
 }
 
  .footer {

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

@@ -150,22 +150,32 @@ const changeEmailContainer: FunctionComponent<Props> = ({
       data-testid="profile-changeEmail"
     >
       {!showEditForm && (
-        <Flex alignItems="center">
-          <Typography>{viewer.email}</Typography>{" "}
-          {!viewer.emailVerified && (
-            <Localized id="profile-changeEmail-unverified">
-              <Typography
-                className={CLASSES.myEmail.unverified}
-                color="textSecondary"
-              >
-                (Unverified)
+        <Flex alignItems="center" justifyContent="space-between">
+          <div>
+            <Localized id="profile-changeEmail-email">
+              <Typography color="textDark" variant="heading2">
+                Email
               </Typography>
             </Localized>
-          )}
+            <Flex>
+              <Typography>{viewer.email}</Typography>{" "}
+              {!viewer.emailVerified && (
+                <Localized id="profile-changeEmail-unverified">
+                  <Typography
+                    color="textSecondary"
+                    className={CLASSES.myEmail.unverified}
+                  >
+                    (Unverified)
+                  </Typography>
+                </Localized>
+              )}
+            </Flex>
+          </div>
           {canChangeEmail && (
             <Localized id="profile-changeEmail-edit">
               <Button
                 className={CLASSES.myEmail.editButton}
+                variant="outlineFilled"
                 size="small"
                 color="primary"
                 onClick={toggleEditForm}
@@ -231,11 +241,12 @@ const changeEmailContainer: FunctionComponent<Props> = ({
         <CallOut
           className={cn(styles.callOut, CLASSES.myEmail.form.$root)}
           color="primary"
+          borderless
         >
           <HorizontalGutter spacing={4}>
             <div>
               <Localized id="profile-changeEmail-heading">
-                <Typography variant="heading2" gutterBottom>
+                <Typography variant="heading1" color="textDark" gutterBottom>
                   Edit your email address
                 </Typography>
               </Localized>
@@ -248,15 +259,11 @@ const changeEmailContainer: FunctionComponent<Props> = ({
             </div>
             <div>
               <Localized id="profile-changeEmail-current">
-                <Typography
-                  className={styles.currentEmail}
-                  variant="bodyCopyBold"
-                >
-                  Current email
-                </Typography>
+                <Typography variant="bodyCopyBold">Current email</Typography>
               </Localized>
               <Typography
                 variant="heading2"
+                color="textDark"
                 className={CLASSES.myEmail.form.currentEmail}
               >
                 {viewer.email}

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

@@ -0,0 +1,3 @@
+.callOut {
+  display: block;
+}

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

@@ -1,6 +1,7 @@
+import cn from "classnames";
 import { FORM_ERROR, FormApi } from "final-form";
 import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 import { Field, Form } from "react-final-form";
 
 import { InvalidRequestError } from "coral-framework/lib/errors";
@@ -27,6 +28,8 @@ import {
 
 import UpdatePasswordMutation from "./UpdatePasswordMutation";
 
+import styles from "./ChangePassword.css";
+
 interface Props {
   onResetPassword: () => void;
 }
@@ -60,122 +63,172 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
     [updatePassword]
   );
 
+  const [showForm, setShowForm] = useState(false);
+  const toggleForm = useCallback(() => setShowForm(!showForm), [
+    showForm,
+    setShowForm,
+  ]);
+
   return (
     <div
-      className={CLASSES.changePassword.$root}
-      data-testid="profile-settings-changePassword"
+      data-testid="profile-account-changePassword"
+      className={CLASSES.myPassword.$root}
     >
-      <Form onSubmit={onSubmit}>
-        {({
-          handleSubmit,
-          submitting,
-          submitError,
-          pristine,
-          submitSucceeded,
-        }) => (
-          <form autoComplete="off" onSubmit={handleSubmit}>
-            <HorizontalGutter size="oneAndAHalf">
-              <Localized id="profile-settings-changePassword">
-                <Typography variant="heading3">Change Password</Typography>
-              </Localized>
-              <HorizontalGutter container={<FieldSet />}>
-                <Field
-                  name="oldPassword"
-                  validate={composeValidators(required, validatePassword)}
-                >
-                  {({ input, meta }) => (
-                    <FormField container={<FieldSet />}>
-                      <Localized id="profile-settings-changePassword-oldPassword">
-                        <InputLabel htmlFor={input.name}>
-                          Old Password
-                        </InputLabel>
-                      </Localized>
-                      <PasswordField
-                        fullWidth
-                        id={input.name}
-                        disabled={submitting}
-                        color={colorFromMeta(meta)}
-                        autoComplete="current-password"
-                        {...input}
-                      />
-                      <FieldValidationMessage fullWidth meta={meta} />
+      {!showForm && (
+        <Flex justifyContent="space-between" alignItems="center">
+          <Localized id="profile-account-changePassword-password">
+            <Typography variant="heading2" color="textDark">
+              Password
+            </Typography>
+          </Localized>
 
-                      <Flex justifyContent="flex-end">
-                        <Localized id="profile-settings-changePassword-forgotPassword">
-                          <Button
-                            variant="underlined"
-                            color="primary"
-                            onClick={onResetPassword}
-                            className={CLASSES.changePassword.forgotButton}
+          <Localized id="profile-account-changePassword-edit">
+            <Button
+              variant="outlineFilled"
+              color="primary"
+              size="small"
+              onClick={toggleForm}
+              className={CLASSES.myPassword.editButton}
+            >
+              Edit
+            </Button>
+          </Localized>
+        </Flex>
+      )}
+      {showForm && (
+        <CallOut
+          color="primary"
+          className={cn(styles.callOut, CLASSES.myPassword.form.$root)}
+          borderless
+        >
+          <HorizontalGutter size="oneAndAHalf">
+            <Localized id="profile-account-changePassword">
+              <Typography variant="heading1" color="textDark" gutterBottom>
+                Change Password
+              </Typography>
+            </Localized>
+            <Form onSubmit={onSubmit}>
+              {({
+                handleSubmit,
+                submitting,
+                submitError,
+                pristine,
+                submitSucceeded,
+              }) => (
+                <form autoComplete="off" onSubmit={handleSubmit}>
+                  <HorizontalGutter size="oneAndAHalf">
+                    <HorizontalGutter container={<FieldSet />}>
+                      <Field
+                        name="oldPassword"
+                        validate={composeValidators(required, validatePassword)}
+                      >
+                        {({ input, meta }) => (
+                          <FormField container={<FieldSet />}>
+                            <Localized id="profile-account-changePassword-oldPassword">
+                              <InputLabel htmlFor={input.name}>
+                                Old Password
+                              </InputLabel>
+                            </Localized>
+                            <PasswordField
+                              fullWidth
+                              id={input.name}
+                              disabled={submitting}
+                              color={colorFromMeta(meta)}
+                              autoComplete="current-password"
+                              {...input}
+                            />
+                            <FieldValidationMessage fullWidth meta={meta} />
+
+                            <Flex justifyContent="flex-end">
+                              <Localized id="profile-account-changePassword-forgotPassword">
+                                <Button
+                                  variant="underlined"
+                                  color="primary"
+                                  onClick={onResetPassword}
+                                  className={
+                                    CLASSES.myPassword.form.forgotButton
+                                  }
+                                >
+                                  Forgot your password?
+                                </Button>
+                              </Localized>
+                            </Flex>
+                          </FormField>
+                        )}
+                      </Field>
+                      <Field
+                        name="newPassword"
+                        validate={composeValidators(required, validatePassword)}
+                      >
+                        {({ input, meta }) => (
+                          <FormField container={<FieldSet />}>
+                            <Localized id="profile-account-changePassword-newPassword">
+                              <InputLabel htmlFor={input.name}>
+                                New Password
+                              </InputLabel>
+                            </Localized>
+                            <PasswordField
+                              fullWidth
+                              id={input.name}
+                              disabled={submitting}
+                              color={colorFromMeta(meta)}
+                              autoComplete="new-password"
+                              {...input}
+                            />
+                            <FieldValidationMessage fullWidth meta={meta} />
+                          </FormField>
+                        )}
+                      </Field>
+                      {submitError && (
+                        <CallOut
+                          color="error"
+                          fullWidth
+                          className={CLASSES.myPassword.form.errorMessage}
+                        >
+                          {submitError}
+                        </CallOut>
+                      )}
+                      {submitSucceeded && (
+                        <Localized id="profile-account-changePassword-updated">
+                          <CallOut
+                            color="success"
+                            fullWidth
+                            className={CLASSES.myPassword.form.successMessage}
                           >
-                            Forgot your password?
+                            Your password has been updated
+                          </CallOut>
+                        </Localized>
+                      )}
+                      <Flex justifyContent="flex-end">
+                        <Localized id="profile-account-changePassword-cancel">
+                          <Button
+                            type="button"
+                            onClick={toggleForm}
+                            className={CLASSES.myPassword.form.cancelButton}
+                          >
+                            Cancel
+                          </Button>
+                        </Localized>
+                        <Localized id="profile-account-changePassword-button">
+                          <Button
+                            color="primary"
+                            variant="filled"
+                            className={CLASSES.myPassword.form.changeButton}
+                            type="submit"
+                            disabled={submitting || pristine}
+                          >
+                            Change Password
                           </Button>
                         </Localized>
                       </Flex>
-                    </FormField>
-                  )}
-                </Field>
-                <Field
-                  name="newPassword"
-                  validate={composeValidators(required, validatePassword)}
-                >
-                  {({ input, meta }) => (
-                    <FormField container={<FieldSet />}>
-                      <Localized id="profile-settings-changePassword-newPassword">
-                        <InputLabel htmlFor={input.name}>
-                          New Password
-                        </InputLabel>
-                      </Localized>
-                      <PasswordField
-                        fullWidth
-                        id={input.name}
-                        disabled={submitting}
-                        color={colorFromMeta(meta)}
-                        autoComplete="new-password"
-                        {...input}
-                      />
-                      <FieldValidationMessage fullWidth meta={meta} />
-                    </FormField>
-                  )}
-                </Field>
-                {submitError && (
-                  <CallOut
-                    className={CLASSES.changePassword.errorMessage}
-                    color="error"
-                    fullWidth
-                  >
-                    {submitError}
-                  </CallOut>
-                )}
-                {submitSucceeded && (
-                  <Localized id="profile-settings-changePassword-updated">
-                    <CallOut
-                      className={CLASSES.changePassword.successMessage}
-                      color="success"
-                      fullWidth
-                    >
-                      Your password has been updated
-                    </CallOut>
-                  </Localized>
-                )}
-                <Flex justifyContent="flex-end">
-                  <Localized id="profile-settings-changePassword-button">
-                    <Button
-                      color="primary"
-                      variant="filled"
-                      type="submit"
-                      disabled={submitting || pristine}
-                      className={CLASSES.changePassword.changeButton}
-                    >
-                      Change Password
-                    </Button>
-                  </Localized>
-                </Flex>
-              </HorizontalGutter>
-            </HorizontalGutter>
-          </form>
-        )}
-      </Form>
+                    </HorizontalGutter>
+                  </HorizontalGutter>
+                </form>
+              )}
+            </Form>
+          </HorizontalGutter>
+        </CallOut>
+      )}
     </div>
   );
 };

src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.css

@@ -1,5 +1,4 @@
 .callOut {
-  max-width: 500px;
 }
 
 .footer {
@@ -29,7 +28,3 @@
   float: none;
   position: static;
 }
-
-.currentUsername {
-  color: var(--palette-grey-dark);
-}

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

@@ -78,6 +78,9 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
   ]);
 
   const canChangeLocalAuth = useMemo(() => {
+    if (!settings.accountFeatures.changeUsername) {
+      return false;
+    }
     if (
       !viewer.profiles.find(profile => profile.__typename === "LocalProfile")
     ) {
@@ -168,14 +171,24 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
         </Box>
       )}
       {!showEditForm && (
-        <Flex alignItems="baseline">
-          <Typography variant="header2" className={CLASSES.myUsername.username}>
-            {viewer.username}
-          </Typography>
-          {canChangeLocalAuth && settings.accountFeatures.changeUsername && (
+        <Flex alignItems="baseline" justifyContent="space-between">
+          <div>
+            <Localized id="profile-changeUsername-username">
+              <Typography
+                className={CLASSES.myUsername.username}
+                color="textDark"
+                variant="heading2"
+              >
+                Username
+              </Typography>
+            </Localized>
+            <Typography variant="bodyCopy">{viewer.username}</Typography>
+          </div>
+          {canChangeLocalAuth && (
             <Localized id="profile-changeUsername-edit">
               <Button
                 className={CLASSES.myUsername.editButton}
+                variant="outlineFilled"
                 size="small"
                 color="primary"
                 onClick={toggleEditForm}
@@ -188,45 +201,42 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
       )}
       {showEditForm && (
         <CallOut
+          borderless
           className={cn(styles.callOut, CLASSES.myUsername.form.$root)}
           color="primary"
         >
           <HorizontalGutter spacing={4}>
             <div>
               <Localized id="profile-changeUsername-heading">
-                <Typography variant="heading2" gutterBottom>
+                <Typography variant="heading1" gutterBottom color="textDark">
                   Edit your username
                 </Typography>
               </Localized>
               <Localized
-                id="profile-changeUsername-desc"
-                strong={<strong />}
+                id="profile-changeUsername-desc-text"
                 $value={FREQUENCYSCALED.scaled}
                 $unit={FREQUENCYSCALED.unit}
               >
-                <Typography>
+                <Typography color="textDark">
                   Change the username that will appear on all of your past and
-                  future comments.{" "}
-                  <strong>
-                    Usernames can be changed once every {FREQUENCYSCALED.scaled}{" "}
-                    {FREQUENCYSCALED.unit}.
-                  </strong>
+                  future comments. Usernames can be changed once every{" "}
+                  {FREQUENCYSCALED.scaled} {FREQUENCYSCALED.unit}.
                 </Typography>
               </Localized>
             </div>
             <div>
               <Localized id="profile-changeUsername-current">
                 <Typography
-                  className={cn(
-                    styles.currentUsername,
-                    CLASSES.myUsername.form.username
-                  )}
                   variant="bodyCopyBold"
+                  color="textPrimary"
+                  className={CLASSES.myUsername.form.username}
                 >
                   Current username
                 </Typography>
               </Localized>
-              <Typography variant="heading2">{viewer.username}</Typography>
+              <Typography variant="heading2" color="textDark">
+                {viewer.username}
+              </Typography>
             </div>
             {canChangeUsername && (
               <Form onSubmit={onSubmit}>
@@ -255,6 +265,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                               <>
                                 <TextField
                                   {...input}
+                                  fullWidth
                                   id="profile-changeUsername-username"
                                 />
                                 <FieldValidationMessage meta={meta} />
@@ -280,6 +291,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                             {({ input, meta }) => (
                               <>
                                 <TextField
+                                  fullWidth
                                   {...input}
                                   id="profile-changeUsername-username-confirm"
                                 />

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

@@ -1,6 +1,8 @@
-.root {
-  max-width: 500px;
+.content {
+  max-width: 495px;
+}
 
+.root {
   margin-top: var(--spacing-2);
 }
 

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

@@ -9,7 +9,7 @@ import {
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
-import { Icon, Typography } from "coral-ui/components";
+import { Flex, Icon, Typography } from "coral-ui/components";
 import { Button } from "coral-ui/components/Button";
 
 import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation";
@@ -67,60 +67,70 @@ const DeleteAccountContainer: FunctionComponent<Props> = ({
         scheduledDeletionDate={viewer.scheduledDeletionDate}
         organizationEmail={settings.organization.contactEmail}
       />
-
-      <Localized id="profile-settings-deleteAccount-title">
-        <Typography variant="heading3" className={styles.title}>
-          Delete My Account
-        </Typography>
-      </Localized>
-      <Localized id="profile-settings-deleteAccount-description">
-        <Typography variant="bodyCopy" className={styles.section}>
-          Deleting your account will permanently erase your profile and remove
-          all your comments from this site.
-        </Typography>
-      </Localized>
-
-      {deletionDate ? (
-        <>
-          <Localized
-            id="profile-settings-deleteAccount-cancelDelete-description"
-            $date={deletionDate}
-          >
-            <Typography variant="bodyCopy" className={styles.section}>
-              You have already submitted a request to delete your account. Your
-              account will be deleted on {deletionDate}. You may cancel the
-              request until that time.
+      <Flex
+        justifyContent="space-between"
+        alignItems="flex-start"
+        data-testid="profile-account-deleteAccount"
+      >
+        <div className={styles.content}>
+          <Localized id="profile-account-deleteAccount-title">
+            <Typography
+              variant="heading2"
+              color="textDark"
+              className={styles.title}
+            >
+              Delete My Account
             </Typography>
           </Localized>
-          <Button
-            variant="filled"
-            size="small"
-            onClick={cancelDeletion}
-            className={CLASSES.deleteMyAccount.cancelRequestButton}
-          >
-            <Icon size="sm" className={styles.icon}>
-              block
-            </Icon>
-            <Localized id="profile-settings-deleteAccount-cancelDelete">
-              <span>Cancel account deletion request</span>
-            </Localized>
-          </Button>
-        </>
-      ) : (
-        <Button
-          variant="outlined"
-          size="small"
-          onClick={showPopover}
-          className={CLASSES.deleteMyAccount.requestButton}
-        >
-          <Icon size="sm" className={styles.icon}>
-            cancel
-          </Icon>
-          <Localized id="profile-settings-deleteAccount-requestDelete">
-            <span>Request account deletion</span>
+          <Localized id="profile-account-deleteAccount-description">
+            <Typography variant="bodyCopy" className={styles.section}>
+              Deleting your account will permanently erase your profile and
+              remove all your comments from this site.
+            </Typography>
           </Localized>
-        </Button>
-      )}
+          {deletionDate && (
+            <>
+              <Localized
+                id="profile-account-deleteAccount-cancelDelete-description"
+                $date={deletionDate}
+              >
+                <Typography variant="bodyCopy" className={styles.section}>
+                  You have already submitted a request to delete your account.
+                  Your account will be deleted on {deletionDate}. You may cancel
+                  the request until that time.
+                </Typography>
+              </Localized>
+              <Button
+                variant="filled"
+                size="small"
+                onClick={cancelDeletion}
+                className={CLASSES.deleteMyAccount.cancelRequestButton}
+              >
+                <Icon size="sm" className={styles.icon}>
+                  block
+                </Icon>
+                <Localized id="profile-account-deleteAccount-cancelDelete">
+                  <span>Cancel account deletion request</span>
+                </Localized>
+              </Button>
+            </>
+          )}
+        </div>
+
+        {!deletionDate && (
+          <Localized id="profile-account-deleteAccount-request">
+            <Button
+              color="primary"
+              variant="outlineFilled"
+              size="small"
+              className={CLASSES.deleteMyAccount.requestButton}
+              onClick={showPopover}
+            >
+              Request
+            </Button>
+          </Localized>
+        )}
+      </Flex>
     </div>
   );
 };

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

@@ -47,7 +47,7 @@ const CompletionPage: FunctionComponent<Props> = ({
         justifyContent="center"
         className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
-        <Localized id="profile-settings-deleteAccount-pages-completeHeader">
+        <Localized id="profile-account-deleteAccount-pages-completeHeader">
           <Typography variant="header2" className={styles.headerText}>
             Account deletion requested
           </Typography>
@@ -56,7 +56,7 @@ const CompletionPage: FunctionComponent<Props> = ({
       <div className={styles.body}>
         <PageStepBar step={step} />
 
-        <Localized id="profile-settings-deleteAccount-pages-completeDescript">
+        <Localized id="profile-account-deleteAccount-pages-completeDescript">
           <Typography variant="bodyCopy" className={styles.sectionContent}>
             Your request has been submitted and a confirmation has been sent to
             the email address associated with your account.
@@ -64,7 +64,7 @@ const CompletionPage: FunctionComponent<Props> = ({
         </Localized>
 
         <Localized
-          id="profile-settings-deleteAccount-pages-completeTimeHeader"
+          id="profile-account-deleteAccount-pages-completeTimeHeader"
           $date={formattedDate}
         >
           <Typography variant="bodyCopyBold" className={styles.sectionContent}>
@@ -72,13 +72,13 @@ const CompletionPage: FunctionComponent<Props> = ({
           </Typography>
         </Localized>
 
-        <Localized id="profile-settings-deleteAccount-pages-completeChangeYourMindHeader">
+        <Localized id="profile-account-deleteAccount-pages-completeChangeYourMindHeader">
           <Typography variant="bodyCopyBold" className={styles.sectionHeader}>
             Changed your mind?
           </Typography>
         </Localized>
         <Localized
-          id="profile-settings-deleteAccount-pages-completeSignIntoYourAccount"
+          id="profile-account-deleteAccount-pages-completeSignIntoYourAccount"
           strong={<strong />}
         >
           <Typography variant="bodyCopy" className={styles.sectionContent}>
@@ -87,13 +87,13 @@ const CompletionPage: FunctionComponent<Props> = ({
           </Typography>
         </Localized>
 
-        <Localized id="profile-settings-deleteAccount-pages-completeTellUsWhy">
+        <Localized id="profile-account-deleteAccount-pages-completeTellUsWhy">
           <Typography variant="bodyCopyBold" className={styles.sectionHeader}>
             Tell us why.
           </Typography>
         </Localized>
         <Localized
-          id="profile-settings-deleteAccount-pages-completeWhyDeleteAccount"
+          id="profile-account-deleteAccount-pages-completeWhyDeleteAccount"
           $email={organizationEmail}
         >
           <Typography variant="bodyCopy" className={styles.sectionContent}>
@@ -110,7 +110,7 @@ const CompletionPage: FunctionComponent<Props> = ({
             onClick={onDoneClicked}
             className={CLASSES.deleteMyAccountModal.doneButton}
           >
-            <Localized id="profile-settings-deleteAccount-pages-done">
+            <Localized id="profile-account-deleteAccount-pages-done">
               Done
             </Localized>
           </Button>

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

@@ -99,7 +99,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
         justifyContent="center"
         className={cn(sharedStyles.header, CLASSES.deleteMyAccountModal.header)}
       >
-        <Localized id="profile-settings-deleteAccount-pages-confirmHeader">
+        <Localized id="profile-account-deleteAccount-pages-confirmHeader">
           <Typography variant="header2" className={sharedStyles.headerText}>
             Confirm account deletion?
           </Typography>
@@ -108,7 +108,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
       <div className={sharedStyles.body}>
         <PageStepBar step={step} />
 
-        <Localized id="profile-settings-deleteAccount-pages-confirmDescHeader">
+        <Localized id="profile-account-deleteAccount-pages-confirmDescHeader">
           <Typography
             variant="bodyCopyBold"
             className={sharedStyles.sectionHeader}
@@ -116,7 +116,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
             Are you sure you want to delete your account?
           </Typography>
         </Localized>
-        <Localized id="profile-settings-deleteAccount-confirmDescContent">
+        <Localized id="profile-account-deleteAccount-confirmDescContent">
           <Typography
             variant="bodyCopy"
             className={sharedStyles.sectionContent}
@@ -151,7 +151,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                   >
                     {({ input, meta }) => (
                       <FormField>
-                        <Localized id="profile-settings-deleteAccount-pages-confirmPhraseLabel">
+                        <Localized id="profile-account-deleteAccount-pages-confirmPhraseLabel">
                           <InputLabel>
                             To confirm, type phrase below:
                           </InputLabel>
@@ -174,7 +174,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                   <Field name="password" validate={composeValidators(required)}>
                     {({ input, meta }) => (
                       <FormField>
-                        <Localized id="profile-settings-deleteAccount-pages-confirmPasswordLabel">
+                        <Localized id="profile-account-deleteAccount-pages-confirmPasswordLabel">
                           <InputLabel>Enter your password:</InputLabel>
                         </Localized>
                         <PasswordField
@@ -201,7 +201,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
               <div className={styles.controls}>
                 <HorizontalGutter>
                   <Flex justifyContent="flex-end">
-                    <Localized id="profile-settings-deleteAccount-pages-cancel">
+                    <Localized id="profile-account-deleteAccount-pages-cancel">
                       <Button
                         variant="outlined"
                         className={cn(
@@ -213,7 +213,7 @@ const ConfirmPage: FunctionComponent<Props> = ({
                         Cancel
                       </Button>
                     </Localized>
-                    <Localized id="profile-settings-deleteAccount-pages-deleteButton">
+                    <Localized id="profile-account-deleteAccount-pages-deleteButton">
                       <Button
                         color="error"
                         variant="filled"

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

@@ -34,7 +34,7 @@ const DescriptionPage: FunctionComponent<Props> = ({
         justifyContent="center"
         className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
-        <Localized id="profile-settings-deleteAccount-pages-descriptionHeader">
+        <Localized id="profile-account-deleteAccount-pages-descriptionHeader">
           <Typography variant="header2" className={styles.headerText}>
             Delete my account?
           </Typography>
@@ -42,28 +42,28 @@ const DescriptionPage: FunctionComponent<Props> = ({
       </Flex>
       <div className={styles.body}>
         <PageStepBar step={step} />
-        <Localized id="profile-settings-deleteAccount-pages-descriptionText">
+        <Localized id="profile-account-deleteAccount-pages-descriptionText">
           <Typography variant="bodyCopy">
             You are attempting to delete your account. This means:
           </Typography>
         </Localized>
         <ul className={styles.ul}>
           <li>
-            <Localized id="profile-settings-deleteAccount-pages-allCommentsRemoved">
+            <Localized id="profile-account-deleteAccount-pages-allCommentsRemoved">
               <Typography variant="bodyCopy">
                 All of your comments are removed from this site
               </Typography>
             </Localized>
           </li>
           <li>
-            <Localized id="profile-settings-deleteAccount-pages-allCommentsDeleted">
+            <Localized id="profile-account-deleteAccount-pages-allCommentsDeleted">
               <Typography variant="bodyCopy">
                 All of your comments are deleted from our database
               </Typography>
             </Localized>
           </li>
           <li>
-            <Localized id="profile-settings-deleteAccount-pages-emailRemoved">
+            <Localized id="profile-account-deleteAccount-pages-emailRemoved">
               <Typography variant="bodyCopy">
                 Your email address is removed from our system
               </Typography>
@@ -80,7 +80,7 @@ const DescriptionPage: FunctionComponent<Props> = ({
             )}
             onClick={onProceedClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-proceed">
+            <Localized id="profile-account-deleteAccount-pages-proceed">
               Proceed
             </Localized>
           </Button>
@@ -92,7 +92,7 @@ const DescriptionPage: FunctionComponent<Props> = ({
             )}
             onClick={onCancelClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-cancel">
+            <Localized id="profile-account-deleteAccount-pages-cancel">
               Cancel
             </Localized>
           </Button>

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

@@ -34,7 +34,7 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
         justifyContent="center"
         className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
-        <Localized id="profile-settings-deleteAccount-pages-downloadCommentHeader">
+        <Localized id="profile-account-deleteAccount-pages-downloadCommentHeader">
           <Typography variant="header2" className={styles.headerText}>
             Download my comments?
           </Typography>
@@ -43,14 +43,14 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
       <div className={styles.body}>
         <PageStepBar step={step} />
 
-        <Localized id="profile-settings-deleteAccount-pages-downloadCommentsDesc">
+        <Localized id="profile-account-deleteAccount-pages-downloadCommentsDesc">
           <Typography variant="bodyCopy" className={styles.sectionContent}>
             Before your account is deleted, we recommend you download your
             comment history for your records. After your account is deleted, you
             will be unable to request your comment history.
           </Typography>
         </Localized>
-        <Localized id="profile-settings-deleteAccount-pages-downloadCommentsPath">
+        <Localized id="profile-account-deleteAccount-pages-downloadCommentsPath">
           <Typography variant="bodyCopyBold" className={styles.sectionContent}>
             My Profile > Download My Comment History
           </Typography>
@@ -66,7 +66,7 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
             )}
             onClick={onProceedClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-proceed">
+            <Localized id="profile-account-deleteAccount-pages-proceed">
               Proceed
             </Localized>
           </Button>
@@ -78,7 +78,7 @@ const DownloadCommentsPage: FunctionComponent<Props> = ({
             )}
             onClick={onCancelClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-cancel">
+            <Localized id="profile-account-deleteAccount-pages-cancel">
               Cancel
             </Localized>
           </Button>

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

@@ -30,7 +30,7 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
         justifyContent="center"
         className={cn(styles.header, CLASSES.deleteMyAccountModal.header)}
       >
-        <Localized id="profile-settings-deleteAccount-pages-whenHeader">
+        <Localized id="profile-account-deleteAccount-pages-whenHeader">
           <Typography variant="header2" className={styles.headerText}>
             Delete my account: When?
           </Typography>
@@ -39,23 +39,23 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
       <div className={styles.body}>
         <PageStepBar step={step} />
 
-        <Localized id="profile-settings-deleteAccount-pages-whenSec1Header">
+        <Localized id="profile-account-deleteAccount-pages-whenSec1Header">
           <Typography variant="bodyCopyBold" className={styles.sectionHeader}>
             When will my account be deleted?
           </Typography>
         </Localized>
-        <Localized id="profile-settings-deleteAccount-pages-whenSec1Content">
+        <Localized id="profile-account-deleteAccount-pages-whenSec1Content">
           <Typography variant="bodyCopy" className={styles.sectionContent}>
             Your account will be deleted 24 hours after your request has been
             submitted.
           </Typography>
         </Localized>
-        <Localized id="profile-settings-deleteAccount-pages-whenSec2Header">
+        <Localized id="profile-account-deleteAccount-pages-whenSec2Header">
           <Typography variant="bodyCopyBold" className={styles.sectionHeader}>
             Can I still write comments until my account is deleted?
           </Typography>
         </Localized>
-        <Localized id="profile-settings-deleteAccount-pages-whenSec2Content">
+        <Localized id="profile-account-deleteAccount-pages-whenSec2Content">
           <Typography variant="bodyCopy" className={styles.sectionContent}>
             No. Once you've requested account deletion, you can no longer write
             comments, reply to comments, or select reactions.
@@ -72,7 +72,7 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
             )}
             onClick={onProceedClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-proceed">
+            <Localized id="profile-account-deleteAccount-pages-proceed">
               Proceed
             </Localized>
           </Button>
@@ -84,7 +84,7 @@ const WhenPage: FunctionComponent<Props> = ({ step, onCancel, onProceed }) => {
             )}
             onClick={onCancelClicked}
           >
-            <Localized id="profile-settings-deleteAccount-pages-cancel">
+            <Localized id="profile-account-deleteAccount-pages-cancel">
               Cancel
             </Localized>
           </Button>

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

@@ -1,9 +1,11 @@
 .root {
-  max-width: 500px;
-
   margin-top: var(--spacing-2);
 }
 
+.content {
+  max-width: 495px;
+}
+
 .title {
   margin-bottom: var(--spacing-2);
 }

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

@@ -9,7 +9,7 @@ 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 { Button, CallOut, Flex, Icon, Typography } from "coral-ui/components";
 
 import RequestCommentsDownloadMutation from "./RequestCommentsDownloadMutation";
 
@@ -52,68 +52,72 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
 
   return (
     <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
-        </Typography>
-      </Localized>
-      <Localized
-        id="profile-settings-download-comments-description"
-        strong={<strong />}
-      >
-        <Typography variant="bodyCopy" className={styles.description}>
-          You will receive an email with a link to download your comment
-          history. You can make one download request every 14 days.
-        </Typography>
-      </Localized>
-      {lastDownloadedAt && (
-        <Localized
-          id="profile-settings-download-comments-recentRequest"
-          $timeStamp={formatter.format(lastDownloadedAt)}
-        >
-          <Typography
-            variant="bodyCopy"
-            className={cn(
-              styles.recentRequest,
-              CLASSES.downloadCommentHistory.recentRequest
-            )}
-          >
-            Your most recent request: {formatter.format(lastDownloadedAt)}
-          </Typography>
-        </Localized>
-      )}
-      {canDownload ? (
-        <Button
-          className={CLASSES.downloadCommentHistory.requestButton}
-          variant="outlined"
-          size="small"
-          onClick={onClick}
-        >
+      <Flex justifyContent="space-between" alignItems="flex-start">
+        <div className={styles.content}>
+          <Localized id="profile-account-download-comments-title">
+            <Typography
+              variant="heading2"
+              color="textDark"
+              className={styles.title}
+            >
+              Download my comment history
+            </Typography>
+          </Localized>
           <Localized
-            id="profile-settings-download-comments-request-icon"
-            attrs={{ title: true }}
+            id="profile-account-download-comments-description"
+            strong={<strong />}
           >
-            <Icon size="sm" className={styles.icon}>
-              file_download
-            </Icon>
+            <Typography variant="bodyCopy" className={styles.description}>
+              You will receive an email with a link to download your comment
+              history. You can make one download request every 14 days.
+            </Typography>
           </Localized>
-          <Localized id="profile-settings-download-comments-request">
-            <span>Request comment history</span>
-          </Localized>
-        </Button>
-      ) : (
+          {lastDownloadedAt && (
+            <Localized
+              id="profile-account-download-comments-recentRequest"
+              $timeStamp={formatter.format(lastDownloadedAt)}
+            >
+              <Typography
+                variant="bodyCopy"
+                className={cn(
+                  styles.recentRequest,
+                  CLASSES.downloadCommentHistory.recentRequest
+                )}
+              >
+                Your most recent request: {formatter.format(lastDownloadedAt)}
+              </Typography>
+            </Localized>
+          )}
+        </div>
+        <div>
+          {canDownload && (
+            <Localized id="profile-account-download-comments-request-button">
+              <Button
+                variant="outlineFilled"
+                color="primary"
+                size="small"
+                className={CLASSES.downloadCommentHistory.requestButton}
+                onClick={onClick}
+              >
+                Request
+              </Button>
+            </Localized>
+          )}
+        </div>
+      </Flex>
+      {!canDownload && (
         <CallOut
+          fullWidth
           className={cn(
             styles.callout,
             CLASSES.downloadCommentHistory.requestLater
           )}
-          fullWidth
         >
           <Icon size="lg" className={styles.icon}>
             query_builder
           </Icon>
           <Localized
-            id="profile-settings-download-comments-timeOut"
+            id="profile-account-download-comments-timeOut"
             $value={scaled}
             $unit={unit}
           >

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

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
@@ -23,51 +23,76 @@ interface Props {
 
 const IgnoreUserSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
   const removeUserIgnore = useMutation(RemoveUserIgnoreMutation);
+  const [showManage, setShowManage] = useState(false);
+  const toggleManage = useCallback(() => setShowManage(!showManage), [
+    showManage,
+    setShowManage,
+  ]);
   return (
     <div
+      data-testid="profile-account-ignoredCommenters"
       className={CLASSES.ignoredCommenters.$root}
-      data-testid="profile-settings-ignoredCommenters"
     >
-      <Localized id="profile-settings-ignoredCommenters">
-        <Typography variant="heading3">Ignored Commenters</Typography>
-      </Localized>
-      <Localized id="profile-settings-description">
-        <p className={styles.description}>
-          Once you ignore someone, all of their comments are hidden from you.
-          Commenters you ignore will still be able to see your comments.
-        </p>
-      </Localized>
-      <HorizontalGutter spacing={1}>
-        {viewer.ignoredUsers.map(user => (
-          <Flex
-            key={user.id}
-            justifyContent="space-between"
-            alignItems="center"
+      <Flex justifyContent="space-between" alignItems="center">
+        <Localized id="profile-account-ignoredCommenters">
+          <Typography color="textDark" variant="heading2">
+            Ignored Commenters
+          </Typography>
+        </Localized>
+        <Localized id="profile-account-ignoredCommenters-manage">
+          <Button
+            variant="outlineFilled"
+            size="small"
+            color="primary"
+            onClick={toggleManage}
+            className={CLASSES.ignoredCommenters.manageButton}
           >
-            <Username className={CLASSES.ignoredCommenters.username}>
-              {user.username}
-            </Username>
-            <Button
-              className={CLASSES.ignoredCommenters.stopIgnoreButton}
-              size="small"
-              color="primary"
-              onClick={() => removeUserIgnore({ userID: user.id })}
-            >
-              <Icon>close</Icon>
-              <Localized id="profile-settings-stopIgnoring">
-                <span>Stop ignoring</span>
-              </Localized>
-            </Button>
-          </Flex>
-        ))}
-        {viewer.ignoredUsers.length === 0 && (
-          <Localized id="profile-settings-empty">
-            <div className={styles.empty}>
-              You are not currently ignoring anyone
-            </div>
+            Manage
+          </Button>
+        </Localized>
+      </Flex>
+      {showManage && (
+        <div>
+          <Localized id="profile-account-ignoredCommenters-description">
+            <p className={styles.description}>
+              Once you ignore someone, all of their comments are hidden from
+              you. Commenters you ignore will still be able to see your
+              comments.
+            </p>
           </Localized>
-        )}
-      </HorizontalGutter>
+          <HorizontalGutter spacing={1}>
+            {viewer.ignoredUsers.map(user => (
+              <Flex
+                key={user.id}
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Username className={CLASSES.ignoredCommenters.username}>
+                  {user.username}
+                </Username>
+                <Button
+                  size="small"
+                  color="primary"
+                  onClick={() => removeUserIgnore({ userID: user.id })}
+                  className={CLASSES.ignoredCommenters.stopIgnoreButton}
+                >
+                  <Icon>close</Icon>
+                  <Localized id="profile-account-ignoredCommenters-stopIgnoring">
+                    <span>Stop ignoring</span>
+                  </Localized>
+                </Button>
+              </Flex>
+            ))}
+            {viewer.ignoredUsers.length === 0 && (
+              <Localized id="profile-account-ignoredCommenters-empty">
+                <div className={styles.empty}>
+                  You are not currently ignoring anyone
+                </div>
+              </Localized>
+            )}
+          </HorizontalGutter>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -8,6 +8,7 @@ import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLDIGEST_FREQUENCY } from "coral-framework/schema";
 import { NotificationSettingsContainer_viewer } from "coral-stream/__generated__/NotificationSettingsContainer_viewer.graphql";
+import CLASSES from "coral-stream/classes";
 import {
   Button,
   CallOut,
@@ -53,142 +54,150 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
   );
 
   return (
-    <HorizontalGutter data-testid="profile-settings-notifications">
-      <Localized id="profile-settings-notifications-emailNotifications">
-        <Typography variant="heading3">Email Notifications</Typography>
-      </Localized>
-      <Localized id="profile-settings-notifications-receiveWhen">
-        <Typography variant="heading4">Receive notifications when:</Typography>
-      </Localized>
-      <HorizontalGutter>
-        <Form initialValues={{ ...notifications }} onSubmit={onSubmit}>
-          {({
-            handleSubmit,
-            submitting,
-            submitError,
-            pristine,
-            submitSucceeded,
-          }) => (
-            <form onSubmit={handleSubmit}>
-              <HorizontalGutter>
-                <FieldSet>
-                  <FormField>
-                    <Field name="onReply" type="checkbox">
-                      {({ input }) => (
-                        <Localized id="profile-settings-notifications-onReply">
-                          <CheckBox id={input.name} {...input}>
-                            My comment receives a reply
-                          </CheckBox>
-                        </Localized>
-                      )}
-                    </Field>
-                  </FormField>
-                  <FormField>
-                    <Field name="onFeatured" type="checkbox">
-                      {({ input }) => (
-                        <Localized id="profile-settings-notifications-onFeatured">
-                          <CheckBox id={input.name} {...input}>
-                            My comment is featured
-                          </CheckBox>
-                        </Localized>
-                      )}
-                    </Field>
-                  </FormField>
-                  <FormField>
-                    <Field name="onStaffReplies" type="checkbox">
-                      {({ input }) => (
-                        <Localized id="profile-settings-notifications-onStaffReplies">
-                          <CheckBox id={input.name} {...input}>
-                            A staff member replies to my comment
-                          </CheckBox>
-                        </Localized>
-                      )}
-                    </Field>
-                  </FormField>
-                  <FormField>
-                    <Field name="onModeration" type="checkbox">
-                      {({ input }) => (
-                        <Localized id="profile-settings-notifications-onModeration">
-                          <CheckBox id={input.name} {...input}>
-                            My pending comment has been reviewed
-                          </CheckBox>
-                        </Localized>
-                      )}
-                    </Field>
-                  </FormField>
-                  <FormField>
-                    <Flex alignItems="center" itemGutter>
-                      <Localized id="profile-settings-notifications-sendNotifications">
-                        <Typography variant="bodyCopyBold">
-                          Send Notifications:
-                        </Typography>
+    <HorizontalGutter
+      data-testid="profile-account-notifications"
+      className={CLASSES.emailNotifications.$root}
+    >
+      <Form initialValues={{ ...notifications }} onSubmit={onSubmit}>
+        {({
+          handleSubmit,
+          submitting,
+          submitError,
+          pristine,
+          submitSucceeded,
+        }) => (
+          <form onSubmit={handleSubmit}>
+            <HorizontalGutter>
+              <Flex justifyContent="space-between" alignItems="flex-start">
+                <HorizontalGutter>
+                  <Localized id="profile-account-notifications-emailNotifications">
+                    <Typography variant="heading1">
+                      Email Notifications
+                    </Typography>
+                  </Localized>
+                  <Localized id="profile-account-notifications-receiveWhen">
+                    <Typography variant="heading4">
+                      Receive notifications when:
+                    </Typography>
+                  </Localized>
+                </HorizontalGutter>
+                <Localized id="profile-account-notifications-button-update">
+                  <Button
+                    color="primary"
+                    variant="outlineFilled"
+                    type="submit"
+                    disabled={submitting || pristine}
+                    className={CLASSES.emailNotifications.updateButton}
+                  >
+                    Update
+                  </Button>
+                </Localized>
+              </Flex>
+              <FieldSet>
+                <FormField>
+                  <Field name="onReply" type="checkbox">
+                    {({ input }) => (
+                      <Localized id="profile-account-notifications-onReply">
+                        <CheckBox id={input.name} {...input}>
+                          My comment receives a reply
+                        </CheckBox>
                       </Localized>
-                      <FormSpy subscription={{ values: true }}>
-                        {({ values }) => (
-                          <Field name="digestFrequency">
-                            {({ input }) => (
-                              <SelectField
-                                id={input.name}
-                                {...input}
-                                disabled={
-                                  !values.onReply &&
-                                  !values.onStaffReplies &&
-                                  !values.onFeatured &&
-                                  !values.onModeration
-                                }
-                              >
-                                <Localized id="profile-settings-notifications-sendNotifications-immediately">
-                                  <Option value={GQLDIGEST_FREQUENCY.NONE}>
-                                    Immediately
-                                  </Option>
-                                </Localized>
-                                <Localized id="profile-settings-notifications-sendNotifications-daily">
-                                  <Option value={GQLDIGEST_FREQUENCY.DAILY}>
-                                    Daily
-                                  </Option>
-                                </Localized>
-                                <Localized id="profile-settings-notifications-sendNotifications-hourly">
-                                  <Option value={GQLDIGEST_FREQUENCY.HOURLY}>
-                                    Hourly
-                                  </Option>
-                                </Localized>
-                              </SelectField>
-                            )}
-                          </Field>
-                        )}
-                      </FormSpy>
-                    </Flex>
-                  </FormField>
-                </FieldSet>
-                {submitError && (
-                  <CallOut color="error" fullWidth>
-                    {submitError}
+                    )}
+                  </Field>
+                </FormField>
+                <FormField>
+                  <Field name="onFeatured" type="checkbox">
+                    {({ input }) => (
+                      <Localized id="profile-account-notifications-onFeatured">
+                        <CheckBox id={input.name} {...input}>
+                          My comment is featured
+                        </CheckBox>
+                      </Localized>
+                    )}
+                  </Field>
+                </FormField>
+                <FormField>
+                  <Field name="onStaffReplies" type="checkbox">
+                    {({ input }) => (
+                      <Localized id="profile-account-notifications-onStaffReplies">
+                        <CheckBox id={input.name} {...input}>
+                          A staff member replies to my comment
+                        </CheckBox>
+                      </Localized>
+                    )}
+                  </Field>
+                </FormField>
+                <FormField>
+                  <Field name="onModeration" type="checkbox">
+                    {({ input }) => (
+                      <Localized id="profile-account-notifications-onModeration">
+                        <CheckBox id={input.name} {...input}>
+                          My pending comment has been reviewed
+                        </CheckBox>
+                      </Localized>
+                    )}
+                  </Field>
+                </FormField>
+                <FormField>
+                  <Flex alignItems="center" itemGutter>
+                    <Localized id="profile-account-notifications-sendNotifications">
+                      <Typography variant="bodyCopyBold">
+                        Send Notifications:
+                      </Typography>
+                    </Localized>
+                    <FormSpy subscription={{ values: true }}>
+                      {({ values }) => (
+                        <Field name="digestFrequency">
+                          {({ input }) => (
+                            <SelectField
+                              id={input.name}
+                              {...input}
+                              disabled={
+                                !values.onReply &&
+                                !values.onStaffReplies &&
+                                !values.onFeatured &&
+                                !values.onModeration
+                              }
+                            >
+                              <Localized id="profile-account-notifications-sendNotifications-immediately">
+                                <Option value={GQLDIGEST_FREQUENCY.NONE}>
+                                  Immediately
+                                </Option>
+                              </Localized>
+                              <Localized id="profile-account-notifications-sendNotifications-daily">
+                                <Option value={GQLDIGEST_FREQUENCY.DAILY}>
+                                  Daily
+                                </Option>
+                              </Localized>
+                              <Localized id="profile-account-notifications-sendNotifications-hourly">
+                                <Option value={GQLDIGEST_FREQUENCY.HOURLY}>
+                                  Hourly
+                                </Option>
+                              </Localized>
+                            </SelectField>
+                          )}
+                        </Field>
+                      )}
+                    </FormSpy>
+                  </Flex>
+                </FormField>
+              </FieldSet>
+              {submitError && (
+                <CallOut color="error" fullWidth>
+                  {submitError}
+                </CallOut>
+              )}
+              {submitSucceeded && (
+                <Localized id="profile-account-notifications-updated">
+                  <CallOut color="success" fullWidth>
+                    Your notification settings have been updated
                   </CallOut>
-                )}
-                {submitSucceeded && (
-                  <Localized id="profile-settings-notifications-updated">
-                    <CallOut color="success" fullWidth>
-                      Your notification settings have been updated
-                    </CallOut>
-                  </Localized>
-                )}
-                <Flex justifyContent="flex-end">
-                  <Localized id="profile-settings-notifications-button">
-                    <Button
-                      color="primary"
-                      variant="filled"
-                      type="submit"
-                      disabled={submitting || pristine}
-                    >
-                      Update Notification Settings
-                    </Button>
-                  </Localized>
-                </Flex>
-              </HorizontalGutter>
-            </form>
-          )}
-        </Form>
-      </HorizontalGutter>
+                </Localized>
+              )}
+            </HorizontalGutter>
+          </form>
+        )}
+      </Form>
     </HorizontalGutter>
   );
 };

src/core/client/stream/tabs/Profile/Settings/SettingsContainer.css

@@ -1,3 +0,0 @@
-.root {
-  max-width: 440px;
-}

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

@@ -1,57 +0,0 @@
-import React, { FunctionComponent } from "react";
-import { graphql } from "react-relay";
-
-import { withFragmentContainer } from "coral-framework/lib/relay";
-import { SettingsContainer_settings } from "coral-stream/__generated__/SettingsContainer_settings.graphql";
-import { SettingsContainer_viewer } from "coral-stream/__generated__/SettingsContainer_viewer.graphql";
-import { HorizontalGutter } from "coral-ui/components";
-
-import ChangePasswordContainer from "./ChangePasswordContainer";
-import DeleteAccountContainer from "./DeleteAccount/DeleteAccountContainer";
-import DownloadCommentsContainer from "./DownloadCommentsContainer";
-import IgnoreUserSettingsContainer from "./IgnoreUserSettingsContainer";
-import NotificationSettingsContainer from "./NotificationSettingsContainer";
-
-import styles from "./SettingsContainer.css";
-
-interface Props {
-  viewer: SettingsContainer_viewer;
-  settings: SettingsContainer_settings;
-}
-
-const SettingsContainer: FunctionComponent<Props> = ({ viewer, settings }) => (
-  <HorizontalGutter spacing={5} className={styles.root}>
-    <IgnoreUserSettingsContainer viewer={viewer} />
-    <ChangePasswordContainer settings={settings} />
-    {settings.accountFeatures.downloadComments && (
-      <DownloadCommentsContainer viewer={viewer} />
-    )}
-    {settings.accountFeatures.deleteAccount && (
-      <DeleteAccountContainer viewer={viewer} settings={settings} />
-    )}
-    <NotificationSettingsContainer viewer={viewer} />
-  </HorizontalGutter>
-);
-
-const enhanced = withFragmentContainer<Props>({
-  viewer: graphql`
-    fragment SettingsContainer_viewer on User {
-      ...IgnoreUserSettingsContainer_viewer
-      ...DownloadCommentsContainer_viewer
-      ...DeleteAccountContainer_viewer
-      ...NotificationSettingsContainer_viewer
-    }
-  `,
-  settings: graphql`
-    fragment SettingsContainer_settings on Settings {
-      accountFeatures {
-        downloadComments
-        deleteAccount
-      }
-      ...ChangePasswordContainer_settings
-      ...DeleteAccountContainer_settings
-    }
-  `,
-})(SettingsContainer);
-
-export default enhanced;

src/core/client/stream/tabs/Profile/Settings/index.ts

@@ -1 +1,4 @@
-export { default, default as SettingsContainer } from "./SettingsContainer";
+export {
+  default,
+  default as AccountSettingsContainer,
+} from "./AccountSettingsContainer";

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

@@ -321,7 +321,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -355,9 +355,9 @@ exports[`renders comment stream 1`] = `
                 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 coral coral-reactButton coral-featuredComment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -423,7 +423,7 @@ exports[`renders comment stream 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Lukas
                     </span>
@@ -457,9 +457,9 @@ exports[`renders comment stream 1`] = `
                 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 coral coral-reactButton coral-featuredComment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-featuredComment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}

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

@@ -118,7 +118,7 @@ exports[`renders permalink view 1`] = `
                     className=""
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -145,7 +145,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Lukas
                                 </span>
@@ -184,7 +184,7 @@ exports[`renders permalink view 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -198,12 +198,12 @@ exports[`renders permalink view 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -218,10 +218,10 @@ exports[`renders permalink view 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-1"
                               onBlur={[Function]}
@@ -241,10 +241,10 @@ exports[`renders permalink view 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-1"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -273,12 +273,12 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -335,7 +335,7 @@ exports[`renders permalink view 1`] = `
                     className=""
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -362,7 +362,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -401,7 +401,7 @@ exports[`renders permalink view 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -415,12 +415,12 @@ exports[`renders permalink view 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -435,10 +435,10 @@ exports[`renders permalink view 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-2"
                               onBlur={[Function]}
@@ -458,10 +458,10 @@ exports[`renders permalink view 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-2"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -490,12 +490,12 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -550,7 +550,7 @@ exports[`renders permalink view 1`] = `
                     className=""
                   >
                     <div
-                      className="Comment-root Comment-highlight"
+                      className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -577,7 +577,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Markus
                                 </span>
@@ -616,7 +616,7 @@ exports[`renders permalink view 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -630,12 +630,12 @@ exports[`renders permalink view 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -650,10 +650,10 @@ exports[`renders permalink view 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-with-replies"
                               onBlur={[Function]}
@@ -673,10 +673,10 @@ exports[`renders permalink view 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-with-replies"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -705,12 +705,12 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -761,7 +761,7 @@ exports[`renders permalink view 1`] = `
                     className="Indent-level1 coral coral-indent-1"
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -788,7 +788,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -846,7 +846,7 @@ exports[`renders permalink view 1`] = `
                           >
                             In reply to 
                             <span
-                              className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                              className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                             >
                               Markus
                             </span>
@@ -854,7 +854,7 @@ exports[`renders permalink view 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -868,12 +868,12 @@ exports[`renders permalink view 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -888,10 +888,10 @@ exports[`renders permalink view 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-3"
                               onBlur={[Function]}
@@ -911,10 +911,10 @@ exports[`renders permalink view 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-3"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -943,12 +943,12 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -988,7 +988,7 @@ exports[`renders permalink view 1`] = `
                     className="Indent-level1 coral coral-indent-1"
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -1015,7 +1015,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -1073,7 +1073,7 @@ exports[`renders permalink view 1`] = `
                           >
                             In reply to 
                             <span
-                              className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                              className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                             >
                               Markus
                             </span>
@@ -1081,7 +1081,7 @@ exports[`renders permalink view 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1095,12 +1095,12 @@ exports[`renders permalink view 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1115,10 +1115,10 @@ exports[`renders permalink view 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-4"
                               onBlur={[Function]}
@@ -1138,10 +1138,10 @@ exports[`renders permalink view 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-4"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -1170,12 +1170,12 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}

src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap

@@ -38,13 +38,13 @@ exports[`renders conversation thread 1`] = `
           >
             <div>
               <span
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-username coral-rootParent-username"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root coral coral-username coral-rootParent-username"
               >
                 Moderator
               </span>
             </div>
             <span
-              className="Tag-root coral coral-userTag coral-rootParent-userTag Tag-colorGrey"
+              className="Tag-root coral coral-userTag coral-rootParent-userTag Tag-colorGrey Tag-uppercase"
             >
               Staff
             </span>
@@ -148,7 +148,7 @@ exports[`renders conversation thread 1`] = `
               className=""
             >
               <div
-                className="Comment-root Comment-highlight"
+                className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
                 role="article"
               >
                 <div
@@ -175,7 +175,7 @@ exports[`renders conversation thread 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                           >
                             Markus
                           </span>
@@ -214,7 +214,7 @@ exports[`renders conversation thread 1`] = `
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                 >
                   <div
                     className="HTMLContent-root coral coral-content coral-comment-content"
@@ -228,12 +228,12 @@ exports[`renders conversation thread 1`] = `
                     className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -248,10 +248,10 @@ exports[`renders conversation thread 1`] = `
                         </span>
                       </button>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-0"
                         onBlur={[Function]}
@@ -271,10 +271,10 @@ exports[`renders conversation thread 1`] = `
                       >
                         <button
                           aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -303,12 +303,12 @@ exports[`renders conversation thread 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -378,7 +378,7 @@ exports[`shows more of this conversation 1`] = `
               className=""
             >
               <div
-                className="Comment-root"
+                className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                 role="article"
               >
                 <div
@@ -405,7 +405,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                           >
                             Lukas
                           </span>
@@ -444,7 +444,7 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                 >
                   <div
                     className="HTMLContent-root coral coral-content coral-comment-content"
@@ -458,12 +458,12 @@ exports[`shows more of this conversation 1`] = `
                     className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -478,10 +478,10 @@ exports[`shows more of this conversation 1`] = `
                         </span>
                       </button>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-1"
                         onBlur={[Function]}
@@ -501,10 +501,10 @@ exports[`shows more of this conversation 1`] = `
                       >
                         <button
                           aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -533,12 +533,12 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -595,7 +595,7 @@ exports[`shows more of this conversation 1`] = `
               className=""
             >
               <div
-                className="Comment-root"
+                className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                 role="article"
               >
                 <div
@@ -622,7 +622,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                           >
                             Moderator
                           </span>
@@ -642,7 +642,7 @@ exports[`shows more of this conversation 1`] = `
                         </div>
                       </div>
                       <span
-                        className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey"
+                        className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey Tag-uppercase"
                       >
                         Staff
                       </span>
@@ -666,7 +666,7 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                 >
                   <div
                     className="HTMLContent-root coral coral-content coral-comment-content"
@@ -680,12 +680,12 @@ exports[`shows more of this conversation 1`] = `
                     className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -700,10 +700,10 @@ exports[`shows more of this conversation 1`] = `
                         </span>
                       </button>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-from-staff-0"
                         onBlur={[Function]}
@@ -723,10 +723,10 @@ exports[`shows more of this conversation 1`] = `
                       >
                         <button
                           aria-controls="permalink-popover-comment-from-staff-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -755,12 +755,12 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -815,7 +815,7 @@ exports[`shows more of this conversation 1`] = `
               className=""
             >
               <div
-                className="Comment-root Comment-highlight"
+                className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
                 role="article"
               >
                 <div
@@ -842,7 +842,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                           >
                             Markus
                           </span>
@@ -881,7 +881,7 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                 >
                   <div
                     className="HTMLContent-root coral coral-content coral-comment-content"
@@ -895,12 +895,12 @@ exports[`shows more of this conversation 1`] = `
                     className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -915,10 +915,10 @@ exports[`shows more of this conversation 1`] = `
                         </span>
                       </button>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-0"
                         onBlur={[Function]}
@@ -938,10 +938,10 @@ exports[`shows more of this conversation 1`] = `
                       >
                         <button
                           aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -970,12 +970,12 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                        data-color="regular"
-                        data-variant="ghost"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}

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

@@ -15,7 +15,7 @@ exports[`cancel edit 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -42,7 +42,7 @@ exports[`cancel edit 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -96,7 +96,7 @@ exports[`cancel edit 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -110,12 +110,12 @@ exports[`cancel edit 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -130,10 +130,10 @@ exports[`cancel edit 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -153,10 +153,10 @@ exports[`cancel edit 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -185,17 +185,17 @@ exports[`cancel edit 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -251,7 +251,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
             >
               Markus
             </span>
@@ -428,7 +428,7 @@ exports[`edit a comment: edit form 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
             >
               Markus
             </span>
@@ -605,7 +605,7 @@ exports[`edit a comment: optimistic response 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
             >
               Markus
             </span>
@@ -779,7 +779,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -806,7 +806,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -860,7 +860,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -874,12 +874,12 @@ exports[`edit a comment: render comment with edit button 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -894,10 +894,10 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -917,10 +917,10 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -949,17 +949,17 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1012,7 +1012,7 @@ exports[`edit a comment: server response 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -1039,7 +1039,7 @@ exports[`edit a comment: server response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -1102,7 +1102,7 @@ exports[`edit a comment: server response 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1116,12 +1116,12 @@ exports[`edit a comment: server response 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1136,10 +1136,10 @@ exports[`edit a comment: server response 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -1159,10 +1159,10 @@ exports[`edit a comment: server response 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1191,17 +1191,17 @@ exports[`edit a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1254,7 +1254,7 @@ exports[`shows expiry message: edit form closed 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -1281,7 +1281,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -1335,7 +1335,7 @@ exports[`shows expiry message: edit form closed 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1349,12 +1349,12 @@ exports[`shows expiry message: edit form closed 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1369,10 +1369,10 @@ exports[`shows expiry message: edit form closed 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -1392,10 +1392,10 @@ exports[`shows expiry message: edit form closed 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1424,17 +1424,17 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-with-replies"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1490,7 +1490,7 @@ exports[`shows expiry message: edit time expired 1`] = `
         >
           <div>
             <span
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
             >
               Markus
             </span>

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

@@ -3,7 +3,7 @@
 exports[`renders comment stream with load more button 1`] = `
 <div
   aria-live="polite"
-  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
   data-testid="comments-allComments-log"
   id="comments-allComments-log"
   role="log"
@@ -25,7 +25,7 @@ exports[`renders comment stream with load more button 1`] = `
             className=""
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -52,7 +52,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Markus
                         </span>
@@ -91,7 +91,7 @@ exports[`renders comment stream with load more button 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -105,12 +105,12 @@ exports[`renders comment stream with load more button 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -125,10 +125,10 @@ exports[`renders comment stream with load more button 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-0"
                       onBlur={[Function]}
@@ -148,10 +148,10 @@ exports[`renders comment stream with load more button 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-0"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -180,12 +180,12 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -225,7 +225,7 @@ exports[`renders comment stream with load more button 1`] = `
             className=""
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -252,7 +252,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Lukas
                         </span>
@@ -291,7 +291,7 @@ exports[`renders comment stream with load more button 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -305,12 +305,12 @@ exports[`renders comment stream with load more button 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -325,10 +325,10 @@ exports[`renders comment stream with load more button 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-1"
                       onBlur={[Function]}
@@ -348,10 +348,10 @@ exports[`renders comment stream with load more button 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-1"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -380,12 +380,12 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -410,9 +410,9 @@ exports[`renders comment stream with load more button 1`] = `
   </div>
   <button
     aria-controls="comments-allComments-log"
-    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth coral coral-loadMoreButton coral-allComments-loadMoreButton"
+    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlineFilled Button-fullWidth coral coral-loadMoreButton coral-allComments-loadMoreButton"
     data-color="regular"
-    data-variant="outlined"
+    data-variant="outlineFilled"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}

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

@@ -15,7 +15,7 @@ exports[`post a comment: optimistic response 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -42,7 +42,7 @@ exports[`post a comment: optimistic response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -96,7 +96,7 @@ exports[`post a comment: optimistic response 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -110,12 +110,12 @@ exports[`post a comment: optimistic response 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -130,10 +130,10 @@ exports[`post a comment: optimistic response 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-uuid-0"
                   onBlur={[Function]}
@@ -153,10 +153,10 @@ exports[`post a comment: optimistic response 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-uuid-0"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -185,17 +185,17 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-uuid-0"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}

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

@@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = `
         className="Indent-level5 coral coral-indent-5"
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -42,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -100,7 +100,7 @@ exports[`post a reply: open reply form 1`] = `
               >
                 In reply to 
                 <span
-                  className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                 >
                   Markus
                 </span>
@@ -108,7 +108,7 @@ exports[`post a reply: open reply form 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -122,12 +122,12 @@ exports[`post a reply: open reply form 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -142,10 +142,10 @@ exports[`post a reply: open reply form 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-active coral coral-comment-replyButton"
                   data-active={true}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                   onBlur={[Function]}
@@ -165,10 +165,10 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -197,17 +197,17 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-with-deepest-replies-5"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -447,7 +447,7 @@ exports[`post a reply: optimistic response 1`] = `
             className="Indent-level6 coral coral-indent-6"
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -474,7 +474,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Markus
                         </span>
@@ -547,7 +547,7 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     In reply to 
                     <span
-                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                      className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                     >
                       Markus
                     </span>
@@ -555,7 +555,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -569,12 +569,12 @@ exports[`post a reply: optimistic response 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -593,10 +593,10 @@ exports[`post a reply: optimistic response 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-uuid-0"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -625,17 +625,17 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
                     >
                       <button
                         aria-controls="report-popover-uuid-0"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -678,7 +678,7 @@ exports[`post a reply: optimistic response 1`] = `
 exports[`renders comment stream 1`] = `
 <div
   aria-live="polite"
-  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
   data-testid="comments-allComments-log"
   id="comments-allComments-log"
   role="log"
@@ -700,7 +700,7 @@ exports[`renders comment stream 1`] = `
             className=""
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -727,7 +727,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Markus
                         </span>
@@ -766,7 +766,7 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -780,12 +780,12 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -800,10 +800,10 @@ exports[`renders comment stream 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-with-deepest-replies"
                       onBlur={[Function]}
@@ -823,10 +823,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-with-deepest-replies"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -855,17 +855,17 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
                     >
                       <button
                         aria-controls="report-popover-comment-with-deepest-replies"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -924,7 +924,7 @@ exports[`renders comment stream 1`] = `
                 className="Indent-level1 coral coral-indent-1"
               >
                 <div
-                  className="Comment-root"
+                  className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                   role="article"
                 >
                   <div
@@ -951,7 +951,7 @@ exports[`renders comment stream 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                             >
                               Markus
                             </span>
@@ -1009,7 +1009,7 @@ exports[`renders comment stream 1`] = `
                       >
                         In reply to 
                         <span
-                          className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                          className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                         >
                           Markus
                         </span>
@@ -1017,7 +1017,7 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                   >
                     <div
                       className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1031,12 +1031,12 @@ exports[`renders comment stream 1`] = `
                       className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                          data-color="regular"
-                          data-variant="ghost"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -1051,10 +1051,10 @@ exports[`renders comment stream 1`] = `
                           </span>
                         </button>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
                           onBlur={[Function]}
@@ -1074,10 +1074,10 @@ exports[`renders comment stream 1`] = `
                         >
                           <button
                             aria-controls="permalink-popover-comment-with-deepest-replies-1"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                             data-active={false}
-                            data-color="regular"
-                            data-variant="ghost"
+                            data-color="primary"
+                            data-variant="textUnderlined"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -1106,17 +1106,17 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <div
                           className="Popover-root"
                         >
                           <button
                             aria-controls="report-popover-comment-with-deepest-replies-1"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                             data-active={false}
-                            data-color="regular"
-                            data-variant="ghost"
+                            data-color="error"
+                            data-variant="textUnderlined"
                             disabled={false}
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1175,7 +1175,7 @@ exports[`renders comment stream 1`] = `
                     className="Indent-level2 coral coral-indent-2"
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -1202,7 +1202,7 @@ exports[`renders comment stream 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Markus
                                 </span>
@@ -1260,7 +1260,7 @@ exports[`renders comment stream 1`] = `
                           >
                             In reply to 
                             <span
-                              className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                              className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                             >
                               Markus
                             </span>
@@ -1268,7 +1268,7 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1282,12 +1282,12 @@ exports[`renders comment stream 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1302,10 +1302,10 @@ exports[`renders comment stream 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
                               onBlur={[Function]}
@@ -1325,10 +1325,10 @@ exports[`renders comment stream 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-with-deepest-replies-2"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -1357,17 +1357,17 @@ exports[`renders comment stream 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
                             >
                               <button
                                 aria-controls="report-popover-comment-with-deepest-replies-2"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="error"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -1426,7 +1426,7 @@ exports[`renders comment stream 1`] = `
                         className="Indent-level3 coral coral-indent-3"
                       >
                         <div
-                          className="Comment-root"
+                          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                           role="article"
                         >
                           <div
@@ -1453,7 +1453,7 @@ exports[`renders comment stream 1`] = `
                                     type="button"
                                   >
                                     <span
-                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                     >
                                       Markus
                                     </span>
@@ -1511,7 +1511,7 @@ exports[`renders comment stream 1`] = `
                               >
                                 In reply to 
                                 <span
-                                  className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                                  className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                                 >
                                   Markus
                                 </span>
@@ -1519,7 +1519,7 @@ exports[`renders comment stream 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                           >
                             <div
                               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1533,12 +1533,12 @@ exports[`renders comment stream 1`] = `
                               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                               >
                                 <button
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                                  data-color="regular"
-                                  data-variant="ghost"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
                                   disabled={false}
                                   onBlur={[Function]}
                                   onClick={[Function]}
@@ -1553,10 +1553,10 @@ exports[`renders comment stream 1`] = `
                                   </span>
                                 </button>
                                 <button
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                   data-active={false}
-                                  data-color="regular"
-                                  data-variant="ghost"
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
                                   disabled={false}
                                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
                                   onBlur={[Function]}
@@ -1576,10 +1576,10 @@ exports[`renders comment stream 1`] = `
                                 >
                                   <button
                                     aria-controls="permalink-popover-comment-with-deepest-replies-3"
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                     data-active={false}
-                                    data-color="regular"
-                                    data-variant="ghost"
+                                    data-color="primary"
+                                    data-variant="textUnderlined"
                                     onBlur={[Function]}
                                     onClick={[Function]}
                                     onFocus={[Function]}
@@ -1608,17 +1608,17 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                               >
                                 <div
                                   className="Popover-root"
                                 >
                                   <button
                                     aria-controls="report-popover-comment-with-deepest-replies-3"
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                     data-active={false}
-                                    data-color="regular"
-                                    data-variant="ghost"
+                                    data-color="error"
+                                    data-variant="textUnderlined"
                                     disabled={false}
                                     onBlur={[Function]}
                                     onClick={[Function]}
@@ -1677,7 +1677,7 @@ exports[`renders comment stream 1`] = `
                             className="Indent-level4 coral coral-indent-4"
                           >
                             <div
-                              className="Comment-root"
+                              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                               role="article"
                             >
                               <div
@@ -1704,7 +1704,7 @@ exports[`renders comment stream 1`] = `
                                         type="button"
                                       >
                                         <span
-                                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                         >
                                           Markus
                                         </span>
@@ -1762,7 +1762,7 @@ exports[`renders comment stream 1`] = `
                                   >
                                     In reply to 
                                     <span
-                                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                                      className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                                     >
                                       Markus
                                     </span>
@@ -1770,7 +1770,7 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <div
-                                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                               >
                                 <div
                                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -1784,12 +1784,12 @@ exports[`renders comment stream 1`] = `
                                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                                 >
                                   <div
-                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                   >
                                     <button
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                                      data-color="regular"
-                                      data-variant="ghost"
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                      data-color="primary"
+                                      data-variant="textUnderlined"
                                       disabled={false}
                                       onBlur={[Function]}
                                       onClick={[Function]}
@@ -1804,10 +1804,10 @@ exports[`renders comment stream 1`] = `
                                       </span>
                                     </button>
                                     <button
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                       data-active={false}
-                                      data-color="regular"
-                                      data-variant="ghost"
+                                      data-color="primary"
+                                      data-variant="textUnderlined"
                                       disabled={false}
                                       id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
                                       onBlur={[Function]}
@@ -1827,10 +1827,10 @@ exports[`renders comment stream 1`] = `
                                     >
                                       <button
                                         aria-controls="permalink-popover-comment-with-deepest-replies-4"
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                         data-active={false}
-                                        data-color="regular"
-                                        data-variant="ghost"
+                                        data-color="primary"
+                                        data-variant="textUnderlined"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -1859,17 +1859,17 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                   >
                                     <div
                                       className="Popover-root"
                                     >
                                       <button
                                         aria-controls="report-popover-comment-with-deepest-replies-4"
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                         data-active={false}
-                                        data-color="regular"
-                                        data-variant="ghost"
+                                        data-color="error"
+                                        data-variant="textUnderlined"
                                         disabled={false}
                                         onBlur={[Function]}
                                         onClick={[Function]}
@@ -1928,7 +1928,7 @@ exports[`renders comment stream 1`] = `
                                 className="Indent-level5 coral coral-indent-5"
                               >
                                 <div
-                                  className="Comment-root"
+                                  className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                                   role="article"
                                 >
                                   <div
@@ -1955,7 +1955,7 @@ exports[`renders comment stream 1`] = `
                                             type="button"
                                           >
                                             <span
-                                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                             >
                                               Markus
                                             </span>
@@ -2013,7 +2013,7 @@ exports[`renders comment stream 1`] = `
                                       >
                                         In reply to 
                                         <span
-                                          className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                                          className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                                         >
                                           Markus
                                         </span>
@@ -2021,7 +2021,7 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                                    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                                   >
                                     <div
                                       className="HTMLContent-root coral coral-content coral-comment-content"
@@ -2035,12 +2035,12 @@ exports[`renders comment stream 1`] = `
                                       className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                                     >
                                       <div
-                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                       >
                                         <button
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                                          data-color="regular"
-                                          data-variant="ghost"
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                          data-color="primary"
+                                          data-variant="textUnderlined"
                                           disabled={false}
                                           onBlur={[Function]}
                                           onClick={[Function]}
@@ -2055,10 +2055,10 @@ exports[`renders comment stream 1`] = `
                                           </span>
                                         </button>
                                         <button
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                           data-active={false}
-                                          data-color="regular"
-                                          data-variant="ghost"
+                                          data-color="primary"
+                                          data-variant="textUnderlined"
                                           disabled={false}
                                           id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                                           onBlur={[Function]}
@@ -2078,10 +2078,10 @@ exports[`renders comment stream 1`] = `
                                         >
                                           <button
                                             aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                             data-active={false}
-                                            data-color="regular"
-                                            data-variant="ghost"
+                                            data-color="primary"
+                                            data-variant="textUnderlined"
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
@@ -2110,17 +2110,17 @@ exports[`renders comment stream 1`] = `
                                         </div>
                                       </div>
                                       <div
-                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                       >
                                         <div
                                           className="Popover-root"
                                         >
                                           <button
                                             aria-controls="report-popover-comment-with-deepest-replies-5"
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                             data-active={false}
-                                            data-color="regular"
-                                            data-variant="ghost"
+                                            data-color="error"
+                                            data-variant="textUnderlined"
                                             disabled={false}
                                             onBlur={[Function]}
                                             onClick={[Function]}

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

@@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = `
         className=""
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -42,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -81,7 +81,7 @@ exports[`post a reply: open reply form 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -95,12 +95,12 @@ exports[`post a reply: open reply form 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -115,10 +115,10 @@ exports[`post a reply: open reply form 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-active coral coral-comment-replyButton"
                   data-active={true}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-0"
                   onBlur={[Function]}
@@ -138,10 +138,10 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-0"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -170,17 +170,17 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
                 >
                   <button
                     aria-controls="report-popover-comment-0"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="error"
+                    data-variant="textUnderlined"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -403,7 +403,7 @@ exports[`post a reply: optimistic response 1`] = `
             className="Indent-level1 coral coral-indent-1"
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -430,7 +430,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Markus
                         </span>
@@ -503,7 +503,7 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     In reply to 
                     <span
-                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                      className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                     >
                       Markus
                     </span>
@@ -511,7 +511,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -525,12 +525,12 @@ exports[`post a reply: optimistic response 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -545,10 +545,10 @@ exports[`post a reply: optimistic response 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-uuid-0"
                       onBlur={[Function]}
@@ -568,10 +568,10 @@ exports[`post a reply: optimistic response 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-uuid-0"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -600,17 +600,17 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
                     >
                       <button
                         aria-controls="report-popover-uuid-0"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="error"
+                        data-variant="textUnderlined"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}

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

@@ -2,9 +2,9 @@
 
 exports[`create and remove reaction: Respected 1`] = `
 <button
-  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton coral-reactedButton coral-comment-reactedButton"
-  data-color="regular"
-  data-variant="ghost"
+  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton coral-reactedButton coral-comment-reactedButton ReactionButton-button"
+  data-color="primary"
+  data-variant="textUnderlined"
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -25,9 +25,9 @@ exports[`create and remove reaction: Respected 1`] = `
 
 exports[`create and remove reaction: Unrespected 1`] = `
 <button
-  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-  data-color="regular"
-  data-variant="ghost"
+  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+  data-color="primary"
+  data-variant="textUnderlined"
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}

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

@@ -270,7 +270,7 @@ exports[`renders comment stream with community guidelines 1`] = `
       >
         <div
           aria-live="polite"
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
@@ -292,7 +292,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                     className=""
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -319,7 +319,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Markus
                                 </span>
@@ -358,7 +358,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -372,12 +372,12 @@ exports[`renders comment stream with community guidelines 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -392,10 +392,10 @@ exports[`renders comment stream with community guidelines 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-0"
                               onBlur={[Function]}
@@ -415,10 +415,10 @@ exports[`renders comment stream with community guidelines 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-0"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -447,12 +447,12 @@ exports[`renders comment stream with community guidelines 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -492,7 +492,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                     className=""
                   >
                     <div
-                      className="Comment-root"
+                      className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
@@ -519,7 +519,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                 >
                                   Lukas
                                 </span>
@@ -558,7 +558,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                       >
                         <div
                           className="HTMLContent-root coral coral-content coral-comment-content"
@@ -572,12 +572,12 @@ exports[`renders comment stream with community guidelines 1`] = `
                           className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -592,10 +592,10 @@ exports[`renders comment stream with community guidelines 1`] = `
                               </span>
                             </button>
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                               data-active={false}
-                              data-color="regular"
-                              data-variant="ghost"
+                              data-color="primary"
+                              data-variant="textUnderlined"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-1"
                               onBlur={[Function]}
@@ -615,10 +615,10 @@ exports[`renders comment stream with community guidelines 1`] = `
                             >
                               <button
                                 aria-controls="permalink-popover-comment-1"
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -647,12 +647,12 @@ exports[`renders comment stream with community guidelines 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                              data-color="regular"
-                              data-variant="ghost"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                              data-color="error"
+                              data-variant="textUnderlined"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}

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

@@ -191,7 +191,7 @@ exports[`renders message box when commenting disabled 1`] = `
       >
         <div
           aria-live="polite"
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
@@ -220,26 +220,26 @@ exports[`renders message box when logged in 1`] = `
         className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
       >
         <div
-          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
         >
           Signed in as 
           <span
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
           >
             Markus
           </span>
           .
         </div>
         <div
-          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
         >
           <span>
             Not you? 
           </span>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-logoutButton"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
             data-color="primary"
-            data-variant="underlined"
+            data-variant="regular"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -301,7 +301,7 @@ exports[`renders message box when logged in 1`] = `
                 >
                   <div
                     aria-placeholder="Post a comment"
-                    className="RTE-contentEditable coral coral-rte-content RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content PostCommentForm-rteBorderless RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -502,7 +502,7 @@ exports[`renders message box when logged in 1`] = `
       >
         <div
           aria-live="polite"
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
@@ -787,7 +787,7 @@ exports[`renders message box when not logged in 1`] = `
       >
         <div
           aria-live="polite"
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
@@ -979,7 +979,7 @@ exports[`renders message box when story isClosed 1`] = `
       >
         <div
           aria-live="polite"
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"

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

@@ -24,7 +24,7 @@ exports[`renders reply list 1`] = `
             className="Indent-level1 coral coral-indent-1"
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -51,7 +51,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Markus
                         </span>
@@ -109,7 +109,7 @@ exports[`renders reply list 1`] = `
                   >
                     In reply to 
                     <span
-                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                      className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                     >
                       Markus
                     </span>
@@ -117,7 +117,7 @@ exports[`renders reply list 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -131,12 +131,12 @@ exports[`renders reply list 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -151,10 +151,10 @@ exports[`renders reply list 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-with-replies"
                       onBlur={[Function]}
@@ -174,10 +174,10 @@ exports[`renders reply list 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-with-replies"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -206,12 +206,12 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -256,7 +256,7 @@ exports[`renders reply list 1`] = `
                 className="Indent-level2 coral coral-indent-2"
               >
                 <div
-                  className="Comment-root"
+                  className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                   role="article"
                 >
                   <div
@@ -283,7 +283,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                             >
                               Isabelle
                             </span>
@@ -341,7 +341,7 @@ exports[`renders reply list 1`] = `
                       >
                         In reply to 
                         <span
-                          className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                          className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                         >
                           Markus
                         </span>
@@ -349,7 +349,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                   >
                     <div
                       className="HTMLContent-root coral coral-content coral-comment-content"
@@ -363,12 +363,12 @@ exports[`renders reply list 1`] = `
                       className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                          data-color="regular"
-                          data-variant="ghost"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -383,10 +383,10 @@ exports[`renders reply list 1`] = `
                           </span>
                         </button>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-3"
                           onBlur={[Function]}
@@ -406,10 +406,10 @@ exports[`renders reply list 1`] = `
                         >
                           <button
                             aria-controls="permalink-popover-comment-3"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                             data-active={false}
-                            data-color="regular"
-                            data-variant="ghost"
+                            data-color="primary"
+                            data-variant="textUnderlined"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -438,12 +438,12 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                          data-color="regular"
-                          data-variant="ghost"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                          data-color="error"
+                          data-variant="textUnderlined"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -483,7 +483,7 @@ exports[`renders reply list 1`] = `
                 className="Indent-level2 coral coral-indent-2"
               >
                 <div
-                  className="Comment-root"
+                  className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                   role="article"
                 >
                   <div
@@ -510,7 +510,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                             >
                               Isabelle
                             </span>
@@ -568,7 +568,7 @@ exports[`renders reply list 1`] = `
                       >
                         In reply to 
                         <span
-                          className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                          className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                         >
                           Markus
                         </span>
@@ -576,7 +576,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                   >
                     <div
                       className="HTMLContent-root coral coral-content coral-comment-content"
@@ -590,12 +590,12 @@ exports[`renders reply list 1`] = `
                       className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                          data-color="regular"
-                          data-variant="ghost"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -610,10 +610,10 @@ exports[`renders reply list 1`] = `
                           </span>
                         </button>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                           data-active={false}
-                          data-color="regular"
-                          data-variant="ghost"
+                          data-color="primary"
+                          data-variant="textUnderlined"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-4"
                           onBlur={[Function]}
@@ -633,10 +633,10 @@ exports[`renders reply list 1`] = `
                         >
                           <button
                             aria-controls="permalink-popover-comment-4"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                             data-active={false}
-                            data-color="regular"
-                            data-variant="ghost"
+                            data-color="primary"
+                            data-variant="textUnderlined"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -665,12 +665,12 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                          data-color="regular"
-                          data-variant="ghost"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                          data-color="error"
+                          data-variant="textUnderlined"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -712,7 +712,7 @@ exports[`renders reply list 1`] = `
             className="Indent-level1 coral coral-indent-1"
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -739,7 +739,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Isabelle
                         </span>
@@ -797,7 +797,7 @@ exports[`renders reply list 1`] = `
                   >
                     In reply to 
                     <span
-                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                      className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                     >
                       Markus
                     </span>
@@ -805,7 +805,7 @@ exports[`renders reply list 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -819,12 +819,12 @@ exports[`renders reply list 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -839,10 +839,10 @@ exports[`renders reply list 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-5"
                       onBlur={[Function]}
@@ -862,10 +862,10 @@ exports[`renders reply list 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-5"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -894,12 +894,12 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}

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

@@ -286,7 +286,7 @@ exports[`renders comment stream 1`] = `
         >
           <div
             aria-live="polite"
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
             data-testid="comments-allComments-log"
             id="comments-allComments-log"
             role="log"
@@ -308,7 +308,7 @@ exports[`renders comment stream 1`] = `
                       className=""
                     >
                       <div
-                        className="Comment-root"
+                        className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                         role="article"
                       >
                         <div
@@ -335,7 +335,7 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                   >
                                     Markus
                                   </span>
@@ -374,7 +374,7 @@ exports[`renders comment stream 1`] = `
                           </div>
                         </div>
                         <div
-                          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                         >
                           <div
                             className="HTMLContent-root coral coral-content coral-comment-content"
@@ -388,12 +388,12 @@ exports[`renders comment stream 1`] = `
                             className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                                data-color="regular"
-                                data-variant="ghost"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -408,10 +408,10 @@ exports[`renders comment stream 1`] = `
                                 </span>
                               </button>
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 id="comments-commentContainer-replyButton-comment-0"
                                 onBlur={[Function]}
@@ -431,10 +431,10 @@ exports[`renders comment stream 1`] = `
                               >
                                 <button
                                   aria-controls="permalink-popover-comment-0"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                   data-active={false}
-                                  data-color="regular"
-                                  data-variant="ghost"
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -463,12 +463,12 @@ exports[`renders comment stream 1`] = `
                               </div>
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                                data-color="regular"
-                                data-variant="ghost"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                                data-color="error"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -508,7 +508,7 @@ exports[`renders comment stream 1`] = `
                       className=""
                     >
                       <div
-                        className="Comment-root"
+                        className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                         role="article"
                       >
                         <div
@@ -535,7 +535,7 @@ exports[`renders comment stream 1`] = `
                                   type="button"
                                 >
                                   <span
-                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                                   >
                                     Moderator
                                   </span>
@@ -555,7 +555,7 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <span
-                                className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey"
+                                className="Tag-root coral coral-userTag coral-comment-userTag Tag-colorGrey Tag-uppercase"
                               >
                                 Staff
                               </span>
@@ -579,7 +579,7 @@ exports[`renders comment stream 1`] = `
                           </div>
                         </div>
                         <div
-                          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                         >
                           <div
                             className="HTMLContent-root coral coral-content coral-comment-content"
@@ -593,12 +593,12 @@ exports[`renders comment stream 1`] = `
                             className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                                data-color="regular"
-                                data-variant="ghost"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -613,10 +613,10 @@ exports[`renders comment stream 1`] = `
                                 </span>
                               </button>
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                                 data-active={false}
-                                data-color="regular"
-                                data-variant="ghost"
+                                data-color="primary"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 id="comments-commentContainer-replyButton-comment-from-staff-0"
                                 onBlur={[Function]}
@@ -636,10 +636,10 @@ exports[`renders comment stream 1`] = `
                               >
                                 <button
                                   aria-controls="permalink-popover-comment-from-staff-0"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                                   data-active={false}
-                                  data-color="regular"
-                                  data-variant="ghost"
+                                  data-color="primary"
+                                  data-variant="textUnderlined"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -668,12 +668,12 @@ exports[`renders comment stream 1`] = `
                               </div>
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                                data-color="regular"
-                                data-variant="ghost"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                                data-color="error"
+                                data-variant="textUnderlined"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}

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

@@ -24,7 +24,7 @@ exports[`renders comment stream 1`] = `
             className="Indent-level1 coral coral-indent-1"
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -51,7 +51,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Lukas
                         </span>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -104,12 +104,12 @@ exports[`renders comment stream 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -124,10 +124,10 @@ exports[`renders comment stream 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-1"
                       onBlur={[Function]}
@@ -147,10 +147,10 @@ exports[`renders comment stream 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-1"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -179,12 +179,12 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}

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

@@ -15,7 +15,7 @@ exports[`renders deepest comment with link 1`] = `
         className="Indent-level5 coral coral-indent-5"
       >
         <div
-          className="Comment-root"
+          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
           role="article"
         >
           <div
@@ -42,7 +42,7 @@ exports[`renders deepest comment with link 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                     >
                       Markus
                     </span>
@@ -100,7 +100,7 @@ exports[`renders deepest comment with link 1`] = `
               >
                 In reply to 
                 <span
-                  className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username coral coral-comment-inReplyToUsername"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                 >
                   Markus
                 </span>
@@ -108,7 +108,7 @@ exports[`renders deepest comment with link 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <div
               className="HTMLContent-root coral coral-content coral-comment-content"
@@ -122,12 +122,12 @@ exports[`renders deepest comment with link 1`] = `
               className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -142,10 +142,10 @@ exports[`renders deepest comment with link 1`] = `
                   </span>
                 </button>
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                   data-active={false}
-                  data-color="regular"
-                  data-variant="ghost"
+                  data-color="primary"
+                  data-variant="textUnderlined"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                   onBlur={[Function]}
@@ -165,10 +165,10 @@ exports[`renders deepest comment with link 1`] = `
                 >
                   <button
                     aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                     data-active={false}
-                    data-color="regular"
-                    data-variant="ghost"
+                    data-color="primary"
+                    data-variant="textUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -197,12 +197,12 @@ exports[`renders deepest comment with link 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                  data-color="regular"
-                  data-variant="ghost"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                  data-color="error"
+                  data-variant="textUnderlined"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}

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

@@ -3,7 +3,7 @@
 exports[`renders app with comment stream 1`] = `
 <div
   aria-live="polite"
-  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
   data-testid="comments-allComments-log"
   id="comments-allComments-log"
   role="log"
@@ -25,7 +25,7 @@ exports[`renders app with comment stream 1`] = `
             className=""
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -52,7 +52,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Isabelle
                         </span>
@@ -91,7 +91,7 @@ exports[`renders app with comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -105,12 +105,12 @@ exports[`renders app with comment stream 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -125,10 +125,10 @@ exports[`renders app with comment stream 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-2"
                       onBlur={[Function]}
@@ -148,10 +148,10 @@ exports[`renders app with comment stream 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-2"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -180,12 +180,12 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -225,7 +225,7 @@ exports[`renders app with comment stream 1`] = `
             className=""
           >
             <div
-              className="Comment-root"
+              className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
               role="article"
             >
               <div
@@ -252,7 +252,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                         >
                           Isabelle
                         </span>
@@ -291,7 +291,7 @@ exports[`renders app with comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <div
                   className="HTMLContent-root coral coral-content coral-comment-content"
@@ -305,12 +305,12 @@ exports[`renders app with comment stream 1`] = `
                   className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reactButton coral-comment-reactButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -325,10 +325,10 @@ exports[`renders app with comment stream 1`] = `
                       </span>
                     </button>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-replyButton"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                       data-active={false}
-                      data-color="regular"
-                      data-variant="ghost"
+                      data-color="primary"
+                      data-variant="textUnderlined"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-3"
                       onBlur={[Function]}
@@ -348,10 +348,10 @@ exports[`renders app with comment stream 1`] = `
                     >
                       <button
                         aria-controls="permalink-popover-comment-3"
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-comment-shareButton"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                         data-active={false}
-                        data-color="regular"
-                        data-variant="ghost"
+                        data-color="primary"
+                        data-variant="textUnderlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -380,12 +380,12 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost coral coral-reportButton coral-comment-reportButton"
-                      data-color="regular"
-                      data-variant="ghost"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
+                      data-color="error"
+                      data-variant="textUnderlined"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -19,26 +19,26 @@ exports[`renders configure 1`] = `
           className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
         >
           <div
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
           >
             Signed in as 
             <span
-              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
             >
               Moderator
             </span>
             .
           </div>
           <div
-            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
           >
             <span>
               Not you? 
             </span>
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-logoutButton"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
               data-color="primary"
-              data-variant="underlined"
+              data-variant="regular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}

src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap

@@ -0,0 +1,467 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the empty settings pane 1`] = `
+<div
+  className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary coral coral-tabBar"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={false}
+        className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        <span>
+          Comments
+        </span>
+      </button>
+    </li>
+    <li
+      className="Tab-root"
+      id="tab-PROFILE"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-PROFILE"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        <span>
+          My Profile
+        </span>
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-PROFILE"
+    className="App-tabContent coral coral-myProfile"
+    data-testid="current-tab-pane"
+    id="tabPane-PROFILE"
+    role="tabpanel"
+  >
+    <div
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+    >
+      <div
+        className="Box-root Flex-root coral coral-viewerBox"
+      >
+        <div
+          className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
+        >
+          <div
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
+          >
+            Signed in as 
+            <span
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+            >
+              Passivo
+            </span>
+            .
+          </div>
+          <div
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
+          >
+            <span>
+              Not you? 
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
+              data-color="primary"
+              data-variant="regular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+      <ul
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
+        role="tablist"
+      >
+        <li
+          className="Tab-root"
+          id="tab-MY_COMMENTS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-MY_COMMENTS"
+            aria-selected={false}
+            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <span>
+              My comments
+            </span>
+          </button>
+        </li>
+        <li
+          className="Tab-root"
+          id="tab-NOTIFICATIONS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-NOTIFICATIONS"
+            aria-selected={false}
+            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <span>
+              Notifications
+            </span>
+          </button>
+        </li>
+        <li
+          className="Tab-root"
+          id="tab-ACCOUNT"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-ACCOUNT"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <span>
+              Account
+            </span>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ACCOUNT"
+        className="coral coral-account"
+        id="tabPane-ACCOUNT"
+        role="tabpanel"
+      >
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        >
+          <h1
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+          >
+            Manage your account
+          </h1>
+          <div
+            className="Box-root HorizontalGutter-root AccountSettingsContainer-root HorizontalGutter-full"
+          >
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
+              data-testid="profile-changeUsername"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignBaseline"
+              >
+                <div>
+                  <h1
+                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark coral coral-myUsername"
+                  >
+                    Username
+                  </h1>
+                  <p
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Passivo
+                  </p>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myUsername-editButton"
+                  data-color="primary"
+                  data-variant="outlineFilled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
+            </div>
+            <div
+              className="Box-root HorizontalGutter-root coral coral-myEmail HorizontalGutter-spacing-5"
+              data-testid="profile-changeEmail"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+              >
+                <div>
+                  <h1
+                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
+                  >
+                    Email
+                  </h1>
+                  <div
+                    className="Box-root Flex-root Flex-flex"
+                  >
+                    <p
+                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    />
+                    <span>
+                       
+                    </span>
+                    <p
+                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextSecondary coral coral-myEmail-unverified"
+                    >
+                      (Unverified)
+                    </p>
+                  </div>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myEmail-editButton"
+                  data-color="primary"
+                  data-variant="outlineFilled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
+              <div
+                className="CallOut-root CallOut-colorRegular coral coral-verifyEmail"
+              >
+                <div>
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                  >
+                    <div>
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-lg"
+                      >
+                        email
+                      </i>
+                    </div>
+                    <div>
+                      <h1
+                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-gutterBottom"
+                      >
+                        Verify your email address
+                      </h1>
+                      <p
+                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                      >
+                        An email has been sent to $email to verify your account.
+You must verify your new email address before it can be used for
+signing into your account or for email notifications.
+                      </p>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular ChangeEmailContainer-resendButton coral coral-verifyEmail-resendButton"
+                        data-color="primary"
+                        data-variant="regular"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        Resend verification
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="coral coral-myPassword"
+              data-testid="profile-account-changePassword"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+              >
+                <h1
+                  className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
+                >
+                  Password
+                </h1>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myPassword-editButton"
+                  data-color="primary"
+                  data-variant="outlineFilled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
+            </div>
+            <div
+              className="coral coral-ignoredCommenters"
+              data-testid="profile-account-ignoredCommenters"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
+              >
+                <h1
+                  className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
+                >
+                  Ignored Commenters
+                </h1>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-ignoredComments-manageButton"
+                  data-color="primary"
+                  data-variant="outlineFilled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Manage
+                </button>
+              </div>
+            </div>
+            <div
+              className="DownloadCommentsContainer-root coral coral-downloadCommentHistory"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
+              >
+                <div
+                  className="DownloadCommentsContainer-content"
+                >
+                  <h1
+                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DownloadCommentsContainer-title"
+                  >
+                    Download my comment history
+                  </h1>
+                  <p
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DownloadCommentsContainer-description"
+                  >
+                    You will receive an email with a link to download your comment history.
+You can make 
+                    <strong>
+                      one download request every 14 days.
+                    </strong>
+                  </p>
+                </div>
+                <div>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-downloadCommentHistory-requestButton"
+                    data-color="primary"
+                    data-variant="outlineFilled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Request
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              className="DeleteAccountContainer-root coral coral-deleteMyAccount"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
+                data-testid="profile-account-deleteAccount"
+              >
+                <div
+                  className="DeleteAccountContainer-content"
+                >
+                  <h1
+                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DeleteAccountContainer-title"
+                  >
+                    Delete My Account
+                  </h1>
+                  <p
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DeleteAccountContainer-section"
+                  >
+                    Deleting your account will permanently erase your profile and remove
+all your comments from this site.
+                  </p>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-deleteMyAccount-requestButton"
+                  data-color="primary"
+                  data-variant="outlineFilled"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Request
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </section>
+</div>
+`;

src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap

@@ -5,41 +5,45 @@ exports[`renders profile 1`] = `
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="profile-commentHistory"
 >
-  <h1
-    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-  >
-    Comment History
-  </h1>
   <div
-    className="Box-root HorizontalGutter-root coral coral-myComment HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HistoryComment-root coral coral-myComment HorizontalGutter-full"
     data-testid="historyComment-comment-0"
   >
-    <h1
-      className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary coral coral-myComment-story"
-    >
-      Story: title
-    </h1>
-    <time
-      className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
-      dateTime="2018-07-06T18:24:00.000Z"
-      title="2018-07-06T18:24:00.000Z"
-    >
-      2018-07-06T18:24:00.000Z
-    </time>
-    <div
-      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
+    <div>
+      <p
+        className="Box-root Typography-root Typography-detail Typography-colorTextPrimary HistoryComment-commentOn"
+      >
+        Comment on:
+      </p>
+      <h1
+        className="Box-root Typography-root Typography-heading4 Typography-colorTextDark coral coral-myComment-story"
+      >
+        title
+      </h1>
+    </div>
+    <div>
+      <time
+        className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
+        dateTime="2018-07-06T18:24:00.000Z"
+        title="2018-07-06T18:24:00.000Z"
+      >
+        2018-07-06T18:24:00.000Z
+      </time>
       <div
-        className="HTMLContent-root coral coral-myComment-content"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Joining Too",
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        <div
+          className="HTMLContent-root coral coral-myComment-content"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "Joining Too",
+            }
           }
-        }
-      />
+        />
+      </div>
     </div>
     <div
-      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow gutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-alignCenter Flex-directionRow gutter"
     >
       <a
         className="TextLink-root HistoryComment-viewConversation coral coral-myComment-viewConversationButton"
@@ -52,35 +56,44 @@ exports[`renders profile 1`] = `
     </div>
   </div>
   <div
-    className="Box-root HorizontalGutter-root coral coral-myComment HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HistoryComment-root coral coral-myComment HorizontalGutter-full"
     data-testid="historyComment-comment-1"
   >
-    <h1
-      className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary coral coral-myComment-story"
-    >
-      Story: title
-    </h1>
-    <time
-      className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
-      dateTime="2018-07-06T18:24:00.000Z"
-      title="2018-07-06T18:24:00.000Z"
-    >
-      2018-07-06T18:24:00.000Z
-    </time>
-    <div
-      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
+    <div>
+      <p
+        className="Box-root Typography-root Typography-detail Typography-colorTextPrimary HistoryComment-commentOn"
+      >
+        Comment on:
+      </p>
+      <h1
+        className="Box-root Typography-root Typography-heading4 Typography-colorTextDark coral coral-myComment-story"
+      >
+        title
+      </h1>
+    </div>
+    <div>
+      <time
+        className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
+        dateTime="2018-07-06T18:24:00.000Z"
+        title="2018-07-06T18:24:00.000Z"
+      >
+        2018-07-06T18:24:00.000Z
+      </time>
       <div
-        className="HTMLContent-root coral coral-myComment-content"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "What's up?",
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        <div
+          className="HTMLContent-root coral coral-myComment-content"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "What's up?",
+            }
           }
-        }
-      />
+        />
+      </div>
     </div>
     <div
-      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow gutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-alignCenter Flex-directionRow gutter"
     >
       <a
         className="TextLink-root HistoryComment-viewConversation coral coral-myComment-viewConversationButton"
@@ -94,9 +107,9 @@ exports[`renders profile 1`] = `
   </div>
   <button
     aria-controls="coral-profile-commentHistory-log"
-    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth coral coral-loadMoreButton coral-myComments-loadMoreButton"
+    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlineFilled Button-fullWidth coral coral-loadMoreButton coral-myComments-loadMoreButton"
     data-color="regular"
-    data-variant="outlined"
+    data-variant="outlineFilled"
     disabled={false}
     id="coral-profile-commentHistory-loadMore"
     onBlur={[Function]}

src/core/client/stream/test/profile/__snapshots__/settings.spec.tsx.snap

@@ -1,722 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the empty settings pane 1`] = `
-<div
-  className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary coral coral-tabBar"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-PROFILE"
-    className="App-tabContent coral coral-myProfile"
-    data-testid="current-tab-pane"
-    id="tabPane-PROFILE"
-    role="tabpanel"
-  >
-    <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
-    >
-      <div
-        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
-      >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
-          data-testid="profile-changeUsername"
-        >
-          <div
-            className="Box-root Flex-root Flex-flex Flex-alignBaseline"
-          >
-            <h1
-              className="Box-root Typography-root Typography-header2 Typography-colorTextPrimary coral coral-myUsername"
-            >
-              Passivo
-            </h1>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular coral coral-myUsername-editButton"
-              data-color="primary"
-              data-variant="regular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Edit
-            </button>
-          </div>
-        </div>
-        <div
-          className="Box-root HorizontalGutter-root coral coral-myEmail HorizontalGutter-spacing-5"
-          data-testid="profile-changeEmail"
-        >
-          <div
-            className="Box-root Flex-root Flex-flex Flex-alignCenter"
-          >
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            />
-            <span>
-               
-            </span>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextSecondary coral coral-myEmail-unverified"
-            >
-              (Unverified)
-            </p>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular coral coral-myEmail-editButton"
-              data-color="primary"
-              data-variant="regular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Edit
-            </button>
-          </div>
-          <div
-            className="CallOut-root CallOut-colorRegular coral coral-verifyEmail"
-          >
-            <div>
-              <div
-                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
-              >
-                <div>
-                  <i
-                    aria-hidden="true"
-                    className="Icon-root Icon-lg"
-                  >
-                    email
-                  </i>
-                </div>
-                <div>
-                  <h1
-                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-gutterBottom"
-                  >
-                    Verify your email address
-                  </h1>
-                  <p
-                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    An email has been sent to $email to verify your account.
-You must verify your new email address before it can be used for
-signing into your account or for email notifications.
-                  </p>
-                  <button
-                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular ChangeEmailContainer-resendButton coral coral-verifyEmail-resendButton"
-                    data-color="primary"
-                    data-variant="regular"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="button"
-                  >
-                    Resend verification
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-MY_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-MY_COMMENTS"
-            aria-selected={false}
-            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <span>
-              My Comments
-            </span>
-          </button>
-        </li>
-        <li
-          className="Tab-root"
-          id="tab-SETTINGS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-SETTINGS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <span>
-              Settings
-            </span>
-          </button>
-        </li>
-      </ul>
-      <section
-        aria-labelledby="tab-SETTINGS"
-        className="coral coral-settings"
-        id="tabPane-SETTINGS"
-        role="tabpanel"
-      >
-        <div
-          className="Box-root HorizontalGutter-root SettingsContainer-root HorizontalGutter-spacing-5"
-        >
-          <div
-            className="coral coral-ignoredCommenters"
-            data-testid="profile-settings-ignoredCommenters"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-            >
-              Ignored Commenters
-            </h1>
-            <p
-              className="IgnoreUserSettingsContainer-description"
-            >
-              Once you ignore someone, all of their comments are hidden from you.
-Commenters you ignore will still be able to see your comments.
-            </p>
-            <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
-            >
-              <div
-                className="IgnoreUserSettingsContainer-empty"
-              >
-                You are not currently ignoring anyone
-              </div>
-            </div>
-          </div>
-          <div
-            className="coral coral-changePassword"
-            data-testid="profile-settings-changePassword"
-          >
-            <form
-              autoComplete="off"
-              onSubmit={[Function]}
-            >
-              <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-              >
-                <h1
-                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-                >
-                  Change Password
-                </h1>
-                <fieldset
-                  className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <fieldset
-                    className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                  >
-                    <label
-                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      htmlFor="oldPassword"
-                    >
-                      Old Password
-                    </label>
-                    <div
-                      className="PasswordField-fullWidth PasswordField-root"
-                    >
-                      <div
-                        className="PasswordField-wrapper"
-                      >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="current-password"
-                          autoCorrect="off"
-                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                          disabled={false}
-                          id="oldPassword"
-                          name="oldPassword"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="password"
-                          value=""
-                        />
-                        <div
-                          className="PasswordField-icon"
-                          onClick={[Function]}
-                          role="button"
-                          tabIndex={0}
-                          title="Hide password"
-                        >
-                          <i
-                            aria-hidden="true"
-                            className="Icon-root Icon-sm"
-                          >
-                            visibility
-                          </i>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-changePassword-forgotButton"
-                        data-color="primary"
-                        data-variant="underlined"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Forgot your password?
-                      </button>
-                    </div>
-                  </fieldset>
-                  <fieldset
-                    className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                  >
-                    <label
-                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      htmlFor="newPassword"
-                    >
-                      New Password
-                    </label>
-                    <div
-                      className="PasswordField-fullWidth PasswordField-root"
-                    >
-                      <div
-                        className="PasswordField-wrapper"
-                      >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="new-password"
-                          autoCorrect="off"
-                          className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                          disabled={false}
-                          id="newPassword"
-                          name="newPassword"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="password"
-                          value=""
-                        />
-                        <div
-                          className="PasswordField-icon"
-                          onClick={[Function]}
-                          role="button"
-                          tabIndex={0}
-                          title="Hide password"
-                        >
-                          <i
-                            aria-hidden="true"
-                            className="Icon-root Icon-sm"
-                          >
-                            visibility
-                          </i>
-                        </div>
-                      </div>
-                    </div>
-                  </fieldset>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
-                  >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-changePassword-changeButton"
-                      data-color="primary"
-                      data-variant="filled"
-                      disabled={true}
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="submit"
-                    >
-                      Change Password
-                    </button>
-                  </div>
-                </fieldset>
-              </div>
-            </form>
-          </div>
-          <div
-            className="DownloadCommentsContainer-root coral coral-downloadCommentHistory"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary DownloadCommentsContainer-title"
-            >
-              Download my comment history
-            </h1>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DownloadCommentsContainer-description"
-            >
-              You will receive an email with a link to download your comment history.
-You can make 
-              <strong>
-                one download request every 14 days.
-              </strong>
-            </p>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantOutlined coral coral-downloadCommentHistory-requestButton"
-              data-color="regular"
-              data-variant="outlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm DownloadCommentsContainer-icon"
-                title="Request comment history"
-              >
-                file_download
-              </i>
-              <span>
-                Request comment history
-              </span>
-            </button>
-          </div>
-          <div
-            className="DeleteAccountContainer-root coral coral-deleteMyAccount"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary DeleteAccountContainer-title"
-            >
-              Delete My Account
-            </h1>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DeleteAccountContainer-section"
-            >
-              Deleting your account will permanently erase your profile and remove
-all your comments from this site.
-            </p>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantOutlined coral coral-deleteMyAccount-requestButton"
-              data-color="regular"
-              data-variant="outlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm DeleteAccountContainer-icon"
-              >
-                cancel
-              </i>
-              <span>
-                Request account deletion
-              </span>
-            </button>
-          </div>
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
-            data-testid="profile-settings-notifications"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-            >
-              Email Notifications
-            </h1>
-            <h1
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary"
-            >
-              Receive notifications when:
-            </h1>
-            <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
-            >
-              <form
-                onSubmit={[Function]}
-              >
-                <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <fieldset
-                    className="FieldSet-root"
-                  >
-                    <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                    >
-                      <div
-                        className="CheckBox-root"
-                      >
-                        <input
-                          checked={false}
-                          className="CheckBox-input"
-                          id="onReply"
-                          name="onReply"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          type="checkbox"
-                          value={false}
-                        />
-                        <label
-                          className="CheckBox-label"
-                          htmlFor="onReply"
-                        >
-                          <span
-                            className="CheckBox-labelSpan"
-                          >
-                            My comment receives a reply
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                    >
-                      <div
-                        className="CheckBox-root"
-                      >
-                        <input
-                          checked={false}
-                          className="CheckBox-input"
-                          id="onFeatured"
-                          name="onFeatured"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          type="checkbox"
-                          value={false}
-                        />
-                        <label
-                          className="CheckBox-label"
-                          htmlFor="onFeatured"
-                        >
-                          <span
-                            className="CheckBox-labelSpan"
-                          >
-                            My comment is featured
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                    >
-                      <div
-                        className="CheckBox-root"
-                      >
-                        <input
-                          checked={false}
-                          className="CheckBox-input"
-                          id="onStaffReplies"
-                          name="onStaffReplies"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          type="checkbox"
-                          value={false}
-                        />
-                        <label
-                          className="CheckBox-label"
-                          htmlFor="onStaffReplies"
-                        >
-                          <span
-                            className="CheckBox-labelSpan"
-                          >
-                            A staff member replies to my comment
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                    >
-                      <div
-                        className="CheckBox-root"
-                      >
-                        <input
-                          checked={false}
-                          className="CheckBox-input"
-                          id="onModeration"
-                          name="onModeration"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          type="checkbox"
-                          value={false}
-                        />
-                        <label
-                          className="CheckBox-label"
-                          htmlFor="onModeration"
-                        >
-                          <span
-                            className="CheckBox-labelSpan"
-                          >
-                            My pending comment has been reviewed
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                    >
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
-                      >
-                        <p
-                          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-                        >
-                          Send Notifications:
-                        </p>
-                        <span
-                          className="SelectField-root"
-                        >
-                          <select
-                            className="SelectField-select"
-                            disabled={true}
-                            id="digestFrequency"
-                            name="digestFrequency"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            value="NONE"
-                          >
-                            <option
-                              value="NONE"
-                            >
-                              Immediately
-                            </option>
-                            <option
-                              value="DAILY"
-                            >
-                              Daily
-                            </option>
-                            <option
-                              value="HOURLY"
-                            >
-                              Hourly
-                            </option>
-                          </select>
-                          <span
-                            aria-hidden={true}
-                            className="SelectField-afterWrapper SelectField-afterWrapperDisabled"
-                          >
-                            <i
-                              aria-hidden="true"
-                              className="Icon-root Icon-sm"
-                            >
-                              expand_more
-                            </i>
-                          </span>
-                        </span>
-                      </div>
-                    </div>
-                  </fieldset>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
-                  >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                      data-color="primary"
-                      data-variant="filled"
-                      disabled={true}
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="submit"
-                    >
-                      Update Notification Settings
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </section>
-</div>
-`;

src/core/client/stream/test/profile/account.spec.tsx

@@ -39,7 +39,7 @@ async function createTestRenderer(
       params.resolvers
     ),
     initLocalState: (localRecord, source, environment) => {
-      localRecord.setValue("SETTINGS", "profileTab");
+      localRecord.setValue("ACCOUNT", "profileTab");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, environment);
       }
@@ -47,13 +47,11 @@ async function createTestRenderer(
   });
 
   const ignoredCommenters = await waitForElement(() =>
-    within(testRenderer.root).queryByTestID(
-      "profile-settings-ignoredCommenters"
-    )
+    within(testRenderer.root).queryByTestID("profile-account-ignoredCommenters")
   );
 
   const changePassword = within(testRenderer.root).queryByTestID(
-    "profile-settings-changePassword"
+    "profile-account-changePassword"
   );
 
   return {
@@ -100,8 +98,13 @@ it("render password change form", async () => {
     }),
   });
   const changePassword = await waitForElement(() =>
-    within(testRenderer.root).getByTestID("profile-settings-changePassword")
+    within(testRenderer.root).getByTestID("profile-account-changePassword")
   );
+  const editButton = within(changePassword).getByText("Edit");
+  act(() => {
+    editButton.props.onClick();
+  });
+
   const form = within(changePassword).getByType("form");
   const oldPassword = await waitForElement(() =>
     within(form).getByID("oldPassword", { exact: false })
@@ -141,6 +144,10 @@ it("render password change form", async () => {
 
 it("render empty ignored users list", async () => {
   const { ignoredCommenters } = await createTestRenderer();
+  const editButton = within(ignoredCommenters).getByText("Manage");
+  act(() => {
+    editButton.props.onClick();
+  });
   await waitForElement(() =>
     within(ignoredCommenters).getByText(
       "You are not currently ignoring anyone",
@@ -170,6 +177,10 @@ it("render ignored users list", async () => {
       },
     }),
   });
+  const editButton = within(ignoredCommenters).getByText("Manage");
+  act(() => {
+    editButton.props.onClick();
+  });
   within(ignoredCommenters).getByText(commenters[0].username!);
   within(ignoredCommenters).getByText(commenters[1].username!);
 
@@ -184,100 +195,3 @@ it("render ignored users list", async () => {
   );
   within(ignoredCommenters).getByText(commenters[1].username!);
 });
-
-it("render notifications form", async () => {
-  const updateNotificationSettings = sinon
-    .stub()
-    .callsFake((_: any, { input: { clientMutationId, ...notifications } }) => {
-      expectAndFail(notifications).toMatchObject({
-        onReply: true,
-        onFeatured: true,
-        onStaffReplies: true,
-        onModeration: true,
-        digestFrequency: "HOURLY",
-      });
-      return {
-        user: pureMerge<typeof viewer>(viewer, {
-          notifications,
-        }),
-        clientMutationId,
-      };
-    });
-  const { testRenderer } = await createTestRenderer({
-    resolvers: createResolversStub<GQLResolver>({
-      Mutation: {
-        updateNotificationSettings,
-      },
-    }),
-  });
-  const container = await waitForElement(() =>
-    within(testRenderer.root).getByTestID("profile-settings-notifications")
-  );
-  const form = within(container).getByType("form");
-
-  // Get the form fields.
-  const onReply = await waitForElement(() =>
-    within(form).getByID("onReply", { exact: false })
-  );
-  const onStaffReplies = await waitForElement(() =>
-    within(form).getByID("onStaffReplies", { exact: false })
-  );
-  const onModeration = await waitForElement(() =>
-    within(form).getByID("onModeration", { exact: false })
-  );
-  const onFeatured = await waitForElement(() =>
-    within(form).getByID("onFeatured", { exact: false })
-  );
-  const digestFrequency = await waitForElement(() =>
-    within(form).getByID("digestFrequency", { exact: false })
-  );
-  const save = await waitForElement(() => within(form).getByType("button"));
-
-  // The save button should be disabled for unchanged fields.
-  expect(save.props.disabled).toEqual(true);
-
-  // The digest frequency select should be disabled with no options enabled.
-  expect(digestFrequency.props.disabled).toEqual(true);
-
-  // Enable the options.
-  act(() => {
-    onReply.props.onChange(true);
-    onStaffReplies.props.onChange(true);
-    onModeration.props.onChange(true);
-    onFeatured.props.onChange(true);
-  });
-
-  // The digest frequency select should now be enabled.
-  expect(digestFrequency.props.disabled).toEqual(false);
-
-  // Change the digest frequency.
-  act(() => {
-    digestFrequency.props.onChange("HOURLY");
-  });
-
-  // Submit the form.
-  await act(async () => {
-    await form.props.onSubmit();
-  });
-
-  // Ensure that the mutation was called and that the save button is now
-  // disabled.
-  expect(updateNotificationSettings.calledOnce).toEqual(true);
-  expect(save.props.disabled).toEqual(true);
-
-  // Change a notification option.
-  act(() => {
-    onReply.props.onChange(false);
-  });
-
-  // The save button should now be enabled.
-  expect(save.props.disabled).toEqual(false);
-
-  // Change a notification back (making it pristine).
-  act(() => {
-    onReply.props.onChange(true);
-  });
-
-  // The save button should now be disabled.
-  expect(save.props.disabled).toEqual(true);
-});

src/core/client/stream/test/profile/changeEmail.spec.tsx

@@ -30,7 +30,7 @@ async function createTestRenderer(
       params.resolvers
     ),
     initLocalState: (localRecord, source, environment) => {
-      localRecord.setValue("SETTINGS", "profileTab");
+      localRecord.setValue("ACCOUNT", "profileTab");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, environment);
       }

src/core/client/stream/test/profile/changeUsername.spec.tsx

@@ -38,7 +38,7 @@ async function createTestRenderer(
       params.resolvers
     ),
     initLocalState: (localRecord, source, environment) => {
-      localRecord.setValue("SETTINGS", "profileTab");
+      localRecord.setValue("ACCOUNT", "profileTab");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, environment);
       }

src/core/client/stream/test/profile/deleteAccount.spec.tsx

@@ -31,7 +31,7 @@ async function createTestRenderer(
       params.resolvers
     ),
     initLocalState: (localRecord, source, environment) => {
-      localRecord.setValue("SETTINGS", "profileTab");
+      localRecord.setValue("ACCOUNT", "profileTab");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, environment);
       }
@@ -65,24 +65,16 @@ describe("delete account steps", () => {
       }),
     });
     testRenderer = setup.testRenderer;
-
-    const settingsButton = await waitForElement(() =>
-      within(testRenderer.root).getByText("Settings", {
-        selector: "button",
-      })
-    );
-    act(() => {
-      settingsButton.props.onClick();
-    });
   });
 
   it("request account deletion button shows deletion modal", async () => {
-    const requestDeletionButton = within(testRenderer.root).getByText(
-      "Request account deletion",
-      {
-        selector: "button",
-      }
+    const deleteAccount = await waitForElement(() =>
+      within(testRenderer.root).queryByTestID("profile-account-deleteAccount")
     );
+
+    const requestDeletionButton = within(deleteAccount).getByText("Request", {
+      selector: "button",
+    });
     act(() => {
       requestDeletionButton.props.onClick();
     });
@@ -95,12 +87,13 @@ describe("delete account steps", () => {
   });
 
   it("schedules deletion if deletion steps are followed", async () => {
-    const requestDeletionButton = within(testRenderer.root).getByText(
-      "Request account deletion",
-      {
-        selector: "button",
-      }
+    const deleteAccount = await waitForElement(() =>
+      within(testRenderer.root).queryByTestID("profile-account-deleteAccount")
     );
+
+    const requestDeletionButton = within(deleteAccount).getByText("Request", {
+      selector: "button",
+    });
     act(() => {
       requestDeletionButton.props.onClick();
     });
@@ -134,12 +127,13 @@ describe("delete account steps", () => {
   });
 
   it("deletion confirmation is required during deletion steps", async () => {
-    const requestDeletionButton = within(testRenderer.root).getByText(
-      "Request account deletion",
-      {
-        selector: "button",
-      }
+    const deleteAccount = await waitForElement(() =>
+      within(testRenderer.root).queryByTestID("profile-account-deleteAccount")
     );
+
+    const requestDeletionButton = within(deleteAccount).getByText("Request", {
+      selector: "button",
+    });
     act(() => {
       requestDeletionButton.props.onClick();
     });
@@ -171,12 +165,13 @@ describe("delete account steps", () => {
   });
 
   it("password is required during deletion steps", async () => {
-    const requestDeletionButton = within(testRenderer.root).getByText(
-      "Request account deletion",
-      {
-        selector: "button",
-      }
+    const deleteAccount = await waitForElement(() =>
+      within(testRenderer.root).queryByTestID("profile-account-deleteAccount")
     );
+
+    const requestDeletionButton = within(deleteAccount).getByText("Request", {
+      selector: "button",
+    });
     act(() => {
       requestDeletionButton.props.onClick();
     });

src/core/client/stream/test/profile/notificationSettings.spec.tsx

@@ -0,0 +1,143 @@
+import sinon from "sinon";
+
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver } from "coral-framework/schema";
+import {
+  act,
+  createResolversStub,
+  CreateTestRendererParams,
+  waitForElement,
+  within,
+} from "coral-framework/testHelpers";
+
+import { settings, stories, viewerPassive } from "../fixtures";
+import create from "./create";
+
+const story = stories[0];
+const viewer = viewerPassive;
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          viewer: () => viewer,
+          story: () => story,
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue("NOTIFICATIONS", "profileTab");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+
+  return {
+    testRenderer,
+    context,
+  };
+}
+
+it("render notifications form", async () => {
+  const updateNotificationSettings = sinon
+    .stub()
+    .callsFake((_: any, { input: { clientMutationId, ...notifications } }) => {
+      expectAndFail(notifications).toMatchObject({
+        onReply: true,
+        onFeatured: true,
+        onStaffReplies: true,
+        onModeration: true,
+        digestFrequency: "HOURLY",
+      });
+      return {
+        user: pureMerge<typeof viewer>(viewer, {
+          notifications,
+        }),
+        clientMutationId,
+      };
+    });
+  const { testRenderer } = await createTestRenderer({
+    resolvers: createResolversStub<GQLResolver>({
+      Mutation: {
+        updateNotificationSettings,
+      },
+    }),
+  });
+  const container = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("profile-account-notifications")
+  );
+  const form = within(container).getByType("form");
+
+  // Get the form fields.
+  const onReply = await waitForElement(() =>
+    within(form).getByID("onReply", { exact: false })
+  );
+  const onStaffReplies = await waitForElement(() =>
+    within(form).getByID("onStaffReplies", { exact: false })
+  );
+  const onModeration = await waitForElement(() =>
+    within(form).getByID("onModeration", { exact: false })
+  );
+  const onFeatured = await waitForElement(() =>
+    within(form).getByID("onFeatured", { exact: false })
+  );
+  const digestFrequency = await waitForElement(() =>
+    within(form).getByID("digestFrequency", { exact: false })
+  );
+  const save = await waitForElement(() => within(form).getByType("button"));
+
+  // The save button should be disabled for unchanged fields.
+  expect(save.props.disabled).toEqual(true);
+
+  // The digest frequency select should be disabled with no options enabled.
+  expect(digestFrequency.props.disabled).toEqual(true);
+
+  // Enable the options.
+  act(() => {
+    onReply.props.onChange(true);
+    onStaffReplies.props.onChange(true);
+    onModeration.props.onChange(true);
+    onFeatured.props.onChange(true);
+  });
+
+  // The digest frequency select should now be enabled.
+  expect(digestFrequency.props.disabled).toEqual(false);
+
+  // Change the digest frequency.
+  act(() => {
+    digestFrequency.props.onChange("HOURLY");
+  });
+
+  // Submit the form.
+  await act(async () => {
+    await form.props.onSubmit();
+  });
+
+  // Ensure that the mutation was called and that the save button is now
+  // disabled.
+  expect(updateNotificationSettings.calledOnce).toEqual(true);
+  expect(save.props.disabled).toEqual(true);
+
+  // Change a notification option.
+  act(() => {
+    onReply.props.onChange(false);
+  });
+
+  // The save button should now be enabled.
+  expect(save.props.disabled).toEqual(false);
+
+  // Change a notification back (making it pristine).
+  act(() => {
+    onReply.props.onChange(true);
+  });
+
+  // The save button should now be disabled.
+  expect(save.props.disabled).toEqual(true);
+});

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

@@ -131,7 +131,7 @@
   }
 }
 
-.variantFilled {
+.variantFilled, .variantOutlineFilled.mouseHover {
   color: var(--palette-text-light);
   &.colorRegular {
     background-color: var(--palette-grey-main);
@@ -151,7 +151,13 @@
   &.colorDark {
     background-color: var(--palette-text-primary);
   }
+} 
 
+.variantOutlineFilled.mouseHover {
+  border: 1px solid transparent; /* prevent jumping between outlined and filled on hover */
+}
+
+.variantFilled {
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
@@ -211,7 +217,7 @@
   }
 }
 
-.variantOutlined {
+.variantOutlined, .variantOutlineFilled:not(.mouseHover) {
   border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
@@ -237,7 +243,8 @@
     color: var(--palette-text-primary);
     border: 1px solid currentColor;
   }
-
+}
+.variantOutlined {
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
@@ -573,3 +580,33 @@
     }
   }
 }
+
+.variantTextUnderlined {
+  font-weight: 700;
+  &:not(.disabled) {
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-main);
+        & > span {
+          text-decoration: underline;
+        }
+      }
+      &.active,
+      &:active {
+        color: var(--palette-primary-main);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-main);
+        & > span {
+          text-decoration: underline;
+        }
+      }
+      &.active,
+      &:active {
+        color: var(--palette-error-main);
+      }
+    }
+  }
+}

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

@@ -40,7 +40,9 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
     | "outlined"
     | "ghost"
     | "underlined"
-    | "adornment";
+    | "adornment"
+    | "textUnderlined"
+    | "outlineFilled";
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -94,6 +96,8 @@ export class Button extends React.Component<Props> {
         [classes.variantGhost]: variant === "ghost",
         [classes.variantAdornment]: variant === "adornment",
         [classes.variantUnderlined]: variant === "underlined",
+        [classes.variantTextUnderlined]: variant === "textUnderlined",
+        [classes.variantOutlineFilled]: variant === "outlineFilled",
         [classes.fullWidth]: fullWidth,
         [classes.active]: active,
         [classes.disabled]: disabled,

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

@@ -11,6 +11,10 @@
   word-break: break-word;
 }
 
+.borderless {
+  border-style: none;
+}
+
 .colorRegular {
   background-color: var(--palette-grey-lightest);
   border-color: var(--palette-grey-light);

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

@@ -27,10 +27,23 @@ export interface CallOutProps {
    * If set renders a full width CallOut
    */
   fullWidth?: boolean;
+
+  /*
+   * If set removes border
+   */
+  borderless?: boolean;
 }
 
 const CallOut: FunctionComponent<CallOutProps> = props => {
-  const { className, classes, color, fullWidth, children, ...rest } = props;
+  const {
+    borderless,
+    className,
+    classes,
+    color,
+    fullWidth,
+    children,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -39,6 +52,7 @@ const CallOut: FunctionComponent<CallOutProps> = props => {
       [classes.colorError]: color === "error",
       [classes.colorPrimary]: color === "primary",
       [classes.colorSuccess]: color === "success",
+      [classes.borderless]: borderless,
       [classes.fullWidth]: fullWidth,
     },
     className

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

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { withStyles } from "coral-ui/hocs";
@@ -17,7 +18,7 @@ const Dropdown: FunctionComponent<Props> = ({
   ...rest
 }) => {
   return (
-    <div className={classes.root} {...rest}>
+    <div className={cn(classes.root, className)} {...rest}>
       {children}
     </div>
   );

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

@@ -4,7 +4,7 @@
   line-height: 1;
   padding: var(--spacing-1);
   white-space: nowrap;
-  border-radius: 1px;
+  border-radius: 2px;
   display: inline-block;
 }
 
@@ -44,3 +44,7 @@
     color: var(--palette-error-dark);
   }
 }
+
+.uppercase {
+  text-transform: uppercase;
+}

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

@@ -26,6 +26,7 @@ const Tag: FunctionComponent<Props> = props => {
     [classes.colorError]: color === "error",
     [classes.colorGrey]: color === "grey",
     [classes.colorDarkest]: color === "dark",
+    [classes.uppercase]: variant !== "pill",
   });
 
   return (

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

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Tag-root custom Tag-colorGrey"
+  className="Tag-root custom Tag-colorGrey Tag-uppercase"
 >
   Staff
 </span>

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

@@ -60,10 +60,6 @@
   composes: buttonLarge from "coral-ui/shared/typography.css";
 }
 
-.inputLabel {
-  composes: inputLabel from "coral-ui/shared/typography.css";
-}
-
 .detail {
   composes: detail from "coral-ui/shared/typography.css";
 }
@@ -114,6 +110,10 @@
   color: var(--palette-text-secondary);
 }
 
+.colorTextDark {
+  color: var(--palette-text-dark);
+}
+
 .colorTextLight {
   color: var(--palette-text-light);
 }
@@ -133,3 +133,7 @@
 .colorSuccess {
   color: var(--palette-success-darkest);
 }
+
+.inputLabel {
+  composes: inputLabel from "coral-ui/shared/typography.css";
+}

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

@@ -60,6 +60,7 @@ interface Props extends PropTypesOf<typeof Box> {
     | "warning"
     | "error"
     | "errorDark"
+    | "textDark"
     | "success";
   /**
    * The container used for the root node.
@@ -118,6 +119,7 @@ const Typography: FunctionComponent<Props> = props => {
       [classes.colorTextSecondary]: color === "textSecondary",
       [classes.colorTextLight]: color === "textLight",
       [classes.colorPrimary]: color === "primary",
+      [classes.colorTextDark]: color === "textDark",
       [classes.colorError]: color === "error",
       [classes.colorErrorDark]: color === "errorDark",
       [classes.colorSuccess]: color === "success",

src/core/client/ui/hocs/withStyles.ts

@@ -18,6 +18,8 @@ function withStyles<T>(
       Object.keys(props.classes).forEach(k => {
         if (classes[k]) {
           resolvedClasses[k] += ` ${props.classes[k]}`;
+        } else if (process.env.NODE_ENV === "test") {
+          throw new Error(`Extending non existent className ${k}`);
         } else if (process.env.NODE_ENV !== "production") {
           // tslint:disable:next-line: no-console
           console.warn("Extending non existent className", k);