fix: dynamic bg color for some modals

Kolektivo-Labs · Jan 27, 2024 · 2f10698 · 2f10698
1 parent 199f7a9
commit 2f10698
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -432,6 +432,7 @@ function addLaggingTimestamps() {
     ])
   );
 }
+console.debug({ tailwind });
 </script>
 
 <template>

diff --git 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',
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -432,6 +432,7 @@ function addLaggingTimestamps() { @@
         ])
       );
     }
+    console.debug({ tailwind });
     </script>
     <template>
@@ Expand Down @@