Merge pull request #50 from Kolektivo-Labs/develop

feat: merge feedback issues

src/components/_global/BalBtn/BalBtn.vue

@@ -1,6 +1,8 @@
 
 <script setup lang="ts">
+import { Vue3Lottie } from 'vue3-lottie';
 import BalLoadingIcon from '../BalLoadingIcon/BalLoadingIcon.vue';
+import loadingAnimation from '@/assets/css/animations/RegenerativeButtonLoadingAnimation.json';
 
 import {
   background,
@@ -22,8 +24,6 @@ import {
   hoverTo,
   loadingBackground,
   loadingDarkBackground,
-  loadingFrom,
-  loadingTo,
   text,
 } from 'button-options';
 
@@ -51,6 +51,7 @@ type Props = {
   flat?: boolean;
   rounded?: boolean;
   loading?: boolean;
+  regenerativeLoading?: boolean;
   loadingLabel?: string;
   disabled?: boolean;
   justifyContent?: 'start' | 'center' | 'end' | 'between';
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
   flat: false,
   rounded: false,
   loading: false,
+  regenerativeLoading: false,
   loadingLabel: 'loading...',
   disabled: false,
   justifyContent: 'center',
@@ -119,9 +121,9 @@ const bgGradientClasses = computed(() => {
     return `bg-complementary-b dark:complementary-b text-white `;
   }
   if (props.loading) {
-    return `bg-gradient-to-tr ${loadingFrom(fromColor)} ${loadingTo(toColor)}`;
+    return 'transition-colors button-gradient';
   }
-  if (props.color === 'gradient') return 'transition-colors button-gradient ';
+  if (props.color === 'gradient') return 'transition-colors button-gradient';
 
   return ` bg-gradient-to-tr ${gradientFrom(fromColor)} ${gradientTo(
     toColor
@@ -242,8 +244,18 @@ const iconColor = computed(() => {
     :class="['bal-btn', btnClasses]"
     :disabled="disabled || loading"
   >
-    <div v-if="loading" class="flex justify-center items-center">
-      <BalLoadingIcon :size="size" :color="iconColor" />
+    <div
+      v-if="loading || regenerativeLoading"
+      class="flex justify-center items-center"
+    >
+      <Vue3Lottie
+        v-if="regenerativeLoading"
+        :animationData="loadingAnimation"
+        :height="16"
+        :width="16"
+      />
+
+      <BalLoadingIcon v-else :size="size" :color="iconColor" />
       <span v-if="loadingLabel" class="ml-2">
         {{ loadingLabel }}
       </span>

src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue

@@ -9,6 +9,8 @@ import { NFTData as TNFTData } from '@/services/campaigns/campaigns.service';
 import IsMintingNFTModal from '../Modals/IsMintingNFTModal.vue';
 import IsUpgradingNFTModal from '../Modals/IsUpgradingNFTModal.vue';
 import { ref, computed, watch } from 'vue';
+import Snapshot from '@/assets/images/services/snapshot.png';
+import RFP from '@/assets/images/icons/coins/RFP.svg';
 
 const { startConnectWithInjectedProvider } = useWeb3();
 const { isMobile, bp } = useBreakpoints();
@@ -94,25 +96,46 @@ function handleMintNFTClose() {
             </h3>
             <div class="flex justify-between items-center text-base">
               <p>Voting Power</p>
-              <p v-if="NFTData">{{ NFTData.attributes[1].value }} Votes</p>
-              <p v-else>- Votes</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData">
+                  {{ NFTData.attributes[1].value }}
+                  {{
+                    parseInt(NFTData.attributes[1].value) === 1
+                      ? 'vote'
+                      : 'votes'
+                  }}
+                </p>
+                <p v-else>- Votes</p>
+                <a
+                  target="_blank"
+                  href="https://snapshot.org/#/regenerativefi.eth"
+                >
+                  <img :src="Snapshot" class="w-4 h-4" />
+                </a>
+              </div>
             </div>
           </div>
           <div class="w-full border-t-2" />
           <div class="flex flex-col gap-1">
             <div class="flex justify-between items-center text-base">
               <p class="text-sm">My Points</p>
-              <p v-if="isLoading" class="text-sm">- RFP</p>
-              <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+              <div class="flex flex-row gap-2">
+                <p v-if="isLoading" class="text-sm">- RFP</p>
+                <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
             <div
               class="flex justify-between items-center text-base text-disabled"
             >
               <p class="text-sm">Next level</p>
-              <p v-if="NFTData" class="text-sm">
-                {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
-              </p>
-              <p v-else class="text-sm">- RFP</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData" class="text-sm">
+                  {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
+                </p>
+                <p v-else class="text-sm">- RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
           </div>
           <BalBtn
@@ -128,6 +151,8 @@ function handleMintNFTClose() {
             :disabled="!isAbleToUpgradeNFT"
             :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
             class="self-end w-fit"
+            :regenerativeLoading="isUpgradingNFTStatus.loading"
+            loadingLabel="Upgrading NFT"
             size="sm"
             @click="() => UpgradeNFT(NFTData?.id as number)"
             >Upgrade</BalBtn
@@ -136,6 +161,8 @@ function handleMintNFTClose() {
             v-else
             :color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
             :disabled="isMintingNFTStatus.loading"
+            :regenerativeLoading="isMintingNFTStatus.loading"
+            loadingLabel="Minting NFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"
@@ -162,25 +189,46 @@ function handleMintNFTClose() {
             </h3>
             <div class="flex justify-between items-center text-base">
               <p>Voting Power</p>
-              <p v-if="NFTData">{{ NFTData.attributes[1].value }} Votes</p>
-              <p v-else>- Votes</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData">
+                  {{ NFTData.attributes[1].value }}
+                  {{
+                    parseInt(NFTData.attributes[1].value) === 1
+                      ? 'vote'
+                      : 'votes'
+                  }}
+                </p>
+                <p v-else>- Votes</p>
+                <a
+                  target="_blank"
+                  href="https://snapshot.org/#/regenerativefi.eth"
+                >
+                  <img :src="Snapshot" class="w-4 h-4" />
+                </a>
+              </div>
             </div>
           </div>
           <div class="w-full border-t-2" />
           <div class="flex flex-col gap-1">
             <div class="flex justify-between items-center text-base">
               <p class="text-sm">My Points</p>
-              <p v-if="isLoading" class="text-sm">- RFP</p>
-              <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+              <div class="flex flex-row gap-2">
+                <p v-if="isLoading" class="text-sm">- RFP</p>
+                <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
             <div
               class="flex justify-between items-center text-base text-disabled"
             >
               <p class="text-sm">Next level</p>
-              <p v-if="NFTData" class="text-sm">
-                {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
-              </p>
-              <p v-else class="text-sm">- RFP</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData" class="text-sm">
+                  {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
+                </p>
+                <p v-else class="text-sm">- RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
           </div>
           <BalBtn
@@ -196,6 +244,8 @@ function handleMintNFTClose() {
             :disabled="!isAbleToUpgradeNFT"
             :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
             class="self-end w-fit"
+            :regenerativeLoading="isUpgradingNFTStatus.loading"
+            loadingLabel="Upgrading NFT"
             size="sm"
             @click="() => UpgradeNFT(NFTData?.id as number)"
             >Upgrade</BalBtn
@@ -204,6 +254,8 @@ function handleMintNFTClose() {
             v-else
             :color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
             :disabled="isMintingNFTStatus.loading"
+            :regenerativeLoading="isMintingNFTStatus.loading"
+            loadingLabel="Minting NFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"
@@ -233,25 +285,46 @@ function handleMintNFTClose() {
             <h3 v-else class="self-start text-lg">Mint NFT</h3>
             <div class="flex justify-between items-center text-base">
               <p>Voting Power</p>
-              <p v-if="NFTData">{{ NFTData.attributes[1].value }} Votes</p>
-              <p v-else>- Votes</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData">
+                  {{ NFTData.attributes[1].value }}
+                  {{
+                    parseInt(NFTData.attributes[1].value) === 1
+                      ? 'vote'
+                      : 'votes'
+                  }}
+                </p>
+                <p v-else>- Votes</p>
+                <a
+                  target="_blank"
+                  href="https://snapshot.org/#/regenerativefi.eth"
+                >
+                  <img :src="Snapshot" class="w-4 h-4" />
+                </a>
+              </div>
             </div>
           </div>
           <div class="w-full border-t-2" />
           <div class="flex flex-col gap-1">
             <div class="flex justify-between items-center text-base">
               <p class="text-sm">My Points</p>
-              <p v-if="isLoading" class="text-sm">- RFP</p>
-              <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+              <div class="flex flex-row gap-2">
+                <p v-if="isLoading" class="text-sm">- RFP</p>
+                <p v-else class="text-sm">{{ NFTData?.points }} RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
             <div
               class="flex justify-between items-center text-base text-disabled"
             >
               <p class="text-sm">Next level</p>
-              <p v-if="NFTData" class="text-sm">
-                {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
-              </p>
-              <p v-else class="text-sm">- RFP</p>
+              <div class="flex flex-row gap-2 items-center">
+                <p v-if="NFTData" class="text-sm">
+                  {{ NFTData.tresholds[NFTData?.tier] || 'Max' }} RFP
+                </p>
+                <p v-else class="text-sm">- RFP</p>
+                <img :src="RFP" class="w-5 h-5" />
+              </div>
             </div>
           </div>
           <BalBtn
@@ -267,6 +340,8 @@ function handleMintNFTClose() {
             :disabled="!isAbleToUpgradeNFT"
             :color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
             class="self-end w-fit"
+            :regenerativeLoading="isUpgradingNFTStatus.loading"
+            loadingLabel="Upgrading NFT"
             size="sm"
             @click="() => UpgradeNFT(NFTData?.id as number)"
             >Upgrade</BalBtn
@@ -275,6 +350,8 @@ function handleMintNFTClose() {
             v-else
             :color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
             :disabled="isMintingNFTStatus.loading"
+            :regenerativeLoading="isMintingNFTStatus.loading"
+            loadingLabel="Minting NFT"
             class="self-end w-fit"
             size="sm"
             @click="() => MintNFT()"

src/components/contextual/pages/dashboard/Modals/MintNFTModal.vue

@@ -27,10 +27,11 @@ function onImageLoad() {
   <BalModal
     :class="isImageLoaded ? 'visible' : 'invisible'"
     :show="isOpenModal"
+    customBgColor="bg-refi-gray"
     :fireworks="true"
     @close="handleCloseModal"
   >
-    <div class="flex flex-col gap-4 justify-center items-center">
+    <div class="flex flex-col gap-4 justify-center items-center text-white">
       <div class="flex flex-col gap-2 justify-center items-center w-full">
         <p>Here is your new NFT</p>
       </div>

src/components/contextual/pages/dashboard/Modals/UpgradeNFTModal.vue

@@ -26,6 +26,7 @@ function onImageLoad() {
   <BalModal
     :class="isImageLoaded ? 'visible' : 'invisible'"
     :show="isOpenModal"
+    customBgColor="bg-refi-gray"
     :fireworks="true"
     @close="handleCloseModal"
   >

src/components/footer/Footer.vue

@@ -84,7 +84,7 @@ const { openNpsModal } = useAppzi();
               {{ $t('docs') }}
             </BalLink>
             <BalLink
-              :href="EXTERNAL_LINKS.RegenerativeFI.Docs"
+              :href="EXTERNAL_LINKS.RegenerativeFI.Support"
               external
               noStyle
               class="group link link--external"

src/components/heros/HomePageHero.vue

@@ -21,7 +21,7 @@ defineProps<Props>();
         <div class="flex flex-col gap-4">
           <div class="flex flex-row gap-4 justify-center items-center">
             <div
-              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 shadow-xl"
+              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 card-shadow"
             >
               <h4
                 v-if="isPoolsVolumesLoading"
@@ -34,7 +34,7 @@ defineProps<Props>();
               </h4>
             </div>
             <div
-              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 shadow-xl"
+              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 card-shadow"
             >
               <h4
                 v-if="isPoolsVolumesLoading"
@@ -47,7 +47,7 @@ defineProps<Props>();
               </h4>
             </div>
           </div>
-          <p>
+          <p class="text-sm font-normal text-complementary">
             There are currently {{ tokensAmount }} tokens listed.
             <a
               class="underline underline-offset-2"
@@ -63,15 +63,25 @@ defineProps<Props>();
       </BalCard>
       <BalCard growContent>
         <div class="flex flex-col justify-between items-start w-full h-full">
-          <h4>How pools function</h4>
-          <p>
+          <h4 class="text-base font-medium">How pools function</h4>
+          <p class="text-sm font-normal text-complementary">
             Liquidity Providers add It is a long established fact that a reader
             will be distracted by the readable content of a page when looking at
             its layout. The point of using Lorem Ipsum is that it has.
           </p>
-          <a class="underline underline-offset-2" href="#">Learn more</a>
+          <a
+            class="text-sm font-normal text-complementary underline underline-offset-2"
+            href="#"
+            >Learn more</a
+          >
         </div>
       </BalCard>
     </div>
   </div>
 </template>
+
+<style scoped>
+.card-shadow {
+  box-shadow: 1px 2px 6px 0 #00000024;
+}
+</style>

src/components/navs/AppNav/AppSidebar/AppSidebar.vue

@@ -47,7 +47,7 @@ watch(showSidebar, () => {
 .sidebar-overlay {
   z-index: 999999999;
 
-  @apply fixed top-0 left-0 h-screen w-full bg-black/80 cursor-pointer flex;
+  @apply fixed top-0 left-0 h-screen w-full bg-primary-refi cursor-pointer flex;
 
   backdrop-filter: blur(5px);
 }