From edb606814c3496da3480a512848e08e7906b0c48 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Fri, 22 Apr 2022 15:47:55 -0500
Subject: [PATCH] feat(teams): beta testing banner

---
 website/client/src/app.vue                    |   3 +
 .../images/group-plans/purple-diagonal.png    | Bin 0 -> 410 bytes
 .../src/components/group-plans/index.vue      |  28 -------
 .../header/banners/teamsTesting.vue           |  70 ++++++++++++++++++
 4 files changed, 73 insertions(+), 28 deletions(-)
 create mode 100644 website/client/src/assets/images/group-plans/purple-diagonal.png
 create mode 100644 website/client/src/components/header/banners/teamsTesting.vue

diff --git a/website/client/src/app.vue b/website/client/src/app.vue
index 37907feac8..a52a55fc5b 100644
--- a/website/client/src/app.vue
+++ b/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,
diff --git a/website/client/src/assets/images/group-plans/purple-diagonal.png b/website/client/src/assets/images/group-plans/purple-diagonal.png
new file mode 100644
index 0000000000000000000000000000000000000000..f928a387f71fe17a6f3e77a06995a64a1869417a
GIT binary patch
literal 410
zcmeAS@N?(olHy`uVBq!ia0vp^8bEBo!3HFgt1V^&DVB6cUq=Rpjs4tz5?O(Ki_{3u
zG+$o^Eg+kNfw4W4fd$B71Y#*5W?*1izyuf3SilTt8-OG^_szHpRLtw?;usRadG>-e
zU$cRL>qQIJbt@+2s&#u#leE&hEHIOav+>~k?`g-DKD{UtU#>jweD=3@<~CX3CFlIV
z-+DO5(!Qtm-0my0KfH05GPpMT*@dOk;_n`>dcU6AL}5|f9~Rb*Rqo7-UIjLss1i}w
zBq!6cj-7qcYsbc(ssM$>ay%ziu`_Ra<=AkhN<d+AobiO%^^zynU1yoH0))ePr>p{F
z)+uYkL6~RCIxuFrvLYOar}JJ}1;(sb)=UTDa?UI3z?f@Gz<ZI5g>ga|OF{Ua;)S5S
z&I^`SSufZM#?lLpR)Mhgg{-}z8C&l$ZHdWej9Mq&SbuMsY`W6(2tH5%dAj<!taD0e
F0s!4Ylvw}(

literal 0
HcmV?d00001

diff --git a/website/client/src/components/group-plans/index.vue b/website/client/src/components/group-plans/index.vue
index c6023ad1c4..c49a9fa846 100644
--- a/website/client/src/components/group-plans/index.vue
+++ b/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';
diff --git a/website/client/src/components/header/banners/teamsTesting.vue b/website/client/src/components/header/banners/teamsTesting.vue
new file mode 100644
index 0000000000..4db36ecc46
--- /dev/null
+++ b/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>