Subscription Page Overhaul (#11823)

* WIP(settings): subscriber page improvements

* WIP(subscriptions): more design build-out

* fix(css): disabled button styles

* fix(css): better Amazon targeting

* WIP(g1g1): notif

* WIP(g1g1): notif cont'd

* WIP(gifting): partial modal implementation

* feat(gifting): select giftee modal

* fix(gifting): notification order, modal dismiss

* fix(modals): correct some repops

* fix(gifting): style updates

* fix(modals): also clean out "prev"

* refactor(modals): hide in dismiss event

* fix(modals): new dismiss logic

* fix(modals): new dismiss no go??

* WIP(subscription): unsubscribed state

* WIP(subscription): partial subscribed

* WIP(subscription): finish subscribed

* feat(subscription): revised sub page RC

* fix(subs): style tweaks

* fix(subs): moar style tweaks

website/client/src/components/payments/successModal.vue

@@ -2,7 +2,6 @@
   <b-modal
     id="payments-success-modal"
     :title="$t('accountSuspendedTitle')"
-    size="sm"
     :hide-footer="isFromBalance"
     :modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
   >
@@ -102,6 +101,10 @@
 <style lang="scss">
 @import '~@/assets/scss/colors.scss';
 
+#payments-success-modal .modal-md {
+  max-width: 20.5rem;
+}
+
 #payments-success-modal .modal-content {
   background: transparent;
 }
@@ -115,7 +118,7 @@
   justify-content: center;
   padding-top: 24px;
   padding-bottom: 0px;
-  background: $green-10;
+  background: $green-100;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   border-bottom: none;
@@ -241,6 +244,7 @@ export default {
   methods: {
     close () {
       this.paymentData = {};
+      this.$root.$emit('habitica::dismiss-modal', 'payments-success-modal');
       this.$root.$emit('bv::hide::modal', 'payments-success-modal');
     },
   },