Style fixes: Onboarding (#11241)

* wip: createIntro / onboard ui rework

* extract more methods - working body settings component

* move justin above the dialog

* extract submenu + fix styles

* white background on items, working example of "none" item, item border radius

* extract options as component

* move more subMenu's to the component

* add chair margins

* move tasks to common/content

* add menu indicator

* extract more parts of onboarding-intro

* refactor / fully converted hair-settings

* extract extra-settings

* fix sprite positions / lint

* extract task-strings to be translatable

* style fixes - hide submenu's if not editing

* style / margin fixes

* more style fixes

* show hair styles at onboarding - use arrowleft/right as svg instead of image fix next color

* finish button style - full set background/purchase button

* fix footer - prev/next hover

* Add Default Tasks + `byHabitica` property

* customize-options click item on the full zone

* purple tasks

* footer animation => none

* fix onboarding task habit up/down

* onboarding circle color/position

* task styles

* fix onboarding position

* show seasonal options

* add hover to (locked-) options

* added the correct behavior of shop-items to onboarding options

* hide hover on active options

website/client/components/avatarModal/sub-menu.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+  .sub-menu.text-center
+    .sub-menu-item(
+      v-for="item of items",
+      :key="item.id",
+      @click='$emit("changeSubPage", item.id)',
+      :class='{active: activeSubPage === item.id}'
+    )
+      strong(v-once) {{ item.label }}
+</template>
+
+<script>
+    export default {
+      props: ['items', 'activeSubPage'],
+    };
+</script>
+
+<style scoped lang="scss">
+  @import '~client/assets/scss/colors.scss';
+
+  .sub-menu {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+    padding-top: 12px;
+    flex-wrap: wrap;
+  }
+
+  .sub-menu:hover {
+    cursor: pointer;
+  }
+
+  .sub-menu-item {
+    padding: 6px 16px;
+    text-align: center;
+    border-bottom: 2px solid #f9f9f9;
+    height: 32px;
+    font-size: 12px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.67;
+    letter-spacing: normal;
+    text-align: center;
+    color: $gray-100;
+  }
+
+  .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
+    color: $purple-200;
+    border-bottom: 2px solid $purple-200;
+  }
+</style>