onboarding guide improvements (#12068)

website/client/src/assets/scss/icon.scss

@@ -53,8 +53,8 @@
 
 .close-icon {
   position: absolute;
-  top: 24px;
+  top: 1rem;
-  right: 24px;
+  right: 1rem;
   cursor: pointer;
 
   & svg path {

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

@@ -7,20 +7,31 @@
   >
     <div class="content text-center">
       <span
+        v-once
         class="close-icon svg-icon inline icon-10"
         @click="close()"
         v-html="icons.close"
       ></span>
-      <h2>{{ $t('congratulations') }}</h2>
+      <h2 v-once>
+        {{ $t('onboardingComplete') }}
+      </h2>
       <img
         class="onboarding-complete-banner d-block"
         src="~@/assets/images/onboarding-complete-banner@2x.png"
       >
       <p
+        v-once
         class="onboarding-complete-text"
         v-html="$t('onboardingCompleteDesc')"
       ></p>
+      <p
+        v-once
+        class="onboarding-complete-text-small"
+      >
+        {{ $t('onboardingCompleteDescSmall') }}
+      </p>
       <button
+        v-once
         class="btn btn-primary"
         @click="closeWithAction()"
       >
@@ -37,7 +48,7 @@
   }
 
   .modal-body {
-    padding-top: 1em;
+    padding-top: 1rem;
     padding-bottom: 0;
   }
 
@@ -58,7 +69,7 @@ h2 {
 
 .content {
   padding: 0 8px;
-  margin-top: 18px;
+  margin-top: 1rem;
 }
 
 .onboarding-complete-banner {
@@ -68,13 +79,21 @@ h2 {
 }
 
 .onboarding-complete-text {
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
 }
 
 .onboarding-complete-text ::v-deep .gold-amount {
   color: $yellow-5;
 }
 
+.onboarding-complete-text-small {
+  margin-bottom: 1.5rem;
+  color: $gray-100;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 1.33;
+}
+
 button {
   margin-bottom: 24px;
 }

website/client/src/components/header/notifications/onboardingComplete.vue

@@ -15,13 +15,17 @@
         class="onboarding-complete-banner d-block"
         src="~@/assets/images/onboarding-complete-banner@2x.png"
       >
-      <h3>{{ $t('congratulations') }}</h3>
+      <h3 v-once>
+        {{ $t('onboardingComplete') }}
+      </h3>
       <p
+        v-once
         class="onboarding-complete-text"
         v-html="$t('onboardingCompleteDesc')"
       ></p>
       <div class="notifications-buttons">
         <div
+          v-once
           class="btn btn-small btn-primary btn-block"
         >
           {{ $t('viewAchievements') }}

website/client/src/components/header/onboardingGuide.vue

@@ -10,20 +10,25 @@
       v-html="icons.down"
     ></div>
     <div
+      v-once
       class="svg-icon onboarding-guide-banner"
       v-html="icons.onboardingGuideBanner"
     ></div>
-    <h3 class="getting-started">
+    <h3
+      v-once
+      class="getting-started"
+    >
       {{ $t('gettingStarted') }}
     </h3>
     <span
+      v-once
       class="getting-started-desc"
       v-html="$t('gettingStartedDesc')"
     ></span>
     <div
       class="onboarding-progress-box d-flex flex-row justify-content-between small-text mb-2"
     >
-      <strong>Your Progress</strong>
+      <strong v-once>{{ $t('yourProgress') }}</strong>
       <span :class="{'has-progress': progress > 0}">{{ progressText }}</span>
     </div>
     <div class="onboarding-progress-bar mb-3">
@@ -48,8 +53,14 @@
           <div :class="`achievement-icon ${getAchievementIcon(achievement)}`"></div>
         </div>
         <div class="achievement-info d-flex flex-column">
-          <strong class="achievement-title">{{ achievement.title }}</strong>
+          <strong
-          <span class="small-text achievement-desc">{{ getAchievementText(key) }}</span>
+            v-once
+            class="achievement-title"
+          >{{ achievement.title }}</strong>
+          <span
+            v-once
+            class="small-text achievement-desc"
+          >{{ getAchievementText(key) }}</span>
         </div>
       </div>
     </b-collapse>

website/client/src/components/userMenu/profile.vue

@@ -349,16 +349,16 @@
               </div>
             </div>
           </div>
-            <div
+          <div
-              v-if="achievementsCategories[key].number > 5"
+            v-if="achievementsCategories[key].number > 5"
-              class="btn btn-flat btn-show-more"
+            class="btn btn-flat btn-show-more"
-              @click="toggleAchievementsCategory(key)"
+            @click="toggleAchievementsCategory(key)"
-            >
+          >
-              {{ achievementsCategories[key].open ?
+            {{ achievementsCategories[key].open ?
-                $t('hideAchievements', {category: $t(key+'Achievs')}) :
+              $t('hideAchievements', {category: $t(key+'Achievs')}) :
-                $t('showAllAchievements', {category: $t(key+'Achievs')})
+              $t('showAllAchievements', {category: $t(key+'Achievs')})
-              }}
+            }}
-            </div>
+          </div>
         </div>
       </div>
       <hr class="col-12">

website/common/locales/en/achievements.json

@@ -4,12 +4,15 @@
   "onwards": "Onwards!",
   "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",
   "reachedLevel": "You Reached Level <%= level %>",
-  "gettingStartedDesc": "Let’s create a task, complete it, then check out your rewards. You’ll earn <strong>5 achievements</strong> and <strong class=\"gold-amount\">100 gold</strong> once you’re done!",
+  "gettingStartedDesc": "Complete these onboarding tasks and you’ll earn <strong>5 Achievements</strong> and <strong class=\"gold-amount\">100 Gold</strong> once you’re done!",
   "onboardingProgress": "<%= percentage %>% progress",
+  "yourProgress": "Your Progress",
   "letsGetStarted": "Let's get started!",
   "viewAchievements": "View Achievements",
   "earnedAchievement": "You earned an achievement!",
-  "onboardingCompleteDesc": "You earned <strong>5 achievements</strong> and <strong class=\"gold-amount\">100</strong> gold for completing the list.",
+  "onboardingComplete": "You completed your onboarding tasks!",
+  "onboardingCompleteDesc": "You earned <strong>5 Achievements</strong> and <strong class=\"gold-amount\">100 Gold</strong> for completing the list.",
+  "onboardingCompleteDescSmall": "If you want even more, check out Achievements and start collecting!",
   "showAllAchievements": "Show All <%= category %>",
   "hideAchievements": "Hide <%= category %>",
   "foundNewItems": "You found new items!",
@@ -46,21 +49,21 @@
   "achievementUndeadUndertaker": "Undead Undertaker",
   "achievementUndeadUndertakerText": "Has tamed all Zombie Mounts.",
   "achievementUndeadUndertakerModalText": "You tamed all the Zombie Mounts!",
-  "achievementCreatedTask": "Create a Task",
+  "achievementCreatedTask": "Create your first task",
   "achievementCreatedTaskText": "Created their first task.",
   "achievementCreatedTaskModalText": "Add a task for something you would like to accomplish this week",
-  "achievementCompletedTask": "Complete a Task",
+  "achievementCompletedTask": "Complete a task",
   "achievementCompletedTaskText": "Completed their first task.",
   "achievementCompletedTaskModalText": "Check off any of your tasks to earn rewards",
   "achievementHatchedPet": "Hatch a Pet",
   "achievementHatchedPetText": "Hatched their first pet.",
-  "achievementHatchedPetModalText": "Head over to your inventory and try combining a hatching potion and an egg",
+  "achievementHatchedPetModalText": "Head over to your inventory and try combining a hatching Potion and an Egg",
   "achievementFedPet": "Feed a Pet",
   "achievementFedPetText": "Fed their first pet.",
-  "achievementFedPetModalText": "There are many different types of food, but pets can be picky",
+  "achievementFedPetModalText": "There are many different types of food, but Pets can be picky",
-  "achievementPurchasedEquipment": "Purchase Equipment",
+  "achievementPurchasedEquipment": "Purchase a piece of Equipment",
   "achievementPurchasedEquipmentText": "Purchased their first piece of equipment.",
-  "achievementPurchasedEquipmentModalText": "Equipment is a way to customize your avatar and improve your stats",
+  "achievementPurchasedEquipmentModalText": "Equipment is a way to customize your avatar and improve your Stats",
   "achievementPrimedForPainting": "Primed for Painting",
   "achievementPrimedForPaintingText": "Has collected all White Pets.",
   "achievementPrimedForPaintingModalText": "You collected all the White Pets!",