feat: remove modal confirm button container

use no padding class on modal instead, less messing around with ghost buttons in certain cases

stylesheets/_modal.scss

@@ -128,6 +128,13 @@
   .session-confirm-wrapper {
     .session-modal__body {
       width: 376px;
+    }
+  }
+}
+
+.no-body-padding {
+  .session-confirm-wrapper {
+    .session-modal__body {
       padding: 0;
       .session-modal__centered {
         margin: 0;

ts/components/buttons/ModalConfirmButtonContainer.tsx

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { Flex } from '../basic/Flex';
-
-/** We use this in the modals only to bypass the padding on the body so the buttons take up the full space width of the modal window
- * See .session-modal__body for padding values
- */
-export const ModalConfirmButtonContainer = styled(Flex)`
-  margin-top: 0px;
-  margin-right: calc(var(--margins-lg) * -1);
-  margin-bottom: calc(var(--margins-lg) * -1);
-  margin-left: calc(var(--margins-lg) * -1);
-`;

ts/components/dialog/HideRecoveryPasswordDialog.tsx

@@ -5,10 +5,10 @@ import { SettingsKey } from '../../data/settings-key';
 import { updateHideRecoveryPasswordModel } from '../../state/ducks/modalDialog';
 import { showSettingsSection } from '../../state/ducks/section';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { SpacerMD } from '../basic/Text';
-import { ModalConfirmButtonContainer } from '../buttons/ModalConfirmButtonContainer';
 
 const StyledDescriptionContainer = styled.div`
   width: 280px;
@@ -76,6 +76,7 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
       onClose={onClose}
       showExitIcon={false}
       showHeader={true}
+      additionalClassName="no-body-padding"
     >
       <StyledDescriptionContainer>
         <SessionHtmlRenderer
@@ -87,23 +88,10 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
         />
       </StyledDescriptionContainer>
       <SpacerMD />
-      <ModalConfirmButtonContainer
+      <Flex container={true} justifyContent="center" alignItems="center" width="100%">
-        container={true}
+        <SessionButton {...leftButtonProps} buttonType={SessionButtonType.Ghost} />
-        justifyContent="center"
+        <SessionButton {...rightButtonProps} buttonType={SessionButtonType.Ghost} />
-        alignItems="center"
+      </Flex>
-        width="100%"
-      >
-        <SessionButton
-          {...leftButtonProps}
-          buttonType={SessionButtonType.Ghost}
-          margin={'0 0 0 calc(var(--margins-lg) * -1)'}
-        />
-        <SessionButton
-          {...rightButtonProps}
-          buttonType={SessionButtonType.Ghost}
-          margin={'0 calc(var(--margins-lg) * -1) 0 0'}
-        />
-      </ModalConfirmButtonContainer>
     </SessionWrapperModal>
   );
 }

ts/components/dialog/ReactListModal.tsx

@@ -334,7 +334,7 @@ export const ReactListModal = (props: Props) => {
 
   return (
     <SessionWrapperModal
-      additionalClassName={'reaction-list-modal'}
+      additionalClassName={'reaction-list-modal no-body-padding'}
       showHeader={false}
       onClose={handleClose}
     >

ts/components/dialog/TermsOfServicePrivacyDialog.tsx

@@ -2,9 +2,9 @@ import { shell } from 'electron';
 import { useDispatch } from 'react-redux';
 import { updateTermsOfServicePrivacyModal } from '../../state/onboarding/ducks/modals';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonType } from '../basic/SessionButton';
 import { SpacerSM } from '../basic/Text';
-import { ModalConfirmButtonContainer } from '../buttons/ModalConfirmButtonContainer';
 
 export type TermsOfServicePrivacyDialogProps = {
   show: boolean;
@@ -30,10 +30,11 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr
       showExitIcon={true}
       showHeader={true}
       headerReverse={true}
+      additionalClassName={'no-body-padding'}
     >
       <span>{window.i18n('urlOpenBrowser')}</span>
       <SpacerSM />
-      <ModalConfirmButtonContainer container={true} justifyContent="center" alignItems="center">
+      <Flex container={true} width={'100%'} justifyContent="center" alignItems="center">
         <SessionButton
           ariaLabel={'Terms of service button'}
           text={window.i18n('termsOfService')}
@@ -52,7 +53,7 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr
           }}
           dataTestId="privacy-policy-button"
         />
-      </ModalConfirmButtonContainer>
+      </Flex>
     </SessionWrapperModal>
   );
 }