From 032107c277fd4365fa8aa477bdca8eeaf5487a98 Mon Sep 17 00:00:00 2001
From: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
Date: Wed, 31 May 2023 10:57:56 -0500
Subject: [PATCH] [PAY-1292] DMs: Delete chat style updates (#3469)

---
 .../components/DeleteChatConfirmationModal.module.css |  6 ++++++
 .../components/DeleteChatConfirmationModal.tsx        | 11 +++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css
index a6edd2731dc..ac555cc0033 100644
--- a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css
+++ b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css
@@ -10,10 +10,16 @@
   flex: 1;
 }
 
+.button > .buttonText {
+  font-size: var(--font-l);
+}
+
 .content {
   line-height: 150%;
   font-weight: var(--font-medium);
   font-size: var(--font-l);
+  text-align: center;
+  white-space: pre-line;
 }
 
 .footer {
diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx
index 124e10655d8..3adf7c0a939 100644
--- a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx
+++ b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx
@@ -18,9 +18,11 @@ import styles from './DeleteChatConfirmationModal.module.css'
 const { deleteChat } = chatActions
 
 const messages = {
-  title: 'Are you sure?',
-  content: 'Are you sure you want to delete this chat?',
-  confirm: 'Confirm',
+  title: 'Delete Thread',
+  content: `Are you sure you want to delete this thread?
+
+  Other people in the conversation will still be able to see it.  This can’t be undone.`,
+  confirm: 'Delete Thread',
   cancel: 'Cancel'
 }
 
@@ -55,13 +57,14 @@ export const DeleteChatConfirmationModal = ({
       <ModalFooter className={styles.footer}>
         <Button
           className={styles.button}
+          textClassName={styles.buttonText}
           type={ButtonType.COMMON_ALT}
           text={messages.cancel}
           onClick={onClose}
         />
         <Button
           className={styles.button}
-          type={ButtonType.PRIMARY_ALT}
+          type={ButtonType.DESTRUCTIVE}
           text={messages.confirm}
           onClick={handleConfirmClicked}
         />