Styling adjustments to timeline notifications

2021-09-07 14:55:03 -05:00 · 2021-09-07 14:55:03 -05:00 · 7f34bedd87
commit 7f34bedd87
parent 4bed918cf8
22 changed files with 437 additions and 360 deletions
--- a/ts/components/conversation/CallingNotification.tsx
+++ b/ts/components/conversation/CallingNotification.tsx
@ -2,10 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only

 import React, { useState, useEffect } from 'react';
-import classNames from 'classnames';
 import Measure from 'react-measure';
 import { noop } from 'lodash';

+import { SystemMessage } from './SystemMessage';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
 import { Timestamp } from './Timestamp';
 import { LocalizerType } from '../../types/Util';
@ -86,17 +86,12 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
      }}
    >
      {({ measureRef }) => (
-        <div
-          className={classNames('SystemMessage', 'SystemMessage--multiline', {
-            'SystemMessage--error': wasMissed,
-          })}
-          ref={measureRef}
-        >
-          <div className="SystemMessage__line">
-            <div
-              className={`SystemMessage__icon SystemMessage__icon--${icon}`}
-            />
-            <div>
+        <SystemMessage
+          button={
+            hasButton ? <CallingNotificationButton {...props} /> : undefined
+          }
+          contents={
+            <>
              {getCallingNotificationText(props, i18n)} &middot;{' '}
              <Timestamp
                direction="outgoing"
@ -107,14 +102,12 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
                withSticker={false}
                withTapToViewExpired={false}
              />
-            </div>
-          </div>
-          {hasButton ? (
-            <div className="SystemMessage__line">
-              <CallingNotificationButton {...props} />
-            </div>
-          ) : null}
-        </div>
+            </>
+          }
+          icon={icon}
+          isError={wasMissed}
+          ref={measureRef}
+        />
      )}
    </Measure>
  );
--- a/ts/components/conversation/ChangeNumberNotification.stories.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.stories.tsx
@ -0,0 +1,36 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
+
+import { ChangeNumberNotification } from './ChangeNumberNotification';
+
+const story = storiesOf(
+  'Components/Conversation/ChangeNumberNotification',
+  module
+);
+
+const i18n = setupI18n('en', enMessages);
+
+story.add('Default', () => (
+  <ChangeNumberNotification
+    sender={getDefaultConversation()}
+    timestamp={1618894800000}
+    i18n={i18n}
+  />
+));
+
+story.add('Long name', () => (
+  <ChangeNumberNotification
+    sender={getDefaultConversation({
+      firstName: '💅😇🖋'.repeat(50),
+    })}
+    timestamp={1618894800000}
+    i18n={i18n}
+  />
+));
--- a/ts/components/conversation/ChangeNumberNotification.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.tsx
@ -7,6 +7,7 @@ import { ConversationType } from '../../state/ducks/conversations';
 import { LocalizerType } from '../../types/Util';
 import { Intl } from '../Intl';

+import { SystemMessage } from './SystemMessage';
 import { Timestamp } from './Timestamp';
 import { Emojify } from './Emojify';

@ -25,17 +26,21 @@ export const ChangeNumberNotification: React.FC<Props> = props => {
  const { i18n, sender, timestamp } = props;

  return (
-    <div className="SystemMessage">
-      <span className="SystemMessage__icon SystemMessage__icon--phone" />
-      <Intl
-        id="ChangeNumber--notification"
-        components={{
-          sender: <Emojify text={sender.firstName || sender.title} />,
-        }}
-        i18n={i18n}
-      />
-      &nbsp;·&nbsp;
-      <Timestamp i18n={i18n} timestamp={timestamp} />
-    </div>
+    <SystemMessage
+      contents={
+        <>
+          <Intl
+            id="ChangeNumber--notification"
+            components={{
+              sender: <Emojify text={sender.firstName || sender.title} />,
+            }}
+            i18n={i18n}
+          />
+          &nbsp;·&nbsp;
+          <Timestamp i18n={i18n} timestamp={timestamp} />
+        </>
+      }
+      icon="phone"
+    />
  );
 };
