Allow mobile pop-up to close

src/app/components/TutorialDialog/container/index.tsx

@@ -80,7 +80,7 @@ export function TutorialDialog() {
             />
           </div>
           <div className="d-block d-md-none">
-            <MobileNotReady />
+            <MobileNotReady handleClose={handleClose} />
           </div>
         </>
       )}

src/app/components/TutorialDialog/mobileNotReady/index.tsx

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import background from 'assets/images/tutorial/mobile-not-ready-bg.svg';
 import successBg from 'assets/images/tutorial/email_success_bg.svg';
+import close from 'assets/images/tutorial/close.svg';
 
 import { translations } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 
-export function MobileNotReady() {
+export function MobileNotReady(props) {
   const { t } = useTranslation();
   const s = translations.mobileNotReady;
   const [status, setStatus] = useState('');
@@ -54,6 +55,12 @@ export function MobileNotReady() {
         {status !== 'success' && (
           <>
             <div className="mobile-not-ready-img position-absolute">
+              <div
+                className="close-mobile position-absolute"
+                onClick={props.handleClose}
+              >
+                <img src={close} alt="close" />
+              </div>
               <img src={background} alt="" className="h-100 w-100" />
               <div className="mobile-not-ready-text position-absolute">
                 <p>{t(s.p1)}</p>
@@ -85,6 +92,12 @@ export function MobileNotReady() {
         {status === 'success' && (
           <>
             <div className="email-success position-absolute">
+              <div
+                className="close-mobile position-absolute"
+                onClick={props.handleClose}
+              >
+                <img src={close} alt="close" />
+              </div>
               <img className="h-100 w-100" src={successBg} alt="" />
               <div className="mobile-not-ready-text--success position-absolute">
                 <p>{t(s.success)}</p>

src/styles/sass/_mobile-wallet-tutorial.scss

@@ -18,6 +18,9 @@
       transform: translate(-50%, -50%);
       @include fade-in(1s);
     }
+    .close-mobile {
+      top: 0% !important;
+    }
     [class^='title'] {
       color: var(--black);
       top: 6%;