fix achievements

website/client/src/components/achievements/achievementFooter.vue

@@ -11,17 +11,25 @@
             class="twitter-share-button share-button"
             :href="twitterLink"
             target="_blank"
-          ><div
+          >
+            <div
               class="social-icon twitter svg-icon"
               v-html="icons.twitter"
-          ></div>{{ $t('tweet') }}</a><a
+            ></div>
+            {{ $t('tweet') }}
+          </a>
+          <a
             class="fb-share-button share-button"
             :href="facebookLink"
             target="_blank"
-          ><div
+          >
+            <div
               class="social-icon facebook svg-icon"
               v-html="icons.facebook"
-          ></div>{{ $t('share') }}</a><!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
+            ></div>
+            {{ $t('share') }}
+          </a>
+          <!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
         </div>
       </div>
     </div>

website/client/src/components/achievements/armoireEmpty.vue

@@ -8,10 +8,13 @@
     <div class="modal-body">
       <div class="row">
         <div class="col-6 offset-3">
-          <div class="shop_armoire"></div><p>{{ $t('armoireLastItem') }}</p><p>{{ $t('armoireNotesEmpty') }}</p>
+          <div class="shop_armoire"></div>
+          <p>{{ $t('armoireLastItem') }}</p>
+          <p>{{ $t('armoireNotesEmpty') }}</p>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"

website/client/src/components/achievements/chooseClass.vue

@@ -10,8 +10,10 @@
     <div class="modal-body select-class">
       <h1 class="header-purple text-center">
         {{ $t('chooseClass') }}
-      </h1><div class="container-fluid">
-        <br><div class="row">
+      </h1>
+      <div class="container-fluid">
+        <br>
+        <div class="row">
           <div
             v-for="heroClass in classes"
             class="col-md-3"
@@ -30,7 +32,9 @@
               />
             </div>
           </div>
-        </div><br><div
+        </div>
+        <br>
+        <div
           v-for="heroClass in classes"
           class="d-flex justify-content-center"
         >
@@ -43,43 +47,50 @@
                 class="svg-icon align-self-center"
                 v-html="icons[heroClass]"
               ></div>
-            </div><div
+            </div>
+            <div
               class="class-name"
               :class="`${heroClass}-color`"
             >
               {{ $t(heroClass) }}
             </div>
           </div>
-        </div><div v-for="heroClass in classes">
+        </div>
+        <div v-for="heroClass in classes">
           <div
             v-if="selectedClass === heroClass"
             class="class-explanation text-center"
           >
             {{ $t(`${heroClass}Text`) }}
           </div>
-        </div><div
+        </div>
+        <div
           v-markdown="$t('chooseClassLearnMarkdown')"
           class="text-center"
-        ></div><div class="modal-actions text-center">
+        ></div>
+        <div class="modal-actions text-center">
           <button
             v-if="!selectedClass"
             class="btn btn-primary d-inline-block"
             :disabled="true"
           >
             {{ $t('select') }}
-          </button><button
+          </button>
+          <button
             v-else
             class="btn btn-primary d-inline-block"
             @click="clickSelectClass(selectedClass); close();"
           >
             {{ $t('selectClass', {heroClass: $t(selectedClass)}) }}
-          </button><div class="opt-out-wrapper">
+          </button>
+          <div class="opt-out-wrapper">
             <span
               id="classOptOutBtn"
               class="danger"
               @click="clickDisableClasses(); close();"
             >{{ $t('optOutOfClasses') }}</span>
-          </div><span class="opt-out-description">{{ $t('optOutOfClassesText') }}</span>
+          </div>
+          <span class="opt-out-description">{{ $t('optOutOfClassesText') }}</span>
         </div>
       </div>
     </div>

website/client/src/components/achievements/contributor.vue

@@ -8,19 +8,26 @@
     <div class="modal-body">
       <div class="col-12">
         <achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        {{ $t('contribModal', {name: user.profile.name, level: user.contributor.level}) }}<br><a
+      </div>
+      <div class="col-6 offset-3 text-center">
+        {{ $t('contribModal', {name: user.profile.name, level: user.contributor.level}) }}
+        <br>
+        <a
           :href="$t('conRewardsURL')"
           target="_blank"
-        >{{ $t('contribLink') }}</a><br><button
+        >{{ $t('contribLink') }}</a>
+        <br>
+        <button
           class="btn btn-primary"
           style="margin-top:1em"
           @click="close()"
         >
           {{ $t('huzzah') }}
