Client: Header & Menu & Icons (#8770)

* header revamp - wip

* fix webpack fonts

* wip icons

* fix compilation errors

* implement icons loading without iconmoo

* new svg implementation

* wip

* fix issues with svgs

* fix issues with svgs

* fix bits svg

* fix displaying of pet in avatar

* avatar class icon

* no party header

* update navigation

* split code by route

* round gems and gp

* add string for faqs

* fix icons in css

website/client/components/appHeader.vue

@@ -1,31 +1,55 @@
 <template lang="pug">
 #app-header.row
-  user-list-detail
+  user-list-detail(:user="user")
+  .no-party.d-flex.justify-content-center.text-center(v-if="!user.party._id")
+    .align-self-center(v-once)
+      h3 {{ $t('battleWithFriends') }}
+      span.small-text(v-html="$t('inviteFriendsParty')")
+      br
+      button.btn.btn-primary {{ $t('startAParty') }}
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
-// TODO move to colors.scss if used in other places
-$header-dark-background: #271B3D;
-$header-text-color: #D5C8FF;
-
-/* TODO refactor: only partially ported from SemanticUI; */
 #app-header {
   padding-left: 14px;
   margin-top: 56px;
   background: $purple-50;
-  height: 192px;
-  color: $header-text-color;
+  height: 204px;
+  color: $header-color;
+}
+
+.no-party {
+  flex-grow: 1;
+
+  .small-text {
+    color: $header-color;
+  }
+
+  h3 {
+    color: $white;
+    margin-bottom: 4px;
+  }
+
+  button {
+    margin-top: 16px;
+  }
 }
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
 import UserListDetail from './userListDetail';
 
 export default {
   components: {
     UserListDetail,
   },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
 };
 </script>