Client Redesign: Inventory pages, secondary menu, misc css and design items (#8631)

* add colors palette

* add secondary menu component and style it

* add box shadow to secondary menu

* misc css, fixes for secondary menu

* client: add equipment page with grouping, css: add some styles

* add typography

* more equipment

* stable: fix linting

* equipment: add styles (lots of general styles too)

* remove duplicate google fonts loading

* add dropdowns

* design: white search input background, remove gray from items

* start adding drawer and selected indicator

* wip equipment

* fix equipment

* equipment: correctly bind new properties on items.gear.equipped

* equipment: fix vue binding. version 2

* equipment: fix vue binding. version 3

* back to first fix for equip op, fix for sourcemaps, send http request when an item is equipped, load bootstrap-vue components where needed

* checkboxes and radio buttons

* correctly renders selected items in first postion during the first render

* add search

* general changes, constants part of app state, add popovers

* add toggle switch, rename css

* correct offset

* upgrade deps

* upgrade deps

* drawer and lot of other work

* update equipping mechanism

* finish equipment

* fix compilation and upgrade deps

* use v-show in place of v-if to fix ui issues

* v-show -> v-if

* fix linting in test/client

* fix es6 compilation in test/client

* fix babel compilation for tests

* fix groupsUtilities mixin tests

* client: buttons

* client: buttons: fix colors

* client: finish buttons and dropdowns

* upgrade bootstrap-vue, finish buttons and dropdowns

* fix tasks page layout

* misc fixes for buttons

* add textareas

* fix app menu

* add inputs

* fixes for toggleSwitch

* typography

* checkboxes and radio buttons

* add checkbox icon

* fix equip.js

* extract strings to newClient.json

* add Popover above 'Use Costume' / 'Auto Equip' slider - disable item select if costume-mode and 'useCostume' isn't active

* show "you have disabled your costume" error above the drawer items

* check errorMessage for null

* hide star if costume not enabled

* fix errorMessage (!errorMessage seems not to work for string)

* show minimize / expand icon - always centered by css

* drawer test

* drawer: fix centering on large screens

* fix show more button

* add margin when two dropdowns are next to each other

* adjust the page padding based on the drawer, misc fixes

* drawer fixes

website/client/components/appHeader.vue

@@ -7,8 +7,8 @@
     .progress-container.d-flex
       img.icon(src="~assets/header/png/health@3x.png")
       .progress
-        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
-      span {{user.stats.hp | round}} / {{maxHealth}}
+        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
+      span {{user.stats.hp | round}} / {{MAX_HEALTH}}
     .progress-container.d-flex
       img.icon(src="~assets/header/png/experience@3x.png")
       .progress
@@ -21,14 +21,20 @@
       span {{user.stats.mp | round}} / {{maxMP}}
 </template>
 
-<style scoped>
+<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: #36205d;
+  background: $purple-50;
   height: 192px;
-  color: #d5c8ff;
+  color: $header-text-color;
 }
 
 .character-name {
@@ -36,7 +42,7 @@
   font-size: 16px;
   margin-top: 32px;
   line-height: 1.5;
-  color: #fff;
+  color: $white;
   font-weight: bold;
 }
 
@@ -51,7 +57,6 @@
 #header-avatar {
   margin-top: 24px;
   margin-right: 1rem;
-  box-shadow: 0 2px 4px 0 rgba(53, 32, 93, 0.4);
 }
 
 .progress-container {
@@ -75,7 +80,7 @@
   margin: 0px;
   border-radius: 0px;
   height: 12px;
-  background-color: rgba(0, 0, 0, 0.35);
+  background-color: $header-dark-background;
 }
 
 .progress-container > .progress > .progress-bar {
@@ -90,25 +95,21 @@ import Avatar from './avatar';
 import { mapState } from 'client/libs/store';
 
 import { toNextLevel } from '../../common/script/statHelpers';
-import { MAX_HEALTH as maxHealth } from '../../common/script/constants';
 import statsComputed from '../../common/script/libs/statsComputed';
 import percent from '../../common/script/libs/percent';
 
 export default {
-  name: 'header',
   components: {
     Avatar,
   },
   methods: {
     percent,
   },
-  data () {
-    return {
-      maxHealth,
-    };
-  },
   computed: {
-    ...mapState({user: 'user.data'}),
+    ...mapState({
+      user: 'user.data',
+      MAX_HEALTH: 'constants.MAX_HEALTH',
+    }),
     maxMP () {
       return statsComputed(this.user).maxMP;
     },