-        </button><br>
+        </button>
+        <br>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/death.vue

@@ -15,7 +15,8 @@
             :tooltip="$t('health')"
           >
             <span class="glyphicon glyphicon-heart"></span>
-          </div><div
+          </div>
+          <div
             class="meter health"
             :tooltip="Math.round(user.stats.hp * 100) / 100"
           >
@@ -23,28 +24,36 @@
               class="bar"
               :style="barStyle"
             ></div>
-          </div><!-- span.meter-text.value| {{Math.ceil(user.stats.hp)}} / {{maxHealth}}--><avatar
+          </div>
+          <!-- span.meter-text.value| {{Math.ceil(user.stats.hp)}} / {{maxHealth}}-->
+          <avatar
             :member="user"
             :sleep="true"
             :avatar-only="true"
             :with-background="true"
-          /><!-- @TOOD: Sleep +generatedAvatar({sleep:true})--><span class="knockout"></span>
+          />
+          <!-- @TOOD: Sleep +generatedAvatar({sleep:true})-->
+          <span class="knockout"></span>
         </div>
-      </div><div class="col-6 offset-3">
+      </div>
+      <div class="col-6 offset-3">
         <h4 class="dont-despair">
           {{ $t('dontDespair') }}
-        </h4><p class="death-penalty">
+        </h4>
+        <p class="death-penalty">
           {{ $t('deathPenaltyDetails') }}
         </p>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-danger"
           @click="revive()"
         >
           {{ $t('refillHealthTryAgain') }}
-        </button><h4
+        </button>
+        <h4
           class="text-center"
           v-html="$t('dyingOftenTips')"
         ></h4>

website/client/src/components/achievements/dropsEnabled.vue

@@ -7,9 +7,15 @@
   >
     <div class="modal-body">
       <div class="col-6 offset-3 text-center">
-        <p></p><div class="item-drop-icon Pet_Egg_Wolf"></div><span v-html="firstDropText"></span></p><p></p><div class="item-drop-icon Pet_Currency_Gem"></div><span v-html="$t('useGems')"></span></p>
+        <p></p>
+        <div class="item-drop-icon Pet_Egg_Wolf"></div>
+        <span v-html="firstDropText"></span>
+        <p></p>
+        <div class="item-drop-icon Pet_Currency_Gem"></div>
+        <span v-html="$t('useGems')"></span>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"

website/client/src/components/achievements/genericAchievement.vue

@@ -8,15 +8,18 @@
     <div class="modal-body">
       <div class="col-12">
         <achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p v-html="data.modalText"></p><button
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p v-html="data.modalText"></p>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/invitedFriend.vue

@@ -7,16 +7,21 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <!-- @TODO: +achievementAvatar('friends',0)--><achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('invitedFriendText') }}</p><br><button
+        <!-- @TODO: +achievementAvatar('friends',0)-->
+        <achievement-avatar class="avatar" />
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('invitedFriendText') }}</p>
+        <br>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/joinedChallenge.vue

@@ -7,16 +7,21 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <!-- @TODO: +achievementAvatar('challenge',0)--><achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('joinedChallengeText') }}</p><br><button
+        <!-- @TODO: +achievementAvatar('challenge',0)-->
+        <achievement-avatar class="avatar" />
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('joinedChallengeText') }}</p>
+        <br>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/joinedGuild.vue

@@ -7,16 +7,21 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <!-- @TODO: +achievementAvatar('guild',0)--><achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('joinedGuildText') }}</p><br><button
+        <!-- @TODO: +achievementAvatar('guild',0)-->
+        <achievement-avatar class="avatar" />
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('joinedGuildText') }}</p>
+        <br>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/justAddWater.vue

@@ -8,15 +8,18 @@
     <div class="modal-body">
       <div class="col-12">
         <achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('achievementJustAddWaterModalText') }}</p><button
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementJustAddWaterModalText') }}</p>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/levelUp.vue

@@ -7,39 +7,53 @@
     :hide-header="true"
   >
     <div class="modal-body text-center">
-      <h2>{{ $t('reachedLevel', {level: user.stats.lvl}) }}</h2><avatar
+      <h2>{{ $t('reachedLevel', {level: user.stats.lvl}) }}</h2>
+      <avatar
         class="avatar"
         :member="user"
-      /><p class="text">
+      />
+      <p class="text">
         {{ $t('levelup') }}
