fix hover icons

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,

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,