fix: each theme has a proper tooltip

dlcastillop · Feb 25, 2023 · 7d7f040 · 7d7f040
1 parent c293cad
commit 7d7f040
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 4 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -180,13 +180,13 @@
 }
 
 .tooltips .tooltiptext {
-  background-color: black;
-  color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px;
   position: absolute;
   z-index: 1;
+  font-weight: 500;
+  font-size: 14px;
 }
 
 .tooltips .main-tooltip {

diff --git a/src/assets/themes/minimalist-dark.theme.scss b/src/assets/themes/minimalist-dark.theme.scss
@@ -61,4 +61,9 @@
   .paylink-link:hover {
     color: white !important;
   }
+
+  .tooltipcolor {
+    background-color: white;
+    color: #131212;
+  }
 }
diff --git a/src/assets/themes/minimalist.theme.scss b/src/assets/themes/minimalist.theme.scss
@@ -41,4 +41,9 @@
   .paylink-link:hover {
     color: black !important;
   }
+
+  .tooltipcolor {
+    background-color: black;
+    color: white;
+  }
 }
diff --git a/src/assets/themes/swordfest-dark.theme.scss b/src/assets/themes/swordfest-dark.theme.scss
@@ -82,4 +82,9 @@
   .paylink-link:hover {
     color: #dedede !important;
   }
+
+  .tooltipcolor {
+    background-color: white;
+    color: #111111;
+  }
 }
diff --git a/src/assets/themes/swordfest.theme.scss b/src/assets/themes/swordfest.theme.scss
@@ -87,4 +87,9 @@
   .paylink-link:hover {
     color: #212121 !important;
   }
+
+  .tooltipcolor {
+    background-color: #212121;
+    color: white;
+  }
 }
diff --git a/src/components/Payment.jsx b/src/components/Payment.jsx
@@ -31,7 +31,7 @@ const Payment = ({ label, img, value, id, showQRCode }) => {
             title={"Copy " + label + " address"}
           >
             <span
-              className="tooltiptext hideTooltip main-tooltip"
+              className="tooltiptext hideTooltip main-tooltip tooltipcolor"
               id={"span" + id}
             >
               Copied!

diff --git a/src/components/QRCode.jsx b/src/components/QRCode.jsx
@@ -55,7 +55,7 @@ const QRCode = ({ label, img, value }) => {
               onClick={copyEvent}
               title={"Copy " + label + " address"}
             >
-              <span className="tooltiptext hideTooltip qr-tooltip" id="span-qr">
+              <span className="tooltiptext hideTooltip qr-tooltip tooltipcolor" id="span-qr">
                 Copied!
               </span>
               <i className="bx bx-copy mx-2"></i>