-      </p><button
+      </p>
+      <button
         class="btn btn-primary"
         @click="close()"
       >
         {{ $t('onwards') }}
-      </button><br><!-- @TODO: Keep this? .checkboxinput(type='checkbox', v-model=
+      </button>
+      <br>
+      <!-- @TODO: Keep this? .checkboxinput(type='checkbox', v-model=
 'user.preferences.suppressModals.levelUp', @change='changeLevelupSuppress()')
 label(style='display:inline-block') {{ $t('dontShowAgain') }}
--->
-    </div><div class="container-fluid share-buttons">
+      -->
+    </div>
+    <div class="container-fluid share-buttons">
       <div class="row">
         <div class="col-12 text-center">
           <a
             class="twitter-share-button share-button"
             :href="twitterLink"
             target="_blank"
-          ><div
+          >
+            <div
               class="social-icon twitter svg-icon"
               v-html="icons.twitter"
-          ></div>{{ $t('tweet') }}</a><a
+            ></div>
+            {{ $t('tweet') }}
+          </a>
+          <a
             class="fb-share-button share-button"
             :href="facebookLink"
             target="_blank"
-          ><div
+          >
+            <div
               class="social-icon facebook svg-icon"
               v-html="icons.facebook"
-          ></div>{{ $t('share') }}</a>
-        </div><!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
+            ></div>
+            {{ $t('share') }}
+          </a>
+        </div>
+        <!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
       </div>
     </div>
   </b-modal>

website/client/src/components/achievements/login-incentives.vue

@@ -13,7 +13,8 @@
         >
           {{ $t('unlockedReward', {reward: data.rewardText}) }}
         </h3>
-      </div><div class="row reward-row">
+      </div>
+      <div class="row reward-row">
         <div class="col-12">
           <avatar
             class="avatar"
@@ -21,7 +22,8 @@
             :avatar-only="true"
             :with-background="true"
           />
-        </div><div
+        </div>
+        <div
           v-if="nextReward"
           class="text-center col-12"
         >
@@ -32,48 +34,56 @@
             <div
               v-if="nextReward.rewardKey.length === 1"
               :class="nextReward.rewardKey[0]"
-            ></div><div
+            ></div>
+            <div
               v-for="reward in nextReward.rewardKey"
               v-if="nextReward.rewardKey.length > 1"
               class="reward"
               :class="reward"
             ></div>
-          </div><div
+          </div>
+          <div
             v-if="data.rewardText"
             class="reward-wrap"
           >
             <div
               v-if="data.rewardKey.length === 1"
               :class="data.rewardKey[0]"
-            ></div><div
+            ></div>
+            <div
               v-for="reward in data.rewardKey"
               v-if="data.rewardKey.length > 1"
               class="reward"
               :class="reward"
             ></div>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="data && data.nextRewardAt"
           class="col-12 text-center"
         >
           <h4>{{ $t('countLeft', {count: data.nextRewardAt - user.loginIncentives}) }}</h4>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-if="data.rewardText"
           class="col-12 text-center"
         >
           <p>{{ $t('earnedRewardForDevotion', {reward: data.rewardText}) }}</p>
-        </div><div class="col-12 text-center">
+        </div>
+        <div class="col-12 text-center">
           <p>{{ $t('incentivesDescription') }}</p>
-        </div><div
+        </div>
+        <div
           v-if="data && data.nextRewardAt"
           class="col-12 text-center"
         >
           <h3>{{ $t('nextRewardUnlocksIn', {numberOfCheckinsLeft: data.nextRewardAt - user.loginIncentives}) }}</h3>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"

website/client/src/components/achievements/lostMasterclasser.vue

@@ -8,15 +8,18 @@
     <div class="modal-body">
       <div class="col-12">
         <achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('achievementLostMasterclasserModalText') }}</p><button
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementLostMasterclasserModalText') }}</p>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/lowHealth.vue

@@ -12,37 +12,49 @@
           :tooltip="$t('health')"
         >
           <span class="glyphicon glyphicon-heart"></span>
-        </div><div
+        </div>
+        <div
           class="meter health"
           :tooltip="Math.round(user.stats.hp * 100) / 100"
         >
           <div
             class="bar"
             :style="barStyle"
-          ></div><span class="meter-text value">{{ healthLeft }}</span>
+          ></div>
+          <span class="meter-text value">{{ healthLeft }}</span>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <avatar
           :member="user"
           :avatar-only="true"
           :with-background="true"
         />
