onboarding guide improvements (#12068)

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

@@ -53,8 +53,8 @@
 
 .close-icon {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 1rem;
+  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>
-          <span class="small-text achievement-desc">{{ getAchievementText(key) }}</span>
+          <strong
+            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
-              v-if="achievementsCategories[key].number > 5"
-              class="btn btn-flat btn-show-more"
-              @click="toggleAchievementsCategory(key)"
-            >
-              {{ achievementsCategories[key].open ?
-                $t('hideAchievements', {category: $t(key+'Achievs')}) :
-                $t('showAllAchievements', {category: $t(key+'Achievs')})
-              }}
-            </div>
+          <div
+            v-if="achievementsCategories[key].number > 5"
+            class="btn btn-flat btn-show-more"
+            @click="toggleAchievementsCategory(key)"
+          >
+            {{ achievementsCategories[key].open ?
+              $t('hideAchievements', {category: $t(key+'Achievs')}) :
+              $t('showAllAchievements', {category: $t(key+'Achievs')})
+            }}
+          </div>
         </div>
       </div>
       <hr class="col-12">