[CORL-130] Handle non-visible comment status (#2213)

* feat: support blue color in message

* feat: Show message when comment is in review

* feat: handle non-visible comment status

* test: add feature test for handling invisible comment status

* fix: apply review

* chore: better comment :-)

* Update isVisible.ts

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

@@ -21,6 +21,16 @@
 .colorError {
   background-color: var(--palette-error-light);
   border-color: var(--palette-error-darkest);
+  border-width: 0px;
+  border-left-width: calc(0.5 * var(--spacing-unit));
+  color: var(--palette-text-light);
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-light);
+  border-color: var(--palette-primary-darkest);
+  border-width: 0px;
+  border-left-width: calc(0.5 * var(--spacing-unit));
   color: var(--palette-text-light);
 }
 

src/core/client/ui/components/Message/Message.mdx

@@ -3,26 +3,36 @@ name: Message
 menu: UI Kit
 ---
 
-import { Playground } from 'docz'
-import Message from './Message'
-import MessageIcon from './MessageIcon'
-import HorizontalGutter from '../HorizontalGutter'
+import { Playground } from "docz";
+import Message from "./Message";
+import MessageIcon from "./MessageIcon";
+import HorizontalGutter from "../HorizontalGutter";
 
 # Message
 
 ## Basic Use
+
 <Playground>
   <HorizontalGutter>
     <Message>This is a message</Message>
-    <Message fullWidth>Contrary to popular belief, Lorem Ipsum is not simply random text.</Message>
+    <Message fullWidth>
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
+    <Message fullWidth color="error">
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
+    <Message fullWidth color="primary">
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
   </HorizontalGutter>
 </Playground>
 
 ## Usage with icon
+
 <Playground>
   <HorizontalGutter>
-    <Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
+    <Message>
+      <MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining
+    </Message>
   </HorizontalGutter>
 </Playground>
-
-

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

@@ -24,7 +24,7 @@ export interface MessageProps {
   /*
   * Name of color, "grey" stays by default - common gray one
   */
-  color?: "error" | "grey";
+  color?: "error" | "grey" | "primary";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
@@ -35,6 +35,7 @@ const Message: StatelessComponent<MessageProps> = props => {
     {
       [classes.colorGrey]: color === "grey",
       [classes.colorError]: color === "error",
+      [classes.colorPrimary]: color === "primary",
       [classes.fullWidth]: fullWidth,
     },
     className