-      </div><div class="col-12">
-        <p>{{ $t('losingHealthWarning2') }}</p><h4>{{ $t('toRegainHealth') }}</h4><ul>
+      </div>
+      <div class="col-12">
+        <p>{{ $t('losingHealthWarning2') }}</p>
+        <h4>{{ $t('toRegainHealth') }}</h4>
+        <ul>
           <li class="spaced">
             {{ $t('lowHealthTips1') }}
-          </li><li class="spaced">
+          </li>
+          <li class="spaced">
             {{ $t('lowHealthTips2') }}
           </li>
-        </ul><h4>{{ $t('losingHealthQuickly') }}</h4><ul>
+        </ul>
+        <h4>{{ $t('losingHealthQuickly') }}</h4>
+        <ul>
           <li class="spaced">
             {{ $t('lowHealthTips3') }}
-          </li><li class="spaced">
+          </li>
+          <li class="spaced">
             {{ $t('lowHealthTips4') }}
           </li>
-        </ul><h4>{{ $t('goodLuck') }}</h4>
+        </ul>
+        <h4>{{ $t('goodLuck') }}</h4>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"

website/client/src/components/achievements/mindOverMatter.vue

@@ -8,15 +8,18 @@
     <div class="modal-body">
       <div class="col-12">
         <achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <p>{{ $t('achievementMindOverMatterModalText') }}</p><button
+      </div>
+      <div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementMindOverMatterModalText') }}</p>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/newStuff.vue

@@ -12,17 +12,20 @@
         class="static-view"
         v-html="html"
       ></div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <a
         class="btn btn-info"
         href="http://habitica.fandom.com/wiki/Whats_New"
         target="_blank"
-      >{{ this.$t('newsArchive') }}</a><button
+      >{{ this.$t('newsArchive') }}</a>
+      <button
         class="btn btn-secondary"
         @click="tellMeLater()"
       >
         {{ this.$t('tellMeLater') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-warning"
         @click="dismissAlert();"
       >

website/client/src/components/achievements/questCompleted.vue

@@ -13,15 +13,19 @@
       <div
         class="quest"
         :class="`quest_${user.party.quest.completed}`"
-      ></div><p
+      ></div>
+      <p
         v-if="questData.completion && typeof questData.completion === 'function'"
         v-html="questData.completion()"
-      ></p><div class="quest-rewards text-center">
+      ></p>
+      <div class="quest-rewards text-center">
         <h3 v-once>
           {{ $t('paymentYouReceived') }}
-        </h3><questDialogDrops :item="questData" />
+        </h3>
+        <questDialogDrops :item="questData" />
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-primary"
         @click="setQuestCompleted()"

website/client/src/components/achievements/rebirthEnabled.vue

@@ -7,9 +7,13 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <div class="rebirth_orb"></div><p><span>{{ $t('rebirthUnlock') }}</span></p>
+        <div class="rebirth_orb"></div>
+        <p>
+          <span>{{ $t('rebirthUnlock') }}</span>
+        </p>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"

website/client/src/components/achievements/streak.vue

@@ -7,26 +7,38 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <!-- @TODO: +achievementAvatar('thermometer',2.5)--><achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
+        <!-- @TODO: +achievementAvatar('thermometer',2.5)-->
+        <achievement-avatar class="avatar" />
+      </div>
+      <div class="col-6 offset-3 text-center">
         <h3 v-if="user.achievements.streak === 1">
           {{ $t('firstStreakAchievement') }}
-        </h3><h3 v-if="user.achievements.streak > 1">
+        </h3>
+        <h3
+          v-if="user.achievements.streak > 1"
+        >
           {{ $t('streakAchievementCount', {streaks: user.achievements.streak}) }}
-        </h3><p>{{ $t('twentyOneDays') }}</p><p>{{ $t('dontBreakStreak') }}</p><br><button
+        </h3>
+        <p>{{ $t('twentyOneDays') }}</p>
+        <p>{{ $t('dontBreakStreak') }}</p>
+        <br>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('dontStop') }}
-        </button><div class="checkbox">
+        </button>
+        <div class="checkbox">
           <input
             v-model="user.preferences.suppressModals.streak"
             type="checkbox"
             @change="suppressModals"
-          ><label>{{ $t('dontShowAgain') }}</label>
+          >
+          <label>{{ $t('dontShowAgain') }}</label>
         </div>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/testing.vue

@@ -6,8 +6,12 @@
     :hide-footer="true"
   >
     <div class="modal-body text-center">
