Add new kind of system message with red text

stylesheets/components/SystemMessage.scss

@@ -291,10 +291,31 @@
   }
 
   &--error {
+    .SystemMessage__contents::before {
+      @include light-theme {
+        background-color: $color-accent-red;
+      }
+      @include dark-theme {
+        background-color: $color-accent-red;
+      }
+    }
+  }
+
+  &--danger {
+    @include light-theme {
       color: $color-accent-red;
+    }
+    @include dark-theme {
+      color: $color-accent-red;
+    }
 
     .SystemMessage__contents::before {
-      background: $color-accent-red;
+      @include light-theme {
+        background-color: $color-accent-red;
+      }
+      @include dark-theme {
+        background-color: $color-accent-red;
+      }
     }
   }
 

ts/components/conversation/CallingNotification.tsx

@@ -5,7 +5,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { noop } from 'lodash';
 
-import { SystemMessage } from './SystemMessage';
+import { SystemMessage, SystemMessageKind } from './SystemMessage';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
 import { MessageTimestamp } from './MessageTimestamp';
 import type { LocalizerType } from '../../types/Util';
@@ -80,7 +80,7 @@ export const CallingNotification: React.FC<PropsType> = React.memo(
           </>
         }
         icon={icon}
-        isError={wasMissed}
+        kind={wasMissed ? SystemMessageKind.Danger : SystemMessageKind.Normal}
       />
     );
   }

ts/components/conversation/SystemMessage.stories.tsx

@@ -0,0 +1,51 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import { SystemMessage, SystemMessageKind } from './SystemMessage';
+
+export default {
+  title: 'Components/Conversation/SystemMessage',
+};
+
+export function PlainSystemMessage(): JSX.Element {
+  return (
+    <SystemMessage
+      icon="audio-incoming"
+      contents="Some nice text"
+      kind={SystemMessageKind.Normal}
+    />
+  );
+}
+
+PlainSystemMessage.story = {
+  name: 'Plain',
+};
+
+export function DangerSystemMessage(): JSX.Element {
+  return (
+    <SystemMessage
+      icon="audio-missed"
+      contents="Some loud danger text"
+      kind={SystemMessageKind.Danger}
+    />
+  );
+}
+
+DangerSystemMessage.story = {
+  name: 'Danger',
+};
+
+export function ErrorSystemMessage(): JSX.Element {
+  return (
+    <SystemMessage
+      icon="unsupported"
+      contents="Some error text"
+      kind={SystemMessageKind.Error}
+    />
+  );
+}
+
+ErrorSystemMessage.story = {
+  name: 'Error',
+};

ts/components/conversation/SystemMessage.tsx

@@ -5,20 +5,30 @@ import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
+export enum SystemMessageKind {
+  Normal = 'Normal',
+  Danger = 'Danger',
+  Error = 'Error',
+}
+
 type PropsType = {
   icon: string;
   contents: ReactNode;
   button?: ReactNode;
-  isError?: boolean;
+  kind?: SystemMessageKind;
 };
 
 export const SystemMessage = forwardRef<HTMLDivElement, PropsType>(
-  function SystemMessageInner({ icon, contents, button, isError }, ref) {
+  function SystemMessageInner(
+    { icon, contents, button, kind = SystemMessageKind.Normal },
+    ref
+  ) {
     return (
       <div
         className={classNames(
           'SystemMessage',
-          isError && 'SystemMessage--error'
+          kind === SystemMessageKind.Danger && 'SystemMessage--danger',
+          kind === SystemMessageKind.Error && 'SystemMessage--error'
         )}
         ref={ref}
       >