From 410b34f319dfb65f95725f5396bf037cd0f1bac8 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Fri, 9 Feb 2024 01:46:02 +0530
Subject: [PATCH 1/3] listing fee tooltip

---
 .../marketplace/src/assets/questionIcon.svg   |  5 ++++
 .../marketplace/src/components/BuyCredits.vue | 25 ++++++++++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 frontend/marketplace/src/assets/questionIcon.svg

diff --git a/frontend/marketplace/src/assets/questionIcon.svg b/frontend/marketplace/src/assets/questionIcon.svg
new file mode 100644
index 00000000..4e4593a6
--- /dev/null
+++ b/frontend/marketplace/src/assets/questionIcon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3.125C8.64026 3.125 7.31104 3.52821 6.18046 4.28365C5.04987 5.03908 4.16868 6.11281 3.64833 7.36905C3.12798 8.62529 2.99183 10.0076 3.2571 11.3412C3.52238 12.6749 4.17716 13.8999 5.13864 14.8614C6.10013 15.8228 7.32514 16.4776 8.65876 16.7429C9.99238 17.0082 11.3747 16.872 12.631 16.3517C13.8872 15.8313 14.9609 14.9501 15.7164 13.8195C16.4718 12.689 16.875 11.3597 16.875 10C16.875 8.17664 16.1507 6.42795 14.8614 5.13864C13.572 3.84933 11.8234 3.125 10 3.125Z" stroke="white" stroke-miterlimit="10"/>
+<path d="M7.8125 7.90176C7.8125 7.90176 7.84531 7.21817 8.57695 6.6295C9.01094 6.27989 9.53125 6.17871 10 6.17168C10.427 6.16621 10.8082 6.23692 11.0363 6.34551C11.427 6.53145 12.1875 6.98535 12.1875 7.95059C12.1875 8.96621 11.5234 9.42754 10.7668 9.93496C10.0102 10.4424 9.80469 10.9932 9.80469 11.5623" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M9.76562 14.375C10.1971 14.375 10.5469 14.0252 10.5469 13.5938C10.5469 13.1623 10.1971 12.8125 9.76562 12.8125C9.33415 12.8125 8.98438 13.1623 8.98438 13.5938C8.98438 14.0252 9.33415 14.375 9.76562 14.375Z" fill="white"/>
+</svg>
diff --git a/frontend/marketplace/src/components/BuyCredits.vue b/frontend/marketplace/src/components/BuyCredits.vue
index 9f7bd631..5875f98e 100644
--- a/frontend/marketplace/src/components/BuyCredits.vue
+++ b/frontend/marketplace/src/components/BuyCredits.vue
@@ -226,9 +226,15 @@ const handleCardPayment = async (retirererName: string) => {
     <div class="flex flex-col mb-6 lg:mb-0">
       <div class="flex">
         <div class="flex flex-col mb-0 mt-7">
-          <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
-            Cost
-          </p>
+          <div class="md:flex flex-row items-center hidden mr-3">
+            <p class="text-title18 text-subLabel text-right mr-2">Cost</p>
+            <p
+              class="tooltip tooltip:bg-red-100"
+              data-tip="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+            >
+              <img class="w-[40px] h-[40px]" src="../assets/questionIcon.svg" />
+            </p>
+          </div>
           <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
             {{ amount >= 0 ? pricePerCredit * amount : "0" }}
           </p>
@@ -243,9 +249,16 @@ const handleCardPayment = async (retirererName: string) => {
           />
         </div>
       </div>
-      <p class="text-title18 text-subLabel md:hidden">
-        Cost {{ pricePerCredit * amount }} ${{ coinFormatted }}
-      </p>
+      <div class="flex items-center text-title18 text-subLabel mt-2 md:hidden">
+        Cost
+        {{ pricePerCredit * amount }} ${{ coinFormatted }}
+        <p
+          class="tooltip tooltip:bg-red-100 ml-3"
+          data-tip="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+        >
+          <img class="w-[20px] h-[20px]" src="../assets/questionIcon.svg" />
+        </p>
+      </div>
     </div>
     <div class="flex flex-col w-full lg:w-auto lg:self-end">
       <BuyButton

From 08cbfc53aaab0e5d9ce4b363e1c3dbdefd6ae743 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Wed, 14 Feb 2024 11:37:15 +0530
Subject: [PATCH 2/3] custom tooltip component

---
 .../marketplace/src/components/BuyCredits.vue | 22 +++++++++----------
 .../marketplace/src/components/ui/Tooltip.vue | 19 ++++++++++++++++
 2 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 frontend/marketplace/src/components/ui/Tooltip.vue

diff --git a/frontend/marketplace/src/components/BuyCredits.vue b/frontend/marketplace/src/components/BuyCredits.vue
index 5875f98e..ded80f78 100644
--- a/frontend/marketplace/src/components/BuyCredits.vue
+++ b/frontend/marketplace/src/components/BuyCredits.vue
@@ -18,6 +18,7 @@ import { useFetcher, authHeader } from "@/utils/fetcher";
 import { useAuth } from "@/stores/auth";
 import { useWallet } from "@/stores/wallet";
 import { useNotifyer } from "@/utils/notifyer";
+import Tooltip from "@/components/ui/Tooltip.vue";
 
 export interface BuyCreditsProps {
   availableCredits: number;
@@ -228,12 +229,10 @@ const handleCardPayment = async (retirererName: string) => {
         <div class="flex flex-col mb-0 mt-7">
           <div class="md:flex flex-row items-center hidden mr-3">
             <p class="text-title18 text-subLabel text-right mr-2">Cost</p>
-            <p
-              class="tooltip tooltip:bg-red-100"
-              data-tip="The seller will be charged a 3% service fee + 0-5% payment processing fee"
-            >
-              <img class="w-[40px] h-[40px]" src="../assets/questionIcon.svg" />
-            </p>
+            <Tooltip
+              label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+              icon-style="w-[40px] h-[40px]"
+            />
           </div>
           <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
             {{ amount >= 0 ? pricePerCredit * amount : "0" }}
@@ -252,12 +251,11 @@ const handleCardPayment = async (retirererName: string) => {
       <div class="flex items-center text-title18 text-subLabel mt-2 md:hidden">
         Cost
         {{ pricePerCredit * amount }} ${{ coinFormatted }}
-        <p
-          class="tooltip tooltip:bg-red-100 ml-3"
-          data-tip="The seller will be charged a 3% service fee + 0-5% payment processing fee"
-        >
-          <img class="w-[20px] h-[20px]" src="../assets/questionIcon.svg" />
-        </p>
+        <Tooltip
+          label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+          icon-style="w-[20px] h-[20px]"
+          class="ml-2"
+        />
       </div>
     </div>
     <div class="flex flex-col w-full lg:w-auto lg:self-end">
diff --git a/frontend/marketplace/src/components/ui/Tooltip.vue b/frontend/marketplace/src/components/ui/Tooltip.vue
new file mode 100644
index 00000000..5f9562f1
--- /dev/null
+++ b/frontend/marketplace/src/components/ui/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  iconStyle: string;
+}
+const props = defineProps<Props>();
+</script>
+<template>
+  <p class="tooltip" :data-tip="props.label" data-tip-class="my-custom-tooltip">
+    <img :class="props.iconStyle" src="../../assets/questionIcon.svg" />
+  </p>
+</template>
+<style>
+.tooltip {
+  --tooltip-color: #000000;
+  --tooltip-text-color: #ffffff;
+  --tooltip-tail: 10px;
+}
+</style>

From 3eaaf8dbe89e887a7a8bbc8d930ef6e5051f931e Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Wed, 14 Feb 2024 21:45:59 +0530
Subject: [PATCH 3/3] review changes

---
 frontend/marketplace/src/components/BuyCredits.vue | 4 ++--
 frontend/marketplace/src/components/ui/Tooltip.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/marketplace/src/components/BuyCredits.vue b/frontend/marketplace/src/components/BuyCredits.vue
index ded80f78..ae6c7e6f 100644
--- a/frontend/marketplace/src/components/BuyCredits.vue
+++ b/frontend/marketplace/src/components/BuyCredits.vue
@@ -231,7 +231,7 @@ const handleCardPayment = async (retirererName: string) => {
             <p class="text-title18 text-subLabel text-right mr-2">Cost</p>
             <Tooltip
               label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
-              icon-style="w-[40px] h-[40px]"
+              icon-class="w-[40px] h-[40px]"
             />
           </div>
           <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
@@ -253,7 +253,7 @@ const handleCardPayment = async (retirererName: string) => {
         {{ pricePerCredit * amount }} ${{ coinFormatted }}
         <Tooltip
           label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
-          icon-style="w-[20px] h-[20px]"
+          icon-class="w-[20px] h-[20px]"
           class="ml-2"
         />
       </div>
diff --git a/frontend/marketplace/src/components/ui/Tooltip.vue b/frontend/marketplace/src/components/ui/Tooltip.vue
index 5f9562f1..45cf896b 100644
--- a/frontend/marketplace/src/components/ui/Tooltip.vue
+++ b/frontend/marketplace/src/components/ui/Tooltip.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 interface Props {
   label: string;
-  iconStyle: string;
+  iconClass: string;
 }
 const props = defineProps<Props>();
 </script>
 <template>
-  <p class="tooltip" :data-tip="props.label" data-tip-class="my-custom-tooltip">
-    <img :class="props.iconStyle" src="../../assets/questionIcon.svg" />
+  <p class="tooltip" :data-tip="props.label">
+    <img :class="props.iconClass" src="../../assets/questionIcon.svg" />
   </p>
 </template>
 <style>