From 38535ee905c6696785435fd31b9e37b5acb907fd Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 24 Jan 2023 00:17:50 +0100
Subject: [PATCH] Dialogs: Draw buttons in one row (#2318)

---
 src/components/calls/group/GroupCall.tsx      | 14 +++---
 src/components/common/DeleteChatModal.tsx     | 48 ++++++++++---------
 src/components/common/DeleteMessageModal.tsx  | 20 ++++----
 src/components/common/ReportModal.tsx         | 12 +++--
 .../left/settings/SettingsActiveSessions.tsx  |  1 +
 src/components/main/AttachBotInstallModal.tsx |  1 -
 src/components/middle/ChatReportPanel.tsx     |  1 -
 .../middle/DeleteSelectedMessageModal.tsx     | 22 +++++----
 src/components/right/DeleteMemberModal.tsx    | 19 +++-----
 .../right/management/ManageDiscussion.tsx     |  1 -
 src/components/ui/ConfirmDialog.tsx           | 10 ++--
 src/components/ui/Modal.scss                  | 13 ++---
 12 files changed, 85 insertions(+), 77 deletions(-)

diff --git a/src/components/calls/group/GroupCall.tsx b/src/components/calls/group/GroupCall.tsx
index aa39cf6b4..c48cd79ff 100644
--- a/src/components/calls/group/GroupCall.tsx
+++ b/src/components/calls/group/GroupCall.tsx
@@ -390,12 +390,14 @@ const GroupCall: FC<OwnProps & StateProps> = ({
             onCheck={setShouldEndGroupCall}
           />
         )}
-        <Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>
-          {lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
-        </Button>
-        <Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
-          {lang('Cancel')}
-        </Button>
+        <div className="dialog-buttons">
+          <Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>
+            {lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
+          </Button>
+          <Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
+            {lang('Cancel')}
+          </Button>
+        </div>
       </Modal>
     </Modal>
   );
diff --git a/src/components/common/DeleteChatModal.tsx b/src/components/common/DeleteChatModal.tsx
index 6bc0a546e..af065fa3a 100644
--- a/src/components/common/DeleteChatModal.tsx
+++ b/src/components/common/DeleteChatModal.tsx
@@ -192,30 +192,32 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
       onCloseAnimationEnd={onCloseAnimationEnd}
     >
       {renderContent()}
-      {isBot && (
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
-          {lang('DeleteAndStop')}
+      <div className="dialog-buttons-column">
+        {isBot && (
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
+            {lang('DeleteAndStop')}
+          </Button>
+        )}
+        {canDeleteForAll && (
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteForAll}>
+            {contactName ? renderText(lang('ChatList.DeleteForEveryone', contactName)) : lang('DeleteForAll')}
+          </Button>
+        )}
+        {!isPrivateChat && chat.isCreator && (
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChat}>
+            {lang('DeleteForAll')}
+          </Button>
+        )}
+        <Button
+          color="danger"
+          className="confirm-dialog-button"
+          isText
+          onClick={isPrivateChat ? handleDeleteChat : handleLeaveChat}
+        >
+          {lang(renderActionText())}
         </Button>
-      )}
-      {canDeleteForAll && (
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteForAll}>
-          {contactName ? renderText(lang('ChatList.DeleteForEveryone', contactName)) : lang('DeleteForAll')}
-        </Button>
-      )}
-      {!isPrivateChat && chat.isCreator && (
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChat}>
-          {lang('DeleteForAll')}
-        </Button>
-      )}
-      <Button
-        color="danger"
-        className="confirm-dialog-button"
-        isText
-        onClick={isPrivateChat ? handleDeleteChat : handleLeaveChat}
-      >
-        {lang(renderActionText())}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/common/DeleteMessageModal.tsx b/src/components/common/DeleteMessageModal.tsx
index c455bf07b..701569dec 100644
--- a/src/components/common/DeleteMessageModal.tsx
+++ b/src/components/common/DeleteMessageModal.tsx
@@ -99,16 +99,18 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
       {willDeleteForAll && (
         <p>{lang('lng_delete_for_everyone_hint', 1, 'i')}</p>
       )}
