fix: fix alignment in the streak celebration modal

Author: ihor-romaniuk

src/shared/streak-celebration/StreakCelebrationModal.jsx

@@ -160,8 +160,8 @@ function StreakModal({
         </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body className="modal-body">
-        <p>{intl.formatMessage(messages.streakBody)}</p>
-        <p className="modal-image">
+        <p className="text-center">{intl.formatMessage(messages.streakBody)}</p>
+        <p className="modal-image text-center">
           {!wideScreen && <img src={StreakMobileImage} alt="" className="img-fluid" />}
           {wideScreen && <img src={StreakDesktopImage} alt="" className="img-fluid" />}
         </p>

src/shared/streak-celebration/StreakCelebrationModal.scss

@@ -26,6 +26,10 @@
   .modal-body {
     padding-top: .5rem;
     font-size: 1.2rem;
+
+    .pgn__modal-body-content {
+      text-align: center;
+    }
   }
 
   .modal-footer {