-      <br><div class="scene_guilds"></div><br><h4>{{ $t('guildReminderText1') }}</h4>
-    </div><div class="modal-footer">
+      <br>
+      <div class="scene_guilds"></div>
+      <br>
+      <h4>{{ $t('guildReminderText1') }}</h4>
+    </div>
+    <div class="modal-footer">
       <div class="container-fluid">
         <div class="row">
           <div class="col-6 text-center">
@@ -17,7 +21,8 @@
             >
               {{ $t('guildReminderDismiss') }}
             </button>
-          </div><div
+          </div>
+          <div
             class="col-6 text-center"
             @click="close()"
           >

website/client/src/components/achievements/testingletiant.vue

@@ -5,9 +5,14 @@
     size="lg"
     :hide-footer="true"
   >
-    <div class="modal-content"></div><div class="modal-body text-center">
-      <br><div class="scene_guilds"></div><br><h4>{{ $t('guildReminderText2') }}</h4>
-    </div><div class="modal-footer">
+    <div class="modal-content"></div>
+    <div class="modal-body text-center">
+      <br>
+      <div class="scene_guilds"></div>
+      <br>
+      <h4>{{ $t('guildReminderText2') }}</h4>
+    </div>
+    <div class="modal-footer">
       <div class="container-fluid">
         <div class="row">
           <div class="col-6 text-center">
@@ -17,7 +22,8 @@
             >
               {{ $t('guildReminderDismiss') }}
             </button>
-          </div><div class="col-6 text-center">
+          </div>
+          <div class="col-6 text-center">
             <div
               class="btn btn-primary"
               @click="takeMethere()"

website/client/src/components/achievements/ultimateGear.vue

@@ -7,42 +7,63 @@
   >
     <div class="modal-body">
       <div class="col-12">
-        <!-- @TODO: +achievementAvatar('armor',2.5)--><achievement-avatar class="avatar" />
-      </div><div class="col-12 text-center">
-        <p>{{ $t('gearAchievement') }}</p><br><table class="multi-achievement">
+        <!-- @TODO: +achievementAvatar('armor',2.5)-->
+        <achievement-avatar class="avatar" />
+      </div>
+      <div class="col-12 text-center">
+        <p>{{ $t('gearAchievement') }}</p>
+        <br>
+        <table class="multi-achievement">
           <tr>
             <td
               v-if="user.achievements.ultimateGearSets.healer"
               class="multi-achievement"
             >
-              <div class="achievement-ultimate-healer2x multi-achievement"></div>{{ $t('healer') }}
-            </td><td
+              <div class="achievement-ultimate-healer2x multi-achievement"></div>
+              {{ $t('healer') }}
+            </td>
+            <td
               v-if="user.achievements.ultimateGearSets.wizard"
               class="multi-achievement"
             >
-              <div class="achievement-ultimate-mage2x multi-achievement"></div>{{ $t('mage') }}
-            </td><td
+              <div class="achievement-ultimate-mage2x multi-achievement"></div>
+              {{ $t('mage') }}
+            </td>
+            <td
               v-if="user.achievements.ultimateGearSets.rogue"
               class="multi-achievement"
             >
-              <div class="achievement-ultimate-rogue2x multi-achievement"></div>{{ $t('rogue') }}
-            </td><td
+              <div class="achievement-ultimate-rogue2x multi-achievement"></div>
+              {{ $t('rogue') }}
+            </td>
+            <td
               v-if="user.achievements.ultimateGearSets.warrior"
               class="multi-achievement"
             >
-              <div class="achievement-ultimate-warrior2x multi-achievement"></div>{{ $t('warrior') }}
+              <div class="achievement-ultimate-warrior2x multi-achievement"></div>
+              {{ $t('warrior') }}
             </td>
           </tr>
-        </table><br><div v-if="!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)">
-          <p v-html="$t('moreGearAchievements')"></p><br>
-        </div><div class="shop_armoire"></div><p v-html="$t('armoireUnlocked')"></p><br><button
+        </table>
+        <br>
+        <div
+          v-if="!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)"
+        >
+          <p v-html="$t('moreGearAchievements')"></p>
+          <br>
+        </div>
+        <div class="shop_armoire"></div>
+        <p v-html="$t('armoireUnlocked')"></p>
+        <br>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('huzzah') }}
         </button>
       </div>
-    </div><achievement-footer />
+    </div>
+    <achievement-footer />
   </b-modal>
 </template>
 

