fix: quitmodal warning was empty

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')`

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">

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`
+const thisSpecificModalStyle: CSSProperties = {
-  max-width: 300px;
+  maxWidth: '300px',
-  width: 100%;
+  width: '100%',
-  line-height: 1.4;
+  lineHeight: 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;
 };
 
-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">
+      {i18nMessage ? (
-        <SpacerLG />
+        <Flex
-        <StyledMessage>{message}</StyledMessage>
+          container={true}
-        <SpacerLG />
+          width={'100%'}
-      </Flex>
+          justifyContent="center"
+          alignItems="center"
+          style={thisSpecificModalStyle}
+        >
+          <SpacerLG />
+          <StyledI18nSubText {...i18nMessage}></StyledI18nSubText>
+          <SpacerLG />
+        </Flex>
+      ) : null}
       <SpacerSM />
       <Flex container={true} width={'100%'} justifyContent="center" alignItems="center">
         <SessionButton

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'),