From 150ea61b03bfab527cae8b2411840af78bdf791b Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 2 Jul 2024 15:20:51 +1000
Subject: [PATCH] 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                       |  7 ++++++
 .../buttons/ModalConfirmButtonContainer.tsx   | 12 ----------
 .../dialog/HideRecoveryPasswordDialog.tsx     | 24 +++++--------------
 ts/components/dialog/ReactListModal.tsx       |  2 +-
 .../dialog/TermsOfServicePrivacyDialog.tsx    |  7 +++---
 5 files changed, 18 insertions(+), 34 deletions(-)
 delete mode 100644 ts/components/buttons/ModalConfirmButtonContainer.tsx

diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index fcf19aa74..a331c7e47 100644
--- a/stylesheets/_modal.scss
+++ b/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;
diff --git a/ts/components/buttons/ModalConfirmButtonContainer.tsx b/ts/components/buttons/ModalConfirmButtonContainer.tsx
deleted file mode 100644
index 573c38fe7..000000000
--- a/ts/components/buttons/ModalConfirmButtonContainer.tsx
+++ /dev/null
@@ -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);
-`;
diff --git a/ts/components/dialog/HideRecoveryPasswordDialog.tsx b/ts/components/dialog/HideRecoveryPasswordDialog.tsx
index 77b93d16c..0a54451fe 100644
--- a/ts/components/dialog/HideRecoveryPasswordDialog.tsx
+++ b/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
-        container={true}
-        justifyContent="center"
-        alignItems="center"
-        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>
+      <Flex container={true} justifyContent="center" alignItems="center" width="100%">
+        <SessionButton {...leftButtonProps} buttonType={SessionButtonType.Ghost} />
+        <SessionButton {...rightButtonProps} buttonType={SessionButtonType.Ghost} />
+      </Flex>
     </SessionWrapperModal>
   );
 }
diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx
index c7f260f8e..632a55a69 100644
--- a/ts/components/dialog/ReactListModal.tsx
+++ b/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}
     >
diff --git a/ts/components/dialog/TermsOfServicePrivacyDialog.tsx b/ts/components/dialog/TermsOfServicePrivacyDialog.tsx
index f3e7cce98..ec8a77411 100644
--- a/ts/components/dialog/TermsOfServicePrivacyDialog.tsx
+++ b/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>
   );
 }