[CORL-399] Hide Non-Visible Comments (#2344)

* feat: added support for hiding non-visible comments

* fix: updated copy

* feat: refined style

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

@@ -4,6 +4,7 @@ import React, { FunctionComponent, MouseEvent } from "react";
 import { PropTypesOf } from "coral-framework/types";
 import {
   Button,
+  CallOut,
   Flex,
   HorizontalGutter,
   Typography,
@@ -69,9 +70,13 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
         )}
       </Flex>
       {!comment && (
-        <Localized id="comments-permalinkView-commentNotFound">
-          <Typography>Comment not found</Typography>
-        </Localized>
+        <CallOut fullWidth>
+          <Localized id="comments-permalinkView-commentRemovedOrDoesNotExist">
+            <Typography>
+              This comment has been removed or does not exist.
+            </Typography>
+          </Localized>
+        </CallOut>
       )}
       {comment && (
         <HorizontalGutter>

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

@@ -47,13 +47,17 @@ exports[`renders comment not found 1`] = `
       </ForwardRef(forwardRef)>
     </Localized>
   </ForwardRef(forwardRef)>
-  <Localized
-    id="comments-permalinkView-commentNotFound"
+  <withPropsOnChange(CallOut)
+    fullWidth={true}
   >
-    <ForwardRef(forwardRef)>
-      Comment not found
-    </ForwardRef(forwardRef)>
-  </Localized>
+    <Localized
+      id="comments-permalinkView-commentRemovedOrDoesNotExist"
+    >
+      <ForwardRef(forwardRef)>
+        This comment has been removed or does not exist.
+      </ForwardRef(forwardRef)>
+    </Localized>
+  </withPropsOnChange(CallOut)>
 </ForwardRef(forwardRef)>
 `;
 

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

@@ -67,11 +67,15 @@ exports[`renders permalink view with unknown comment 1`] = `
         View Full Discussion
       </a>
     </div>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    <div
+      className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
     >
-      Comment not found
-    </p>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        This comment has been removed or does not exist.
+      </p>
+    </div>
   </div>
 </section>
 `;