feat(teams): beta testing banner

website/client/src/app.vue

@@ -42,6 +42,7 @@
           <damage-paused-banner />
           <gems-promo-banner />
           <gift-promo-banner />
+          <teams-testing-banner />
           <notifications-display />
           <app-menu />
           <div
@@ -158,6 +159,7 @@ import AppHeader from './components/header/index';
 import DamagePausedBanner from './components/header/banners/damagePaused';
 import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
+import TeamsTestingBanner from './components/header/banners/teamsTesting';
 import AppFooter from './components/appFooter';
 import notificationsDisplay from './components/notifications';
 import snackbars from './components/snackbars/notifications';
@@ -194,6 +196,7 @@ export default {
     DamagePausedBanner,
     GemsPromoBanner,
     GiftPromoBanner,
+    TeamsTestingBanner,
     notificationsDisplay,
     snackbars,
     BuyModal,

website/client/src/components/group-plans/index.vue

@@ -28,40 +28,12 @@
         {{ $t('groupBilling') }}
       </router-link>
     </secondary-menu>
-    <div
-      class="row beta-banner d-flex justify-content-center align-items-center"
-    >
-      <img src="~@/assets/images/bug.png" class="mr-2">
-      <strong
-        class="mr-1"
-      >
-        Thank you for being a Habitica beta tester!
-      </strong>
-      <a href="mailto:testing@habitica.com">Submit bugs and feedback to testing@habitica.com.</a>
-    </div>
     <div class="col-12 px-0">
       <router-view />
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .beta-banner {
-    background-color: rgba($purple-600, 0.25);
-    border: solid 1px $purple-500;
-    color: $purple-300;
-    height: 2rem;
-    width: 101%;
-
-    a {
-      color: $purple-300;
-      text-decoration: underline;
-    }
-  }
-</style>
-
 <script>
 import groupFormModal from '@/components/groups/groupFormModal';
 import SecondaryMenu from '@/components/secondaryMenu';

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

@@ -0,0 +1,70 @@
+<template>
+  <base-banner
+    banner-id="teams-testing"
+    banner-class="testing-banner"
+    height="48px"
+    :canClose="false"
+  >
+    <div
+      slot="content"
+      class="content m-auto d-flex justify-content-center align-items-center"
+    >
+      <img src="~@/assets/images/bug.png" class="mr-11px">
+      <span class="mr-1">
+        <strong>You're using the Habitica Groups Beta.</strong>
+      </span>
+      <a href="mailto:testing@habitica.com" class="send-feedback">
+        Please submit bugs and feedback here.
+      </a>
+      <img src="~@/assets/images/bug.png" class="ml-11px flip">
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.testing-banner {
+  background-color: $black;
+  background-image: url('~@/assets/images/group-plans/purple-diagonal.png');
+
+  .content {
+    line-height: 1.71;
+    color: $white;
+  }
+
+  @media only screen and (max-width: 992px) {
+    .content {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+  }
+
+  .flip {
+    transform: scaleX(-1);
+  }
+
+  .ml-11px {
+    margin-left: 11px;
+  }
+
+  .mr-11px {
+    margin-right: 11px;
+  }
+
+  .send-feedback {
+    color: $white;
+    text-decoration: underline;
+  }
+}
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+};
+</script>