fix: Group Plans string duplication & style adjustment (#14148)

* fix(string): questVice1Notes html changed to a mobile-device friendly format

* fix(strings): updated limited.json with "dateEnd" & "monthYYYY" months & put in chronological order

* fix(string): remove extra word from headSpecialSummer2022WarriorNotes

* fix(string): corrected armorSpecialSummer2022MageNotes

* fix: remove duplicated string and adjust upgrade button style

* fix(style): set border radii to 8px on upgrading-group id

* fix(payments): remove duplicate entry from another modal

Co-authored-by: SabreCat <sabe@habitica.com>

website/client/src/components/groups/groupPlan.vue

@@ -92,7 +92,6 @@
               </div>
             </div>
             <div class="box payment-providers">
-              <h3>Choose your payment method</h3>
               <payments-buttons
                 :stripe-fn="() => pay(PAYMENTS.STRIPE)"
                 :amazon-data="pay(PAYMENTS.AMAZON)"
@@ -241,7 +240,6 @@
         class="col-12"
       >
         <div class="text-center">
-          <h3>Choose your payment method</h3>
           <payments-buttons
             :stripe-fn="() => pay(PAYMENTS.STRIPE)"
             :amazon-data="pay(PAYMENTS.AMAZON)"
@@ -266,6 +264,11 @@
 
     .purple-box {
       color: #bda8ff;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     }
 
     .number {
@@ -279,6 +282,8 @@
 
     .payment-providers {
       width: 350px;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
     }
   }
 
@@ -398,6 +403,10 @@
   .payment-options {
     margin-bottom: 4em;
 
+    h4 {
+      color: #34313a;
+    }
+
     .purple-box {
       background-color: #4f2a93;
       color: #fff;