From 122751ffe3f5c700230f50029f1a2c7f9b88b2e2 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Wed, 28 Aug 2024 11:34:45 +1000
Subject: [PATCH] fix: quitmodal warning was empty

---
 ts/components/basic/StyledI18nSubText.tsx     |  1 +
 .../dialog/ModeratorsRemoveDialog.tsx         |  3 +-
 ts/components/dialog/QuitModal.tsx            | 60 +++++++------------
 .../registration/components/BackButton.tsx    |  5 +-
 4 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/ts/components/basic/StyledI18nSubText.tsx b/ts/components/basic/StyledI18nSubText.tsx
index 38f5c6e48..9756f0825 100644
--- a/ts/components/basic/StyledI18nSubText.tsx
+++ b/ts/components/basic/StyledI18nSubText.tsx
@@ -12,6 +12,7 @@ const StyledI18nSubTextContainer = styled('div')`
   // setting the max-width depending on the text length is **not** the way to go.
   // We should set the width on the dialog itself, depending on what we display.
   max-width: '60ch';
+  padding-inline: var(--margins-lg);
 `;
 
 const StyledI18nSubMessageTextContainer = styled('div')`
diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx
index 64d01ca58..debf3c6c6 100644
--- a/ts/components/dialog/ModeratorsRemoveDialog.tsx
+++ b/ts/components/dialog/ModeratorsRemoveDialog.tsx
@@ -82,9 +82,8 @@ export const RemoveModeratorsDialog = (props: Props) => {
   const existingMods = convoProps.groupAdmins || [];
   const hasMods = existingMods.length !== 0;
 
-  const title = `${i18n('adminRemove')}: ${convoProps.displayNameInProfile}`;
   return (
-    <SessionWrapperModal title={title} onClose={closeDialog}>
+    <SessionWrapperModal title={i18n('adminRemove')} onClose={closeDialog}>
       <Flex container={true} flexDirection="column" alignItems="center">
         {hasMods ? (
           <div className="contact-selection-list">
diff --git a/ts/components/dialog/QuitModal.tsx b/ts/components/dialog/QuitModal.tsx
index 4e7be8475..28580f6da 100644
--- a/ts/components/dialog/QuitModal.tsx
+++ b/ts/components/dialog/QuitModal.tsx
@@ -1,50 +1,26 @@
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
-import styled from 'styled-components';
+import { CSSProperties } from 'styled-components';
 import { updateQuitModal } from '../../state/onboarding/ducks/modals';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../basic/Text';
+import { SessionConfirmDialogProps } from './SessionConfirm';
+import { StyledI18nSubText } from '../basic/StyledI18nSubText';
 
-const StyledMessage = styled.span`
-  max-width: 300px;
-  width: 100%;
-  line-height: 1.4;
-`;
-
-type QuitModalProps = {
-  message?: string;
-  title?: string;
-  onOk?: any;
-  onClose?: any;
-  closeAfterInput?: boolean;
-
-  /**
-   * function to run on ok click. Closes modal after execution by default
-   * sometimes the callback might need arguments when using radioOptions
-   */
-  onClickOk?: (...args: Array<any>) => Promise<void> | void;
-
-  onClickClose?: () => any;
-
-  /**
-   * function to run on close click. Closes modal after execution by default
-   */
-  onClickCancel?: () => any;
-
-  okText?: string;
-  cancelText?: string;
-  okTheme?: SessionButtonColor;
-  closeTheme?: SessionButtonColor;
+const thisSpecificModalStyle: CSSProperties = {
+  maxWidth: '300px',
+  width: '100%',
+  lineHeight: 1.4,
 };
 
-export const QuitModal = (props: QuitModalProps) => {
+export const QuitModal = (props: SessionConfirmDialogProps) => {
   const dispatch = useDispatch();
   const {
     title = '',
-    message = '',
+    i18nMessage,
     okTheme,
     closeTheme = SessionButtonColor.Danger,
     onClickOk,
@@ -100,11 +76,19 @@ export const QuitModal = (props: QuitModalProps) => {
       showHeader={true}
       additionalClassName={'no-body-padding'}
     >
-      <Flex container={true} width={'100%'} justifyContent="center" alignItems="center">
-        <SpacerLG />
-        <StyledMessage>{message}</StyledMessage>
-        <SpacerLG />
-      </Flex>
+      {i18nMessage ? (
+        <Flex
+          container={true}
+          width={'100%'}
+          justifyContent="center"
+          alignItems="center"
+          style={thisSpecificModalStyle}
+        >
+          <SpacerLG />
+          <StyledI18nSubText {...i18nMessage}></StyledI18nSubText>
+          <SpacerLG />
+        </Flex>
+      ) : null}
       <SpacerSM />
       <Flex container={true} width={'100%'} justifyContent="center" alignItems="center">
         <SessionButton
diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx
index 7ebb5cee2..927273b57 100644
--- a/ts/components/registration/components/BackButton.tsx
+++ b/ts/components/registration/components/BackButton.tsx
@@ -38,7 +38,7 @@ export const BackButtonWithinContainer = ({
   callback?: () => void;
   onQuitVisible?: () => void;
   shouldQuitOnClick?: boolean;
-  quitI18nMessageArgs?: I18nProps<LocalizerToken>;
+  quitI18nMessageArgs: I18nProps<LocalizerToken>;
 }) => {
   return (
     <StyledBackButtonContainer
@@ -70,7 +70,7 @@ export const BackButton = ({
   callback?: () => void;
   onQuitVisible?: () => void;
   shouldQuitOnClick?: boolean;
-  quitI18nMessageArgs?: I18nProps<LocalizerToken>;
+  quitI18nMessageArgs: I18nProps<LocalizerToken>;
 }) => {
   const step = useOnboardStep();
   const restorationStep = useOnboardAccountRestorationStep();
@@ -90,6 +90,7 @@ export const BackButton = ({
           if (onQuitVisible) {
             onQuitVisible();
           }
+
           dispatch(
             updateQuitModal({
               title: window.i18n('warning'),