Styling adjustments to timeline notifications

ts/components/conversation/SystemMessage.tsx

@@ -0,0 +1,38 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactNode, forwardRef } from 'react';
+import classNames from 'classnames';
+
+type PropsType = {
+  icon: string;
+  contents: ReactNode;
+  button?: ReactNode;
+  isError?: boolean;
+};
+
+export const SystemMessage = forwardRef<HTMLDivElement, PropsType>(
+  ({ icon, contents, button, isError }, ref) => {
+    return (
+      <div
+        className={classNames(
+          'SystemMessage',
+          isError && 'SystemMessage--error'
+        )}
+        ref={ref}
+      >
+        <div
+          className={classNames(
+            'SystemMessage__contents',
+            `SystemMessage__contents--icon-${icon}`
+          )}
+        >
+          {contents}
+        </div>
+        {button && (
+          <div className="SystemMessage__button-container">{button}</div>
+        )}
+      </div>
+    );
+  }
+);