chore: refactored how margins in modal buttons work

Bilb · Bilb · commit 7f885a17c158 · 2025-08-18T14:45:52.000+10:00
diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx
@@ -56,7 +56,7 @@ function pushToastError(id: string, description: string) {
 
 function ClearDataViewButtons({ onCancel }: { onCancel: () => void }) {
   return (
-    <ModalActionsContainer>
+    <ModalActionsContainer buttonType={SessionButtonType.Simple}>
       <SessionButton
         text={tr('clearDevice')}
         buttonColor={SessionButtonColor.Danger}
@@ -86,7 +86,7 @@ function PasswordViewButtons({
   }
 
   return (
-    <ModalActionsContainer>
+    <ModalActionsContainer buttonType={SessionButtonType.Simple}>
       {showResetElements && (
         <SessionButton
           text={tr('clearDevice')}
diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx
@@ -14,7 +14,7 @@ import { StyledRootDialog } from './dialog/StyledRootDialog';
 import { LUCIDE_ICONS_UNICODE } from './icon/lucide';
 import { IsModalScrolledContext, useIsModalScrolled } from '../contexts/IsModalScrolledContext';
 import { OnModalCloseContext, useOnModalClose } from '../contexts/OnModalCloseContext';
-import { SessionButton, SessionButtonColor } from './basic/SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 
 type WithExtraLeftButton = {
   /**
@@ -150,15 +150,15 @@ export const ModalActionsContainer = ({
   children,
   maxWidth,
   style = {},
-  extraBottomMargin,
+  buttonType,
 }: {
   children: ReactNode;
   style?: CSSProperties;
   maxWidth?: string;
   /**
-   * some buttons have border/background and need some extra margin to not appear to close to the edge
+   * Depending on the button type, the margin block is different.
    */
-  extraBottomMargin?: boolean;
+  buttonType: SessionButtonType;
 }) => {
   return (
     <Flex
@@ -171,7 +171,8 @@ export const ModalActionsContainer = ({
       height="unset"
       style={{
         justifySelf: 'center',
-        marginBottom: extraBottomMargin ? 'var(--margins-lg)' : 'var(--margins-md)',
+        marginBlock:
+          buttonType === SessionButtonType.Simple ? 'var(--margins-sm)' : 'var(--margins-lg)',
         ...style,
       }}
       data-testid="modal-actions-container"
diff --git a/ts/components/calling/IncomingCallDialog.tsx b/ts/components/calling/IncomingCallDialog.tsx
@@ -86,7 +86,7 @@ export const IncomingCallDialog = () => {
           <ModalBasicHeader title={tr('callsIncoming', { name: from ?? tr('unknown') })} />
         }
         buttonChildren={
-          <ModalActionsContainer>
+          <ModalActionsContainer buttonType={SessionButtonType.Simple}>
             <SessionButton
               text={tr('accept')}
               buttonType={SessionButtonType.Simple}
diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx
@@ -126,7 +126,7 @@ export const BanOrUnBanUserDialog = (props: {
       headerChildren={<ModalBasicHeader title={title} />}
       onClose={onClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             buttonType={SessionButtonType.Simple}
             onClick={banOrUnBanUser}
diff --git a/ts/components/dialog/DeleteAccountModal.tsx b/ts/components/dialog/DeleteAccountModal.tsx
@@ -125,7 +125,7 @@ export const DeleteAccountModal = () => {
       onClose={onClickCancelHandler}
       topAnchor="center"
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('clear')}
             buttonColor={SessionButtonColor.Danger}
diff --git a/ts/components/dialog/EditProfilePictureModal.tsx b/ts/components/dialog/EditProfilePictureModal.tsx
@@ -248,7 +248,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
         />
       }
       buttonChildren={
-        <ModalActionsContainer extraBottomMargin={true}>
+        <ModalActionsContainer buttonType={SessionButtonType.Outline}>
           <SessionButton
             text={tr('save')}
             buttonType={SessionButtonType.Simple}
diff --git a/ts/components/dialog/EnterPasswordModal.tsx b/ts/components/dialog/EnterPasswordModal.tsx
@@ -71,7 +71,7 @@ export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
       headerChildren={<ModalBasicHeader title={title} showExitIcon={true} />}
       $contentMinWidth={WrapperModalWidth.narrow}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('done')}
             buttonType={SessionButtonType.Simple}
diff --git a/ts/components/dialog/HideRecoveryPasswordDialog.tsx b/ts/components/dialog/HideRecoveryPasswordDialog.tsx
@@ -73,7 +73,7 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
       headerChildren={<ModalBasicHeader title={tr('recoveryPasswordHidePermanently')} />}
       onClose={onClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton {...leftButtonProps} buttonType={SessionButtonType.Simple} />
           <SessionButton {...rightButtonProps} buttonType={SessionButtonType.Simple} />
         </ModalActionsContainer>
diff --git a/ts/components/dialog/InviteContactsDialog.tsx b/ts/components/dialog/InviteContactsDialog.tsx
@@ -179,7 +179,7 @@ const InviteContactsDialogInner = (props: Props) => {
       headerChildren={<ModalBasicHeader title={tr('membersInvite')} showExitIcon={true} />}
       modalDataTestId="invite-contacts-dialog"
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('membersInviteTitle')}
             buttonType={SessionButtonType.Simple}
diff --git a/ts/components/dialog/ModeratorsAddDialog.tsx b/ts/components/dialog/ModeratorsAddDialog.tsx
@@ -89,7 +89,7 @@ export const AddModeratorsDialog = (props: Props) => {
       headerChildren={<ModalBasicHeader title={tr('addAdmins')} />}
       onClose={onClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             buttonType={SessionButtonType.Simple}
             onClick={addAsModerator}
diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx
@@ -93,7 +93,7 @@ export const RemoveModeratorsDialog = (props: Props) => {
       headerChildren={<ModalBasicHeader title={tr('adminRemove')} />}
       onClose={closeDialog}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             buttonType={SessionButtonType.Simple}
             onClick={removeModsCall}
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -250,7 +250,7 @@ export const OnionPathModal = () => {
       topAnchor="25vh"
       headerChildren={<ModalBasicHeader title={tr('onionRoutingPath')} showExitIcon={true} />}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('learnMore')}
             buttonType={SessionButtonType.Simple}
diff --git a/ts/components/dialog/OpenUrlModal.tsx b/ts/components/dialog/OpenUrlModal.tsx
@@ -49,7 +49,7 @@ export function OpenUrlModal(props: OpenUrlModalState) {
       topAnchor="35vh"
       onClose={onClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('open')}
             buttonColor={SessionButtonColor.Danger}
diff --git a/ts/components/dialog/QuitModal.tsx b/ts/components/dialog/QuitModal.tsx
@@ -58,7 +58,7 @@ export const QuitModal = (props: QuitModalProps) => {
       headerChildren={<ModalBasicHeader title={title} />}
       onClose={onClickClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('quitButton')}
             buttonColor={SessionButtonColor.Danger}
diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx
@@ -55,7 +55,7 @@ export const ReactClearAllModal = (props: Props) => {
       onClose={handleClose}
       headerChildren={<ModalBasicHeader title={tr('clearAll')} />}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('clear')}
             buttonColor={SessionButtonColor.Danger}
diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx
@@ -125,7 +125,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
       topAnchor="35vh"
       onClose={onClickClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={okText}
             buttonColor={okTheme}
diff --git a/ts/components/dialog/SessionNicknameDialog.tsx b/ts/components/dialog/SessionNicknameDialog.tsx
@@ -87,7 +87,7 @@ export const SessionNicknameDialog = (props: Props) => {
       onClose={onClickClose}
       topAnchor="25vh"
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('save')}
             disabled={!nickname}
diff --git a/ts/components/dialog/SessionProInfoModal.tsx b/ts/components/dialog/SessionProInfoModal.tsx
@@ -276,6 +276,7 @@ export function SessionProInfoModal(props: SessionProInfoState) {
       $contentMaxWidth={WrapperModalWidth.normal}
       buttonChildren={
         <ModalActionsContainer
+          buttonType={SessionButtonType.Simple}
           maxWidth="unset"
           style={{
             display: 'grid',
diff --git a/ts/components/dialog/SessionSetPasswordDialog.tsx b/ts/components/dialog/SessionSetPasswordDialog.tsx
@@ -99,7 +99,7 @@ export class SessionSetPasswordDialog extends Component<Props, State> {
         $contentMinWidth={WrapperModalWidth.narrow}
         $contentMaxWidth={WrapperModalWidth.narrow}
         buttonChildren={
-          <ModalActionsContainer>
+          <ModalActionsContainer buttonType={SessionButtonType.Simple}>
             <SessionButton
               text={confirmButtonText}
               buttonColor={passwordAction === 'remove' ? SessionButtonColor.Danger : undefined}
diff --git a/ts/components/dialog/TermsOfServicePrivacyDialog.tsx b/ts/components/dialog/TermsOfServicePrivacyDialog.tsx
@@ -33,7 +33,7 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr
       headerChildren={<ModalBasicHeader title={tr('urlOpen')} showExitIcon={true} />}
       onClose={onClose}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             ariaLabel={'Terms of service button'}
             text={tr('onboardingTos')}
diff --git a/ts/components/dialog/UpdateConversationDetailsDialog.tsx b/ts/components/dialog/UpdateConversationDetailsDialog.tsx
@@ -218,7 +218,7 @@ export function UpdateConversationDetailsDialog(props: WithConvoId) {
       headerChildren={<ModalBasicHeader title={tr(`update${partDetailCap}Information`)} />}
       onClose={closeDialog}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             text={tr('save')}
             onClick={onClickOK}
diff --git a/ts/components/dialog/UpdateGroupMembersDialog.tsx b/ts/components/dialog/UpdateGroupMembersDialog.tsx
@@ -196,7 +196,7 @@ export const UpdateGroupMembersDialog = (props: Props) => {
       $contentMinWidth={WrapperModalWidth.wide}
       $contentMaxWidth={WrapperModalWidth.wide}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           {weAreAdmin && (
             <SessionButton
               text={tr('remove')}
diff --git a/ts/components/dialog/UserProfileModal.tsx b/ts/components/dialog/UserProfileModal.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { ConvoHub } from '../../session/conversations';
 import { openConversationWithMessages } from '../../state/ducks/conversations';
 import { updateUserProfileModal, UserProfileModalState } from '../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { CopyToClipboardButton } from '../buttons/CopyToClipboardButton';
 import { ConversationTypeEnum } from '../../models/types';
 import { Flex } from '../basic/Flex';
@@ -104,7 +104,7 @@ export const UserProfileModal = ({
       headerChildren={<ModalBasicHeader title={''} showExitIcon={true} />}
       onClose={closeDialog}
       buttonChildren={
-        <ModalActionsContainer extraBottomMargin={true}>
+        <ModalActionsContainer buttonType={SessionButtonType.Outline}>
           <ModalBottomButtonWithBorder
             text={tr('message')}
             onClick={onClickStartConversation}
@@ -117,6 +117,7 @@ export const UserProfileModal = ({
               copyContent={conversationIdToDisplay}
               buttonColor={SessionButtonColor.PrimaryDark}
               dataTestId="copy-button-account-id"
+              buttonType={SessionButtonType.Outline}
               hotkey={true}
             />
           )}
diff --git a/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx b/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx
@@ -95,7 +95,7 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab
       headerChildren={<ModalBasicHeader title={localizedAction} />}
       onClose={closeModal}
       buttonChildren={
-        <ModalActionsContainer>
+        <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
             buttonType={SessionButtonType.Simple}
             buttonColor={SessionButtonColor.Danger}
diff --git a/ts/components/dialog/conversationSettings/pages/disappearing-messages/DisappearingMessagesPage.tsx b/ts/components/dialog/conversationSettings/pages/disappearing-messages/DisappearingMessagesPage.tsx
@@ -26,7 +26,11 @@ import {
 import { useShowConversationSettingsFor } from '../../../../menuAndSettingsHooks/useShowConversationSettingsFor';
 import { tr } from '../../../../../localization/localeTools';
 import { SessionSpinner } from '../../../../loading';
-import { SessionButton, SessionButtonColor } from '../../../../basic/SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from '../../../../basic/SessionButton';
 import {
   useBackActionForPage,
   useCloseActionFromPage,
@@ -174,13 +178,14 @@ export const DisappearingMessagesForConversationModal = (props: ConversationSett
       allowOutsideClick={false}
       $contentMinWidth={WrapperModalWidth.narrow}
       buttonChildren={
-        <ModalActionsContainer extraBottomMargin={true}>
+        <ModalActionsContainer buttonType={SessionButtonType.Outline}>
           {loading ? (
             <SessionSpinner loading={true} />
           ) : (
             <SessionButton
               buttonColor={SessionButtonColor.PrimaryDark}
               onClick={handleSetMode}
+              buttonType={SessionButtonType.Outline}
               disabled={
                 singleMode
                   ? disappearingModeOptions[singleMode]
diff --git a/ts/components/dialog/conversationSettings/pages/notifications/NotificationPage.tsx b/ts/components/dialog/conversationSettings/pages/notifications/NotificationPage.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { useIsLegacyGroup, useNotificationSetting } from '../../../../../hooks/useParamSelector';
 import { useSelectedConversationKey } from '../../../../../state/selectors/selectedConversation';
 import { Flex } from '../../../../basic/Flex';
-import { SessionButton } from '../../../../basic/SessionButton';
+import { SessionButton, SessionButtonType } from '../../../../basic/SessionButton';
 import { StyledScrollContainer } from '../../../../conversation/right-panel/overlay/components';
 import { type ConversationNotificationSettingType } from '../../../../../models/conversationAttributes';
 import { PanelButtonGroup } from '../../../../buttons';
@@ -124,7 +124,7 @@ export function NotificationForConversationModal(props: Required<ConversationSet
       allowOutsideClick={false}
       $contentMinWidth={WrapperModalWidth.narrow} // the content is radio buttons and it looks weird on a large modal
       buttonChildren={
-        <ModalActionsContainer extraBottomMargin={true}>
+        <ModalActionsContainer buttonType={SessionButtonType.Outline}>
           <SessionButton
             onClick={handleSetNotifications}
             dataTestId={'notifications-set-button'}
diff --git a/ts/components/dialog/user-settings/pages/BlockedContactsSettingsPage.tsx b/ts/components/dialog/user-settings/pages/BlockedContactsSettingsPage.tsx
@@ -9,6 +9,7 @@ import {
 } from '../../../../state/ducks/modalDialog';
 import { PanelButtonGroup } from '../../../buttons/panel/PanelButton';
 import {
+  ModalActionsContainer,
   ModalBasicHeader,
   SessionWrapperModal,
   WrapperModalWidth,
@@ -19,20 +20,12 @@ import {
   useUserSettingsCloseAction,
   useUserSettingsTitle,
 } from './userSettingsHooks';
-import { SpacerLG } from '../../../basic/Text';
-import { SessionButton, SessionButtonColor } from '../../../basic/SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../../../basic/SessionButton';
 import { tr } from '../../../../localization/localeTools';
 import { MemberListItem } from '../../../MemberListItem';
 import { Localizer } from '../../../basic/Localizer';
 import { BlockedNumberController } from '../../../../util';
 
-const StyledButtonContainer = styled.div`
-  display: flex;
-  width: min-content;
-  flex-direction: column;
-  padding-inline-start: var(--margins-lg);
-`;
-
 const StyledNoBlockedContactsContainer = styled.div`
   justify-self: center;
   // not pretty, but the only other way I found is to change the style of PanelButtonContainer itself, which I'd like to avoid
@@ -90,6 +83,20 @@ export function BlockedContactsSettingsPage(modalState: UserSettingsModalState)
       shouldOverflow={true}
       allowOutsideClick={false}
       $contentMinWidth={WrapperModalWidth.normal}
+      buttonChildren={
+        hasBlocked ? (
+          <ModalActionsContainer buttonType={SessionButtonType.Outline}>
+            <SessionButton
+              text={tr('blockUnblock')}
+              onClick={unBlockThoseUsers}
+              buttonColor={SessionButtonColor.Danger}
+              dataTestId="unblock-button-settings-screen"
+              disabled={!canUnblock}
+              buttonType={SessionButtonType.Outline}
+            />
+          </ModalActionsContainer>
+        ) : null
+      }
     >
       <PanelButtonGroup>
         {!blocked.length ? (
@@ -113,18 +120,6 @@ export function BlockedContactsSettingsPage(modalState: UserSettingsModalState)
           })
         )}
       </PanelButtonGroup>
-      {hasBlocked ? (
-        <StyledButtonContainer>
-          <SpacerLG />
-          <SessionButton
-            text={tr('blockUnblock')}
-            onClick={unBlockThoseUsers}
-            buttonColor={SessionButtonColor.Danger}
-            dataTestId="unblock-button-settings-screen"
-            disabled={!canUnblock}
-          />
-        </StyledButtonContainer>
-      ) : null}
     </SessionWrapperModal>
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ export const IncomingCallDialog = () => {`
`86`	`86`	`<ModalBasicHeader title={tr('callsIncoming', { name: from ?? tr('unknown') })} />`
`87`	`87`	`}`
`88`	`88`	`buttonChildren={`
`89`		`- <ModalActionsContainer>`
	`89`	`+ <ModalActionsContainer buttonType={SessionButtonType.Simple}>`
`90`	`90`	`<SessionButton`
`91`	`91`	`text={tr('accept')}`
`92`	`92`	`buttonType={SessionButtonType.Simple}`
Original file line number	Diff line number	Diff line change
`@@ -248,7 +248,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo`
`248`	`248`	`/>`
`249`	`249`	`}`
`250`	`250`	`buttonChildren={`
`251`		`- <ModalActionsContainer extraBottomMargin={true}>`
	`251`	`+ <ModalActionsContainer buttonType={SessionButtonType.Outline}>`
`252`	`252`	`<SessionButton`
`253`	`253`	`text={tr('save')}`
`254`	`254`	`buttonType={SessionButtonType.Simple}`