fix(modal): various

website/client/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -18,7 +18,7 @@
 }
 .promo_armoire_backgrounds_201810 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -1147px;
+  background-position: -839px -936px;
   width: 423px;
   height: 147px;
 }
@@ -42,13 +42,13 @@
 }
 .promo_forest_friends_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -415px -936px;
+  background-position: -513px -727px;
   width: 423px;
   height: 147px;
 }
 .promo_ghost_potions {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -839px -936px;
+  background-position: -415px -936px;
   width: 423px;
   height: 147px;
 }
@@ -60,7 +60,7 @@
 }
 .promo_jackolanterns {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -513px -727px;
+  background-position: 0px -1147px;
   width: 423px;
   height: 147px;
 }
@@ -118,3 +118,9 @@
   width: 366px;
   height: 285px;
 }
+.scene_veteran_pets {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -1325px -1006px;
+  width: 242px;
+  height: 62px;
+}

website/client/assets/scss/form.scss

@@ -65,7 +65,6 @@ input, textarea, input.form-control, textarea.form-control {
     padding-right: 40px;
     background-image: url(~client/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
-    margin-bottom: 0.1rem;
   }
 }
 

website/client/components/settings/usernameForm.vue

@@ -25,14 +25,18 @@
               :class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid, "text-darker": temporaryUsername.length > 0}')
     .mb-3(v-if="usernameIssues.length > 0")
       .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
-    .small.text-center(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
+    .small.text-center.mb-3(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
     .row.justify-content-center
-      button.btn.btn-primary(type='submit', @click='submitNames()' :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
+      button.btn.btn-primary.btn-flat(type='submit', @click='submitNames()', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  .btn:disabled {
+    cursor: default;
+  }
+
   button {
     margin: 0.25rem auto 1rem;
   }
@@ -41,6 +45,10 @@
     padding-right: 0rem;
   }
 
+  .form-control {
+    height: 2.25rem;
+  }
+
   .form-group {
     background-color: $gray-700;
     border-radius: 2px;
@@ -62,10 +70,11 @@
   }
 
   .input-group-text {
-    border: 0px;
     background-color: $white;
+    border: 0px;
+    border-radius: 0px;
     color: $gray-300;
-    padding: 0rem 0rem 0rem 0.75rem;
+    padding: 0rem 0.1rem 0rem 0.75rem;
   }
 
   label {

website/client/components/settings/verifyUsername.vue

@@ -25,7 +25,7 @@
       padding-right: 2rem;
     }
     .modal-dialog   {
-      transform: translate(0, 50vh) translate(-5%, -60%);
+      transform: translate(0, 50vh) translate(-5%, -48%);
     }
   }
 </style>
@@ -63,6 +63,7 @@
     border-radius: 0rem 0rem 0.3rem 0.3rem;
     margin-left: -3rem;
     margin-right: -3rem;
+    margin-top: -0.1rem;
     padding: 1rem 4rem 1rem 4rem;
   }
 </style>