Sprites: re-add previous offsets to sprites (#13933)

* Sprites: re-add previous offsets to sprites

* fix lint

gulp/gulp-sprites.js

@@ -20,17 +20,25 @@ function cssVarMap (sprite) {
   if (requiresSpecialTreatment) {
     sprite.custom = {
       px: {
-        offsetX: `-${sprite.x + 25}px`,
+        offsetX: '-25px',
-        offsetY: `-${sprite.y + 15}px`,
+        offsetY: '-15px',
         width: '60px',
         height: '60px',
       },
     };
   }
-  if (sprite.name.indexOf('shirt') !== -1) sprite.custom.px.offsetY = `-${sprite.y + 35}px`; // even more for shirts
+
+  // even more for shirts
+  if (sprite.name.indexOf('shirt') !== -1) {
+    sprite.custom.px.offsetX = '-29px';
+    sprite.custom.px.offsetY = '-42px';
+  }
+
   if (sprite.name.indexOf('hair_base') !== -1) {
     const styleArray = sprite.name.split('_').slice(2, 3);
-    if (Number(styleArray[0]) > 14) sprite.custom.px.offsetY = `-${sprite.y}px`; // don't crop updos
+    if (Number(styleArray[0]) > 14) {
+      sprite.custom.px.offsetY = '0'; // don't crop updos
+    }
   }
 }
 

website/client/src/components/avatarModal/customize-options.vue

@@ -125,6 +125,16 @@ export default {
       box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
       background-color: $white;
 
+      .sprite.customize-option.shirt {
+        margin-left: -3px !important;
+        // otherwise its overriden by the .outer-option-background:not(.none) { rules
+      }
+
+      .sprite.customize-option.skin {
+        margin-left: -8px !important;
+        // otherwise its overriden by the .outer-option-background:not(.none) { rules
+      }
+
       .option {
         border: none;
         border-radius: 2px;
@@ -203,17 +213,9 @@ export default {
   .outer-option-background:not(.none) {
 
     .sprite.customize-option {
-      // margin: 0 auto;
-      //margin-left: -3px;
-      //margin-top: -7px;
       margin-top: 0;
       margin-left: 0;
 
-      &.size, &.shirt {
-        margin-top: -8px;
-        margin-left: -4px;
-      }
-
       &.color-bangs {
         margin-top: 3px;
       }

website/raw_sprites/css/css.template.handlebars

@@ -6,6 +6,7 @@
 }
 {{#if custom}}
 .customize-option.{{name}} {
+  background-position: {{custom.px.offsetX}} {{custom.px.offsetY}};
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/{{{name}}}.png');
   width: {{custom.px.width}};
   height: {{custom.px.height}};