website/client/src/components/achievements/welcome.vue

@@ -8,34 +8,54 @@
     <div class="modal-body container-fluid">
       <div class="row">
         <div class="col-4 col-centered">
-          <span style="display:flex"><h1>&#9312;</h1><h3 style="margin:auto auto auto .5em">{{ $t('welcome1') }}</h3></span><div
+          <span style="display:flex">
+            <h1>&#9312;</h1>
+            <h3 style="margin:auto auto auto .5em">{{ $t('welcome1') }}</h3>
+          </span>
+          <div
             class="welcome_basic_avatars"
             style="margin: 1.5em auto 1.5em"
-          ></div><h4>{{ $t('welcome1notes') }}</h4>
-        </div><div class="col-4 col-centered">
-          <span style="display:flex"><h1>&#9313;</h1><h3 style="margin:.3em auto auto .5em">{{ $t('welcome2') }}</h3></span><div
+          ></div>
+          <h4>{{ $t('welcome1notes') }}</h4>
+        </div>
+        <div class="col-4 col-centered">
+          <span style="display:flex">
+            <h1>&#9313;</h1>
+            <h3 style="margin:.3em auto auto .5em">{{ $t('welcome2') }}</h3>
+          </span>
+          <div
             class="welcome_sample_tasks"
             style="margin: 2.5em auto 1.5em"
-          ></div><h4>{{ $t('welcome2notes') }}</h4>
-        </div><div class="col-4 col-centered">
-          <span style="display:flex"><h1>&#9314;</h1><h3 style="margin:auto auto auto .5em">{{ $t('welcome3') }}</h3></span><div
+          ></div>
+          <h4>{{ $t('welcome2notes') }}</h4>
+        </div>
+        <div class="col-4 col-centered">
+          <span style="display:flex">
+            <h1>&#9314;</h1>
+            <h3 style="margin:auto auto auto .5em">{{ $t('welcome3') }}</h3>
+          </span>
+          <div
             class="welcome_promo_party"
             style="margin: 1em auto 1em"
-          ></div><h4>{{ $t('welcome3notes') }}</h4>
+          ></div>
+          <h4>{{ $t('welcome3notes') }}</h4>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       class="modal-footer text-center"
       style="margin-top:0"
     >
-      <div class="col-3"></div><div class="col-6">
+      <div class="col-3"></div>
+      <div class="col-6">
         <button
           class="btn btn-primary btn-lg flex-column"
           @click="ready()"
         >
           {{ $t('imReady') }}
         </button>
-      </div><div class="col-3"></div>
+      </div>
+      <div class="col-3"></div>
     </div>
   </b-modal>
 </template>

website/client/src/components/achievements/wonChallenge.vue

@@ -6,31 +6,40 @@
     :hide-footer="true"
   >
     <div class="modal-body text-center">
-      <h4 v-markdown="user.achievements.challenges[user.achievements.challenges.length - 1]"></h4><div class="row">
+      <h4 v-markdown="user.achievements.challenges[user.achievements.challenges.length - 1]"></h4>
+      <div class="row">
         <div class="col-4">
           <div class="achievement-karaoke-2x"></div>
-        </div><div class="col-4">
-          <!-- @TODO: +generatedAvatar({sleep: false})--><avatar
+        </div>
+        <div class="col-4">
+          <!-- @TODO: +generatedAvatar({sleep: false})-->
+          <avatar
             class="avatar"
             :member="user"
             :avatar-only="true"
           />
-        </div><div class="col-4">
+        </div>
+        <div class="col-4">
           <div class="achievement-karaoke-2x"></div>
         </div>
-      </div><p>{{ $t('congratulations') }}</p><br><button
+      </div>
+      <p>{{ $t('congratulations') }}</p>
+      <br>
+      <button
         class="btn btn-primary"
         @click="close()"
       >
         {{ $t('hurray') }}
       </button>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-3">
         <a
           class="twitter-share-button"
           href="https://twitter.com/intent/tweet?text=#{tweet}&via=habitica&url=#{env.BASE_URL}/social/won-challenge&count=none"
         >{{ $t('tweet') }}</a>
-      </div><div
+      </div>
+      <div
         class="col-4"
         style="margin-left:.8em"
       >
@@ -39,7 +48,8 @@
           data-href="#{env.BASE_URL}/social/won-challenge"
           data-layout="button"
         ></div>
-      </div><div
+      </div>
+      <div
         class="col-4"
         style="margin-left:.8em"
       >