From e16c12fc7fb7bb35e4c8c801cb601ad373c7dbdc Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Tue, 31 May 2022 10:38:14 -0500
Subject: [PATCH] Revert "Gifting Modal Redesign (#13964)"

This reverts commit 761d70ec55ee18150dd85076930016958ff13569.
---
 website/client/src/assets/svg/big-gift.svg    |  27 -
 website/client/src/assets/svg/close.svg       |  14 +-
 website/client/src/components/header/menu.vue |   6 +-
 .../src/components/payments/buttons/list.vue  |   8 -
 .../components/payments/selectUserModal.vue   | 132 +---
 .../src/components/payments/sendGiftModal.vue | 634 ------------------
 .../src/components/settings/subscription.vue  |   4 +
 .../src/components/userMenu/profile.vue       |   3 +-
 website/client/src/store/index.js             |   3 -
 website/common/locales/en/groups.json         |   1 -
 website/common/locales/en/subscriber.json     |   7 +-
 11 files changed, 31 insertions(+), 808 deletions(-)
 delete mode 100644 website/client/src/assets/svg/big-gift.svg
 delete mode 100644 website/client/src/components/payments/sendGiftModal.vue

diff --git a/website/client/src/assets/svg/big-gift.svg b/website/client/src/assets/svg/big-gift.svg
deleted file mode 100644
index 1d756e4dfa..0000000000
--- a/website/client/src/assets/svg/big-gift.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="176" height="67" viewBox="0 0 176 67" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#77F4C7" d="M35.667 11.667 40 9.5l-4.333-2.167L33.5 3l-2.167 4.333L27 9.5l4.333 2.167L33.5 16z"/>
-        <path fill="#BDA8FF" d="M24.667 38.667 30 36l-5.333-2.667L22 28l-2.667 5.333L14 36l5.333 2.667L22 44z"/>
-        <path fill="#8EEDF6" d="M35.667 63.667 39 62l-3.333-1.667L34 57l-1.667 3.333L29 62l3.333 1.667L34 67z"/>
-        <path fill="#FFBE5D" d="M6.667 49.667 10 48l-3.333-1.667L5 43l-1.667 3.333L0 48l3.333 1.667L5 53z"/>
-        <path fill="#FFB6B8" d="M5.667 20.667 8 19.5l-2.333-1.167L4.5 16l-1.167 2.333L1 19.5l2.333 1.167L4.5 23z"/>
-        <g>
-            <path fill="#77F4C7" d="M140.333 11.667 136 9.5l4.333-2.167L142.5 3l2.167 4.333L149 9.5l-4.333 2.167L142.5 16z"/>
-            <path fill="#BDA8FF" d="M151.333 38.667 146 36l5.333-2.667L154 28l2.667 5.333L162 36l-5.333 2.667L154 44z"/>
-            <path fill="#8EEDF6" d="M140.333 63.667 137 62l3.333-1.667L142 57l1.667 3.333L147 62l-3.333 1.667L142 67z"/>
-            <path fill="#FFBE5D" d="M169.333 49.667 166 48l3.333-1.667L171 43l1.667 3.333L176 48l-3.333 1.667L171 53z"/>
-            <path fill="#FFB6B8" d="M170.333 20.667 168 19.5l2.333-1.167L171.5 16l1.167 2.333L175 19.5l-2.333 1.167L171.5 23z"/>
-        </g>
-        <g>
-            <path d="M81.117 13.904c-2.139-4.838-6.274-9.113-11.25-9.324-4.976-.211-7.828 3.779-6.367 7.309 1.461 3.53 4.94 4.177 16.227 7.202 3.204.858 3.528-.35 1.39-5.187z" stroke="#22AEB7" stroke-width="4"/>
-            <path d="M93.833 13.904c2.138-4.838 6.273-9.113 11.25-9.324 4.975-.211 7.828 3.779 6.367 7.309-1.462 3.53-4.94 4.177-16.227 7.202-3.205.858-3.528-.35-1.39-5.187z" stroke="#38C9C6" stroke-width="4"/>
-            <path d="M87.128 11c-9.738 0-3.907 11.145 0 11.145 3.908 0 9.74-11.145 0-11.145z" fill="#46DDDA"/>
-            <path fill="#6133B4" d="M62 33h52v34H62zM56 21h64v12H56z"/>
-            <path fill-opacity=".5" fill="#FFF" style="mix-blend-mode:soft-light" d="M32 30h26v34H32z" transform="translate(56 3)"/>
-            <path fill="#8EEDF6" d="M88 33h6v34h-6z"/>
-            <path fill="#3BCAD7" d="M82 33h6v34h-6zM76 21h12v12H76z"/>
-            <path fill="#8EEDF6" d="M88 21h12v12H88z"/>
-            <path fill-opacity=".2" fill="#000" style="mix-blend-mode:multiply" d="M6 30h26v6H6zM20 18h12v6H20zM0 24h20v6H0zM44 24h20v6H44zM32 18h12v6H32zM6 58h26v6H6zM32 30h26v6H32zM32 58h26v6H32z" transform="translate(56 3)"/>
-        </g>
-    </g>
-</svg>
diff --git a/website/client/src/assets/svg/close.svg b/website/client/src/assets/svg/close.svg
index 398440da99..5070218c06 100644
--- a/website/client/src/assets/svg/close.svg
+++ b/website/client/src/assets/svg/close.svg
@@ -1,11 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Icon/Close</title>
-    <g id="Modals" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Shop-Modals" transform="translate(-183.000000, -655.000000)" fill="#878190" fill-rule="nonzero">
-            <g id="Icon/Close" transform="translate(183.000000, 655.000000)">
-                <polygon id="Mask" points="12.1973467 2 14 3.80265326 9.80187117 8 14 12.1973467 12.1973467 14 8 9.80187117 3.80265326 14 2 12.1973467 6.19812883 8 2 3.80265326 3.80265326 2 8 6.19812883"></polygon>
-            </g>
-        </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2">
+        <path d="M1 11L11 1M11 11L1 1"/>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index fbfdaed141..d77c6f8e0d 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -3,7 +3,7 @@
     <creator-intro />
     <profileModal />
     <report-flag-modal />
