correct position of pets in the profile overview - fixes #10104 (#10144)

website/client/assets/scss/animals.scss

@@ -0,0 +1,20 @@
+.Pet {
+  margin: auto !important;
+  display: block;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &:not([class*="FlyingPig"]) {
+    top: -28px !important;
+  }
+}
+
+.Pet[class*="FlyingPig"] {
+  top: 7px !important;
+}
+
+.Pet.Pet-Dragon-Hydra {
+  top: -16px !important;
+}

website/client/assets/scss/index.scss

@@ -33,3 +33,4 @@
 @import './banner';
 @import './progress-bar';
 @import './pin';
+@import './animals';

website/client/components/inventory/stable/index.vue

@@ -276,18 +276,6 @@
     display: inline-block;
   }
 
-  .stable .item .item-content.Pet:not(.FlyingPig) {
-    top: -28px;
-  }
-
-  .stable .item .item-content.FlyingPig {
-    top: 7px;
-  }
-
-  .stable .item .item-content.Pet-Dragon-Hydra {
-    top: -16px !important;
-  }
-
   .hatchablePopover {
     width: 180px
   }

website/client/components/userMenu/profile.vue

@@ -189,7 +189,7 @@ div
             .row.col-12
               .col-12.col-md-4
                 .box(:class='{white: user.items.currentPet}')
-                  .pet(:class="`Pet-${user.items.currentPet}`")
+                  .Pet(:class="`Pet-${user.items.currentPet}`")
               .col-12.col-md-8
                 div
                   | {{ formatAnimal(user.items.currentPet, 'pet') }}
@@ -340,10 +340,6 @@ div
     margin-bottom: 2em;
   }
 
-  .pet {
-    margin-top: -1.4em !important;
-  }
-
   .mount {
     margin-top: -0.2em !important;
   }