Merge branch 'develop' into report-profile-modal

2023-08-11 12:40:07 -04:00
parent 1da6af11b5 647b27c55f
commit c301a2b460
274 changed files with 6703 additions and 4579 deletions
@@ -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,
@@ -94,6 +94,12 @@
  height: 90px;
 }

+.back_special_heroicAureole {
+  width: 114px;
+  height: 90px;
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_special_heroicAureole.gif") no-repeat;
+}
+
 .head_special_0 {
  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
 }
@@ -192,14 +198,6 @@
  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_steamworks.gif") no-repeat;
 }

-/* FIXME figure out how to handle customize menu!!
-.customize-menu .f_head_0 {
-  width: 60px;
-  height: 60px;
-  background-position: -1917px -9px;
-}
-*/
-
 [class*="Mount_Head_"],
 [class*="Mount_Body_"] {
  margin-top:18px; /* Sprite accommodates 105x123 box */
@@ -68,6 +68,11 @@
  width: 68px;
  height: 68px;
 }
+.achievement-bonelessBoss2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-bonelessBoss2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-boot2x {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-boot2x.png');
  width: 48px;
@@ -715,6 +720,11 @@
  width: 141px;
  height: 147px;
 }
+.background_bonsai_collection {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_bonsai_collection.png');
+  width: 141px;
+  height: 147px;
+}
 .background_branches_of_a_holiday_tree {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_branches_of_a_holiday_tree.png');
  width: 141px;
@@ -920,6 +930,11 @@
  width: 141px;
  height: 147px;
 }
+.background_dreamy_island {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_dreamy_island.png');
+  width: 141px;
+  height: 147px;
+}
 .background_drifting_raft {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_drifting_raft.png');
  width: 141px;
@@ -1729,6 +1744,11 @@
  width: 141px;
  height: 147px;
 }
+.background_rock_garden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_rock_garden.png');
+  width: 141px;
+  height: 147px;
+}
 .background_rolling_hills {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_rolling_hills.png');
  width: 141px;
@@ -2441,6 +2461,11 @@
  width: 68px;
  height: 68px;
 }
+.icon_background_bonsai_collection {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_bonsai_collection.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_branches_of_a_holiday_tree {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_branches_of_a_holiday_tree.png');
  width: 68px;
@@ -2651,6 +2676,11 @@
  width: 68px;
  height: 68px;
 }
+.icon_background_dreamy_island {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_dreamy_island.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_drifting_raft {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_drifting_raft.png');
  width: 68px;
@@ -3460,6 +3490,11 @@
  width: 68px;
  height: 68px;
 }
+.icon_background_rock_garden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_rock_garden.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_rolling_hills {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_rolling_hills.png');
  width: 68px;
@@ -18435,6 +18470,51 @@
  width: 114px;
  height: 87px;
 }
+.body_armoire_karateBlackBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBlackBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateBlueBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBlueBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateBrownBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateBrownBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateGreenBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateGreenBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateOrangeBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateOrangeBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karatePurpleBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karatePurpleBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateRedBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateRedBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateWhiteBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateWhiteBelt.png');
+  width: 114px;
+  height: 90px;
+}
+.body_armoire_karateYellowBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_karateYellowBelt.png');
+  width: 114px;
+  height: 90px;
+}
 .body_armoire_lifeguardWhistle {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_lifeguardWhistle.png');
  width: 114px;
@@ -18695,6 +18775,11 @@
  width: 114px;
  height: 90px;
 }
+.broad_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_karateGi.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_lamplightersGreatcoat {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_lamplightersGreatcoat.png');
  width: 114px;
@@ -20000,6 +20085,11 @@
  width: 68px;
  height: 68px;
 }
+.shop_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_karateGi.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_lamplightersGreatcoat {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_lamplightersGreatcoat.png');
  width: 68px;
@@ -20230,6 +20320,51 @@
  width: 68px;
  height: 68px;
 }
