From 2f106982032d81d9c61dee6c2c29ff9535080233 Mon Sep 17 00:00:00 2001
From: Another <joseluismanco37@gmail.com>
Date: Sat, 27 Jan 2024 13:08:19 -0600
Subject: [PATCH] fix: dynamic bg color for some modals

---
 src/components/_global/BalCard/BalCard.vue                | 5 +++--
 src/components/_global/BalModal/BalModal.vue              | 4 +++-
 .../pages/dashboard/Modals/IsMintingNFTModal.vue          | 8 +++++++-
 .../pages/dashboard/Modals/IsUpgradingNFTModal.vue        | 8 +++++++-
 src/components/contextual/pages/pool/PoolChart.vue        | 1 +
 tailwind.config.js                                        | 1 +
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/_global/BalCard/BalCard.vue b/src/components/_global/BalCard/BalCard.vue
index c58dfc0ef..dfb99b38d 100644
--- a/src/components/_global/BalCard/BalCard.vue
+++ b/src/components/_global/BalCard/BalCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['bal-card', cardClasses]">
+  <div :class="['bal-card', cardClasses, customBgColor]">
     <div
       :class="[
         'card-container',
@@ -45,6 +45,7 @@ export default defineComponent({
     rightAlignHeader: { type: Boolean, default: false },
     exposeOverflow: { type: Boolean, default: false },
     overflowYScroll: { type: Boolean, default: false },
+    customBgColor: { type: String, default: null },
     shadow: {
       type: String,
       default: '',
@@ -73,7 +74,7 @@ export default defineComponent({
       return {
         'rounded-lg': !props.square,
         'overflow-hidden': !props.exposeOverflow,
-        ['bg-white dark:bg-[#232833]']: true,
+        [`bg-white dark:bg-gray-${props.darkBgColor}`]: !props.customBgColor,
         [`shadow${props.shadow ? '-' : ''}${props.shadow}`]: true,
         [borderClasses.value]: !props.noBorder,
         'h-full': props.hFull,
diff --git a/src/components/_global/BalModal/BalModal.vue b/src/components/_global/BalModal/BalModal.vue
index 330f608fb..35fa522a9 100644
--- a/src/components/_global/BalModal/BalModal.vue
+++ b/src/components/_global/BalModal/BalModal.vue
@@ -12,6 +12,7 @@ type Props = {
   fireworks?: boolean;
   fitContent?: boolean;
   blockHideOnClick?: boolean;
+  customBgColor?: string;
 };
 
 /**
@@ -75,11 +76,12 @@ defineExpose({ hide });
           class="content"
         >
           <BalCard
+            :customBgColor="customBgColor"
             :title="title"
             shadow="lg"
             :noPad="noPad"
             :noContentPad="noContentPad"
-            class="modal-card"
+            class="bg-refi-gray modal-card"
             noBorder
             overflowYScroll
           >
diff --git a/src/components/contextual/pages/dashboard/Modals/IsMintingNFTModal.vue b/src/components/contextual/pages/dashboard/Modals/IsMintingNFTModal.vue
index d22543c3a..59c2a16f2 100644
--- a/src/components/contextual/pages/dashboard/Modals/IsMintingNFTModal.vue
+++ b/src/components/contextual/pages/dashboard/Modals/IsMintingNFTModal.vue
@@ -3,7 +3,13 @@ import { Vue3Lottie } from 'vue3-lottie';
 import LoadingAnimation from '@/assets/css/animations/RegenerativeLoadingAnimation.json';
 </script>
 <template>
-  <BalModal blockHideOnClick fitContent class="w-[100px]" show>
+  <BalModal
+    customBgColor="bg-refi-gray"
+    blockHideOnClick
+    fitContent
+    class="w-[100px]"
+    show
+  >
     <div class="flex flex-col justify-center items-center py-20 px-10 w-full">
       <Vue3Lottie
         :animationData="LoadingAnimation"
diff --git a/src/components/contextual/pages/dashboard/Modals/IsUpgradingNFTModal.vue b/src/components/contextual/pages/dashboard/Modals/IsUpgradingNFTModal.vue
index 5ed7677bf..ad3e4afd8 100644
--- a/src/components/contextual/pages/dashboard/Modals/IsUpgradingNFTModal.vue
+++ b/src/components/contextual/pages/dashboard/Modals/IsUpgradingNFTModal.vue
@@ -3,7 +3,13 @@ import { Vue3Lottie } from 'vue3-lottie';
 import LoadingAnimation from '@/assets/css/animations/RegenerativeLoadingAnimation.json';
 </script>
 <template>
-  <BalModal blockHideOnClick fitContent class="w-[100px]" show>
+  <BalModal
+    customBgColor="bg-refi-gray"
+    blockHideOnClick
+    fitContent
+    class="w-[100px]"
+    show
+  >
     <div class="flex flex-col justify-center items-center py-20 px-10 w-full">
       <Vue3Lottie
         :animationData="LoadingAnimation"
diff --git a/src/components/contextual/pages/pool/PoolChart.vue b/src/components/contextual/pages/pool/PoolChart.vue
index 799c226d4..cc25fb0d9 100644
--- a/src/components/contextual/pages/pool/PoolChart.vue
+++ b/src/components/contextual/pages/pool/PoolChart.vue
@@ -432,6 +432,7 @@ function addLaggingTimestamps() {
     ])
   );
 }
+console.debug({ tailwind });
 </script>
 
 <template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4f70e0187..cb9d7f373 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -192,6 +192,7 @@ module.exports = {
         complementary: '#7B7B7B',
         'complementary-b': '#B6C7D6',
         'pill-light': '#E7F4FF',
+        'refi-gray': '#232833',
       },
     },
   },