Drop Cap Notification, Modal and A/B Test (#12651)

* add drop cap notification

* add drop cap notification

* add dismissible notification

* fix(notification): correct remove icon positioning

* track events

* add modal

* add back files

* fix links and add missing analytics

* fix rounded borders and hide sub info for subscribers

* a/b test

* fix comparison

* Translated using Weblate (Spanish)

Currently translated at 98.2% (55 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/es/

Translated using Weblate (Spanish)

Currently translated at 99.4% (179 of 180 strings)

Translation: Habitica/Settings
Translate-URL: https://translate.habitica.com/projects/habitica/settings/es/

Merge branch 'origin/develop' into Weblate.

Translated using Weblate (Spanish)

Currently translated at 99.4% (175 of 176 strings)

Translation: Habitica/Subscriber
Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/es/

Translated using Weblate (Spanish (Latin America))

Currently translated at 98.6% (359 of 364 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/es_419/

Translated using Weblate (Spanish)

Currently translated at 85.7% (151 of 176 strings)

Translation: Habitica/Subscriber
Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/es/

Translated using Weblate (Spanish)

Currently translated at 95.3% (538 of 564 strings)

Translation: Habitica/Backgrounds
Translate-URL: https://translate.habitica.com/projects/habitica/backgrounds/es/

Translated using Weblate (Spanish (Latin America))

Currently translated at 98.6% (359 of 364 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/es_419/

Translated using Weblate (French)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/fr/

Translated using Weblate (German)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/de/

Translated using Weblate (French)

Currently translated at 100.0% (718 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/fr/

Translated using Weblate (German)

Currently translated at 100.0% (718 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/de/

Translated using Weblate (Czech)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Spells
Translate-URL: https://translate.habitica.com/projects/habitica/spells/cs/

Translated using Weblate (Japanese)

Currently translated at 100.0% (175 of 175 strings)

Translation: Habitica/Subscriber
Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/ja/

Translated using Weblate (Italian)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/it/

Translated using Weblate (Italian)

Currently translated at 100.0% (718 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/it/

Translated using Weblate (Czech)

Currently translated at 100.0% (180 of 180 strings)

Translation: Habitica/Settings
Translate-URL: https://translate.habitica.com/projects/habitica/settings/cs/

Translated using Weblate (Basque)

Currently translated at 100.0% (2 of 2 strings)

Translation: Habitica/Noscript
Translate-URL: https://translate.habitica.com/projects/habitica/noscript/eu/

Translated using Weblate (Basque)

Currently translated at 6.5% (8 of 123 strings)

Translation: Habitica/Communityguidelines
Translate-URL: https://translate.habitica.com/projects/habitica/communityguidelines/eu/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/zh_Hans/

Translated using Weblate (Japanese)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/ja/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (718 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/zh_Hans/

Translated using Weblate (Portuguese (Brazil))

Currently translated at 100.0% (718 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/pt_BR/

Translated using Weblate (Portuguese (Brazil))

Currently translated at 99.8% (717 of 718 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/pt_BR/

* clarify a/b test values

* add tests

* refactor user dropdown

* fix hover state

* fix user dropdown

* fix user menu hierarchy

* restore i18n files to release version

Co-authored-by: Melior <admin@habitica.com>

website/client/src/components/header/userDropdown.vue

@@ -23,13 +23,6 @@
       slot="dropdown-content"
       class="user-dropdown"
     >
-      <a
-        class="topbar-dropdown-item dropdown-item edit-avatar dropdown-separated"
-        @click="showAvatar('body', 'size')"
-      >
-        <h3>{{ user.profile.name }}</h3>
-        <span class="small-text">{{ $t('editAvatar') }}</span>
-      </a>
       <a
         class="topbar-dropdown-item nav-link dropdown-item
          dropdown-separated d-flex justify-content-between align-items-center"
@@ -43,20 +36,20 @@
       </a>
       <a
         class="topbar-dropdown-item dropdown-item"
-        @click="showAvatar('backgrounds', '2020')"
-      >{{ $t('backgrounds') }}</a>
+        @click="showAvatar('body', 'size')"
+      >{{ $t('editAvatar') }}</a>
+      <a
+        class="topbar-dropdown-item dropdown-item"
+        @click="showProfile('profile')"
+      >{{ $t('profile') }}</a>
       <a
         class="topbar-dropdown-item dropdown-item"
         @click="showProfile('stats')"
       >{{ $t('stats') }}</a>
       <a
-        class="topbar-dropdown-item dropdown-item"
+        class="topbar-dropdown-item dropdown-item dropdown-separated"
         @click="showProfile('achievements')"
       >{{ $t('achievements') }}</a>
-      <a
-        class="topbar-dropdown-item dropdown-item dropdown-separated"
-        @click="showProfile('profile')"
-      >{{ $t('profile') }}</a>
       <router-link
         class="topbar-dropdown-item dropdown-item"
         :to="{name: 'site'}"
@@ -75,19 +68,36 @@
       >{{ $t('logout') }}</a>
       <li
         v-if="!user.purchased.plan.customerId"
-        @click="showBuyGemsModal()"
+        class="topbar-dropdown-item dropdown-item dropdown-separated
+          d-flex flex-column justify-content-center align-items-center dropdown-inactive subs-info"
       >
-        <div class="topbar-dropdown-item dropdown-item text-center">
-          <h3 class="purple">
-            {{ $t('needMoreGems') }}
-          </h3>
-          <span class="small-text">{{ $t('needMoreGemsInfo') }}</span>
-        </div>
-        <div class="learn-background py-2 text-center">
-          <button class="btn btn-primary btn-lg learn-button">
-            {{ $t('learnMore') }}
-          </button>
-        </div>
+        <span
+          v-once
+          class="purple d-block font-weight-bold mb-3"
+        >
+          {{ $t('lookingForMoreItems') }}
+        </span>
+        <img
+          class="swords mb-3"
+          srcset="
+        ~@/assets/images/swords.png,
+        ~@/assets/images/swords@2x.png 2x,
+        ~@/assets/images/swords@3x.png 3x"
+          src="~@/assets/images/swords.png"
+        >
+        <p
+          v-once
+          class="subs-benefits mb-3"
+        >
+          {{ $t('dropCapSubs') }}
+        </p>
+        <button
+          v-once
+          class="btn btn-primary mb-4"
+          @click="$router.push({name: 'subscription'})"
+        >
+          {{ $t('learnMore') }}
+        </button>
       </li>
     </div>
   </menu-dropdown>
@@ -96,39 +106,30 @@
 <style lang='scss' scoped>
 @import '~@/assets/scss/colors.scss';
 
-.edit-avatar {
-  h3 {
-    color: $gray-10;
-    margin-bottom: 0px;
-  }
-
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
 .user-dropdown {
   width: 14.75em;
 }
 
-.learn-background {
-    background: url('~@/assets/images/gem-rain.png') bottom left no-repeat,
-                url('~@/assets/images/gold-rain.png') bottom right no-repeat;
-}
-
-.learn-button {
-  margin: 0.75em 0.75em 0.75em 1em;
-}
-
 .purple {
-  color: $purple-200;
+  color: $purple-300;
 }
 
-.small-text {
-  color: $gray-200;
+.subs-info {
+  padding-top: 1.438rem;
+  padding-bottom: 0;
+}
+
+.subs-benefits {
+  font-size: 0.75rem;
+  line-height: 1.33;
   font-style: normal;
-  display: block;
   white-space: normal;
-  font-weight: bold;
+  text-align: center;
+}
+
+.swords {
+  width: 7rem;
+  height: 3rem;
 }
 </style>