Move the safety number viewer into modal

ts/components/GlobalModalContainer.tsx

@@ -10,6 +10,9 @@ type PropsType = {
   // ProfileEditor
   isProfileEditorVisible: boolean;
   renderProfileEditor: () => JSX.Element;
+  // SafetyNumberModal
+  safetyNumberModalContactId?: string;
+  renderSafetyNumber: () => JSX.Element;
 };
 
 export const GlobalModalContainer = ({
@@ -19,7 +22,14 @@ export const GlobalModalContainer = ({
   // ProfileEditor
   isProfileEditorVisible,
   renderProfileEditor,
+  // SafetyNumberModal
+  safetyNumberModalContactId,
+  renderSafetyNumber,
 }: PropsType): JSX.Element | null => {
+  if (safetyNumberModalContactId) {
+    return renderSafetyNumber();
+  }
+
   if (contactModalState) {
     return renderContactModal();
   }

ts/components/SafetyNumberModal.tsx

@@ -0,0 +1,31 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { Modal } from './Modal';
+import {
+  SafetyNumberViewer,
+  PropsType as SafetyNumberViewerPropsType,
+} from './SafetyNumberViewer';
+
+type PropsType = {
+  toggleSafetyNumberModal: () => unknown;
+} & SafetyNumberViewerPropsType;
+
+export const SafetyNumberModal = ({
+  i18n,
+  toggleSafetyNumberModal,
+  ...safetyNumberViewerProps
+}: PropsType): JSX.Element | null => {
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      moduleClassName="module-SafetyNumberViewer__modal"
+      onClose={() => toggleSafetyNumberModal()}
+      title={i18n('SafetyNumberModal__title')}
+    >
+      <SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
+    </Modal>
+  );
+};

ts/components/SafetyNumberViewer.stories.tsx

@@ -50,12 +50,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   generateSafetyNumber: action('generate-safety-number'),
   i18n,
   safetyNumber: text('safetyNumber', overrideProps.safetyNumber || 'XXX'),
-  safetyNumberChanged: boolean(
-    'safetyNumberChanged',
-    overrideProps.safetyNumberChanged !== undefined
-      ? overrideProps.safetyNumberChanged
-      : false
-  ),
   toggleVerified: action('toggle-verified'),
   verificationDisabled: boolean(
     'verificationDisabled',
@@ -95,16 +89,6 @@ story.add('Verification Disabled', () => {
   );
 });
 
-story.add('Safety Number Changed', () => {
-  return (
-    <SafetyNumberViewer
-      {...createProps({
-        safetyNumberChanged: true,
-      })}
-    />
-  );
-});
-
 story.add('Safety Number (dialog close)', () => {
   return (
     <SafetyNumberViewer

ts/components/SafetyNumberViewer.tsx

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import { Button, ButtonVariant } from './Button';
 import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
 import { Intl } from './Intl';
+import { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   contact?: ConversationType;
@@ -12,7 +13,6 @@ export type PropsType = {
   i18n: LocalizerType;
   onClose?: () => void;
   safetyNumber: string;
-  safetyNumberChanged?: boolean;
   toggleVerified: (contact: ConversationType) => void;
   verificationDisabled: boolean;
 };
@@ -23,7 +23,6 @@ export const SafetyNumberViewer = ({
   i18n,
   onClose,
   safetyNumber,
-  safetyNumberChanged,
   toggleVerified,
   verificationDisabled,
 }: PropsType): JSX.Element | null => {
@@ -42,9 +41,7 @@ export const SafetyNumberViewer = ({
   if (!contact.phoneNumber) {
     return (
       <div className="module-SafetyNumberViewer">
-        <div className="module-SafetyNumberViewer__verify-container">
-          {i18n('cannotGenerateSafetyNumber')}
-        </div>
+        {i18n('cannotGenerateSafetyNumber')}
       </div>
     );
   }
@@ -59,9 +56,6 @@ export const SafetyNumberViewer = ({
 
   const { isVerified } = contact;
   const verifiedStatusKey = isVerified ? 'isVerified' : 'isNotVerified';
-  const safetyNumberChangedKey = safetyNumberChanged
-    ? 'changedRightAfterVerify'
-    : 'yourSafetyNumberWith';
   const verifyButtonText = isVerified ? i18n('unverify') : i18n('verify');
 
   return (
@@ -73,16 +67,6 @@ export const SafetyNumberViewer = ({
           </button>
         </div>
       )}
-      <div className="module-SafetyNumberViewer__verification-label">
-        <Intl
-          i18n={i18n}
-          id={safetyNumberChangedKey}
-          components={{
-            name1: boldName,
-            name2: boldName,
-          }}
-        />
-      </div>
       <div className="module-SafetyNumberViewer__number">
         {safetyNumber || getPlaceholder()}
       </div>
@@ -95,18 +79,16 @@ export const SafetyNumberViewer = ({
         )}
         <Intl i18n={i18n} id={verifiedStatusKey} components={[boldName]} />
       </div>
-      <div className="module-SafetyNumberViewer__verify-container">
-        <button
-          className="module-SafetyNumberViewer__button--verify"
+      <div className="module-SafetyNumberViewer__button">
+        <Button
           disabled={verificationDisabled}
           onClick={() => {
             toggleVerified(contact);
           }}
-          tabIndex={0}
-          type="button"
+          variant={ButtonVariant.Secondary}
         >
           {verifyButtonText}
-        </button>
+        </Button>
       </div>
     </div>
   );