--- a/ts/components/conversation/ChatSessionRefreshedNotification.tsx
+++ b/ts/components/conversation/ChatSessionRefreshedNotification.tsx
@ -6,6 +6,7 @@ import React, { useCallback, useState, ReactElement } from 'react';
 import { LocalizerType } from '../../types/Util';

 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';
 import { ChatSessionRefreshedDialog } from './ChatSessionRefreshedDialog';

 type PropsHousekeepingType = {
@ -37,20 +38,20 @@ export function ChatSessionRefreshedNotification(
  }, [contactSupport, setIsDialogOpen]);

  return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line">
-        <span className="SystemMessage__icon SystemMessage__icon--session-refresh" />
-        {i18n('ChatRefresh--notification')}
-      </div>
-      <div className="SystemMessage__line">
-        <Button
-          onClick={openDialog}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.SystemMessage}
-        >
-          {i18n('ChatRefresh--learnMore')}
-        </Button>
-      </div>
+    <>
+      <SystemMessage
+        contents={i18n('ChatRefresh--notification')}
+        button={
+          <Button
+            onClick={openDialog}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.SystemMessage}
+          >
+            {i18n('ChatRefresh--learnMore')}
+          </Button>
+        }
+        icon="session-refresh"
+      />
      {isDialogOpen ? (
        <ChatSessionRefreshedDialog
          onClose={closeDialog}
@ -58,6 +59,6 @@ export function ChatSessionRefreshedNotification(
          i18n={i18n}
        />
      ) : null}
-    </div>
+    </>
  );
 }
--- a/ts/components/conversation/DeliveryIssueNotification.tsx
+++ b/ts/components/conversation/DeliveryIssueNotification.tsx
@ -4,6 +4,7 @@
 import React, { useCallback, useState, ReactElement } from 'react';

 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';
 import { ConversationType } from '../../state/ducks/conversations';
 import { LocalizerType } from '../../types/Util';
 import { Intl } from '../Intl';
@ -46,10 +47,9 @@ export function DeliveryIssueNotification(
  }

  return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line">
-        <span className="SystemMessage__icon SystemMessage__icon--info" />
-        <span>
+    <>
+      <SystemMessage
+        contents={
          <Intl
            id="DeliveryIssue--notification"
            components={{
@ -57,17 +57,18 @@ export function DeliveryIssueNotification(
            }}
            i18n={i18n}
          />
-        </span>
-      </div>
-      <div className="SystemMessage__line">
-        <Button
-          onClick={openDialog}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.SystemMessage}
-        >
-          {i18n('DeliveryIssue--learnMore')}
-        </Button>
-      </div>
+        }
+        icon="info"
+        button={
+          <Button
+            onClick={openDialog}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.SystemMessage}
+          >
+            {i18n('DeliveryIssue--learnMore')}
+          </Button>
+        }
+      />
      {isDialogOpen ? (
        <DeliveryIssueDialog
          i18n={i18n}
@ -77,6 +78,6 @@ export function DeliveryIssueNotification(
          onClose={closeDialog}
        />
      ) : null}
-    </div>
+    </>
  );
 }
--- a/ts/components/conversation/GroupNotification.tsx
+++ b/ts/components/conversation/GroupNotification.tsx
@ -1,10 +1,11 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import React from 'react';
+import React, { ReactNode } from 'react';
 import { compact, flatten } from 'lodash';

 import { ContactName } from './ContactName';
+import { SystemMessage } from './SystemMessage';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';

