Tasks v2 Part 2 (#9236)

* start updating colors for tasks controls

* finish updating controls colors

* change hoevr behavior

* change transition duration

* update color with transition

* refactor menu wip

* wip

* upgrade vue deps

* fix warnings

* fix menu

* misc fixes

* more fixes

* fix badge

* fix margins in menu

* wip tooltips

* tooltips

* fix checklist colors

* add badges

* fix quick add input

* add transition to task controls too

* add batch add

* fix task filtering

* finish tasks badges

* fix menu

* upgrade deps

* fix shop items using all the same image

* fix animation

* disable client tests until we remove phantomjs

* revert changes to tasks colors

* fix opacity in task modal inputs

* remove client unit tests from travis

* wip task dropdown

* fix z-index for task footer/header

* fixes and add files

* fixes

* bigger clickable area

* more space to open task dropdown

* droddown position

* fix menu position

* make sure other dropdowns get closed correctly

* fixes

* start to fix z-index

* draggable = false for task dropdown

* fix for dropdown position

* implement move to top / bottom

* fix push to bottom

* typo

* fix drag and drop

* use standard code

* wider click area for dropdown

* unify badge look

* fix padding

* misc fixes

* more fixes

* make dropdown scrollable

* misc fixes

* fix padding for notes

* use existing code instead of new props

website/client/components/header/messageCount.vue

@@ -0,0 +1,27 @@
+<template lang="pug" functional>
+span.message-count(:class="{'top-count': props.top === true}") {{props.count}}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.message-count {
+  background-color: $blue-50;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+  float: right;
+  color: $white;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.message-count.top-count {
+  position: absolute;
+  right: 0.3em;
+  top: -0.8em;
+  padding: 0.2em;
+  background-color: $red-50;
+}
+</style>