+.shop_body_armoire_karateBlackBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBlackBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateBlueBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBlueBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateBrownBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateBrownBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateGreenBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateGreenBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateOrangeBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateOrangeBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karatePurpleBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karatePurpleBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateRedBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateRedBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateWhiteBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateWhiteBelt.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_body_armoire_karateYellowBelt {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_karateYellowBelt.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_body_armoire_lifeguardWhistle {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_body_armoire_lifeguardWhistle.png');
  width: 68px;
@@ -21785,6 +21920,11 @@
  width: 114px;
  height: 90px;
 }
+.slim_armor_armoire_karateGi {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_karateGi.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_lamplightersGreatcoat {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_lamplightersGreatcoat.png');
  width: 114px;
@@ -22545,6 +22685,11 @@
  width: 90px;
  height: 90px;
 }
+.broad_armor_special_heroicTunic {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_heroicTunic.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_special_lunarWarriorArmor {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_lunarWarriorArmor.png');
  width: 90px;
@@ -22730,6 +22875,11 @@
  width: 68px;
  height: 68px;
 }
+.shop_armor_special_heroicTunic {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_heroicTunic.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_special_lunarWarriorArmor {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_lunarWarriorArmor.png');
  width: 68px;
@@ -22905,6 +23055,11 @@
  width: 90px;
  height: 90px;
 }
+.slim_armor_special_heroicTunic {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_heroicTunic.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_special_lunarWarriorArmor {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_lunarWarriorArmor.png');
  width: 90px;
@@ -23135,6 +23290,11 @@
  width: 68px;
  height: 68px;
 }
+.shop_back_special_heroicAureole {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_back_special_heroicAureole.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_back_special_lionTail {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_back_special_lionTail.png');
  width: 68px;
@@ -28190,6 +28350,31 @@
  width: 117px;
  height: 120px;
 }
+.eyewear_mystery_202308 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/eyewear_mystery_202308.png');
+  width: 114px;
+  height: 90px;
+}
+.head_mystery_202308 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202308.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_eyewear_mystery_202308 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_eyewear_mystery_202308.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_mystery_202308 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_mystery_202308.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202308 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202308.png');
+  width: 68px;
+  height: 68px;
+}
 .broad_armor_mystery_301404 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
  width: 90px;
@@ -34204,6 +34389,214 @@
  width: 68px;
  height: 68px;
 }
+.headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_bearEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_cactusEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_foxEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_heroicCirclet {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_heroicCirclet.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_lionEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pandaEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_pigEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_tigerEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 90px;
+  height: 90px;
+}
+.customize-option.headAccessory_special_wolfEars {
+  background-position: -25px -15px;
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
+  width: 60px;
+  height: 60px;
+}
+.headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_headAccessory_special_bearEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blackHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_blueHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_cactusEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_foxEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_greenHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_heroicCirclet {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_heroicCirclet.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_lionEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pandaEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pigEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_pinkHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_redHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_tigerEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_whiteHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_wolfEars {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_special_yellowHeadband {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
+  width: 68px;
+  height: 68px;
+}
 .head_0 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_0.png');
  width: 90px;
@@ -34585,204 +34978,6 @@
  width: 68px;
  height: 68px;
 }
-.headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_bearEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_bearEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blackHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_blueHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_cactusEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_cactusEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_foxEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_foxEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_greenHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_lionEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_lionEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pandaEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pandaEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_pigEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pigEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_pinkHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_redHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_tigerEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_tigerEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_whiteHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 90px;
-  height: 90px;
-}
-.customize-option.headAccessory_special_wolfEars {
-  background-position: -25px -15px;
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_wolfEars.png');
-  width: 60px;
-  height: 60px;
-}
-.headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_special_yellowHeadband.png');
-  width: 114px;
-  height: 90px;
-}
-.shop_headAccessory_special_bearEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_bearEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blackHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blackHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_blueHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_blueHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_cactusEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_cactusEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_foxEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_foxEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_greenHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_greenHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_lionEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_lionEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pandaEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pandaEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pigEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pigEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_pinkHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_pinkHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_redHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_redHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_tigerEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_tigerEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_whiteHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_whiteHeadband.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_wolfEars {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_wolfEars.png');
-  width: 68px;
-  height: 68px;
-}
-.shop_headAccessory_special_yellowHeadband {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_special_yellowHeadband.png');
-  width: 68px;
-  height: 68px;
-}
 .shield_healer_1 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_healer_1.png');
  width: 90px;
@@ -35743,6 +35938,41 @@
  width: 40px;
  height: 40px;
 }
+.heroic_set_icon {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/heroic_set_icon.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_bear {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_bear.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_dragon {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_dragon.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_fox {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_fox.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_lion {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_lion.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_tiger {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_tiger.png');
+  width: 28px;
+  height: 28px;
+}
+.icon_pet_veteran_wolf {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_pet_veteran_wolf.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_head_special_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_head_special_nye.png');
  width: 28px;
@@ -35848,6 +36078,36 @@
  width: 20px;
  height: 24px;
 }
+.notif_namingDay_back {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_back.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_body {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_body.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_cake {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_cake.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_head {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_head.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_mount {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_mount.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_namingDay_pet {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_namingDay_pet.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_orca_mount {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_orca_mount.png');
  width: 28px;
@@ -55013,6 +55273,11 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Dragon-Veteran {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-Veteran.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Dragon-VirtualPet {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-VirtualPet.png');
  width: 81px;
@@ -1,26 +1,35 @@
 <template>
  <div class="row">
-    <div class="col-12 text-center">
+    <div class="col-6 text-center mx-auto mb-5">
      <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
      <img
-        class="not-found-img"
+        :class="retiredChatPage ? 'mt-5' : 'image-404'"
        src="~@/assets/images/404.png"
      >
-      <h1 class="not-found">
-        Sometimes even the bravest adventurer gets lost.
-      </h1>
-      <h2 class="not-found">
-        Looks like this link is broken or the page may have moved, sorry!
-      </h2>
-      <h2 class="not-found">
-        Head back to the
-        <router-link to="/">
-          Homepage
-        </router-link>or
-        <router-link :to="contactUsLink">
-          Contact Us
-        </router-link>about the issue.
-      </h2>
+      <div v-if="retiredChatPage">
+        <h1>
+          {{ $t('tavernDiscontinued') }}
+        </h1>
+        <p>{{ $t('tavernDiscontinuedDetail') }}</p>
+        <p v-html="$t('tavernDiscontinuedLinks')"></p>
+      </div>
+      <div v-else>
+        <h1>
+          Sometimes even the bravest adventurer gets lost.
+        </h1>
+        <p class="mb-0">
+          Looks like this link is broken or the page may have moved, sorry!
+        </p>
+        <p>
+          Head back to the
+          <router-link to="/">
+            Homepage
+          </router-link>or
+          <router-link :to="contactUsLink">
+            Contact Us
+          </router-link>about the issue.
+        </p>
+      </div>
    </div>
  </div>
 </template>
@@ -37,6 +46,9 @@ export default {
      }
      return { name: 'contact' };
    },
+    retiredChatPage () {
+      return this.$route.fullPath.indexOf('/groups') !== -1;
+    },
  },
 };
 </script>
@@ -44,28 +56,20 @@ export default {
 <style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';

-.col-12 {
-  margin-bottom: 120px;
-}
-
-.not-found-img {
-  margin-top: 152px;
-  margin-bottom: 42px;
-}
-
-h1.not-found {
-  line-height: 1.33;
+h1, .static-wrapper h1 {
  color: $purple-200;
-  margin-bottom: 8px;
-  font-weight: normal;
-  margin-top: 0px;
+  line-height: 1.33;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
 }

-h2.not-found {
-  line-height: 1.4;
-  font-weight: normal;
-  color: $gray-200;
-  margin-bottom: 0px;
-  margin-top: 0px;
+p {
+  font-size: 16px;
+  line-height: 1.75;
 }
+
+.image-404 {
+  margin-top: 104px;
+}
+
 </style>
@@ -1,60 +0,0 @@
-<template>
-  <b-modal
-    id="testing"
-    :title="$t('guildReminderTitle')"
-    size="lg"
-    :hide-footer="true"
-  >
-    <div class="modal-body text-center">
-      <br>
-      <div class="scene_guilds"></div>
-      <br>
-      <h4>{{ $t('guildReminderText1') }}</h4>
-    </div>
-    <div class="modal-footer">
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-6 text-center">
-            <button
-              class="btn btn-secondary"
-              @click="close()"
-            >
-              {{ $t('guildReminderDismiss') }}
-            </button>
-          </div>
-          <div
-            class="col-6 text-center"
-            @click="close()"
-          >
-            <div
-              class="btn btn-primary"
-              @click="takeMethere()"
-            >
-              {{ $t('guildReminderCTA') }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<style scoped>
-  .scene_guilds {
-    margin: 0 auto;
-  }
-</style>
-
-<script>
-export default {
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'testing');
-    },
-    takeMethere () {
-      this.$router.push('/groups/discovery');
-      this.close();
-    },
-  },
-};
-</script>
@@ -1,58 +0,0 @@
-<template>
-  <b-modal
-    id="testingletiant"
-    :title="$t('guildReminderTitle')"
-    size="lg"
-    :hide-footer="true"
-  >
-    <div class="modal-content"></div>
-    <div class="modal-body text-center">
-      <br>
-      <div class="scene_guilds"></div>
-      <br>
-      <h4>{{ $t('guildReminderText2') }}</h4>
-    </div>
-    <div class="modal-footer">
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-6 text-center">
-            <button
-              class="btn btn-secondary"
-              @click="close()"
-            >
-              {{ $t('guildReminderDismiss') }}
-            </button>
-          </div>
-          <div class="col-6 text-center">
-            <div
-              class="btn btn-primary"
-              @click="takeMethere()"
-            >
-              {{ $t('guildReminderCTA') }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<style scoped>
-  .scene_guilds {
-    margin: 0 auto;
-  }
-</style>
-
-<script>
-export default {
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'testingletiant');
-    },
-    takeMethere () {
-      this.$router.push('/groups/discovery');
-      this.close();
-    },
-  },
-};
-</script>
@@ -8,23 +8,15 @@
      slot="modal-header"
      class="bug-report-modal-header"
    >
-      <h2 v-once>
-        {{ $t('reportBug') }}
+      <h2>
+        {{ question ? $t('askQuestion') : $t('reportBug') }}
      </h2>
-
-      <div
-        v-once
-        class="report-bug-header-describe"
-      >
-        {{ $t('reportBugHeaderDescribe') }}
-      </div>
-
-      <div class="dialog-close">
-        <close-icon
-          :purple="true"
-          @click="close()"
-        />
+      <div class="report-bug-header-describe">
+        {{ question ? $t('askQuestionHeaderDescribe') : $t('reportBugHeaderDescribe') }}
      </div>
+      <close-x
+        @close="close()"
+      />
    </div>
    <div>
      <form
@@ -40,11 +32,8 @@
          >
            {{ $t('email') }}
          </label>
-          <div
-            v-once
-            class="mb-2 description-label"
-          >
-            {{ $t('reportEmailText') }}
+          <div class="mb-2 description-label">
+            {{ question ? $t('questionEmailText') : $t('reportEmailText') }}
          </div>
          <input
            id="emailInput"
@@ -64,21 +53,18 @@
          </div>
        </div>

-        <label v-once>
-          {{ $t('reportDescription') }}
+        <label>
+          {{ question ? $t('question') : $t('reportDescription') }}
        </label>
-        <div
-          v-once
-          class="mb-2 description-label"
-        >
-          {{ $t('reportDescriptionText') }}
+        <div class="mb-2 description-label">
+          {{ question ? $t('questionDescriptionText') : $t('reportDescriptionText') }}
        </div>
        <textarea
          v-model="message"
          class="form-control"
          rows="5"
          :required="true"
-          :placeholder="$t('reportDescriptionPlaceholder')"
+          :placeholder="question ? $t('questionPlaceholder') : $t('reportDescriptionPlaceholder')"
          :class="{'input-invalid': messageInvalid && this.message.length === 0}"
        >

@@ -89,7 +75,7 @@
          type="submit"
          :disabled="!message || !emailValid"
        >
-          {{ $t('submitBugReport') }}
+          {{ question ? $t('submitQuestion') : $t('submitBugReport') }}
        </button>
      </form>
    </div>
@@ -141,7 +127,7 @@ h2 {
 .bug-report-modal-header {
  color: $white;
  width: 100%;
-  padding: 2rem 3rem 1.5rem 1.5rem;
+  padding: 1.5rem 3rem 1.5rem 1.5rem;

  background-image: linear-gradient(288deg, #{$purple-200}, #{$purple-300});
 }
@@ -182,13 +168,13 @@ label {
 <script>
 import axios from 'axios';
 import isEmail from 'validator/lib/isEmail';
-import closeIcon from '@/components/shared/closeIcon';
+import closeX from '@/components/ui/closeX';
 import { mapState } from '@/libs/store';
 import { MODALS } from '@/libs/consts';

 export default {
  components: {
-    closeIcon,
+    closeX,
  },
  data () {
    return {
@@ -211,6 +197,7 @@ export default {
      await axios.post('/api/v4/bug-report', {
        message: this.message,
        email: this.email,
+        question: this.question,
      });

      this.message = '';
@@ -233,6 +220,9 @@ export default {
      if (this.email.length <= 3) return false;
      return !this.emailValid;
    },
+    question () {
+      return this.$store.state.bugReportOptions.question;
+    },
  },
  mounted () {
    const { user } = this;
@@ -50,7 +50,6 @@ import notificationsMixin from '@/mixins/notifications';
 import Task from '@/components/tasks/task';

 import taskDefaults from '@/../../common/script/libs/taskDefaults';
-import { TAVERN_ID } from '@/../../common/script/constants';

 const baseUrl = 'https://habitica.com';

@@ -89,9 +88,7 @@ export default {
      createTask: 'tasks:create',
    }),
    groupPath () {
-      if (this.groupId === TAVERN_ID) {
-        return `${baseUrl}/groups/tavern`;
-      } if (this.groupType === 'party') {
+      if (this.groupType === 'party') {
        return `${baseUrl}/party`;
      }
      return `${baseUrl}/groups/guild/${this.groupId}`;
@@ -6,13 +6,10 @@
    :style="{height}"
  >
    <slot name="content"></slot>
-    <div
+    <close-x
      v-if="canClose"
-      class="close-icon svg-icon icon-12"
-
-      @click="close()"
-      v-html="icons.close"
-    ></div>
+      @close="close()"
+    />
  </div>
 </template>

@@ -30,32 +27,24 @@ body.modal-open .habitica-top-banner {
  padding-left: 1.5rem;
  padding-right: 1.625rem;
  z-index: 1300;
-}

-.close-icon.svg-icon {
-  position: relative;
-  top: 0;
-  right: 0;
-  opacity: 0.48;
-
-  & ::v-deep svg path {
-    stroke: $white !important;
-  }
-
-  &:hover {
-    opacity: 0.75;
+  .modal-close {
+    position: unset;
  }
 }
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeX from '@/components/ui/closeX';
 import {
  clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
 } from '@/libs/banner.func';
 import { EVENTS } from '@/libs/events';

 export default {
+  components: {
+    closeX,
+  },
  props: {
    bannerId: {
      type: String,
@@ -82,9 +71,6 @@ export default {
  },
  data () {
    return {
-      icons: Object.freeze({
-        close: closeIcon,
-      }),
      hidden: false,
    };
  },
@@ -119,8 +105,6 @@ export default {
    close () {
      hideBanner(this.bannerId);
      this.hidden = true;
-
-      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
    },
  },
 };
@@ -0,0 +1,64 @@
+<template>
+  <base-banner
+    banner-id="chat-warning"
+    banner-class="chat-banner"
+    class="chat-banner"
+    height="3rem"
+    v-if="showChatWarning"
+    :class="{faq: faqPage}"
+  >
+    <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;
+
+      &:hover {
+        color: $orange-1;
+      }
+    }
+
+    &.faq {
+      position: fixed;
+      top: 3.5rem;
+    }
+  }
+
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+  computed: {
+    faqPage () {
+      return (this.$route.fullPath.indexOf('/faq')) !== -1;
+    },
+    showChatWarning () {
+      return false;
+    },
+  },
+};
+
+</script>
@@ -194,48 +194,6 @@
          >
            {{ $t('party') }}
          </b-nav-item>
-          <li
-            class="topbar-item droppable"
-            :class="{
-              'active': $route.path.startsWith('/groups')}"
-          >
-            <div
-              class="chevron rotate"
-              @click="dropdownMobile($event)"
-            >
-              <div
-                v-once
-                class="chevron-icon-down"
-                v-html="icons.chevronDown"
-              ></div>
-            </div>
-            <router-link
-              class="nav-link"
-              :to="{name: 'tavern'}"
-            >
-              {{ $t('guilds') }}
-            </router-link>
-            <div class="topbar-dropdown">
-              <router-link
-                class="topbar-dropdown-item dropdown-item"
-                :to="{name: 'tavern'}"
-              >
-                {{ $t('tavern') }}
-              </router-link>
-              <router-link
-                class="topbar-dropdown-item dropdown-item"
-                :to="{name: 'myGuilds'}"
-              >
-                {{ $t('myGuilds') }}
-              </router-link>
-              <router-link
-                class="topbar-dropdown-item dropdown-item"
-                :to="{name: 'guildsDiscovery'}"
-              >
-                {{ $t('guildsDiscovery') }}
-              </router-link>
-            </div>
-          </li>
          <li
            class="topbar-item droppable"
            :class="{
@@ -354,22 +312,18 @@
              >
                {{ $t('reportBug') }}
              </a>
-              <router-link
+              <a
                class="topbar-dropdown-item dropdown-item"
-                to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
+                target="_blank"
+                @click.prevent="openBugReportModal(true)"
              >
                {{ $t('askQuestion') }}
-              </router-link>
+              </a>
              <a
                class="topbar-dropdown-item dropdown-item"
                href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
                target="_blank"
              >{{ $t('requestFeature') }}</a>
-              <a
-                class="topbar-dropdown-item dropdown-item"
-                href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
-                target="_blank"
-              >{{ $t('contributing') }}</a>
              <a
                class="topbar-dropdown-item dropdown-item"
                href="https://habitica.fandom.com/wiki/Habitica_Wiki"
@@ -661,6 +615,7 @@ body.modal-open #habitica-menu {

          &:hover {
            background: $purple-300;
+            text-decoration: none;

            &:last-child {
              border-bottom-right-radius: 5px;
@@ -830,9 +785,11 @@ export default {
  async mounted () {
    await this.getUserGroupPlans();
    await this.getUserParty();
-    Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
-      link.addEventListener('click', this.closeMenu);
-    });
+    if (document.getElementById('menu_collapse')) {
+      Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
+        link.addEventListener('click', this.closeMenu);
+      });
+    }
    Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
      link.addEventListener('mouseenter', this.dropdownDesktop);
      link.addEventListener('mouseleave', this.dropdownDesktop);
@@ -44,13 +44,13 @@ export default {
      if (!this.notification || !this.notification.data) {
        return;
      }
-      if (this.notification.data.destination === 'backgrounds') {
+      if (this.notification.data.destination.indexOf('backgrounds') !== -1) {
        this.$store.state.avatarEditorOptions.editingUser = true;
        this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
        this.$store.state.avatarEditorOptions.subpage = '2023';
        this.$root.$emit('bv::show::modal', 'avatar-modal');
      } else {
-        this.$router.push({ name: this.notification.data.destination || 'items' });
+        this.$router.push(this.notification.data.destination || '/inventory/items');
      }
    },
  },
@@ -11,8 +11,6 @@
    <low-health />
    <level-up />
    <choose-class />
-    <testing />
-    <testingletiant />
    <rebirth-enabled />
    <contributor />
    <won-challenge />
@@ -127,8 +125,6 @@ import chooseClass from './achievements/chooseClass';
 import armoireEmpty from './achievements/armoireEmpty';
 import questCompleted from './achievements/questCompleted';
 import questInvitation from './achievements/questInvitation';
-import testing from './achievements/testing';
-import testingletiant from './achievements/testingletiant';
 import rebirthEnabled from './achievements/rebirthEnabled';
 import contributor from './achievements/contributor';
 import invitedFriend from './achievements/invitedFriend';
@@ -269,8 +265,6 @@ export default {
    armoireEmpty,
    questCompleted,
    questInvitation,
-    testing,
-    testingletiant,
    rebirthEnabled,
    contributor,
    loginIncentives,
@@ -300,7 +294,6 @@ export default {
      // general notifications
      'CRON',
      'FIRST_DROPS',
-      'GUILD_PROMPT',
      'LOGIN_INCENTIVE',
      'NEW_CONTRIBUTOR_LEVEL',
      'ONBOARDING_COMPLETE',
@@ -705,14 +698,6 @@ export default {
              this.$root.$emit('bv::show::modal', 'first-drops');
            }
            break;
-          case 'GUILD_PROMPT':
-            // @TODO: I'm pretty sure we can find better names for these
-            if (notification.data.textletiant === -1) {
-              this.$root.$emit('bv::show::modal', 'testing');
-            } else {
-              this.$root.$emit('bv::show::modal', 'testingletiant');
-            }
-            break;
          case 'REBIRTH_ENABLED':
            this.$root.$emit('bv::show::modal', 'rebirth-enabled');
            break;
@@ -106,6 +106,7 @@ export default {
      preventMultipleWatchExecution: false,
      eventPromoBannerHeight: null,
      sleepingBannerHeight: null,
+      warningBannerHeight: null,
    };
  },
  computed: {
@@ -135,6 +136,10 @@ export default {
    notificationBannerHeight () {
      let scrollPosToCheck = 56;

+      if (this.warningBannerHeight) {
+        scrollPosToCheck += this.warningBannerHeight;
+      }
+
      if (this.sleepingBannerHeight) {
        scrollPosToCheck += this.sleepingBannerHeight;
      }
@@ -361,6 +366,7 @@ export default {

    updateBannerHeightAndScrollY () {
      this.updateEventBannerHeight();
+      this.warningBannerHeight = getBannerHeight('chat-warning');
      this.sleepingBannerHeight = getBannerHeight('damage-paused');
      this.updateScrollY();
    },
@@ -0,0 +1,615 @@
+<template>
+  <div class="top-container mx-auto">
+    <div class="main-text mr-4">
+      <!-- title goes here -->
+      <div class="title-details">
+        <h1 v-once>
+          {{ $t('sunsetFaqTitle') }}
+        </h1>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+        <p>{{ $t('sunsetFaqPara2') }}</p>
+        <p>{{ $t('sunsetFaqPara3') }}</p>
+        <p>{{ $t('sunsetFaqPara4') }}</p>
+        <p>{{ $t('sunsetFaqPara5') }}</p>
+      </div>
+
+      <!-- Which services are ending -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader1') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara6')"></p>
+      </div>
+
+      <!-- Why are tavern and guild ending? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader2') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList1') }}</li>
+          <li>{{ $t('sunsetFaqList2') }}</li>
+          <li>{{ $t('sunsetFaqList3') }}</li>
+        </ul>
+      </div>
+
+      <!-- Can I still talk to my party/group members? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader3') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara7') }}</p>
+      </div>
+
+      <!-- Pausing dailies -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader4') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara8') }}</p>
+      </div>
+
+      <!-- Accessing group plans -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader5') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Can I access guild chats? Or banked Gems? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader12') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara21')"></p>
+      </div>
+
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader6') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara10') }}</p>
+      </div>
+
+      <!-- How can players find groups? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader7') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara11') }}</p>
+      </div>
+
+      <!-- What about contributors? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader8') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Challenges -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader9') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList4') }}</li>
+          <li>{{ $t('sunsetFaqList5') }}</li>
+          <li>{{ $t('sunsetFaqList6') }}</li>
+          <li>{{ $t('sunsetFaqList7') }}</li>
+        </ul>
+      </div>
+
+      <!-- Questions about how to use Habitica -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader10') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+        </ul>
+      </div>
+
+      <!-- Community Guidelines and TOS -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader11') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara20')"></p>
+      </div>
+
+    </div>
+
+    <!-- sidebar -->
+    <div class="sidebar py-4 d-flex flex-column">
+      <!-- staff -->
+      <div class="ml-4">
+        <h2>
+          {{ $t('staff') }}
+        </h2>
+        <div class="d-flex flex-wrap">
+          <div
+            v-for="user in staff"
+            :key="user.uuid"
+            class="staff col-6 p-0"
+          >
+            <div class="d-flex">
+              <router-link
+                class="title"
+                :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+              >
+                {{ user.name }}
+              </router-link>
+              <div
+                v-if="user.type === 'Staff'"
+                class="svg-icon staff-icon ml-1"
+                v-html="icons.tierStaff"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- player tiers -->
+      <div class="ml-4">
+        <h2 class="mt-4 mb-1">
+          {{ $t('playerTiers') }}
+        </h2>
+        <ul class="tier-list">
+          <li
+            v-once
+            class="tier1 d-flex justify-content-center"
+          >
+            {{ $t('tier1') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier1"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier2 d-flex justify-content-center"
+          >
+            {{ $t('tier2') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier2"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier3 d-flex justify-content-center"
+          >
+            {{ $t('tier3') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier3"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier4 d-flex justify-content-center"
+          >
+            {{ $t('tier4') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier4"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier5 d-flex justify-content-center"
+          >
+            {{ $t('tier5') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier5"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier6 d-flex justify-content-center"
+          >
+            {{ $t('tier6') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier6"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier7 d-flex justify-content-center"
+          >
+            {{ $t('tier7') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier7"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="moderator d-flex justify-content-center"
+          >
+            {{ $t('tierModerator') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierMod"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="staff d-flex justify-content-center"
+          >
+            {{ $t('tierStaff') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierStaff"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="npc d-flex justify-content-center"
+          >
+            {{ $t('tierNPC') }}
+          </li>
+        </ul>
+      </div>
+      <!-- Daniel in sweet, sweet retirement with Jorts -->
+      <div>
+        <div class="gradient">
+        </div>
+        <div
+          class="grassy-meadow-backdrop"
+          :style="{'background-image': imageURLs.background}"
+        >
+          <div
+            class="daniel_front"
+            :style="{'background-image': imageURLs.npc}"
+          ></div>
+          <div
+            class="pixel-border"
+            :style="{'background-image': imageURLs.pixel_border}"
+          ></div>
+        </div>
+      </div>
+
+      <!-- email admin -->
+      <div class="d-flex flex-column justify-content-center">
+        <div class="question mx-auto">
+          {{ $t('anotherQuestion') }}
+        </div>
+        <div
+          class="contact mx-auto"
+        >
+          <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- final div! -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    margin-top: 0px;
+    line-height: 1.33;
+  }
+
+  li {
+    padding-bottom: 16px;
+
+    &::marker {
+      size: 0.5em;
+    }
+  }
+
+  p {
+    margin-bottom: 21px;
+  }
+
+  ul {
+    padding-left: 20px;
+  }
+
+  .top-container {
+    width: 66.67%;
+    margin-top: 80px;
+    display: flex;
+
+    @media (max-width: 1024px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .main-text {
+    .body-text {
+      font-size: 1em;
+      color: $gray-10;
+      line-height: 1.71;
+    }
+
+    .headings {
+      font-size: 1.15em;
+      font-weight: 400;
+      line-height: 1.75;
+      color: $purple-200;
+    }
+  }
+
+  .sidebar {
+    height: fit-content;
+    width: 330px;
+    background-color: $gray-700;
+    border-radius: 16px;
+
+    h2 {
+      color: $gray-10;
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.71;
+    }
+
+    .staff {
+      .staff-icon {
+        width: 10px;
+        margin-top: 5px;
+      }
+
+      .title {
+        height: 24px;
+        color: $purple-300;
+        font-weight: bold;
+        display: inline-block;
+        margin-bottom: 4px;
+      }
+    }
+
+    .tier-list {
+      list-style-type: none;
+      padding: 0;
+      width: 282px;
+      font-size: 1em !important;
+
+      li {
+        height: 40px;
+        border-radius: 4px;
+        border: solid 1px $gray-500;
+        text-align: center;
+        padding: 8px 0;
+        margin-bottom: 8px;
+        margin-right: 4px;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .tier1 {
+        color: #c42870;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier2 {
+        color: #b01515;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier3 {
+        color: #d70e14;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier4 {
+        color: #c24d00;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier5 {
+        color: #9e650f;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier6 {
+        color: #2b8363;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier7 {
+        color: #167e87;
+        .svg-icon {
+          width: 12px;
+          margin-top: 4px;
+        }
+      }
+
+      .moderator {
+        color: #277eab;
+        .svg-icon {
+          width: 13px;
+          margin-top: 3px;
+        }
+      }
+
+      .staff {
+        color: #6133b4;
+        .svg-icon {
+          width: 10px;
+          margin-top: 7px;
+        }
+      }
+
+      .npc {
+        color: $black;
+      }
+    }
+
+    .gradient {
+      position: absolute;
+      width: 330px;
+      height: 100px;
+      margin: -1px 0 116px;
+      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
+    }
+
+    .grassy-meadow-backdrop {
+      background-repeat: repeat-x;
+      width: 330px;
+      height: 246px;
+    }
+
+    .daniel_front {
+      height: 246px;
+      width: 330px;
+      background-repeat: no-repeat;
+      margin: 0 auto;
+    }
+
+    .pixel-border {
+      width: 330px;
+      height: 30px;
+      background-repeat: no-repeat;
+      position: absolute;
+      margin-top: -30px;
+    }
+
+    .question {
+      font-size: 1em;
+      font-weight: bold;
+      line-height: 1.71;
+      color: $gray-10;
+      margin-top: 24px;
+    }
+
+    .contact p {
+      font-size: 1em;
+      margin-bottom: 0px;
+    }
+  }
+</style>
+
+<script>
+import find from 'lodash/find';
+import { mapState } from '@/libs/store';
+
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
+import staffList from '../../libs/staffList';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        worldBoss: true,
+      },
+      staff: staffList,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      currentEventList: 'worldState.data.currentEventList',
+    }),
+    imageURLs () {
+      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/tavern_background.png)',
+          npc: 'url(/static/npc/normal/tavern_npc.png)',
+          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
+        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+      };
+    },
+  },
+
+  async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('faq/taverns-and-guilds'),
+    });
+    document.body.style.background = '#ffffff';
+  },
+};
+</script>
@@ -1,99 +1,61 @@
 <template>
-  <div class="container-fluid">
+  <div class="container-fluid w-75 mx-auto">
    <h1>{{ $t('communityGuidelines') }}</h1>
    <hr>
-    <p>{{ $t('lastUpdated') }} February 8, 2023</p>
+    <p>{{ $t('lastUpdated') }} June 8, 2023</p>
    <h2 id="welcome">
      {{ $t('commGuideHeadingWelcome') }}
    </h2>
-    <div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/intro.png">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara001')"></p>
-        <p v-html="$t('commGuidePara002')"></p>
-      </div>
-    </div>
+    <img
+      src="~@/assets/images/community-guidelines/intro.png"
+      class="mb-3"
+    >
+    <p v-html="$t('commGuidePara001')"></p>
+    <p v-html="$t('commGuidePara002')"></p>
    <p v-html="$t('commGuidePara003')"></p>
    <h2 id="interactions">
      {{ $t('commGuideHeadingInteractions') }}
    </h2>
    <p v-html="$t('commGuidePara015')"></p>
    <p v-html="$t('commGuidePara016')"></p>
-    <p v-html="$t('commGuidePara017')"></p>
-    <ul>
-      <li v-html="$t('commGuideList01F')"></li>
-      <li v-html="$t('commGuideList01A')"></li>
-      <li v-html="$t('commGuideList01B')"></li>
-      <li v-html="$t('commGuideList01C')"></li>
-      <li v-html="$t('commGuideList01D')"></li>
-      <li v-html="$t('commGuideList01E')"></li>
-      <li v-html="$t('commGuideList01F')"></li>
-    </ul>
    <div class="media align-items-center">
      <img src="~@/assets/images/community-guidelines/publicSpaces.png">
    </div>
    <ul>
-      <li v-html="$t('commGuideList02N')"></li>
-      <li v-html="$t('commGuideList02A')"></li>
-      <li v-html="$t('commGuideList02B')"></li>
-      <li v-html="$t('commGuideList02G')"></li>
+      <li><strong>{{ $t('commGuideList01A') }}</strong></li>
      <li v-html="$t('commGuideList02C')"></li>
+      <li v-html="$t('commGuideList02N')"></li>
+      <li v-html="$t('commGuideList02H')"></li>
+      <li v-html="$t('commGuideList02A')"></li>
+      <li v-html="$t('commGuideList02I')"></li>
+      <li v-html="$t('commGuideList02G')"></li>
      <li v-html="$t('commGuideList02D')"></li>
      <li v-html="$t('commGuideList02E')"></li>
-      <li v-html="$t('commGuideList02F')"></li>
+      <li v-html="$t('commGuideList02O')"></li>
+      <li v-html="$t('commGuidePara037')"></li>
+      <li v-html="$t('commGuideList02P')"></li>
+      <li v-html="$t('commGuideList02Q')"></li>
      <li v-html="$t('commGuideList02M')"></li>
+      <li v-html="$t('commGuideList02L')"></li>
      <li v-html="$t('commGuideList02J')"></li>
      <li v-html="$t('commGuideList02K')"></li>
-      <li v-html="$t('commGuideList02L')"></li>
    </ul>
-    <p v-html="$t('commGuidePara019')"></p>
-    <p v-html="$t('commGuidePara020')"></p>
-    <p v-html="$t('commGuidePara020A')"></p>
-    <p v-html="$t('commGuidePara021')"></p>
-    <h3 id="tavern">
-      {{ $t('commGuideHeadingTavern') }}
-    </h3>
-    <div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/tavern.png">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara022')"></p>
-        <p v-html="$t('commGuidePara023')"></p>
-        <p v-html="$t('commGuidePara024')"></p>
-      </div>
-    </div>
-    <h3 id="guilds">
-      {{ $t('commGuideHeadingPublicGuilds') }}
-    </h3>
-    <div class="media align-items-center">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara029')"></p>
-        <p v-html="$t('commGuidePara031')"></p>
-      </div>
-      <img src="~@/assets/images/community-guidelines/publicGuilds.png">
-    </div>
-    <p v-html="$t('commGuidePara033')"></p>
-    <p v-html="$t('commGuidePara035')"></p>
-    <p v-html="$t('commGuidePara036')"></p>
-    <p v-html="$t('commGuidePara037')"></p>
-    <p v-html="$t('commGuidePara038')"></p>
    <h2 id="infractions-consequences-restoration">
      {{ $t('commGuideHeadingInfractionsEtc') }}
    </h2>
    <h3 id="infractions">
      {{ $t('commGuideHeadingInfractions') }}
    </h3>
-    <div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/infractions.png">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara050')"></p>
-        <p v-html="$t('commGuidePara051')"></p>
-      </div>
-    </div>
+    <img
+      src="~@/assets/images/community-guidelines/infractions.png"
+      class="mb-3"
+    >
+    <p v-html="$t('commGuidePara050')"></p>
+    <p v-html="$t('commGuidePara051')"></p>
    <h4>{{ $t('commGuideHeadingSevereInfractions') }}</h4>
    <p v-html="$t('commGuidePara052')"></p>
    <p v-html="$t('commGuidePara053')"></p>
    <ul>
-      <li v-html="$t('commGuideList05A')"></li>
      <li v-html="$t('commGuideList05B')"></li>
      <li v-html="$t('commGuideList05C')"></li>
      <li v-html="$t('commGuideList05D')"></li>
@@ -101,59 +63,34 @@
      <li v-html="$t('commGuideList05F')"></li>
      <li v-html="$t('commGuideList05G')"></li>
      <li v-html="$t('commGuideList05H')"></li>
+      <li v-html="$t('commGuideList05A')"></li>
    </ul>
    <h4>{{ $t('commGuideHeadingModerateInfractions') }}</h4>
    <p v-html="$t('commGuidePara054')"></p>
    <p v-html="$t('commGuidePara055')"></p>
    <ul>
      <li v-html="$t('commGuideList06A')"></li>
-      <li v-html="$t('commGuideList06B')"></li>
      <li v-html="$t('commGuideList06C')"></li>
-      <li v-html="$t('commGuideList06D')"></li>
      <li v-html="$t('commGuideList06E')"></li>
    </ul>
    <h4>{{ $t('commGuideHeadingMinorInfractions') }}</h4>
    <p v-html="$t('commGuidePara056')"></p>
-    <p v-html="$t('commGuidePara057')"></p>
-    <ul>
-      <li v-html="$t('commGuideList07A')"></li>
-      <li v-html="$t('commGuideList07B')"></li>
-    </ul>
-    <p v-html="$t('commGuidePara057A')"></p>
    <h3 id="consequences">
      {{ $t('commGuideHeadingConsequences') }}
    </h3>
-    <div class="media align-items-center">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara058')"></p>
-        <p v-html="$t('commGuidePara059')"></p>
-      </div>
-      <img src="~@/assets/images/community-guidelines/consequences.png">
-    </div>
-    <p v-html="$t('commGuidePara060')"></p>
-    <ul>
-      <li v-html="$t('commGuideList08A')"></li>
-      <li v-html="$t('commGuideList08B')"></li>
-      <li v-html="$t('commGuideList08C')"></li>
-    </ul>
-    <p v-html="$t('commGuidePara060A')"></p>
-    <p v-html="$t('commGuidePara060B')"></p>
+    <p v-html="$t('commGuidePara059')"></p>
+    <img src="~@/assets/images/community-guidelines/consequences.png">
    <h4>{{ $t('commGuideHeadingSevereConsequences') }}</h4>
    <ul>
      <li v-html="$t('commGuideList09A')"></li>
      <li v-html="$t('commGuideList09C')"></li>
      <li v-html="$t('commGuideList09D')"></li>
+      <li v-html="$t('commGuideList09E')"></li>
    </ul>
    <h4>{{ $t('commGuideHeadingModerateConsequences') }}</h4>
    <ul>
-      <li>
-        {{ $t('commGuideList10A') }}
-        <ul>
-          <li v-html="$t('commGuideList10A1')"></li>
-        </ul>
-      </li>
      <li v-html="$t('commGuideList10D')"></li>
-      <li v-html="$t('commGuideList10F')"></li>
+      <li v-html="$t('commGuideList10G')"></li>
    </ul>
    <h4>{{ $t('commGuideHeadingMinorConsequences') }}</h4>
    <ul>
@@ -166,56 +103,53 @@
    <h3 id="restoration">
      {{ $t('commGuideHeadingRestoration') }}
    </h3>
-    <div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/restoration.png">
-      <div class="media-body">
-        <p v-html="$t('commGuidePara061')"></p>
-        <p v-html="$t('commGuidePara062')"></p>
-      </div>
-    </div>
+    <img
+      src="~@/assets/images/community-guidelines/restoration.png"
+      class="mb-3"
+    >
+    <p v-html="$t('commGuidePara061')"></p>
    <p v-html="$t('commGuidePara063')"></p>
    <h2 id="meet-the-mods">
      {{ $t('commGuideHeadingMeet') }}
    </h2>
    <p v-html="$t('commGuidePara007')"></p>
    <p v-html="$t('commGuidePara009')"></p>
-    <div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/staff.png">
-      <div class="media-body">
-        <ul>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'heyeilatan', realName: 'Natalie'}) }}
-            ({{ $t('commGuideOnGitHub', {gitHubName: 'CuriousMagpie'}) }})
-            - Web Developer
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
-            - Mobile Developer
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
-            ({{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
-            - Co-Founder
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
-            - Art, Community Management, Many Hats
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
-            - Web Developer
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'Apollo', realName: 'Tressley'}) }}
-            - Designer
-          </li>
-          <li>
-            {{ $t('commGuideAKA', {habitName: 'Piyo', realName: 'Sara'}) }}
-            - Mobile Designer
-          </li>
-        </ul>
-      </div>
-    </div>
+    <img
+      src="~@/assets/images/community-guidelines/staff.png"
+      class="mb-3"
+    >
+    <ul>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'heyeilatan', realName: 'Natalie'}) }}
+        ({{ $t('commGuideOnGitHub', {gitHubName: 'CuriousMagpie'}) }})
+        - Web Developer
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
+        ({{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
+        - Co-Founder
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
+        - Art, Community Management, Many Hats
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
+        - Web Developer
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'Apollo', realName: 'Tressley'}) }}
+        - Designer
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'Piyo', realName: 'Sara'}) }}
+        - Mobile Designer
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
+        - Mobile Developer
+      </li>
+    </ul>
    <p v-html="$t('commGuidePara013')"></p>
    <p>
      {{ $t('commGuidePara014') }}<br>
