Dialogs: Draw buttons in one row (#2318)

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}>
+        <div className="dialog-buttons">
-          {lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
+          <Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>
-        </Button>
+            {lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
-        <Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
+          </Button>
-          {lang('Cancel')}
+          <Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
-        </Button>
+            {lang('Cancel')}
+          </Button>
+        </div>
       </Modal>
     </Modal>
   );

src/components/common/DeleteChatModal.tsx

@@ -192,30 +192,32 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
       onCloseAnimationEnd={onCloseAnimationEnd}
     >
       {renderContent()}
-      {isBot && (
+      <div className="dialog-buttons-column">
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
+        {isBot && (
-          {lang('DeleteAndStop')}
+          <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>
-      )}
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
-      {canDeleteForAll && (
+      </div>
-        <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>
     </Modal>
   );
 };

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 && (
+      <div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
+        {canDeleteForAll && (
-          {contactName && renderText(lang('Conversation.DeleteMessagesFor', contactName))}
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
-          {!contactName && lang('Conversation.DeleteMessagesForEveryone')}
+            {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 className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
+      </div>
-        {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
     </Modal>
   );
 };

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}>
+      <div className="dialog-buttons">
-        {lang('lng_report_button')}
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleReport}>
-      </Button>
+          {lang('lng_report_button')}
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        </Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };

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} />

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

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}

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 && (
+      <div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
-        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
+        {canDeleteForAll && (
-          {contactName
+          <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
-            ? renderText(lang('ChatList.DeleteForEveryone', contactName))
+            {contactName
-            : lang('Conversation.DeleteMessagesForEveryone')}
+              ? 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 className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
+      </div>
-        {lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
     </Modal>
   );
 };

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 ConfirmDialog from '../ui/ConfirmDialog';
-import Button from '../ui/Button';
 
 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')}
-    >
+      textParts={renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}
-      <p>{renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}</p>
+      confirmLabel={lang('lng_box_remove')}
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChatMember}>
+      confirmHandler={handleDeleteChatMember}
-        {lang('lng_box_remove')}
+      confirmIsDestructive
-      </Button>
+    />
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
-    </Modal>
   );
 };
 

src/components/right/management/ManageDiscussion.tsx

@@ -242,7 +242,6 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
           textParts={renderLinkGroupConfirmText()}
           confirmLabel={lang('DiscussionLinkGroup')}
           confirmHandler={handleLinkGroupSessions}
-          isButtonsInOneRow
         />
       </div>
     );

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

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;
   }