From 35f993d055ccdb2b16a89e2045e1252b4d68830c Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Wed, 26 Jun 2024 09:18:41 +0200
Subject: [PATCH] fix hover icons

---
 .../src/components/inventory/items/index.vue  | 37 ++++++++++---------
 .../client/src/components/tasks/spells.vue    | 17 +++++----
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue
index b64658a276..59721dd8b5 100644
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -229,10 +229,10 @@
       class="eggInfo"
     >
       <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
+        <Sprite
+          class="dragging-icon"
+          :imageName="`Pet_Egg_${currentDraggingEgg.key}`"
+        />
         <div class="popover">
           <div class="popover-content">
             {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
@@ -246,10 +246,10 @@
       class="eggInfo mouse"
     >
       <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
+        <Sprite
+          class="dragging-icon"
+          :imageName="`Pet_Egg_${currentDraggingEgg.key}`"
+        />
         <div class="popover">
           <div
             class="popover-content"
@@ -264,10 +264,10 @@
       class="hatchingPotionInfo"
     >
       <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
+        <Sprite
+          class="dragging-icon"
+          :imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
+        />
         <div class="popover">
           <div
             class="popover-content"
@@ -283,10 +283,10 @@
       class="hatchingPotionInfo mouse"
     >
       <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
+        <Sprite
+          class="dragging-icon"
+          :imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
+        />
         <div class="popover">
           <div
             class="popover-content"
@@ -315,7 +315,8 @@
       pointer-events: none
     }
 
-    .potion-icon {
+    .dragging-icon {
+      width: 68px;
       margin: 0 auto 8px;
       transform: scale(1.5);
     }
@@ -358,6 +359,7 @@ import MouseMoveDirective from '@/directives/mouseposition.directive';
 import FilterGroup from '@/components/ui/filterGroup';
 import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import Sprite from '@/components/ui/sprite';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
 
@@ -391,6 +393,7 @@ export default {
     cardsModal,
     QuestInfo,
     FilterSidebar,
+    Sprite,
   },
   directives: {
     drag: DragDropDirective,
diff --git a/website/client/src/components/tasks/spells.vue b/website/client/src/components/tasks/spells.vue
index 7dc359fdfd..1884575ee0 100755
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -8,10 +8,10 @@
       <div class="spell">
         <div class="spell-border">
           <div class="mana">
-            <div
-              class="img"
-              :class="`shop_${spell.key} shop-sprite item-img`"
-            ></div>
+            <Sprite
+            class="img"
+              :imageName="`shop_${spell.key}`"
+            />
           </div>
         </div>
         <div class="details">
@@ -75,10 +75,9 @@
                   class="spell"
                 >
                   <div class="details">
-                    <div
-                      class="img"
-                      :class="`shop_${skill.key} shop-sprite item-img`"
-                    ></div>
+                    <Sprite
+              :imageName="`shop_${skill.key}`"
+            />
                   </div>
                   <div
                     v-if="user.stats.lvl < skill.lvl"
@@ -401,10 +400,12 @@ import {
   setLocalSetting,
   getLocalSetting,
 } from '@/libs/userlocalManager';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
     Drawer,
+    Sprite,
   },
   directives: {
     mousePosition: MouseMoveDirective,