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/appHeader.vue

@@ -3,12 +3,16 @@ div
   create-party-modal
   #app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
     members-modal(:hide-badge="true")
-    .col-6
-      member-details(:member="user")
-    .view-party(v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1")
-      // TODO button should open the party members modal
+    member-details(
+      :member="user",
+      :class-badge-position="'next-to-name'",
+      :is-header="true",
+    )
+    .view-party.d-flex.align-items-center(
+      v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1",
+    )
       button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
-    .party-members.col-6.d-flex(
+    .party-members.d-flex(
       v-if="partyMembers && partyMembers.length > 1",
       v-resize="1500",
       @resized="setPartyMembersWidth($event)"
@@ -21,17 +25,17 @@ div
         condensed=true,
         @onHover="expandMember(member._id)",
         :expanded="member._id === expandedMember",
+        :is-header="true",
+        :class-badge-position="'hidden'",
       )
-    .no-party.col-6.d-flex.justify-content-center.text-center(v-else)
+    .no-party.d-flex.justify-content-center.text-center(v-else)
       .align-self-center(v-once)
         h3 {{ $t('battleWithFriends') }}
         span.small-text(v-html="$t('inviteFriendsParty')")
         br
-        // TODO link to party creation or party page if partying solo
         button.btn.btn-primary(@click='openPartyModal()') {{ partyMembers && partyMembers.length > 1 ? $t('startAParty') : $t('inviteFriends') }}
   a.useMobileApp(v-if="isAndroidMobile()", v-once, href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica") {{ $t('useMobileApps') }}
   a.useMobileApp(v-if="isIOSMobile()", v-once, href="https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8") {{ $t('useMobileApps') }}
-
 </template>
 
 <style lang="scss" scoped>
@@ -51,10 +55,11 @@ div
   }
 
   #app-header {
-    padding-left: 14px;
     margin-top: 56px;
+    padding-left: 24px;
+    padding-top: 9px;
+    padding-bottom: 8px;
     background: $purple-50;
-    height: 204px;
     color: $header-color;
     flex-wrap: nowrap;
     position: relative;
@@ -64,12 +69,6 @@ div
     display: none;
   }
 
-  .sticky {
-    position: fixed !important;
-    width: 100%;
-    z-index: 1;
-  }
-
   .no-party, .party-members {
     flex-grow: 1;
   }
@@ -80,12 +79,8 @@ div
     right: 0;
     padding-right: 40px;
     padding-left: 10px;
-    height: 100%;
+    height: calc(100% - 9px);
     background-image: linear-gradient(to right, rgba($purple-50, 0), $purple-50);
-
-    .btn {
-      margin-top: 75%;
-    }
   }
 
   .no-party {