-    <send-gift-modal />
+    <send-gems-modal />
     <select-user-modal />
     <b-navbar
       id="habitica-menu"
@@ -747,7 +747,7 @@ import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
 import reportFlagModal from '../chat/reportFlagModal';
-import sendGiftModal from '@/components/payments/sendGiftModal';
+import sendGemsModal from '@/components/payments/sendGemsModal';
 import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
 import userDropdown from './userDropdown';
@@ -759,7 +759,7 @@ export default {
     notificationMenu,
     profileModal,
     reportFlagModal,
-    sendGiftModal,
+    sendGemsModal,
     selectUserModal,
     userDropdown,
   },
diff --git a/website/client/src/components/payments/buttons/list.vue b/website/client/src/components/payments/buttons/list.vue
index d8e5f7952d..5f06500061 100644
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/website/client/src/components/payments/buttons/list.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="payments-column mx-auto mt-auto">
-    <h4>{{ $t('choosePaymentMethod') }}</h4>
     <button
       v-if="stripeAvailable"
       class="btn btn-primary payment-button payment-item with-icon"
@@ -81,13 +80,6 @@
       cursor: default !important;
     }
   }
-
-  h4 {
-    font-size: 0.875rem;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 1rem;
-  }
 </style>
 
 <script>
diff --git a/website/client/src/components/payments/selectUserModal.vue b/website/client/src/components/payments/selectUserModal.vue
index 818b98c621..16a624dd0a 100644
--- a/website/client/src/components/payments/selectUserModal.vue
+++ b/website/client/src/components/payments/selectUserModal.vue
@@ -14,44 +14,15 @@
     </div>
     <h2
       v-else
-      class="d-flex flex-column mx-auto align-items-center"
+      class="ml-2"
     >
