From 5b92f7e96845d5daebe9e09b055b77c34b79e55e Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Wed, 15 Apr 2020 18:28:07 +0200
Subject: [PATCH] =?UTF-8?q?[CORL-1014]=C2=A0Style=20comments=20based=20on?=
 =?UTF-8?q?=20number=20of=20reactions=20(#2930)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add ability to style comments based on number of reactions

* feat: add coral-indent class

* fix: tests

* fix: snapshots
---
 src/core/client/stream/classes.ts             |  20 +-
 .../Comment/CommentContainer.spec.tsx         |   5 +
 .../Comments/Comment/CommentContainer.tsx     |  11 +-
 .../CommentContainer.spec.tsx.snap            | 191 +++++++++++++++++-
 .../__snapshots__/Indent.spec.tsx.snap        |   6 +-
 .../__snapshots__/permalinkView.spec.tsx.snap |  20 +-
 ...permalinkViewLoadMoreParents.spec.tsx.snap |  16 +-
 .../__snapshots__/editComment.spec.tsx.snap   |  16 +-
 .../__snapshots__/loadMore.spec.tsx.snap      |   8 +-
 .../__snapshots__/postComment.spec.tsx.snap   |   4 +-
 .../postLocalReply.spec.tsx.snap              |  24 +--
 .../__snapshots__/postReply.spec.tsx.snap     |   8 +-
 .../renderCommunityGuidelines.spec.tsx.snap   |   8 +-
 .../__snapshots__/renderReplies.spec.tsx.snap |  16 +-
 .../__snapshots__/renderStream.spec.tsx.snap  |   8 +-
 .../showAllReplies.spec.tsx.snap              |   6 +-
 .../showConversation.spec.tsx.snap            |   4 +-
 .../__snapshots__/sortStream.spec.tsx.snap    |   8 +-
 .../test/comments/stream/reaction.spec.tsx    |   3 +
 19 files changed, 290 insertions(+), 92 deletions(-)

diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
index 09fbe8353..1de1c61c7 100644
--- a/src/core/client/stream/classes.ts
+++ b/src/core/client/stream/classes.ts
@@ -272,6 +272,12 @@ const CLASSES = {
      */
     $root: "coral coral-comment",
 
+    /**
+     * reacted signifies the number of reactions of the comment.
+     * The no of reactions is appended: e.g. `coral-reacted-1`.
+     */
+    reacted: "coral coral-reacted",
+
     /**
      * topBar is the uppper bar of the comment.
      */
@@ -386,13 +392,13 @@ const CLASSES = {
      * indentation classes for the different levels.
      */
     indent: [
-      "",
-      "coral coral-indent-1",
-      "coral coral-indent-2",
-      "coral coral-indent-3",
-      "coral coral-indent-4",
-      "coral coral-indent-5",
-      "coral coral-indent-6",
+      "coral coral-indent coral-indent-0",
+      "coral coral-indent coral-indent-1",
+      "coral coral-indent coral-indent-2",
+      "coral coral-indent coral-indent-3",
+      "coral coral-indent coral-indent-4",
+      "coral coral-indent coral-indent-5",
+      "coral coral-indent coral-indent-6",
     ],
   },
 
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
index d3cfd2c07..22ac5d659 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
@@ -34,6 +34,11 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
           username: "Marvin",
           badges: [],
         },
+        actionCounts: {
+          reaction: {
+            total: 0,
+          },
+        },
         parent: null,
         body: "Woof",
         createdAt: "1995-12-17T03:24:00.000Z",
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index 0e17c1d46..3b1f518d1 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -295,7 +295,11 @@ export class CommentContainer extends Component<Props, State> {
     }
     return (
       <div
-        className={cn(CLASSES.comment.$root, className)}
+        className={cn(
+          CLASSES.comment.$root,
+          `${CLASSES.comment.reacted}-${comment.actionCounts.reaction.total}`,
+          className
+        )}
         data-testid={`comment-${comment.id}`}
       >
         <HorizontalGutter>
@@ -514,6 +518,11 @@ const enhanced = withContext(({ eventEmitter }) => ({ eventEmitter }))(
             pending
             lastViewerAction
             deleted
+            actionCounts {
+              reaction {
+                total
+              }
+            }
             ...ReplyCommentFormContainer_comment
             ...EditCommentFormContainer_comment
             ...ReactionButtonContainer_comment
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
index 65e2b4cbe..d34e7479c 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`hide reply button 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -21,6 +21,11 @@ exports[`hide reply button 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -72,6 +77,11 @@ exports[`hide reply button 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -116,6 +126,11 @@ exports[`hide reply button 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -142,6 +157,11 @@ exports[`hide reply button 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -183,6 +203,11 @@ exports[`hide reply button 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -213,7 +238,7 @@ exports[`hide reply button 1`] = `
 
 exports[`renders body only 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -232,6 +257,11 @@ exports[`renders body only 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -290,6 +320,11 @@ exports[`renders body only 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -334,6 +369,11 @@ exports[`renders body only 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -360,6 +400,11 @@ exports[`renders body only 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -401,6 +446,11 @@ exports[`renders body only 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -431,7 +481,7 @@ exports[`renders body only 1`] = `
 
 exports[`renders disabled reply when commenting has been disabled 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -450,6 +500,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -508,6 +563,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -552,6 +612,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -578,6 +643,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -619,6 +689,11 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -649,7 +724,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
 
 exports[`renders disabled reply when story is closed 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -668,6 +743,11 @@ exports[`renders disabled reply when story is closed 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -726,6 +806,11 @@ exports[`renders disabled reply when story is closed 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -770,6 +855,11 @@ exports[`renders disabled reply when story is closed 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -796,6 +886,11 @@ exports[`renders disabled reply when story is closed 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -837,6 +932,11 @@ exports[`renders disabled reply when story is closed 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -867,7 +967,7 @@ exports[`renders disabled reply when story is closed 1`] = `
 
 exports[`renders in reply to 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -886,6 +986,11 @@ exports[`renders in reply to 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -948,6 +1053,11 @@ exports[`renders in reply to 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -996,6 +1106,11 @@ exports[`renders in reply to 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1026,6 +1141,11 @@ exports[`renders in reply to 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1071,6 +1191,11 @@ exports[`renders in reply to 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1105,7 +1230,7 @@ exports[`renders in reply to 1`] = `
 
 exports[`renders username and body 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -1124,6 +1249,11 @@ exports[`renders username and body 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -1182,6 +1312,11 @@ exports[`renders username and body 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -1226,6 +1361,11 @@ exports[`renders username and body 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1252,6 +1392,11 @@ exports[`renders username and body 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1293,6 +1438,11 @@ exports[`renders username and body 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1323,7 +1473,7 @@ exports[`renders username and body 1`] = `
 
 exports[`renders with tombstone when comment has been deleted 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef) />
@@ -1332,7 +1482,7 @@ exports[`renders with tombstone when comment has been deleted 1`] = `
 
 exports[`shows conversation link 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-id"
 >
   <ForwardRef(forwardRef)>
@@ -1351,6 +1501,11 @@ exports[`shows conversation link 1`] = `
                 className="coral coral-reactButton coral-comment-reactButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -1409,6 +1564,11 @@ exports[`shows conversation link 1`] = `
                 className="coral coral-reportButton coral-comment-reportButton"
                 comment={
                   Object {
+                    "actionCounts": Object {
+                      "reaction": Object {
+                        "total": 0,
+                      },
+                    },
                     "author": Object {
                       "badges": Array [],
                       "id": "author-id",
@@ -1459,6 +1619,11 @@ exports[`shows conversation link 1`] = `
             className="coral coral-username coral-comment-username"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1485,6 +1650,11 @@ exports[`shows conversation link 1`] = `
             className="coral coral-userTag coral-comment-userTag"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
@@ -1526,6 +1696,11 @@ exports[`shows conversation link 1`] = `
             className="coral coral-userBadge coral-comment-userBadge"
             comment={
               Object {
+                "actionCounts": Object {
+                  "reaction": Object {
+                    "total": 0,
+                  },
+                },
                 "author": Object {
                   "badges": Array [],
                   "id": "author-id",
diff --git a/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
index f5f658bfb..dcba4ab1a 100644
--- a/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders level0 1`] = `
   className="Indent-root"
 >
   <div
-    className=""
+    className="coral coral-indent coral-indent-0"
   >
     <div>
       Hello World
@@ -19,7 +19,7 @@ exports[`renders level1 1`] = `
   className="Indent-root"
 >
   <div
-    className="Indent-level1 coral coral-indent-1"
+    className="Indent-level1 coral coral-indent coral-indent-1"
   >
     <div>
       Hello World
@@ -33,7 +33,7 @@ exports[`renders without border 1`] = `
   className="Indent-root"
 >
   <div
-    className="Indent-level1 coral coral-indent-1 Indent-noBorder"
+    className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder"
   >
     <div>
       Hello World
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
index 10dc7414f..2cca16d5f 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
@@ -105,7 +105,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-1"
             >
               <div
@@ -115,7 +115,7 @@ exports[`renders permalink view 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className=""
+                    className="coral coral-indent coral-indent-0"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -336,7 +336,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-2"
             >
               <div
@@ -346,7 +346,7 @@ exports[`renders permalink view 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className=""
+                    className="coral coral-indent coral-indent-0"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -565,7 +565,7 @@ exports[`renders permalink view 1`] = `
               </svg>
             </div>
             <div
-              className="coral coral-comment coral coral-conversationThread-highlighted"
+              className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
               data-testid="comment-comment-with-replies"
             >
               <div
@@ -575,7 +575,7 @@ exports[`renders permalink view 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className=""
+                    className="coral coral-indent coral-indent-0"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
@@ -790,7 +790,7 @@ exports[`renders permalink view 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-3"
             >
               <div
@@ -800,7 +800,7 @@ exports[`renders permalink view 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className="Indent-level1 coral coral-indent-1"
+                    className="Indent-level1 coral coral-indent coral-indent-1"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1031,7 +1031,7 @@ exports[`renders permalink view 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-4"
             >
               <div
@@ -1041,7 +1041,7 @@ exports[`renders permalink view 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className="Indent-level1 coral coral-indent-1"
+                    className="Indent-level1 coral coral-indent coral-indent-1"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index 6c1cd02ba..00b0b2724 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -150,7 +150,7 @@ exports[`renders conversation thread 1`] = `
         </svg>
       </div>
       <div
-        className="coral coral-comment coral coral-conversationThread-highlighted"
+        className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
         data-testid="comment-comment-0"
       >
         <div
@@ -160,7 +160,7 @@ exports[`renders conversation thread 1`] = `
             className="Indent-root"
           >
             <div
-              className=""
+              className="coral coral-indent coral-indent-0"
             >
               <div
                 className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
@@ -394,7 +394,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
-        className="coral coral-comment"
+        className="coral coral-comment coral coral-reacted-0"
         data-testid="comment-comment-1"
       >
         <div
@@ -404,7 +404,7 @@ exports[`shows more of this conversation 1`] = `
             className="Indent-root"
           >
             <div
-              className=""
+              className="coral coral-indent coral-indent-0"
             >
               <div
                 className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -625,7 +625,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
-        className="coral coral-comment"
+        className="coral coral-comment coral coral-reacted-0"
         data-testid="comment-comment-from-staff-0"
       >
         <div
@@ -635,7 +635,7 @@ exports[`shows more of this conversation 1`] = `
             className="Indent-root"
           >
             <div
-              className=""
+              className="coral coral-indent coral-indent-0"
             >
               <div
                 className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -860,7 +860,7 @@ exports[`shows more of this conversation 1`] = `
         </svg>
       </div>
       <div
-        className="coral coral-comment coral coral-conversationThread-highlighted"
+        className="coral coral-comment coral coral-reacted-0 coral coral-conversationThread-highlighted"
         data-testid="comment-comment-0"
       >
         <div
@@ -870,7 +870,7 @@ exports[`shows more of this conversation 1`] = `
             className="Indent-root"
           >
             <div
-              className=""
+              className="coral coral-indent coral-indent-0"
             >
               <div
                 className="Box-root HorizontalGutter-root Comment-root Comment-highlight HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 7d50f2271..45c1efedd 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`cancel edit 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -12,7 +12,7 @@ exports[`cancel edit 1`] = `
       className="Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -819,7 +819,7 @@ exports[`edit a comment: optimistic response 1`] = `
 
 exports[`edit a comment: render comment with edit button 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -829,7 +829,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
       className="Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1066,7 +1066,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
 
 exports[`edit a comment: server response 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -1076,7 +1076,7 @@ exports[`edit a comment: server response 1`] = `
       className="Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1322,7 +1322,7 @@ exports[`edit a comment: server response 1`] = `
 
 exports[`shows expiry message: edit form closed 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-replies"
 >
   <div
@@ -1332,7 +1332,7 @@ exports[`shows expiry message: edit form closed 1`] = `
       className="Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
index 51db22f65..4b70afa11 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`renders comment stream with load more button 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-0"
     >
       <div
@@ -22,7 +22,7 @@ exports[`renders comment stream with load more button 1`] = `
           className="Indent-root"
         >
           <div
-            className=""
+            className="coral coral-indent coral-indent-0"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -226,7 +226,7 @@ exports[`renders comment stream with load more button 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-1"
     >
       <div
@@ -236,7 +236,7 @@ exports[`renders comment stream with load more button 1`] = `
           className="Indent-root"
         >
           <div
-            className=""
+            className="coral coral-indent coral-indent-0"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
index ed56c3bd0..0100c28d3 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`post a comment: optimistic response 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-uuid-0"
 >
   <div
@@ -12,7 +12,7 @@ exports[`post a comment: optimistic response 1`] = `
       className="IndentedComment-blur Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
index 05f9c6ccc..825d29a63 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-deepest-replies-3"
 >
   <div
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
       className="Indent-root"
     >
       <div
-        className="Indent-level3 coral coral-indent-3"
+        className="Indent-level3 coral coral-indent coral-indent-3"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -450,7 +450,7 @@ exports[`post a reply: optimistic response 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-uuid-0"
     >
       <div
@@ -460,7 +460,7 @@ exports[`post a reply: optimistic response 1`] = `
           className="IndentedComment-blur Indent-root"
         >
           <div
-            className="Indent-level3 coral coral-indent-3"
+            className="Indent-level3 coral coral-indent coral-indent-3"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -717,7 +717,7 @@ exports[`renders comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-with-deepest-replies"
     >
       <div
@@ -727,7 +727,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root"
         >
           <div
-            className=""
+            className="coral coral-indent coral-indent-0"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -955,7 +955,7 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="coral coral-comment"
+          className="coral coral-comment coral coral-reacted-0"
           data-testid="comment-comment-with-deepest-replies-1"
         >
           <div
@@ -965,7 +965,7 @@ exports[`renders comment stream 1`] = `
               className="Indent-root"
             >
               <div
-                className="Indent-level1 coral coral-indent-1"
+                className="Indent-level1 coral coral-indent coral-indent-1"
               >
                 <div
                   className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1220,7 +1220,7 @@ exports[`renders comment stream 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-with-deepest-replies-2"
             >
               <div
@@ -1230,7 +1230,7 @@ exports[`renders comment stream 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className="Indent-level2 coral coral-indent-2"
+                    className="Indent-level2 coral coral-indent coral-indent-2"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -1485,7 +1485,7 @@ exports[`renders comment stream 1`] = `
                 className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="coral coral-comment"
+                  className="coral coral-comment coral coral-reacted-0"
                   data-testid="comment-comment-with-deepest-replies-3"
                 >
                   <div
@@ -1495,7 +1495,7 @@ exports[`renders comment stream 1`] = `
                       className="Indent-root"
                     >
                       <div
-                        className="Indent-level3 coral coral-indent-3"
+                        className="Indent-level3 coral coral-indent coral-indent-3"
                       >
                         <div
                           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
index 8d7b78ecd..73cc36693 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-0"
 >
   <div
@@ -12,7 +12,7 @@ exports[`post a reply: open reply form 1`] = `
       className="Indent-root"
     >
       <div
-        className=""
+        className="coral coral-indent coral-indent-0"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -406,7 +406,7 @@ exports[`post a reply: optimistic response 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-uuid-0"
     >
       <div
@@ -416,7 +416,7 @@ exports[`post a reply: optimistic response 1`] = `
           className="IndentedComment-blur Indent-root"
         >
           <div
-            className="Indent-level1 coral coral-indent-1"
+            className="Indent-level1 coral coral-indent coral-indent-1"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
index f931a3d65..941be6b4c 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
@@ -286,7 +286,7 @@ exports[`renders comment stream with community guidelines 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-0"
             >
               <div
@@ -296,7 +296,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className=""
+                    className="coral coral-indent coral-indent-0"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -500,7 +500,7 @@ exports[`renders comment stream with community guidelines 1`] = `
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="coral coral-comment"
+              className="coral coral-comment coral coral-reacted-0"
               data-testid="comment-comment-1"
             >
               <div
@@ -510,7 +510,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className=""
+                    className="coral coral-indent coral-indent-0"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
index 6b6d8cc2c..0e87226d6 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders reply list 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-with-replies"
     >
       <div
@@ -21,7 +21,7 @@ exports[`renders reply list 1`] = `
           className="Indent-root"
         >
           <div
-            className="Indent-level1 coral coral-indent-1"
+            className="Indent-level1 coral coral-indent coral-indent-1"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -257,7 +257,7 @@ exports[`renders reply list 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="coral coral-comment"
+          className="coral coral-comment coral coral-reacted-0"
           data-testid="comment-comment-3"
         >
           <div
@@ -267,7 +267,7 @@ exports[`renders reply list 1`] = `
               className="Indent-root"
             >
               <div
-                className="Indent-level2 coral coral-indent-2"
+                className="Indent-level2 coral coral-indent coral-indent-2"
               >
                 <div
                   className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -498,7 +498,7 @@ exports[`renders reply list 1`] = `
         className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="coral coral-comment"
+          className="coral coral-comment coral coral-reacted-0"
           data-testid="comment-comment-4"
         >
           <div
@@ -508,7 +508,7 @@ exports[`renders reply list 1`] = `
               className="Indent-root"
             >
               <div
-                className="Indent-level2 coral coral-indent-2"
+                className="Indent-level2 coral coral-indent coral-indent-2"
               >
                 <div
                   className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -741,7 +741,7 @@ exports[`renders reply list 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-5"
     >
       <div
@@ -751,7 +751,7 @@ exports[`renders reply list 1`] = `
           className="Indent-root"
         >
           <div
-            className="Indent-level1 coral coral-indent-1"
+            className="Indent-level1 coral coral-indent coral-indent-1"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
index 06f59c66a..b0597eec1 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -308,7 +308,7 @@ exports[`renders comment stream 1`] = `
                 className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="coral coral-comment"
+                  className="coral coral-comment coral coral-reacted-0"
                   data-testid="comment-comment-0"
                 >
                   <div
@@ -318,7 +318,7 @@ exports[`renders comment stream 1`] = `
                       className="Indent-root"
                     >
                       <div
-                        className=""
+                        className="coral coral-indent coral-indent-0"
                       >
                         <div
                           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -522,7 +522,7 @@ exports[`renders comment stream 1`] = `
                 className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="coral coral-comment"
+                  className="coral coral-comment coral coral-reacted-0"
                   data-testid="comment-comment-from-staff-0"
                 >
                   <div
@@ -532,7 +532,7 @@ exports[`renders comment stream 1`] = `
                       className="Indent-root"
                     >
                       <div
-                        className=""
+                        className="coral coral-indent coral-indent-0"
                       >
                         <div
                           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
index 6060e9933..11d0fb27e 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-1"
     >
       <div
@@ -21,7 +21,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root"
         >
           <div
-            className="Indent-level1 coral coral-indent-1"
+            className="Indent-level1 coral coral-indent coral-indent-1"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -225,7 +225,7 @@ exports[`renders comment stream 1`] = `
     className="Indent-root"
   >
     <div
-      className="Indent-level1 coral coral-indent-1 Indent-noBorder"
+      className="Indent-level1 coral coral-indent coral-indent-1 Indent-noBorder"
     >
       <button
         aria-controls="coral-comments-replyList-log--comment-0"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
index b22b6d416..b064fb544 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders deepest comment with link 1`] = `
 <div
-  className="coral coral-comment"
+  className="coral coral-comment coral coral-reacted-0"
   data-testid="comment-comment-with-deepest-replies-3"
 >
   <div
@@ -12,7 +12,7 @@ exports[`renders deepest comment with link 1`] = `
       className="Indent-root"
     >
       <div
-        className="Indent-level3 coral coral-indent-3"
+        className="Indent-level3 coral coral-indent coral-indent-3"
       >
         <div
           className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
index 5aa40883f..6d02b1c97 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`renders app with comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-2"
     >
       <div
@@ -22,7 +22,7 @@ exports[`renders app with comment stream 1`] = `
           className="Indent-root"
         >
           <div
-            className=""
+            className="coral coral-indent coral-indent-0"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
@@ -226,7 +226,7 @@ exports[`renders app with comment stream 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="coral coral-comment"
+      className="coral coral-comment coral coral-reacted-0"
       data-testid="comment-comment-3"
     >
       <div
@@ -236,7 +236,7 @@ exports[`renders app with comment stream 1`] = `
           className="Indent-root"
         >
           <div
-            className=""
+            className="coral coral-indent coral-indent-0"
           >
             <div
               className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
diff --git a/src/core/client/stream/test/comments/stream/reaction.spec.tsx b/src/core/client/stream/test/comments/stream/reaction.spec.tsx
index 21002d187..01d7625a4 100644
--- a/src/core/client/stream/test/comments/stream/reaction.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/reaction.spec.tsx
@@ -68,11 +68,14 @@ it("create and remove reaction", async () => {
   const comment = await waitForElement(() =>
     within(testRenderer.root).getByTestID(`comment-${commentID}`)
   );
+  expect(comment.props.className).toContain("coral-reacted-0");
   const button = within(comment).getByText("Respect", { selector: "button" });
   button.props.onClick({});
   expect(within(button).toJSON()).toMatchSnapshot("Respected");
   expect(resolvers.Mutation.createCommentReaction.called).toBe(true);
+  expect(comment.props.className).toContain("coral-reacted-1");
   button.props.onClick({});
   expect(within(button).toJSON()).toMatchSnapshot("Unrespected");
   expect(resolvers.Mutation.removeCommentReaction.called).toBe(true);
+  expect(comment.props.className).toContain("coral-reacted-0");
 });