From 84e5c00be1c6cb0f4bd99eda419207eda1fe8fe4 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Mon, 5 Jun 2023 16:16:19 -0500
Subject: [PATCH] WIP(announcement): correct layout and close X

---
 .../src/components/header/banners/base.vue    |  8 +-
 .../components/header/banners/chatBanner.vue  |  7 +-
 .../header/banners/damagePaused.vue           |  1 +
 .../src/components/static/chatSunsetFaq.vue   | 98 ++++++++-----------
 website/common/locales/en/groups.json         |  2 +-
 5 files changed, 48 insertions(+), 68 deletions(-)

diff --git a/website/client/src/components/header/banners/base.vue b/website/client/src/components/header/banners/base.vue
index 428cd5f810..6d1c8b9dbe 100644
--- a/website/client/src/components/header/banners/base.vue
+++ b/website/client/src/components/header/banners/base.vue
@@ -8,7 +8,7 @@
     <slot name="content"></slot>
     <close-x
       v-if="canClose"
-      @click="close()"
+      @close="close()"
     />
   </div>
 </template>
@@ -27,10 +27,6 @@ body.modal-open .habitica-top-banner {
   padding-left: 1.5rem;
   padding-right: 1.625rem;
   z-index: 1300;
-
-  .modal-close {
-    position: inherit;
-  }
 }
 </style>
 
@@ -105,8 +101,6 @@ export default {
     close () {
       hideBanner(this.bannerId);
       this.hidden = true;
-
-      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
     },
   },
 };
diff --git a/website/client/src/components/header/banners/chatBanner.vue b/website/client/src/components/header/banners/chatBanner.vue
index ff1052f9ba..b9841a86c6 100644
--- a/website/client/src/components/header/banners/chatBanner.vue
+++ b/website/client/src/components/header/banners/chatBanner.vue
@@ -30,6 +30,10 @@
     a {
       color: $orange-1;
       text-decoration: underline;
+
+      &:hover {
+        color: $orange-1;
+      }
     }
 
     &.faq {
@@ -52,8 +56,9 @@ export default {
       return (this.$route.fullPath.indexOf('/faq')) !== -1;
     },
     showChatWarning () {
-      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
       if (this.$route.fullPath.indexOf('/groups') !== -1) return true;
+      if (this.$route.fullPath.indexOf('/tavern-and-guilds') !== -1) return false;
+      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
       return this.faqPage;
     },
   },
diff --git a/website/client/src/components/header/banners/damagePaused.vue b/website/client/src/components/header/banners/damagePaused.vue
index a89c38aec7..ffa3c0b3b0 100644
--- a/website/client/src/components/header/banners/damagePaused.vue
+++ b/website/client/src/components/header/banners/damagePaused.vue
@@ -2,6 +2,7 @@
   <base-banner
     banner-id="damage-paused"
     banner-class="resting-banner"
+    :can-close="false"
     :show="showRestingBanner"
     height="40px"
   >
diff --git a/website/client/src/components/static/chatSunsetFaq.vue b/website/client/src/components/static/chatSunsetFaq.vue
index bc0647c783..02a2bbc246 100644
--- a/website/client/src/components/static/chatSunsetFaq.vue
+++ b/website/client/src/components/static/chatSunsetFaq.vue
@@ -151,8 +151,8 @@
 
     <!-- sidebar -->
     <!-- staff -->
-    <div class="sidebar">
-      <div class="section sidebar-content">
+    <div class="col-12 col-sm-4 sidebar">
+      <div class="section">
         <div class="px-4">
           <sidebar-section :title="$t('staff')">
             <div class="staff-header">
@@ -185,9 +185,6 @@
           <sidebar-section :title="$t('playerTiers')">
             <div class="row">
               <div class="col-12">
-                <div class="player-header">
-                  {{ $t('playerTiers') }}
-                </div>
                 <ul class="tier-list">
                   <li
                     v-once