-      {{ $t('sendAGift') }}
+      {{ $t('sendGift') }}
     </h2>
-    <div
-      v-if="currentEvent && currentEvent.promo === 'g1g1'"
-      class="g1g1-margin d-flex flex-column align-items-center"
-    >
-    <div
-      class="svg-big-gift"
-      v-once
-      v-html="icons.bigGift"
-    ></div>
-    </div>
-    <div
-    v-else
-    class="d-flex flex-column align-items-center">
-      <div
-        class="svg-big-gift"
-        v-once
-        v-html="icons.bigGift"
-      ></div>
-    </div>
     <div class="d-flex flex-column align-items-center">
       <div
-        v-if="currentEvent && currentEvent.promo === 'g1g1'"
-        class="g1g1-modal-close"
+        class="modal-close"
         @click="close()"
       >
-        <div
-          class="g1g1-svg-icon"
-          v-html="icons.close"
-        ></div>
-      </div>
-      <div
-      v-else
-      class="modal-close"
-      @click="close()">
         <div
           class="svg-icon"
           v-html="icons.close"
@@ -71,7 +42,6 @@
             v-model="userSearchTerm"
             class="form-control"
             type="text"
-            ref="textBox"
             :placeholder="$t('usernameOrUserId')"
             :class="{
               'input-valid': foundUser._id,
@@ -100,20 +70,15 @@
             <div
               v-else
             >
-              {{ $t('next') }}
+              {{ $t('selectGift') }}
             </div>
           </button>
-          <div
-          v-if="currentEvent && currentEvent.promo ==='g1g1'"
-          class="g1g1-cancel d-flex justify-content-center"
-          v-html="$t('cancel')"
-          @click="close()"
+          <a
+            class="cancel-link mx-auto mt-3"
+            @click="close()"
           >
-          {{ $t('cancel') }}
-        </div>
-        <div
-        v-else>
-        </div>
+            {{ $t('cancel') }}
+          </a>
         </div>
       </div>
     </div>
@@ -145,16 +110,13 @@
   @import '~@/assets/scss/mixins.scss';
 
   #select-user-modal {
-    .modal-content {
-      width:448px;
-    }
-
     .input-group {
       margin-top: 0rem;
     }
 
     .modal-dialog {
-      width: 448px;
+      width: 29.5rem;
+      margin-top: 25vh;
     }
 
     .modal-footer {
@@ -164,16 +126,7 @@
         margin: 0rem 0.25rem 0.25rem 0.25rem;
       }
     }
-
-    body.modal-open .modal {
-      display: flex !important;
-      height: 100%;
-    }
-
-    body.modal-open .modal .modal-dialog {
-        margin: auto;
-    }
-}
+  }
 </style>
 
 <style lang="scss" scoped>
@@ -193,12 +146,12 @@
 
   .g1g1 {
     background-image: url('~@/assets/images/g1g1-send.png');
-    background-size: 446px 152px;
-    width: 446px;
+    background-size: 472px 152px;
+    width: 470px;
     height: 152px;
-    margin: -16px 0px 0px -16px;
-    border-radius: 4.8px 4.8px 0px 0px;
-    padding: 24px;
+    margin: -1rem 0rem 0rem -1rem;
+    border-radius: 0.3rem 0.3rem 0rem 0rem;
+    padding: 1.5rem;
     color: $white;
 
     h1 {
@@ -216,16 +169,6 @@
     }
   }
 
-  .g1g1-margin {
-    margin-top: 24px;
-  }
-
-  .g1g1-cancel {
-    margin-top: 16px;
-    color: $blue-10;
-    cursor: pointer;
-  }
-
   .g1g1-fine-print {
     color: $gray-100;
     background-color: $gray-700;
@@ -233,29 +176,6 @@
     line-height: 1.33;
   }
 
