[CORL-161, CORL-240] Message Box (#2222)

* feat: Message Box

* test: do all the testing stuff

* fix: removed old messageBox

* Update src/core/client/stream/tabs/configure/components/MessageBoxConfig.tsx

Co-Authored-By: wyattjoh <wyattjoh@gmail.com>

* fix: addressed space error

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

@@ -18,6 +18,12 @@
   color: var(--palette-grey-main);
 }
 
+.colorDark {
+  background-color: var(--palette-text-primary);
+  border-width: 0px;
+  color: var(--palette-text-light);
+}
+
 .colorError {
   background-color: var(--palette-error-light);
   border-color: var(--palette-error-darkest);

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" | "primary";
+  color?: "error" | "grey" | "primary" | "dark";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
@@ -36,6 +36,7 @@ const Message: StatelessComponent<MessageProps> = props => {
       [classes.colorGrey]: color === "grey",
       [classes.colorError]: color === "error",
       [classes.colorPrimary]: color === "primary",
+      [classes.colorDark]: color === "dark",
       [classes.fullWidth]: fullWidth,
     },
     className

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

@@ -1,6 +1,7 @@
 .root {
   align-self: flex-start;
   margin-top: 1px;
+  flex-shrink: 0;
   &:first-child {
     margin-right: calc(0.5 * var(--spacing-unit));
   }