WIP(chat): add warning banner

website/client/src/app.vue

@@ -41,6 +41,7 @@
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
       <template v-else>
         <template v-if="isUserLoaded">
+          <chat-banner />
           <damage-paused-banner />
           <gems-promo-banner />
           <gift-promo-banner />
@@ -159,6 +160,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import birthdayModal from '@/components/news/birthdayModal';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
+import ChatBanner from './components/header/banners/chatBanner';
 import DamagePausedBanner from './components/header/banners/damagePaused';
 import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
@@ -198,6 +200,7 @@ export default {
     AppHeader,
     AppFooter,
     birthdayModal,
+    ChatBanner,
     DamagePausedBanner,
     GemsPromoBanner,
     GiftPromoBanner,

website/client/src/components/header/banners/chatBanner.vue

@@ -0,0 +1,45 @@
+<template>
+  <base-banner
+    banner-id="chat-banner"
+    class="chat-banner"
+    height="3rem"
+    :can-close="false"
+  >
+    <div
+      slot="content"
+      class="w-100 text-center"
+      v-html="$t('chatSunsetWarning')"
+    >
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .chat-banner {
+    width: 100%;
+    min-height: 48px;
+    padding: 8px;
+    color: $orange-1;
+    background-color: $orange-100;
+    line-height: 1.71;
+
+    a {
+      color: $orange-1;
+      text-decoration: underline;
+    }
+  }
+
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+};
+
+</script>

website/client/src/components/snackbars/notifications.vue

@@ -133,7 +133,7 @@ export default {
       return `${base}${modifier} scroll-${this.scrollY}`;
     },
     notificationBannerHeight () {
-      let scrollPosToCheck = 56;
+      let scrollPosToCheck = 104;
 
       if (this.sleepingBannerHeight) {
         scrollPosToCheck += this.sleepingBannerHeight;

website/common/locales/en/groups.json

@@ -417,5 +417,6 @@
   "lookingForPartyTitle": "Find Members",
   "findMorePartyMembers": "Find More Members",
   "findPartyMembers": "Find Party Members",
-  "noOneLooking": "There’s no one looking for a Party right now.<br>You can check back later!"
+  "noOneLooking": "There’s no one looking for a Party right now.<br>You can check back later!",
+  "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on MM/DD/YYYY.</strong> <a href='/static/faq/chat'>Click here</a> to read more about this change."
 }