-  .g1g1-modal-close {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
-
-    .g1g1-svg-icon {
-      width: 12px;
-      height: 12px;
-
-      & ::v-deep svg path {
-        fill: #FFFFFF;
-      }
-    }
-  }
-
-  .g1g1-modal-dialog {
-    margin-top: 10vh;
-  }
-
   .input-error {
     color: $red-50;
     font-size: 90%;
@@ -272,18 +192,6 @@
     border-color: $purple-500;
   }
 
-  h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    color: $purple-300;
-    padding-top: 1rem;
-  }
-
-  .svg-big-gift {
-    width: 176px;
-    height: 64px;
-  }
-
   .modal-close {
     position: absolute;
     width: 18px;
@@ -298,17 +206,14 @@
       height: 12px;
     }
   }
-
 </style>
 
 <script>
-// import { nextTick } from 'vue'; // may not need this? I don't know!
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
 import isUUID from 'validator/lib/isUUID';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';
-import bigGiftIcon from '@/assets/svg/big-gift.svg';
 
 export default {
   data () {
@@ -318,7 +223,6 @@ export default {
       foundUser: {},
       icons: Object.freeze({
         close: closeIcon,
-        bigGift: bigGiftIcon,
       }),
     };
   },
@@ -377,7 +281,7 @@ export default {
       this.foundUser = result;
     }, 500),
     selectUser () {
-      this.$root.$emit('habitica::send-gift', this.foundUser);
+      this.$root.$emit('habitica::send-gems', this.foundUser);
       this.close();
     },
     onHide () {
diff --git a/website/client/src/components/payments/sendGiftModal.vue b/website/client/src/components/payments/sendGiftModal.vue
deleted file mode 100644
index 198e5f3301..0000000000
--- a/website/client/src/components/payments/sendGiftModal.vue
+++ /dev/null
@@ -1,634 +0,0 @@
-<template>
-  <b-modal
-    id="send-gift"
-    :hide-footer="true"
-    :hide-header="true"
-    size="md"
-    @hide="onHide()"
-  >
-    <div>
-      <!-- header -->
-      <div
-        class="modal-close"
-        @click="close()"
-      >
-        <div
-          class="icon-close"
-          v-html="icons.closeIcon"
-        >
-        </div>
-      </div>
-      <div>
-        <h2 class="d-flex flex-column mx-auto align-items-center">
-          {{ $t('sendAGift') }}
-        </h2>
-      </div>
-
-      <!-- user avatar -->
-      <div
-        v-if="userReceivingGift"
-        class="modal-body"
-      >
-        <avatar
-          :member="userReceivingGift"
-          :hideClassBadge="true"
-          class="d-flex flex-column mx-auto align-items-center"
-        />
-        <div class="avatar-spacer"></div>
-        <div class="d-flex flex-column mx-auto align-items-center display-name">
-          <!-- user display name and username -->
-          <user-link
-            :user-id="displayName"
-            :name="displayName"
-            :backer="userBacker"
-            :contributor="userContributor"
-            :class="display-name"
-          />
-        </div>
-        <div class="d-flex flex-column mx-auto align-items-center user-name">
-          @{{ userName }}
-        </div>
-      </div>
-
-      <!-- menu area -->
-      <div class="row">
-        <div class="col-12 col-md-8 offset-md-2 text-center nav">
-          <div
-            class="nav-item"
-            :class="{active: selectedPage === 'subscription'}"
-            @click="selectPage('subscription')"
-          >
-            {{ $t('subscription') }}
-          </div>
-          <div
-            class="nav-item"
-            :class="{active: selectedPage !== 'subscription'}"
-            @click="selectPage('buyGems')"
-          >
-            {{ $t('gems') }}
-          </div>
-        </div>
-      </div>
-
-      <!-- subscriber block -->
-      <subscription-options
-        v-show="selectedPage === 'subscription'"
-        class="subscribe-option"
-      />
-
-      <!-- gem block -->
-      <div
-        v-show="selectedPage === 'buyGems'"
-      >
-        <div class="gem-group">
-          <!-- buy gems with money -->
-          <label v-once>
-            {{ $t('howManyGemsPurchase') }}
-          </label>
-          <div class="d-flex flex-row align-items-center justify-content-center">
-            <div
-              class="gray-circle"
-              @click="gift.gems.amount <= 0 ? gift.gems.amount = 0 : gift.gems.amount--"
-            >
-              <div
-                class="icon-negative"
-                v-html="icons.negativeIcon"
-              ></div>
-            </div>
-            <div class="input-group">
-              <div class="input-group-prepend input-group-icon align-items-center">
-                <div
-                  class="icon-gem"
-                  v-html="icons.gemIcon"
-                ></div>
-              </div>
-              <input
-                id="gemsForm"
-                v-model.number="gift.gems.amount"
-                class="form-control"
-                min="0"
-                max="9999"
-              >
-            </div>
-            <div
-              class="gray-circle"
-              @click="gift.gems.amount++"
-            >
-              <div
-                class="icon-positive"
-                v-html="icons.positiveIcon"
-              ></div>
-            </div>
-          </div>
-
-          <!-- the word "total" -->
-          <div class="buy-gem-total">
-            {{ $t('sendGiftTotal') }}
-          </div>
-
-          <!-- the actual dollar amount -->
-          <div class="buy-gem-amount">
-            <span>
-              {{formatter.format(totalGems)}}
-            </span>
-          </div>
-
-          <!-- change to sending own gems page -->
-          <div
-            :class="{active: selectedPage === 'ownGems'}"
-            @click="selectPage('ownGems')"
-            class="gem-state-change"
-          >
-            {{ $t('wantToSendOwnGems') }}
-          </div>
-        </div>
-
-        <!-- paying for gems -->
-        <payments-buttons
-          class="payment-buttons"
-          :stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
-          :paypal-fn="() => openPaypalGift({
-            gift: gift, giftedTo: userReceivingGift._id, receiverName,
-          })"
-          :amazon-data="{type: 'single', gift, giftedTo: userReceivingGift._id, receiverName}"
-        />
-      </div>
-
-      <!-- send gems from balance -->
-      <div
-        v-show="selectedPage === 'ownGems'"
-      >
-        <div class="gem-group">
-          <label v-once>
-            {{ $t('howManyGemsSend') }}
-          </label>
-          <div class="d-flex align-items-center justify-content-center">
-            <div
-              class="gray-circle"
-              @click="gift.gems.amount <= 0 ? gift.gems.amount = 0 : gift.gems.amount--"
-            >
-              <div
-                class="icon-negative"
-                v-html="icons.negativeIcon"
-              ></div>
-            </div>
-            <div class="input-group">
-              <div class="input-group-prepend input-group-icon align-items-center">
-                <div
-                  class="icon-gem"
-                  v-html="icons.gemIcon"
-                ></div>
-              </div>
-              <input
-                id="gemsForm"
-                v-model="gift.gems.amount"
-                class="form-control"
-                min="0"
-                :max="maxGems"
-              >
-            </div>
-            <div
-              class="gray-circle"
-              @click="gift.gems.amount < maxGems ? gift.gems.amount++ : gift.gems.amount = maxGems"
-            >
-              <div
-                class="icon-positive"
-                v-html="icons.positiveIcon"
-              ></div>
-            </div>
-          </div>
-          <div class="align-items-middle">
-            <div class="d-flex justify-content-center align-items-middle">
-              <span class="balance-text">
-                {{ $t('yourBalance') }}
-              </span>
-              <span
-                class="icon-gem balance-gem-margin"
-                v-html="icons.gemIcon"
-                style="display: inline-block;"
-              ></span>
-              <span
-                class="balance-gems">
-                {{ maxGems }}
-              </span>
-            </div>
-          </div>
-          <div class="d-flex flex-column justify-content-center align-items-middle mt-3">
-            <button
-              v-if="fromBal"
-              class="btn btn-primary mx-auto mt-2"
-              type="submit"
-              :disabled="sendingInProgress"
-              @click="sendGift()"
-            >
-              {{ $t("send") }}
-            </button>
-          </div>
-
-          <!-- change to buying gems page -->
-          <div
-            :class="{active: selectedPage === 'buyGems'}"
-            @click="selectPage('buyGems')"
-            class="gem-state-change"
-          >
-            {{ $t('needToPurchaseGems') }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
-  #send-gift {
-    .modal-dialog {
-      max-width: 448px;
-    }
-
-    .modal-content {
-      width: 448px;
-      border-radius: 8px;
-      box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
-    }
-    .modal-body{
-      padding: 0px;
-    }
-
-    .modal-close {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      padding: 4px;
-      right: 16px;
-      top: 16px;
-      cursor: pointer;
-
-      .icon-close {
-        width: 15px;
-        height: 15px;
-
-        & ::v-deep svg path {
-          fill: #878190;
-        }
-      }
-    }
-    #subscription-form .subscribe-option {
-      background: #F9F9F9;
-    }
-}
-</style>
-<style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-
-  h2 {
-    color: $purple-300;
-    padding-top: 2rem;
-  }
-
-  .avatar-spacer {
-    height: 9px;
-  }
-
-  .display-name {
-    font-size: 0.875rem;
-    font-weight: bold;
-    line-height: 1.71;
-    margin: 0px 6px 0 20px;
-  }
-
-  .display-name a:hover{
-    text-decoration: none;
-  }
-
-  .user-name {
-    font-size: 0.75rem;
-    line-height: 1.33;
-    text-align: center;
-    color: $gray-100;
-    padding-bottom: 16px;
-  }
-
-  .row {
-    background-color: $gray-700;
-    margin: 0 0 0 0;
-    min-height: 32px;
-  }
-
-  .nav {
-    font-weight: bold;
-    font-size: 0.75rem;
-    min-height: 32px;
-    padding: 16px 0 0 0;
-    color: $purple-300;
-    justify-content: center;
-  }
-
-  .nav-item {
-    display: inline-block;
-    padding: 0px 8px 6px 8px;
-  }
-
-  .nav-item:hover, .nav-item.active {
-    color: $purple-300;
-    border-bottom: 2px solid $purple-400;
-    cursor: pointer;
-  }
-
-  .nav-item.inactive {
-    color: $purple-300;
-    border-bottom: 0px;
-    cursor: pointer;
-  }
-
-  .gem-group {
-    padding: 0 0 24px 0;
-    background-color: $gray-700;
-    margin: 0 0 0 0;
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px
-  }
-
-  label {
-    color: $gray-50;
-    font-size: 0.875rem;
-    font-weight: bold;
-    line-height: 1.71;
-    margin: 12px 0 16px 0;
-    width: 100%;
-    text-align: center;
-  }
-
-  .input-group {
-    width: 94px;
-    height: 32px;
-    margin: 0px 16px 0px 16px;
-    padding: 0;
-    border-radius: 2px;
-    border: solid 1px $gray-400;
-    background-color: $white;
-  }
-
-  .gray-circle {
-    border-radius: 100%;
-    border: solid 2px $gray-300;
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-
-    &:hover {
-      border-color: $purple-400;
-    }
-  }
-
-  .gray-circle:hover{
-    .icon-positive, .icon-negative {
-      & ::v-deep svg path {
-        fill: $purple-400;
-      }
-    }
-  }
-
-  .icon-gem {
-    width: 16px;
-    height: 16px;
-  }
-
-  .icon-positive, .icon-negative {
-    width: 10px;
-    height: 10px;
-    margin: 4px auto;
-
-    & ::v-deep svg path {
-      fill: $gray-300;
-    }
-  }
-
-  .buy-gem-total {
-    font-size: 0.875rem;
-    font-weight: bold;
-    line-height: 1.71;
-    padding-top: 24px;
-    text-align: center;
-    height: 28px;
-  }
-
-  .buy-gem-amount {
-    font-size: 1.25rem;
-    font-weight: bold;
-    line-height: 1.4;
-    margin: 16px 0 24px 0;
-    text-align: center;
-    height: 28px;
-    color: $green-10;
-  }
-
-  .balance-text {
-    font-size: 0.75rem;
-    font-weight: bold;
-    color: $gray-100;
-    line-height: 1.33;
-    margin: 12px 0px 0px 70px;
-  }
-
-  .balance-gem-margin {
-    margin: 8px 4px 0px 8px;
-  }
-
-  .balance-gems {
-    font-size: 0.75rem;
-    color: $gray-100;
-    line-height: 1.33;
-    margin: 12px 71px 0px 4px;
-  }
-
-  .gem-state-change {
-    color: $blue-10;
-    font-size: 0.875rem;
-    min-height: 24px;
-    margin: 16px 0 0;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .subscribe-option {
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    padding-bottom: 24px;
-  }
-
-  .payment-buttons {
-    padding: 24px 0;
-  }
-
-</style>
-
-<script>
-
-// libs imports
-import { mapState } from '@/libs/store';
-
-// mixins imports
-import paymentsMixin from '../../mixins/payments';
-
-// component imports
-import avatar from '../avatar';
-import userLink from '../userLink';
-import subscriptionOptions from '../settings/subscriptionOptions.vue';
-import paymentsButtons from '@/components/payments/buttons/list';
-
-// svg imports
-import closeIcon from '@/assets/svg/close.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
-import negativeIcon from '@/assets/svg/negative.svg';
-
-export default {
-  components: {
-    avatar,
-    subscriptionOptions,
-    paymentsButtons,
-    userLink,
-  },
-  mixins: [
-    paymentsMixin,
-  ],
-  data () {
-    return {
-      subscription: {
-        key: '',
-      },
-      icons: Object.freeze({
-        closeIcon,
-        gemIcon,
-        positiveIcon,
-        negativeIcon,
-      }),
-      userReceivingGift: {
-        profile: '',
-      },
-      name: '',
-      display: '',
-      selectedPage: 'subscription',
-      gift: {
-        type: 'gems',
-        gems: {
-          amount: 0,
-          fromBalance: true,
-        },
-      },
-      sendingInProgress: false,
-      amazonPayments: {},
-      gemCost: 1,
-    };
-  },
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'send-gift');
-    },
-    selectPage (page) {
-      this.selectedPage = page || 'subscription';
-    },
-    async sendGift () {
-      this.sendingInProgress = true;
-      await this.$store.dispatch('members:transferGems', {
-        toUserId: this.userReceivingGift._id,
-        gemAmount: this.gift.gems.amount,
-      });
-      this.close();
-      setTimeout(() => { // wait for the send gem modal to be closed
-        this.$root.$emit('habitica:payment-success', {
-          paymentMethod: 'balance',
-          paymentCompleted: true,
-          paymentType: 'gift-gems-balance',
-          gift: {
-            gems: {
-              amount: this.gift.gems.amount,
-            },
-          },
-          giftReceiver: this.receiverName,
-        });
-      }, 500);
-    },
-    onHide () {
-      this.sendingInProgress = false;
-    },
-  },
-  computed: {
-    ...mapState({
-      userLoggedIn: 'user.data',
-    }),
-    userName () {
-      const userName = this.userReceivingGift.auth
-      && this.userReceivingGift.auth.local
-      && this.userReceivingGift.auth.local.username;
-      return userName;
-    },
-    displayName () {
-      const displayName = this.userReceivingGift.profile.name;
-      return displayName;
-    },
-    userBacker () {
-      const userBacker = this.userReceivingGift.backer;
-      return userBacker;
-    },
-    userContributor () {
-      const userContributor = this.userReceivingGift.contributor;
-      return userContributor;
-    },
-    tierIcon () {
-      if (this.isNPC) {
-        return this.icons.tierNPC;
-      }
-      return this.icons[`tier${this.level}`];
-    },
-    fromBal () {
-      return this.gift.type === 'gems' && this.gift.gems.fromBalance;
-    },
-    maxGems () {
-      const maxGems = this.fromBal ? this.userLoggedIn.balance * 4 : 9999;
-      return maxGems;
-    },
-    formatter () {
-      const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 2,
-      });
-      return formatter;
-    },
-    totalGems () {
-      const totalGems = this.gift.gems.amount * 0.25;
-      return totalGems;
-    },
-    receiverName () {
-      if (
-        this.userReceivingGift.auth
-        && this.userReceivingGift.auth.local
-        && this.userReceivingGift.auth.local.username
-      ) {
-        return this.userReceivingGift.auth.local.username;
-      }
-      return this.userReceivingGift.profile.name;
-    },
-  },
-  watch: {
-    startingPage () {
-      this.selectedPage = this.startingPage;
-    },
-  },
-  mounted () {
-    this.$root.$on('habitica::send-gift', data => {
-      this.userReceivingGift = data;
-      if (this.$store.state.giftModalOptions.startingPage) {
-        this.selectedPage = this.$store.state.giftModalOptions.startingPage;
-        this.$store.state.giftModalOptions.startingPage = '';
-        this.selectPage(this.selectedPage);
-      } else {
-        this.selectPage(this.startingPage);
-      }
-      this.$root.$emit('bv::show::modal', 'send-gift');
-    });
-  },
-};
-</script>
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 5a02860fc8..1bc59834d0 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -450,6 +450,10 @@
     background-color: $white;
   }
 
