From 739016ba019376bc5469d912d2254e1521b8a4eb Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Tue, 30 May 2023 16:25:29 -0500
Subject: [PATCH] WIP(chat): add warning banner

---
 website/client/src/app.vue                    |  3 ++
 .../components/header/banners/chatBanner.vue  | 45 +++++++++++++++++++
 .../components/snackbars/notifications.vue    |  2 +-
 website/common/locales/en/groups.json         |  3 +-
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 website/client/src/components/header/banners/chatBanner.vue

diff --git a/website/client/src/app.vue b/website/client/src/app.vue
index 95cb2ba425..5166789ed3 100644
--- a/website/client/src/app.vue
+++ b/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,
diff --git a/website/client/src/components/header/banners/chatBanner.vue b/website/client/src/components/header/banners/chatBanner.vue
new file mode 100644
index 0000000000..63af7ab18d
--- /dev/null
+++ b/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>
diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue
index 30bd8d73e9..69490b31dc 100644
--- a/website/client/src/components/snackbars/notifications.vue
+++ b/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;
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 8c6a50a333..a2f1fc630f 100644
--- a/website/common/locales/en/groups.json
+++ b/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."
 }