@@ -223,7 +157,6 @@
        Lemoness, lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8,
        Breadstrings, Megan, Blade, Daniel the Bard, deilann, shanaqui, Nakonana,
        Dewines, Alys, Fox_town, MaybeSteveRogers, and Cantras.
-
      </em>
    </p>
    <h2 id="final">
@@ -235,16 +168,12 @@
      {{ $t('commGuideHeadingLinks') }}
    </h2>
    <ul>
-      <li v-html="$t('commGuideLink01')"></li>
-      <li v-html="$t('commGuideLink02')"></li>
+      <li><a href="/static/faq">{{ $t('faq') }}</a></li>
      <li v-html="$t('commGuideLink03')"></li>
      <li v-html="$t('commGuideLink04')"></li>
-      <li v-html="$t('commGuideLink06')"></li>
-      <li v-html="$t('commGuideLink07')"></li>
    </ul>
    <p v-html="$t('commGuidePara069')"></p>
-    <ul class="list-2col list-unstyled">
-      <li>Beffymaroo</li>
+    <ul>
      <li>Breadstrings</li>
      <li>Draayder</li>
      <li>Kiwibot</li>
@@ -258,12 +187,3 @@
    </ul>
  </div>
 </template>
-
-<style lang='scss' scoped>
-  .list-2col {
-    width: 50%;
-    columns: 2;
-    -moz-columns: 2;
-    -webkit-columns: 2;
-  }
-</style>
@@ -35,8 +35,8 @@
          &colon;&nbsp;
          <a
            target="_blank"
