Modals: Fix button positions (#2584)

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

src/components/common/DeleteProfilePhotoModal.tsx

@@ -49,13 +49,15 @@ const DeleteProfilePhotoModal: FC<OwnProps> = ({
       isOpen={isOpen}
       onClose={onClose}
       onEnter={handleDeletePhoto}
-      className="delete"
+      className="delete dialog-buttons-column"
-      title="Are you sure?"
+      title={lang('AreYouSure')}
     >
-      <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeletePhoto}>
+      <div className="dialog-buttons mt-2">
-        {lang('Preview.DeletePhoto')}
+        <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeletePhoto}>
-      </Button>
+          {lang('Preview.DeletePhoto')}
-      <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/common/SeenByModal.tsx

@@ -65,13 +65,15 @@ const SeenByModal: FC<OwnProps & StateProps> = ({
           </ListItem>
         ))}
       </div>
-      <Button
+      <div className="dialog-buttons mt-2">
-        className="confirm-dialog-button"
+        <Button
-        isText
+          className="confirm-dialog-button"
-        onClick={handleCloseSeenByModal}
+          isText
-      >
+          onClick={handleCloseSeenByModal}
-        {lang('Close')}
+        >
-      </Button>
+          {lang('Close')}
+        </Button>
+      </div>
     </Modal>
   );
 };

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}>
+      <div className="dialog-buttons mt-2">
-        {lang('DialogUnpin')}
+        <Button className="confirm-dialog-button" isText onClick={onUnpin}>
-      </Button>
+          {lang('DialogUnpin')}
-      <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/main/Dialogs.tsx

@@ -102,15 +102,17 @@ const Dialogs: FC<StateProps> = ({ dialogs, animationLevel }) => {
               : lang('MemberRequests.RequestToJoinDescriptionGroup')}
           </p>
         )}
-        <Button
+        <div className="dialog-buttons mt-2">
-          isText
+          <Button
-          className="confirm-dialog-button"
+            isText
-          // eslint-disable-next-line react/jsx-no-bind
+            className="confirm-dialog-button"
-          onClick={handleJoinClick}
+            // eslint-disable-next-line react/jsx-no-bind
-        >
+            onClick={handleJoinClick}
-          {isRequestNeeded ? requestToJoinText : joinText}
+          >
-        </Button>
+            {isRequestNeeded ? requestToJoinText : joinText}
-        <Button isText className="confirm-dialog-button" onClick={closeModal}>{lang('Cancel')}</Button>
+          </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>

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

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
+        <div className="dialog-buttons mt-2">
-          isText
+          <Button
-          onClick={handleClearPaymentError}
+            isText
-        >
+            onClick={handleClearPaymentError}
-          {lang('OK')}
+          >
-        </Button>
+            {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
+        <div className="dialog-buttons mt-2">
-          isText
+          <Button
-          onClick={closeModal}
+            isText
-        >
+            onClick={closeModal}
-          {lang('OK')}
+          >
-        </Button>
+            {lang('OK')}
+          </Button>
+        </div>
       </Modal>
     );
   }