From 1c60243584ae69775b9f5da982190f09e69589a1 Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Wed, 22 Nov 2023 23:00:12 +0100
Subject: [PATCH] feat: close modal when opening onGetMana modal and fix loader

---
 .../BuyWithCryptoModal/BuyWithCryptoModal.module.css       | 7 ++++++-
 .../Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx       | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
index 3469774e6d..d817f1a413 100644
--- a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
+++ b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
@@ -395,10 +395,15 @@
 }
 
 .buyWithCryptoModal .mainLoader:global(.ui.loader) {
-  position: relative;
+  align-self: center;
   height: 220px;
 }
 
+.buyWithCryptoModal .mainLoader:global(.ui.loader::before),
+.buyWithCryptoModal .mainLoader:global(.ui.loader::after) {
+  top: 50%;
+}
+
 .buyWithCryptoModal .subtitle {
   font-size: 15px;
 }
diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
index 81c9f88401..c879a3adf4 100644
--- a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
+++ b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
@@ -636,7 +636,10 @@ export const BuyWithCryptoModal = (props: Props) => {
           primary
           data-testid={GET_MANA_BUTTON_TEST_ID}
           loading={isFetchingBalance || isLoading}
-          onClick={() => onGetMana()}
+          onClick={() => {
+            onGetMana()
+            onClose()
+          }}
         >
           {t('buy_with_crypto_modal.get_mana')}
         </Button>
@@ -882,7 +885,7 @@ export const BuyWithCryptoModal = (props: Props) => {
               </div>
 
               {!providerTokens.length || !selectedToken ? (
-                <Loader active className={styles.mainLoader} />
+                <Loader inline active className={styles.mainLoader} />
               ) : (
                 <div
                   className={styles.payWithContainer}