-            href="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
-          >Habitica Help guild</a>
+            @click.prevent="openBugReportModal(true)"
+          > {{ $t('askQuestion') }}</a>
          <br>
          {{ $t('businessInquiries') }}
          &colon;&nbsp;
@@ -94,6 +94,11 @@
    }
  }

+  .container-fluid {
+    position: relative;
+    top: 2rem;
+  }
+
  @media only screen and (max-width: 768px) {
    .container-fluid {
      margin: auto;
@@ -31,7 +31,6 @@
    </div>
    <div class="row">
      <div class="col-md-6">
-        <img src="~@/assets/images/marketing/guild.png">
        <h2>{{ $t('marketing2Lead1Title') }}</h2>
        <p>{{ $t('marketing2Lead1') }}</p>
        <img src="~@/assets/images/marketing/vice3.png">
@@ -12,12 +12,15 @@
          <p v-markdown="$t(`webStep${step}Text`, stepVars[step])"></p>
          <hr>
        </div>
-        <p
-          v-markdown="$t('overviewQuestions', {
-            faqUrl: '/static/faq/',
-            helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'
-          })"
-        ></p>
+        <p>
+          <span v-html="$t('overviewQuestionsRevised')"></span>
+          <a
+            target="_blank"
+            @click.prevent="openBugReportModal(true)"
+          >
+            {{ $t('askQuestion') }}
+          </a>
+        </p>
      </div>
    </div>
  </div>
