Client: Tasks and Header v2 (#9168)

* wip: footer

* pin bootstrap-vue

* compact footer and fixes

* compact header

* fix member details in other views

* fix first party member in header

* fix unread notifications badge color

* sync + menu fixes

* loading bar styles

* new filter button

* create button

* create fixes

* quick add

* fix quick add inputs

* tooltips for create buttons

* fix create task moda

* fix class badge

* fixed footer links

* revert change that caused problems with tests and old browsers

* misc

website/client/components/appMenu.vue

@@ -62,6 +62,8 @@ div
       .item-with-icon
         .svg-icon(v-html="icons.gold")
         span {{Math.floor(user.stats.gp * 100) / 100}}
+      a.item-with-icon(@click="sync")
+        .svg-icon(v-html="icons.sync")
       notification-menu
       a.dropdown.item-with-icon.item-user
         span.message-count.top-count(v-if='user.inbox.newMessages > 0') {{user.inbox.newMessages}}
@@ -236,7 +238,16 @@ div
     padding-left: 16px;
     white-space: nowrap;
 
+    span {
+      font-weight: bold;
+    }
+
+    &:hover .svg-icon {
+      color: $white;
+    }
+
     .svg-icon {
+      color: $header-color;
       vertical-align: bottom;
       display: inline-block;
       width: 20px;
@@ -254,11 +265,6 @@ div
 
     .svg-icon {
       margin-right: 0px;
-      color: $header-color;
-
-      &:hover {
-        color: $white;
-      }
     }
   }
 
@@ -277,18 +283,19 @@ div
   }
 
   .message-count {
-    background-color: #46a7d9;
+    background-color: $blue-50;
     border-radius: 50%;
     height: 20px;
     width: 20px;
     float: right;
-    color: #fff;
+    color: $white;
     text-align: center;
     font-weight: bold;
     font-size: 12px;
   }
 
   .message-count.top-count {
+    background-color: $red-50;
     position: absolute;
     right: 0;
     top: .5em;
@@ -305,6 +312,7 @@ import { mapState, mapGetters } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 import gemIcon from 'assets/svg/gem.svg';
 import goldIcon from 'assets/svg/gold.svg';
+import syncIcon from 'assets/svg/sync.svg';
 import userIcon from 'assets/svg/user.svg';
 import svgHourglasses from 'assets/svg/hourglass.svg';
 import logo from 'assets/svg/logo.svg';
@@ -330,6 +338,7 @@ export default {
         gold: goldIcon,
         user: userIcon,
         hourglasses: svgHourglasses,
+        sync: syncIcon,
         logo,
       }),
     };
@@ -348,6 +357,12 @@ export default {
     this.getUserGroupPlans();
   },
   methods: {
+    sync () {
+      return Promise.all([
+        this.$store.dispatch('user:fetch', {forceLoad: true}),
+        this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true}),
+      ]);
+    },
     logout () {
       this.$store.dispatch('auth:logout');
     },