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/achievements/genericAchievement.vue

@@ -3,14 +3,32 @@
     id="generic-achievement"
     :title="data.message"
     size="md"
-    :hide-footer="true"
+    :hide-header="true"
   >
-    <div class="modal-body">
-      <div class="col-12">
-        <achievement-avatar class="avatar" />
+    <span
+      class="close-icon svg-icon inline icon-10"
+      @click="close()"
+      v-html="icons.close"
+    ></span>
+    <div class="content">
+      <div
+        v-once
+        class="dialog-header title"
+      >
+        {{ $t('earnedAchievement') }}
       </div>
-      <div class="col-6 offset-3 text-center">
-        <p v-html="data.modalText"></p>
+      <div class="inner-content">
+        <div class="achievement-background d-flex align-items-center">
+          <div
+            class="icon"
+            :class="achievementClass"
+          ></div>
+        </div>
+        <h4
+          class="title"
+          v-html="$t(achievement.titleKey)"
+        >
+        </h4>
         <button
           class="btn btn-primary"
           @click="close()"
@@ -19,33 +37,86 @@
         </button>
       </div>
     </div>
-    <achievement-footer />
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    ></div>
   </b-modal>
 </template>
 
-<style scoped>
-  .avatar {
-    width: 140px;
+<style lang="scss">
+  @import '~@/assets/scss/modal.scss';
+
+  #generic-achievement {
+    @include centeredModal();
+
+    .modal-dialog {
+      width: 330px;
+    }
+
+    .modal-footer {
+      padding-top: 0px;
+    }
+  }
+</style>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .content {
+    text-align: center;
+  }
+
+  .inner-content {
+    margin: 24px auto auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .achievement-background {
+    width: 112px;
+    height: 112px;
+    border-radius: 4px;
+    background-color: $gray-700;
+  }
+
+  .dialog-header {
+    margin-top: 16px !important;
+    color: $purple-200 !important;
+  }
+
+  .title {
+    margin-bottom: 24px !important;
+  }
+
+  .icon {
     margin: 0 auto;
-    margin-bottom: 1.5em;
-    margin-top: 1.5em;
   }
 </style>
 
 <script>
-import achievementFooter from './achievementFooter';
-import achievementAvatar from './achievementAvatar';
-
 import { mapState } from '@/libs/store';
+import achievements from '@/../../common/script/content/achievements';
+import svgClose from '@/assets/svg/close.svg';
 
 export default {
-  components: {
-    achievementFooter,
-    achievementAvatar,
-  },
   props: ['data'],
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+      }),
+    };
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
+    achievement () {
+      return achievements[this.data.achievement];
+    },
+    achievementClass () {
+      return `${this.achievement.icon}2x`;
+    },
   },
   methods: {
     close () {