@ -133,12 +134,15 @@ export class GroupNotification extends React.Component<Props> {
  }

  public render(): JSX.Element {
-    const { changes, i18n, from } = this.props;
+    const { changes: rawChanges, i18n, from } = this.props;
+
+    // This check is just to be extra careful, and can probably be removed.
+    const changes: Array<Change> = Array.isArray(rawChanges) ? rawChanges : [];

    // Leave messages are always from the person leaving, so we omit the fromLabel if
    //   the change is a 'leave.'
-    const isLeftOnly =
-      changes && changes.length === 1 && changes[0].type === 'remove';
+    const firstChange: undefined | Change = changes[0];
+    const isLeftOnly = changes.length === 1 && firstChange?.type === 'remove';

    const fromContact = (
      <ContactName
@ -156,23 +160,23 @@ export class GroupNotification extends React.Component<Props> {
      <Intl i18n={i18n} id="updatedTheGroup" components={[fromContact]} />
    );

-    return (
-      <div className="SystemMessage">
-        <div>
-          {isLeftOnly ? null : (
-            <>
-              {fromLabel}
-              <br />
-            </>
-          )}
-          {(changes || []).map((change, i) => (
+    let contents: ReactNode;
+    if (isLeftOnly) {
+      contents = this.renderChange(firstChange, from);
+    } else {
+      contents = (
+        <>
+          <p>{fromLabel}</p>
+          {changes.map((change, i) => (
            // eslint-disable-next-line react/no-array-index-key
-            <div key={i} className="module-group-notification__change">
+            <p key={i} className="module-group-notification__change">
              {this.renderChange(change, from)}
-            </div>
+            </p>
          ))}
-        </div>
-      </div>
-    );
+        </>
+      );
+    }
+
+    return <SystemMessage contents={contents} icon="group" />;
  }
 }
--- a/ts/components/conversation/GroupV1Migration.tsx
+++ b/ts/components/conversation/GroupV1Migration.tsx
@ -1,9 +1,10 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import * as React from 'react';

 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';
 import { LocalizerType } from '../../types/Util';
 import { ConversationType } from '../../state/ducks/conversations';
 import { Intl } from '../Intl';
@ -35,40 +36,42 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
  }, [setShowingDialog]);

  return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line">
-        <div className="SystemMessage__icon SystemMessage__icon--group" />
-        <div>
-          <div>{i18n('GroupV1--Migration--was-upgraded')}</div>
-          <div>
-            {areWeInvited ? (
-              i18n('GroupV1--Migration--invited--you')
-            ) : (
-              <>
-                {renderUsers(
-                  invitedMembers,
-                  i18n,
-                  'GroupV1--Migration--invited'
-                )}
-                {renderUsers(
-                  droppedMembers,
-                  i18n,
-                  'GroupV1--Migration--removed'
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="SystemMessage__line">
-        <Button
-          onClick={showDialog}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.SystemMessage}
-        >
-          {i18n('GroupV1--Migration--learn-more')}
-        </Button>
-      </div>
+    <>
+      <SystemMessage
+        icon="group"
+        contents={
+          <>
+            <p>{i18n('GroupV1--Migration--was-upgraded')}</p>
+            <p>
+              {areWeInvited ? (
+                i18n('GroupV1--Migration--invited--you')
+              ) : (
+                <>
+                  {renderUsers(
+                    invitedMembers,
+                    i18n,
+                    'GroupV1--Migration--invited'
+                  )}
+                  {renderUsers(
+                    droppedMembers,
+                    i18n,
+                    'GroupV1--Migration--removed'
+                  )}
+                </>
+              )}
+            </p>
+          </>
+        }
+        button={
+          <Button
+            onClick={showDialog}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.SystemMessage}
+          >
+            {i18n('GroupV1--Migration--learn-more')}
+          </Button>
+        }
+      />
      {showingDialog ? (
        <GroupV1MigrationDialog
          areWeInvited={areWeInvited}
@ -82,7 +85,7 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
          onClose={dismissDialog}
        />
      ) : null}
-    </div>
+    </>
  );
 }

@ -95,23 +98,17 @@ function renderUsers(
    return null;
  }

-  const className = 'module-group-v1-migration--text';
-
  if (members.length === 1) {
    return (
-      <div className={className}>
+      <p>
        <Intl
          i18n={i18n}
          id={`${keyPrefix}--one`}
          components={[<ContactName title={members[0].title} i18n={i18n} />]}
        />
-      </div>
+      </p>
    );
  }

-  return (
-    <div className={className}>
-      {i18n(`${keyPrefix}--many`, [members.length.toString()])}
-    </div>
-  );
+  return <p>{i18n(`${keyPrefix}--many`, [members.length.toString()])}</p>;
 }
--- a/ts/components/conversation/GroupV2Change.tsx
+++ b/ts/components/conversation/GroupV2Change.tsx
@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only

 import React, { ReactElement, useState } from 'react';
-import classNames from 'classnames';
 import { get } from 'lodash';

 import { ReplacementValuesType } from '../../types/I18N';