@@ -284,6 +281,10 @@
                     class="npc"
                   >
                     {{ $t('tierNPC') }}
+                    <div
+                      class="svg-icon npc-icon"
+                      v-html="icons.tierNPC"
+                    ></div>
                   </li>
                 </ul>
               </div>
@@ -300,9 +301,21 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  h1 {
-    margin-top: 0px;
-    line-height: 1.33;
+  .main-bg {
+    font-size: 16px !important;
+  }
+
+  .headings {
+    font-size: 1em; // for some reason, em doesn't give the desired result
+    font-weight: 400;
+    line-height: 1.75;
+    color: $purple-200;
+  }
+
+  .body-text {
+    font-size: 0.875em;
+    color: $gray-10;
+    line-height: 1.71;
   }
 
   p {
@@ -317,44 +330,20 @@
     size: 0.5em;
   }
 
-  #app {
-    background-color: $white !important;
-  }
-
-  .main-bg {
-    font-size: 16px !important;
-  }
-
-  .headings {
-    font-size: 1em;
-    font-weight: 400;
-    line-height: 1.75;
-    color: $purple-200;
-  }
-
-  .body-text {
-    font-size: 0.875em;
-    color: $gray-10;
-    line-height: 1.71;
-  }
-
-  .sidebar-content {
-    width: 330px !important;
+  .sidebar {
     background-color: $gray-700;
-    max-height: fit-content;
     padding: 24px 0;
     margin: 0 0 22px 24px;
     border-radius: 16px;
   }
-
 .svg-icon {
     width: 10px;
     display: inline-block;
-    margin-left: -1px;
+    margin-left: .5em;
   }
 
   .tier1-icon, .tier2-icon {
-    width: 10px;
+    width: 11px;
   }
 
   .tier5-icon, .tier6-icon {
@@ -362,18 +351,21 @@
   }
 
   .tier7-icon {
-    width: 10px;
+    width: 12px;
   }
 
   .mod-icon {
-    width: 12px;
+    width: 13px;
+  }
+
+  .npc-icon {
+    width: 8px;
   }
 
   .staff-header {
     font-size: 0.875em;
     font-weight: bold;
     line-height: 1.71;
-    margin-bottom: 8px;
   }
 
   .staff {
@@ -389,38 +381,26 @@
       font-weight: bold;
       line-height: 1.71;
       display: inline-block;
-      margin-bottom: 4px;
+      margin-top: 8px;
     }
   }
-
-  .player-header {
-    font-size: 0.875em;
-    font-weight: bold;
-    line-height: 1.71;
-    margin-top: 24px;
-    margin-bottom: 8px;
-  }
     .tier-list {
     list-style-type: none;
     padding: 0;
-    width: 282px;
+    width: 98%;
 
     li {
-      border-radius: 4px;
-      border: solid 1px $gray-500;
+      border-radius: 2px;
+      background-color: #edecee;
+      border: solid 1px #c3c0c7;
       text-align: center;
-      padding-top: 8px;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
-      margin-right: 4px;
+      padding: 1em;
+      margin-bottom: 1em;
       font-weight: bold;
-      font-size: 0.875em;
-      line-height: 1.71;
     }
 
     .tier1 {
       color: #c42870;
-
     }
 
     .tier2 {
@@ -452,7 +432,7 @@
     }
 
     .tier9, .staff {
-      color: $purple-300;
+      color: #6133b4;
     }
 
     .npc {
@@ -461,7 +441,7 @@
   }
 
   .staff .title {
-    color: $purple-300;
+    color: #6133b4;
   }
 
   .moderator .title {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index a2f1fc630f..ea41f70e62 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -418,5 +418,5 @@
   "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!",
-  "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."
+  "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on MM/DD/YYYY.</strong> <a href='/static/faq/tavern-and-guilds'>Click here</a> to read more about this change."
 }