@@ -35,11 +38,13 @@

 <script>
 import markdownDirective from '@/directives/markdown';
+import reportBug from '@/mixins/reportBug.js';

 export default {
  directives: {
    markdown: markdownDirective,
  },
+  mixins: [reportBug],
  data () {
    return {
      stepsNum: ['1', '2', '3'],
@@ -1,11 +1,12 @@
 <template>
  <div>
+    <chat-banner />
    <static-header
-      v-if="showContentWrap"
-      :class="{
-        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-        'white-header': this.$route.name === 'plans'
-      }"
+    v-if="showContentWrap"
+    :class="{
+      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+      'white-header': this.$route.name === 'plans'
+    }"
    />
    <div class="static-wrapper">
      <router-view />
@@ -243,11 +244,13 @@

 <script>
 import AppFooter from '@/components/appFooter';
+import ChatBanner from '@/components/header/banners/chatBanner';
 import StaticHeader from './header.vue';

 export default {
  components: {
    AppFooter,
+    ChatBanner,
    StaticHeader,
  },
  computed: {
@@ -12,7 +12,10 @@
 </template>

 <style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
  .modal-close {
+    color: $black;
    position: absolute;
    right: 16px;
    top: 16px;
@@ -22,10 +25,10 @@
      width: 18px;
      height: 18px;
      vertical-align: middle;
-      opacity: 0.75;
+      opacity: 0.5;

      &:hover {
-        opacity: 1;
+        opacity: 0.75;
      }
    }
  }
@@ -190,10 +190,14 @@
        class="col-12 col-md-6"
      >
        <div class="row col-12 stats-column">
-          <div
-            :id="`${stat}-information`"
-            class="col-12 col-md-4 attribute-label"
-          >
+          <div class="col-12 col-md-4 attribute-label">
+            <span
+              class="hint"
+              :popover-title="$t(statInfo.title)"
+              popover-placement="right"
+              :popover="$t(statInfo.popover)"
+              popover-trigger="mouseenter"
+            ></span>
            <div
              class="stat-title"
              :class="stat"
@@ -202,13 +206,6 @@
            </div>
            <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
          </div>
-          <b-popover
-            :target="`${stat}-information`"
-            triggers="hover focus"
-            placement="right"
-            :prevent-overflow="false"
-            :content="$t(statInfo.popover)"
-          />
          <div class="col-12 col-md-6">
            <ul class="bonus-stats">
              <li>
@@ -358,7 +355,7 @@ export default {
      },

      allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
+        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
        int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
        con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
        per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -367,7 +364,7 @@ export default {
      stats: {
        str: {
          title: 'strength',
-          popover: 'strText',
+          popover: 'strengthText',
        },
        int: {
          title: 'intelligence',
@@ -53,15 +53,6 @@ export default {
            hideNavigation: true,
          },
        ]],
-        tavern: [[
-          {
-            orphan: true,
-            intro: this.$t('tourTavernPage'),
-            final: true,
-            proceed: this.$t('awesome'),
-            hideNavigation: true,
-          },
-        ]],
        party: [[
          {
            orphan: true,
@@ -71,11 +62,6 @@ export default {
            hideNavigation: true,
          },
        ]],
-        guilds: [[
-          {
-            intro: this.$t('tourGuildsPage'),
-          },
-        ]],
        challenges: [[
          {
            intro: this.$t('tourChallengesPage'),
@@ -129,9 +115,7 @@ export default {
      switch (this.$route.name) { // eslint-disable-line default-case
        // case 'options.profile.avatar':   return goto('intro', 5);
        case 'stats': return this.goto('stats', 0);
-        case 'tavern': return this.goto('tavern', 0);
        case 'party': return this.goto('party', 0);
-        case 'guildsDiscovery': return this.goto('guilds', 0);
        case 'challenges': return this.goto('challenges', 0);
        case 'patrons': return this.goto('hall', 0);
        case 'items': return this.goto('market', 0);
@@ -2,7 +2,8 @@ import { MODALS } from '@/libs/consts';

 export default {
  methods: {
-    openBugReportModal () {
+    openBugReportModal (questionMode = false) {
+      this.$store.state.bugReportOptions.question = questionMode;
      this.$root.$emit('bv::show::modal', MODALS.BUG_REPORT);
    },
  },
@@ -28,6 +28,7 @@ const NewsPage = () => import(/* webpackChunkName: "static" */'@/components/stat
 const OverviewPage = () => import(/* webpackChunkName: "static" */'@/components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'@/components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'@/components/static/privacy');
+const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
 const TermsPage = () => import(/* webpackChunkName: "static" */'@/components/static/terms');

 const RegisterLoginReset = () => import(/* webpackChunkName: "auth" */'@/components/auth/registerLoginReset');
@@ -74,10 +75,6 @@ const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'@/compone
 const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/stable/index');

 // Guilds & Parties
-const GuildIndex = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/index');
-const TavernPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/tavern');
-const MyGuilds = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/myGuilds');
-const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/discovery');
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
 const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
@@ -189,23 +186,20 @@ const router = new VueRouter({
    },
    {
      path: '/groups',
-      component: GuildIndex,
+      component: NotFoundPage,
      children: [
-        { name: 'tavern', path: 'tavern', component: TavernPage },
+        { name: 'tavern', path: 'tavern' },
        {
          name: 'myGuilds',
          path: 'myGuilds',
-          component: MyGuilds,
        },
        {
          name: 'guildsDiscovery',
          path: 'discovery',
-          component: GuildsDiscoveryPage,
        },
        {
          name: 'guild',
          path: 'guild/:groupId',
-          component: GroupPage,
          props: true,
        },
      ],
@@ -312,6 +306,9 @@ const router = new VueRouter({
        {
          name: 'faq', path: 'faq', component: FAQPage, meta: { requiresLogin: false },
        },
+        {
+          name: 'chatSunsetFaq', path: 'tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+        },
        {
          name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
        },
@@ -382,6 +379,7 @@ const router = new VueRouter({

    // Only used to handle some redirects
    // See router.beforeEach
+    { path: '/static/faq/tavern-and-guilds', redirect: '/static/tavern-and-guilds' },
    { path: '/redirect/:redirect', name: 'redirect' },
    { path: '*', redirect: { name: 'notFound' } },
  ],
@@ -462,6 +460,21 @@ router.beforeEach(async (to, from, next) => {
    });
  }

+  // Redirect from Guild link to Group Plan where possible
+  if (to.name === 'guild') {
+    await store.dispatch('guilds:getGroupPlans');
+    const { groupPlans } = store.state;
+    const groupPlanIds = groupPlans.data.map(groupPlan => groupPlan._id);
+    if (groupPlanIds.indexOf(to.params.groupId) !== -1) {
+      return next({
+        name: 'groupPlanDetailInformation',
+        params: {
+          groupId: to.params.groupId,
+        },
+      });
+    }
+  }
+
  // Redirect old challenge urls
  if (to.hash.indexOf('#/options/groups/challenges/') !== -1) {
    const splits = to.hash.split('/');
@@ -509,4 +522,10 @@ router.beforeEach(async (to, from, next) => {
  return next();
 });

+router.afterEach((to, from) => {
+  if (from.name === 'chatSunsetFaq') {
+    document.body.style.background = '#f9f9f9';
+  }
+});
+
 export default router;
@@ -148,6 +148,9 @@ export default function () {
        egg: '',
        hatchingPotion: '',
      },
+      bugReportOptions: {
+        question: false,
+      },
    },
  });