-      {canDeleteForAll && (
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
-          {contactName && renderText(lang('Conversation.DeleteMessagesFor', contactName))}
-          {!contactName && lang('Conversation.DeleteMessagesForEveryone')}
+      <div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
+        {canDeleteForAll && (
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
+            {contactName && renderText(lang('Conversation.DeleteMessagesFor', contactName))}
+            {!contactName && lang('Conversation.DeleteMessagesForEveryone')}
+          </Button>
+        )}
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
+          {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
         </Button>
-      )}
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
-        {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/common/ReportModal.tsx b/src/components/common/ReportModal.tsx
index a006443bc..020501552 100644
--- a/src/components/common/ReportModal.tsx
+++ b/src/components/common/ReportModal.tsx
@@ -113,7 +113,7 @@ const ReportModal: FC<OwnProps> = ({
       onClose={onClose}
       onEnter={isOpen ? handleReport : undefined}
       onCloseAnimationEnd={onCloseAnimationEnd}
-      className="report"
+      className="narrow"
       title={title}
     >
       <RadioGroup
@@ -127,10 +127,12 @@ const ReportModal: FC<OwnProps> = ({
         value={description}
         onChange={handleDescriptionChange}
       />
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleReport}>
-        {lang('lng_report_button')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      <div className="dialog-buttons">
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleReport}>
+          {lang('lng_report_button')}
+        </Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/left/settings/SettingsActiveSessions.tsx b/src/components/left/settings/SettingsActiveSessions.tsx
index deaa4ddbd..b6f0fcdca 100644
--- a/src/components/left/settings/SettingsActiveSessions.tsx
+++ b/src/components/left/settings/SettingsActiveSessions.tsx
@@ -247,6 +247,7 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
           confirmLabel={lang('TerminateAllSessions')}
           confirmHandler={handleTerminateAllSessions}
           confirmIsDestructive
+          areButtonsInColumn
         />
       )}
       <SettingsActiveSession isOpen={isModalOpen} hash={openedSessionHash} onClose={handleCloseSessionModal} />
diff --git a/src/components/main/AttachBotInstallModal.tsx b/src/components/main/AttachBotInstallModal.tsx
index 15826fd46..3e9fa6431 100644
--- a/src/components/main/AttachBotInstallModal.tsx
+++ b/src/components/main/AttachBotInstallModal.tsx
@@ -46,7 +46,6 @@ const AttachBotInstallModal: FC<OwnProps> = ({
     <ConfirmDialog
       isOpen={Boolean(bot)}
       onClose={cancelAttachBotInstall}
-      isButtonsInOneRow
       title={renderingBot?.shortName}
       confirmHandler={handleConfirm}
     >
diff --git a/src/components/middle/ChatReportPanel.tsx b/src/components/middle/ChatReportPanel.tsx
index 0fbb6270e..43e31d7b5 100644
--- a/src/components/middle/ChatReportPanel.tsx
+++ b/src/components/middle/ChatReportPanel.tsx
@@ -151,7 +151,6 @@ const ChatReportPanel: FC<OwnProps & StateProps> = ({
         text={user
           ? lang('UserInfo.BlockConfirmationTitle', getUserFullName(user))
           : lang('Chat.Confirm.ReportSpam.Channel')}
-        isButtonsInOneRow
         confirmIsDestructive
         confirmLabel={lang('Block')}
         confirmHandler={user ? handleConfirmBlock : handleChatReportSpam}
diff --git a/src/components/middle/DeleteSelectedMessageModal.tsx b/src/components/middle/DeleteSelectedMessageModal.tsx
index a289cdea5..06439f05f 100644
--- a/src/components/middle/DeleteSelectedMessageModal.tsx
+++ b/src/components/middle/DeleteSelectedMessageModal.tsx
@@ -92,17 +92,19 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
       {willDeleteForAll && (
         <p>This will delete them for everyone in this chat.</p>
       )}
-      {canDeleteForAll && (
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
-          {contactName
-            ? renderText(lang('ChatList.DeleteForEveryone', contactName))
-            : lang('Conversation.DeleteMessagesForEveryone')}
+      <div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
+        {canDeleteForAll && (
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
+            {contactName
+              ? renderText(lang('ChatList.DeleteForEveryone', contactName))
+              : lang('Conversation.DeleteMessagesForEveryone')}
+          </Button>
+        )}
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
+          {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
         </Button>
-      )}
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
-        {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/right/DeleteMemberModal.tsx b/src/components/right/DeleteMemberModal.tsx
index 951fb6928..0cbca71cd 100644
--- a/src/components/right/DeleteMemberModal.tsx
+++ b/src/components/right/DeleteMemberModal.tsx
@@ -9,8 +9,7 @@ import { getUserFirstOrLastName } from '../../global/helpers';
 import renderText from '../common/helpers/renderText';
 import useLang from '../../hooks/useLang';
 
-import Modal from '../ui/Modal';
-import Button from '../ui/Button';
+import ConfirmDialog from '../ui/ConfirmDialog';
 
 export type OwnProps = {
   isOpen: boolean;
@@ -44,19 +43,15 @@ const DeleteMemberModal: FC<OwnProps & StateProps> = ({
   }
 
   return (
-    <Modal
+    <ConfirmDialog
       isOpen={isOpen}
       onClose={onClose}
-      onEnter={handleDeleteChatMember}
-      className="delete"
       title={lang('GroupRemoved.Remove')}
-    >
-      <p>{renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}</p>
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChatMember}>
-        {lang('lng_box_remove')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
-    </Modal>
+      textParts={renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}
+      confirmLabel={lang('lng_box_remove')}
+      confirmHandler={handleDeleteChatMember}
+      confirmIsDestructive
+    />
   );
 };
 
diff --git a/src/components/right/management/ManageDiscussion.tsx b/src/components/right/management/ManageDiscussion.tsx
index b94120b72..1f3d74c96 100644
--- a/src/components/right/management/ManageDiscussion.tsx
+++ b/src/components/right/management/ManageDiscussion.tsx
@@ -242,7 +242,6 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
           textParts={renderLinkGroupConfirmText()}
           confirmLabel={lang('DiscussionLinkGroup')}
           confirmHandler={handleLinkGroupSessions}
-          isButtonsInOneRow
         />
       </div>
     );
diff --git a/src/components/ui/ConfirmDialog.tsx b/src/components/ui/ConfirmDialog.tsx
index 93a0c33ad..5cebf4489 100644
--- a/src/components/ui/ConfirmDialog.tsx
+++ b/src/components/ui/ConfirmDialog.tsx
@@ -20,7 +20,7 @@ type OwnProps = {
   confirmLabel?: string;
   confirmHandler: () => void;
   confirmIsDestructive?: boolean;
-  isButtonsInOneRow?: boolean;
+  areButtonsInColumn?: boolean;
   children?: React.ReactNode;
 };
 
@@ -35,7 +35,7 @@ const ConfirmDialog: FC<OwnProps> = ({
   confirmLabel = 'Confirm',
   confirmHandler,
   confirmIsDestructive,
-  isButtonsInOneRow,
+  areButtonsInColumn,
   children,
 }) => {
   const lang = useLang();
@@ -62,7 +62,11 @@ const ConfirmDialog: FC<OwnProps> = ({
         <p>{textPart}</p>
       ))}
       {textParts || children}
-      <div className={isButtonsInOneRow ? 'dialog-buttons mt-2' : ''} ref={containerRef} onKeyDown={handleKeyDown}>
+      <div
+        className={areButtonsInColumn ? 'dialog-buttons-column' : 'dialog-buttons mt-2'}
+        ref={containerRef}
+        onKeyDown={handleKeyDown}
+      >
         <Button
           className="confirm-dialog-button"
           isText
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index 5731ca08d..b06e1a265 100644
--- a/src/components/ui/Modal.scss
+++ b/src/components/ui/Modal.scss
@@ -28,12 +28,6 @@
     }
   }
 
-  &.report {
-    .modal-dialog {
-      max-width: 15rem;
-    }
-  }
-
   .modal-container {
     position: fixed;
     top: 0;
@@ -177,12 +171,19 @@
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-start;
+    flex-wrap: wrap;
 
     .confirm-dialog-button + .confirm-dialog-button {
       margin-left: 1rem;
     }
   }
 
+  .dialog-buttons-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
   .dialog-checkbox {
     margin: 1rem 0;
   }