From 4b3559a381bf7428d1160184330800654377d619 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 19 Feb 2023 02:50:03 +0100
Subject: [PATCH] Modals: Fix button positions (#2584)

---
 src/components/common/AboutAdsModal.tsx       |  4 ++-
 .../common/DeleteProfilePhotoModal.tsx        | 14 ++++++----
 src/components/common/SeenByModal.tsx         | 16 ++++++-----
 .../common/UnpinAllMessagesModal.tsx          | 10 ++++---
 src/components/main/Dialogs.tsx               | 24 ++++++++--------
 .../PremiumLimitReachedModal.module.scss      |  1 +
 src/components/payment/PaymentModal.tsx       | 28 +++++++++++--------
 7 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/components/common/AboutAdsModal.tsx b/src/components/common/AboutAdsModal.tsx
index 1e0a0069e..e4b549180 100644
--- a/src/components/common/AboutAdsModal.tsx
+++ b/src/components/common/AboutAdsModal.tsx
@@ -36,7 +36,9 @@ const AboutAdsModal: FC<OwnProps> = ({
         />
       </p>
       <p>{renderText(lang('SponsoredMessageInfoDescription4'), ['br'])}</p>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Close')}</Button>
+      <div className="dialog-buttons mt-2">
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Close')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/common/DeleteProfilePhotoModal.tsx b/src/components/common/DeleteProfilePhotoModal.tsx
index b37286a5e..f8bd5f3a3 100644
--- a/src/components/common/DeleteProfilePhotoModal.tsx
+++ b/src/components/common/DeleteProfilePhotoModal.tsx
@@ -49,13 +49,15 @@ const DeleteProfilePhotoModal: FC<OwnProps> = ({
       isOpen={isOpen}
       onClose={onClose}
       onEnter={handleDeletePhoto}
-      className="delete"
-      title="Are you sure?"
+      className="delete dialog-buttons-column"
+      title={lang('AreYouSure')}
     >
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeletePhoto}>
-        {lang('Preview.DeletePhoto')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      <div className="dialog-buttons mt-2">
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeletePhoto}>
+          {lang('Preview.DeletePhoto')}
+        </Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/common/SeenByModal.tsx b/src/components/common/SeenByModal.tsx
index 8ed00aa04..1092a5a7d 100644
--- a/src/components/common/SeenByModal.tsx
+++ b/src/components/common/SeenByModal.tsx
@@ -65,13 +65,15 @@ const SeenByModal: FC<OwnProps & StateProps> = ({
           </ListItem>
         ))}
       </div>
-      <Button
-        className="confirm-dialog-button"
-        isText
-        onClick={handleCloseSeenByModal}
-      >
-        {lang('Close')}
-      </Button>
+      <div className="dialog-buttons mt-2">
+        <Button
+          className="confirm-dialog-button"
+          isText
+          onClick={handleCloseSeenByModal}
+        >
+          {lang('Close')}
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/common/UnpinAllMessagesModal.tsx b/src/components/common/UnpinAllMessagesModal.tsx
index 347e04173..e2d7e6b40 100644
--- a/src/components/common/UnpinAllMessagesModal.tsx
+++ b/src/components/common/UnpinAllMessagesModal.tsx
@@ -30,10 +30,12 @@ const UnpinAllMessagesModal: FC<OwnProps> = ({
       title={lang('Chat.PanelUnpinAllMessages')}
     >
       <p>{lang('Chat.UnpinAllMessagesConfirmation', pinnedMessagesCount, 'i')}</p>
-      <Button className="confirm-dialog-button" isText onClick={onUnpin}>
-        {lang('DialogUnpin')}
-      </Button>
-      <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      <div className="dialog-buttons mt-2">
+        <Button className="confirm-dialog-button" isText onClick={onUnpin}>
+          {lang('DialogUnpin')}
+        </Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/src/components/main/Dialogs.tsx b/src/components/main/Dialogs.tsx
index 86e2f82b1..d4cebb536 100644
--- a/src/components/main/Dialogs.tsx
+++ b/src/components/main/Dialogs.tsx
@@ -102,15 +102,17 @@ const Dialogs: FC<StateProps> = ({ dialogs, animationLevel }) => {
               : lang('MemberRequests.RequestToJoinDescriptionGroup')}
           </p>
         )}
-        <Button
-          isText
-          className="confirm-dialog-button"
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={handleJoinClick}
-        >
-          {isRequestNeeded ? requestToJoinText : joinText}
-        </Button>
-        <Button isText className="confirm-dialog-button" onClick={closeModal}>{lang('Cancel')}</Button>
+        <div className="dialog-buttons mt-2">
+          <Button
+            isText
+            className="confirm-dialog-button"
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick={handleJoinClick}
+          >
+            {isRequestNeeded ? requestToJoinText : joinText}
+          </Button>
+          <Button isText className="confirm-dialog-button" onClick={closeModal}>{lang('Cancel')}</Button>
+        </div>
       </Modal>
     );
   };
@@ -132,7 +134,7 @@ const Dialogs: FC<StateProps> = ({ dialogs, animationLevel }) => {
         onCloseAnimationEnd={dismissDialog}
       >
         {lang('AreYouSureShareMyContactInfoBot')}
-        <div>
+        <div className="dialog-buttons mt-2">
           <Button
             className="confirm-dialog-button"
             isText
@@ -158,7 +160,7 @@ const Dialogs: FC<StateProps> = ({ dialogs, animationLevel }) => {
       >
         {error.hasErrorKey ? getReadableErrorText(error)
           : renderText(error.message!, ['simple_markdown', 'emoji', 'br'])}
-        <div>
+        <div className="dialog-buttons mt-2">
           <Button isText onClick={closeModal}>{lang('OK')}</Button>
         </div>
       </Modal>
diff --git a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss
index 20c963e34..4e401780b 100644
--- a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss
+++ b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss
@@ -39,6 +39,7 @@
   width: 100%;
   display: flex;
   align-items: flex-end;
+  justify-content: flex-end;
   margin-top: 1rem;
 }
 
diff --git a/src/components/payment/PaymentModal.tsx b/src/components/payment/PaymentModal.tsx
index af8a18eb8..1853c3ebb 100644
--- a/src/components/payment/PaymentModal.tsx
+++ b/src/components/payment/PaymentModal.tsx
@@ -239,12 +239,14 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
       >
         <h4>{error.description || 'Error'}</h4>
         <p>{error.description || 'Error'}</p>
-        <Button
-          isText
-          onClick={handleClearPaymentError}
-        >
-          {lang('OK')}
-        </Button>
+        <div className="dialog-buttons mt-2">
+          <Button
+            isText
+            onClick={handleClearPaymentError}
+          >
+            {lang('OK')}
+          </Button>
+        </div>
       </Modal>
     );
   }
@@ -518,12 +520,14 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
           Sorry, Telegram WebZ doesn&apos;t support payments with this provider yet. <br />
           Please use one of our mobile apps to do this.
         </p>
-        <Button
-          isText
-          onClick={closeModal}
-        >
-          {lang('OK')}
-        </Button>
+        <div className="dialog-buttons mt-2">
+          <Button
+            isText
+            onClick={closeModal}
+          >
+            {lang('OK')}
+          </Button>
+        </div>
       </Modal>
     );
   }