Onboarding guide and initial achievements refactoring (#11536)

* add achievements to user

* add placeholder strings

* add to achievements to common script

* add onboarding achievements category

* add notifications

* more notifications

* award achievements

* wip notification panel

* add achievements icons and copy

* do not count onboarding tasks for the created task achievement

* add notes

* sprites, fixes and completion status and reward

* add onboarding panel

* add toggle

* fix toggle size

* fix tests

* fix typo

* add notification

* start adding modal

* fix remove button positionin, timeout, progress bar

* modal + fixes

* disable broken social links from level up modal

* change toggle icon color on hover

* add border bottom to onboarding guide panel

* add collapse animation

* expanded onboarding on first open

* onboarding: flip toggle colors

* onboarding: show progress bar all the time

* onboarding: fix panel closing on click

* onboarding modal: add close icon and fix padding

* wip: add migration for existing users

* fix titles in guide

* fix achievements copy

* do not award completed task achievement when direction is down

* start implementing new achievements

* start migrating client

* remove social links from achievements modals

* prevent skipping tutorial + fix achievement notification

* sync fixes

* start redesign achievement modal

* misc fixes to achievements, polish generic achievement modal and hatched pet modal

* add special badge for onboarding

* fix badge condition

* modals fixes

* hatched pet modal: add close icon

* fix badge typo

* fix justin button

* new scrolling behavior for dropdowns

* fix strings capitalization

* add common tests

* add api unit tests

* add date check

* achievements modal polishing

* typos

* add toggle for achievements categories

* typo

* fix test

* fix edit avatar modal cannot be closed

* finish migration and correct launch date

* fix migration

* migration fixes

* fix tests

website/client/src/components/inventory/stable/hatchedPetDialog.vue

@@ -3,6 +3,11 @@
     id="hatchedPet-modal"
     :hide-header="true"
   >
+    <span
+      class="close-icon svg-icon inline icon-10"
+      @click="close()"
+      v-html="icons.close"
+    ></span>
     <div
       v-if="pet != null"
       class="content"
@@ -14,7 +19,7 @@
         {{ $t('hatchedPetGeneric') }}
       </div>
       <div class="inner-content">
-        <div class="pet-background">
+        <div class="pet-background d-flex align-items-center">
           <div :class="pet.class"></div>
         </div>
         <h4 class="title">
@@ -51,6 +56,10 @@
       width: 330px;
     }
 
+    .modal-footer {
+      padding-top: 0px;
+    }
+
     .content {
       text-align: center;
     }
@@ -75,12 +84,25 @@
 
     .dialog-header {
       color: $purple-200;
+      margin-top: 16px;
+    }
+
+    .text {
+      margin-bottom: 24px;
+      min-height: 0;
+
+      &.markdown {
+        p {
+          margin-bottom: 0px;
+        }
+      }
     }
   }
 </style>
 
 <script>
 import markdownDirective from '@/directives/markdown';
+import svgClose from '@/assets/svg/close.svg';
 
 export default {
   directives: {
@@ -94,6 +116,9 @@ export default {
   data () {
     return {
       pet: null,
+      icons: Object.freeze({
+        close: svgClose,
+      }),
     };
   },
   mounted () {