@ -10,6 +9,7 @@ import { FullJSXType, Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 import { GroupDescriptionText } from '../GroupDescriptionText';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';

 import { GroupV2ChangeType, GroupV2ChangeDetailType } from '../../groups';

@ -110,17 +110,11 @@ function GroupV2Detail({
    detail.type === 'description' && get(detail, 'description');

  return (
-    <div
-      className={classNames('SystemMessage', {
-        'SystemMessage--multiline': Boolean(newGroupDescription),
-      })}
-    >
-      <div className="SystemMessage__line">
-        <div className={`SystemMessage__icon SystemMessage__icon--${icon}`} />
-        <div className="SystemMessage__text">{text}</div>
-      </div>
-      {newGroupDescription ? (
-        <div className="SystemMessage__line">
+    <SystemMessage
+      icon={icon}
+      contents={text}
+      button={
+        newGroupDescription ? (
          <Button
            onClick={() => onButtonClick(newGroupDescription)}
            size={ButtonSize.Small}
@ -128,9 +122,9 @@ function GroupV2Detail({
          >
            {i18n('view')}
          </Button>
-        </div>
-      ) : null}
-    </div>
+        ) : undefined
+      }
+    />
  );
 }

--- a/ts/components/conversation/LinkNotification.stories.tsx
+++ b/ts/components/conversation/LinkNotification.stories.tsx
@ -0,0 +1,16 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
+import { LinkNotification } from './LinkNotification';
+
+const story = storiesOf('Components/Conversation/LinkNotification', module);
+
+const i18n = setupI18n('en', enMessages);
+
+story.add('Default', () => <LinkNotification i18n={i18n} />);
--- a/ts/components/conversation/LinkNotification.tsx
+++ b/ts/components/conversation/LinkNotification.tsx
@ -0,0 +1,13 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import { SystemMessage } from './SystemMessage';
+import type { LocalizerType } from '../../types/Util';
+
+export const LinkNotification = ({
+  i18n,
+}: Readonly<{ i18n: LocalizerType }>): JSX.Element => (
+  <SystemMessage icon="unsynced" contents={i18n('messageHistoryUnsynced')} />
+);
--- a/ts/components/conversation/ProfileChangeNotification.tsx
+++ b/ts/components/conversation/ProfileChangeNotification.tsx
@ -1,10 +1,11 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import React from 'react';

 import { LocalizerType } from '../../types/Util';
 import { ConversationType } from '../../state/ducks/conversations';
+import { SystemMessage } from './SystemMessage';
 import { Emojify } from './Emojify';
 import {
  getStringForProfileChange,
@ -21,12 +22,5 @@ export function ProfileChangeNotification(props: PropsType): JSX.Element {
  const { change, changedContact, i18n } = props;
  const message = getStringForProfileChange(change, changedContact, i18n);

-  return (
-    <div className="SystemMessage">
-      <div className="SystemMessage__icon SystemMessage__icon--profile" />
-      <span>
-        <Emojify text={message} />
-      </span>
-    </div>
-  );
+  return <SystemMessage icon="profile" contents={<Emojify text={message} />} />;
 }
--- a/ts/components/conversation/ResetSessionNotification.tsx
+++ b/ts/components/conversation/ResetSessionNotification.tsx
@ -1,14 +1,15 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import React from 'react';

 import { LocalizerType } from '../../types/Util';
+import { SystemMessage } from './SystemMessage';

 export type Props = {
  i18n: LocalizerType;
 };

 export const ResetSessionNotification = ({ i18n }: Props): JSX.Element => (
-  <div className="SystemMessage">{i18n('sessionEnded')}</div>
+  <SystemMessage contents={i18n('sessionEnded')} icon="session-refresh" />
 );
--- a/ts/components/conversation/SafetyNumberNotification.tsx
+++ b/ts/components/conversation/SafetyNumberNotification.tsx
@ -1,9 +1,10 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import React from 'react';

 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
@ -42,32 +43,30 @@ export const SafetyNumberNotification = ({
    : 'safetyNumberChanged';

  return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line">
-        <div className="SystemMessage__icon SystemMessage__icon--safety-number" />
-        <span>
-          <Intl
-            id={changeKey}
-            components={[
-              <span
-                key="external-1"
-                className="module-safety-number-notification__contact"
-              >
-                <ContactName
-                  name={contact.name}
-                  profileName={contact.profileName}
-                  phoneNumber={contact.phoneNumber}
-                  title={contact.title}
-                  module="module-safety-number-notification__contact"
-                  i18n={i18n}
-                />
-              </span>,
-            ]}
-            i18n={i18n}
-          />
-        </span>
-      </div>
-      <div className="SystemMessage__line">
+    <SystemMessage
+      icon="safety-number"
+      contents={
+        <Intl
+          id={changeKey}
+          components={[
+            <span
+              key="external-1"
+              className="module-safety-number-notification__contact"
+            >
+              <ContactName
+                name={contact.name}
+                profileName={contact.profileName}
+                phoneNumber={contact.phoneNumber}
+                title={contact.title}
+                module="module-safety-number-notification__contact"
+                i18n={i18n}
+              />
+            </span>,
+          ]}
+          i18n={i18n}
+        />
+      }
+      button={
        <Button
          onClick={() => {
            showIdentity(contact.id);
@ -77,7 +76,7 @@ export const SafetyNumberNotification = ({
        >
          {i18n('verifyNewNumber')}
        </Button>
-      </div>
-    </div>
+      }
+    />
  );
 };
--- a/ts/components/conversation/SystemMessage.tsx
+++ b/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>
+    );
+  }
+);
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@ -26,6 +26,7 @@ import {
  PropsActionsType as DeliveryIssueActionProps,
  PropsDataType as DeliveryIssueProps,
 } from './DeliveryIssueNotification';
+import { LinkNotification } from './LinkNotification';
 import {
  ChangeNumberNotification,
  PropsData as ChangeNumberNotificationProps,
@ -245,12 +246,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
        <DeliveryIssueNotification {...item.data} {...this.props} i18n={i18n} />
      );
    } else if (item.type === 'linkNotification') {
-      notification = (
-        <div className="SystemMessage">
-          <div className="SystemMessage__icon SystemMessage__icon--unsynced" />
-          {i18n('messageHistoryUnsynced')}
-        </div>
-      );
+      notification = <LinkNotification i18n={i18n} />;
    } else if (item.type === 'timerNotification') {
      notification = (
        <TimerNotification {...this.props} {...item.data} i18n={i18n} />
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only

 import React, { FunctionComponent, ReactNode } from 'react';
-import classNames from 'classnames';

 import { ContactName } from './ContactName';
+import { SystemMessage } from './SystemMessage';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 import * as expirationTimer from '../../util/expirationTimer';
@ -94,16 +94,7 @@ export const TimerNotification: FunctionComponent<Props> = props => {
      break;
  }

-  return (
-    <div className="SystemMessage">
-      <div
-        className={classNames(
-          'SystemMessage__icon',
-          'SystemMessage__icon--timer',
-          disabled ? 'SystemMessage__icon--timer-disabled' : null
-        )}
-      />
-      <div>{message}</div>
-    </div>
-  );
+  const icon = disabled ? 'timer-disabled' : 'timer';
+
+  return <SystemMessage icon={icon} contents={message} />;
 };
--- a/ts/components/conversation/UniversalTimerNotification.tsx
+++ b/ts/components/conversation/UniversalTimerNotification.tsx
@ -3,6 +3,7 @@

 import React from 'react';

+import { SystemMessage } from './SystemMessage';
 import { LocalizerType } from '../../types/Util';
 import * as expirationTimer from '../../util/expirationTimer';

@ -21,15 +22,11 @@ export const UniversalTimerNotification: React.FC<Props> = props => {
  const timeValue = expirationTimer.format(i18n, expireTimer);

  return (
-    <div className="SystemMessage">
-      <div className="SystemMessage__icon SystemMessage__icon--timer" />
-      <div className="SystemMessage__text">
-        <div>
-          {i18n('UniversalTimerNotification__text', {
-            timeValue,
-          })}
-        </div>
-      </div>
-    </div>
+    <SystemMessage
+      icon="timer"
+      contents={i18n('UniversalTimerNotification__text', {
+        timeValue,
+      })}
+    />
  );
 };
--- a/ts/components/conversation/UnsupportedMessage.tsx
+++ b/ts/components/conversation/UnsupportedMessage.tsx
@ -1,9 +1,9 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import React from 'react';
-import classNames from 'classnames';

+import { SystemMessage } from './SystemMessage';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
@ -48,54 +48,47 @@ export const UnsupportedMessage = ({
    ? 'Message--from-me-unsupported-message-ask-to-resend'
    : 'Message--from-me-unsupported-message';
  const stringId = isMe ? meStringId : otherStringId;
+  const icon = canProcessNow ? 'unsupported--can-process' : 'unsupported';

  return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line SystemMessage__text">
-        <div
-          className={classNames(
-            'SystemMessage__icon',
-            'SystemMessage__icon--unsupported',
-            {
-              'SystemMessage__icon--unsupported--can-process': canProcessNow,
-            }
-          )}
+    <SystemMessage
+      icon={icon}
+      contents={
+        <Intl
+          id={stringId}
+          components={[
+            <span
+              key="external-1"
+              className="module-unsupported-message__contact"
+            >
+              <ContactName
+                name={contact.name}
+                profileName={contact.profileName}
+                phoneNumber={contact.phoneNumber}
+                title={contact.title}
+                module="module-unsupported-message__contact"
+                i18n={i18n}
+              />
+            </span>,
+          ]}
+          i18n={i18n}
        />
-        <span>
-          <Intl
-            id={stringId}
-            components={[
-              <span
-                key="external-1"
-                className="module-unsupported-message__contact"
-              >
-                <ContactName
-                  name={contact.name}
-                  profileName={contact.profileName}
-                  phoneNumber={contact.phoneNumber}
-                  title={contact.title}
-                  module="module-unsupported-message__contact"
-                  i18n={i18n}
-                />
-              </span>,
-            ]}
-            i18n={i18n}
-          />
-        </span>
-      </div>
-      {canProcessNow ? null : (
-        <div className="SystemMessage__line">
-          <Button
-            onClick={() => {
-              downloadNewVersion();
-            }}
-            size={ButtonSize.Small}
-            variant={ButtonVariant.SystemMessage}
-          >
-            {i18n('Message--update-signal')}
-          </Button>
-        </div>
-      )}
-    </div>
+      }
+      button={
+        canProcessNow ? undefined : (
+          <div className="SystemMessage__line">
+            <Button
+              onClick={() => {
+                downloadNewVersion();
+              }}
+              size={ButtonSize.Small}
+              variant={ButtonVariant.SystemMessage}
+            >
+              {i18n('Message--update-signal')}
+            </Button>
+          </div>
+        )
+      }
+    />
  );
 };
--- a/ts/components/conversation/VerificationNotification.tsx
+++ b/ts/components/conversation/VerificationNotification.tsx
@ -1,9 +1,9 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import React from 'react';
-// import classNames from 'classnames';

+import { SystemMessage } from './SystemMessage';
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
@ -52,35 +52,28 @@ export class VerificationNotification extends React.Component<Props> {
    const id = this.getStringId();

    return (
-      <div className="SystemMessage__text">
-        <Intl
-          id={id}
-          components={[
-            <ContactName
-              key="external-1"
-              name={contact.name}
-              profileName={contact.profileName}
-              phoneNumber={contact.phoneNumber}
-              title={contact.title}
-              module="module-verification-notification__contact"
-              i18n={i18n}
-            />,
-          ]}
-          i18n={i18n}
-        />
-      </div>
+      <Intl
+        id={id}
+        components={[
+          <ContactName
+            key="external-1"
+            name={contact.name}
+            profileName={contact.profileName}
+            phoneNumber={contact.phoneNumber}
+            title={contact.title}
+            module="module-verification-notification__contact"
+            i18n={i18n}
+          />,
+        ]}
+        i18n={i18n}
+      />
    );
  }

  public render(): JSX.Element {
    const { type } = this.props;
-    const suffix = type === 'markVerified' ? 'verified' : 'verified-not';
+    const icon = type === 'markVerified' ? 'verified' : 'verified-not';

-    return (
-      <div className="SystemMessage">
-        <div className={`SystemMessage__icon SystemMessage__icon--${suffix}`} />
-        {this.renderContents()}
-      </div>
-    );
+    return <SystemMessage icon={icon} contents={this.renderContents()} />;
  }
 }