Support for local deletes synced to all your devices

ts/components/LocalDeleteWarningModal.tsx

@@ -0,0 +1,53 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import { Button, ButtonVariant } from './Button';
+import { I18n } from './I18n';
+import { Modal } from './Modal';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onClose: () => unknown;
+};
+
+export function LocalDeleteWarningModal({
+  i18n,
+  onClose,
+}: PropsType): JSX.Element {
+  return (
+    <Modal
+      modalName="LocalDeleteWarningModal"
+      moduleClassName="LocalDeleteWarningModal"
+      i18n={i18n}
+      onClose={onClose}
+    >
+      <div className="LocalDeleteWarningModal">
+        <div className="LocalDeleteWarningModal__image">
+          <img
+            src="images/local-delete-sync.svg"
+            height="92"
+            width="138"
+            alt=""
+          />
+        </div>
+
+        <div className="LocalDeleteWarningModal__header">
+          <I18n i18n={i18n} id="icu:LocalDeleteWarningModal__header" />
+        </div>
+
+        <div className="LocalDeleteWarningModal__description">
+          <I18n i18n={i18n} id="icu:LocalDeleteWarningModal__description" />
+        </div>
+
+        <div className="LocalDeleteWarningModal__button">
+          <Button onClick={onClose} variant={ButtonVariant.Primary}>
+            <I18n i18n={i18n} id="icu:LocalDeleteWarningModal__confirm" />
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}