+  .subscribe-option {
+    border-bottom: 1px solid $gray-600;
+  }
+
   .svg-amazon-pay {
     width: 208px;
   }
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 1432a85f3a..83a7f308fb 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -969,8 +969,7 @@ export default {
       axios.post(`/api/v4/user/block/${this.user._id}`);
     },
     openSendGemsModal () {
-      this.$store.state.giftModalOptions.startingPage = 'buyGems';
-      this.$root.$emit('habitica::send-gift', this.user);
+      this.$root.$emit('habitica::send-gems', this.user);
     },
     adminTurnOnShadowMuting () {
       if (!this.hero.flags) {
diff --git a/website/client/src/store/index.js b/website/client/src/store/index.js
index dd3a0e28dd..67e5978306 100644
--- a/website/client/src/store/index.js
+++ b/website/client/src/store/index.js
@@ -124,9 +124,6 @@ export default function () {
       profileOptions: {
         startingPage: '',
       },
-      giftModalOptions: {
-        startingPage: '',
-      },
       rageModalOptions: {
         npc: '',
       },
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index e5186a08f8..dac19498fe 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -129,7 +129,6 @@
   "sendGiftHeading": "Send Gift to <%= name %>",
   "sendGiftGemsBalance": "From <%= number %> Gems",
   "sendGiftCost": "Total: $<%= cost %> USD",
-  "sendGiftTotal": "Total:",
   "sendGiftFromBalance": "From Balance",
   "sendGiftPurchase": "Purchase",
   "sendGiftMessagePlaceholder": "Personal message (optional)",
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index 05e9c3b9cb..1b0c4b005c 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -3,10 +3,6 @@
     "subscriptions": "Subscriptions",
     "viewSubscriptions": "View Subscriptions",
     "sendGems": "Send Gems",
-    "howManyGemsPurchase": "How many Gems would you like to purchase?",
-    "howManyGemsSend":"How many Gems would you like to send?",
-    "needToPurchaseGems": "Need to purchase Gems as a gift?",
-    "wantToSendOwnGems": "Want to send your own Gems?",
     "buyGemsGold": "Buy Gems with Gold",
     "mustSubscribeToPurchaseGems": "Must subscribe to purchase gems with GP",
     "reachedGoldToGemCapQuantity": "Your requested amount <%= quantity %> exceeds the amount you can buy for this month (<%= convCap %>). The full amount becomes available within the first three days of each month. Thanks for subscribing!",
@@ -201,6 +197,5 @@
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
     "cancelYourSubscription": "Cancel your subscription?",
-    "cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
-    "sendAGift": "Send Gift"
+    "cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica."
 }