update: style changes, add upgraded group demographics to success modal, add description counter

website/client/src/assets/scss/form.scss

@@ -180,8 +180,8 @@ input, textarea, input.form-control, textarea.form-control {
 }
 
 // used in checkboxes and radios
-$bg-focused-active-control: #4f2993;
+$bg-focused-active-control: $purple-200;
-$bg-disabled-control: #34303a;
+$bg-disabled-control: $gray-10;
 
 // custom control
 .custom-control {
@@ -231,17 +231,21 @@ $bg-disabled-control: #34303a;
       background-color: inherit;
     }
 
-    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, 
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+    &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+      border: 2px solid $gray-300;
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
     }
 
-    &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
+    &:focus:checked:not(:disabled)~.custom-control-label::before, 
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+    &:active:checked:not(:disabled)~.custom-control-label::before  {
-      border-color: $purple-400;
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
+      border-color: 2 px solid $purple-400;
       background-color: $purple-400;
     }
 
-    &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before  {
+    &:focus:disabled~.custom-control-label::before, 
+    &:active:disabled~.custom-control-label::before  {
       box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
     }
 

website/client/src/components/group-plans/groupPlanCreationModal.vue

@@ -50,13 +50,18 @@
         <lockable-label
           for="new-group-description"
           :text="$t('descriptionOptional')"
+          class="description-label"
         />
+        <div class="characters-remaining">
+          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
+        </div>
         <textarea
           id="new-group-description"
           v-model="newGroup.description"
           class="form-control option-content description-input"
           cols="3"
           :placeholder="$t('descriptionOptionalText')"
+          maxlength="250"
         ></textarea>
       </div>
       <div class="form-group">
@@ -153,10 +158,22 @@
     height: 32px;
   }
 
+  .description-label {
+    margin-bottom: -24px;
+  }
+
   .name-input, .description-input, .group-input {
     margin-top: -4px;
   }
 
+ .characters-remaining {
+  color: $gray-100;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  text-align: right;
+  margin-bottom: 12px;
+ }
+
   .description-input {
     height: 56px;
   }
@@ -217,6 +234,7 @@
     }
     .modal-content {
       width: 448px;
+      height: 436px;
       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);
     }
@@ -265,6 +283,7 @@ export default {
         type: 'guild',
         privacy: 'private',
         name: '',
+        description: '',
         leaderOnly: {
           challenges: false,
         },
@@ -279,6 +298,10 @@ export default {
     newGroupIsReady () {
       return Boolean(this.newGroup.name) && Boolean(this.newGroup.demographics);
     },
+    charactersRemaining () {
+      const currentLength = this.newGroup.description ? this.newGroup.description.length : 0;
+      return 250 - currentLength;
+    },
   },
   methods: {
     close () {

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

@@ -85,6 +85,38 @@
             v-once
             class="small-text auto-renew"
           >{{ $t('paymentAutoRenew') }}</span>
+          <div
+            v-if="paymentData.paymentType === 'groupPlan'
+              && paymentData.newGroup === 'groupPlanUpgraded'"
+            class="form-group"
+          >
+            <lockable-label
+              :text="$t('groupUse')"
+              class="justify-content-center"
+            />
+            <select-translated-array
+              :items="[
+                'groupParentChildren',
+                'groupCouple',
+                'groupFriends',
+                'groupCoworkers',
+                'groupManager',
+                'groupTeacher'
+              ]"
+              class="group-input"
+              :placeholder="'groupUseDefault'"
+              :value="newGroup.demographics"
+              @select="newGroup.demographics = $event"
+            />
+          </div>
+          <div class="form-group">
+            <button
+              class="btn btn-primary btn-lg btn-block btn-payment"
+              @click="closeGroup()"
+            >
+              {{ $t('submit') }}
+            </button>
+          </div>
         </template>
         <button
           v-once
@@ -200,6 +232,9 @@
   .small-text {
     font-style: normal;
   }
+  .group-input {
+    margin-top: -4px;
+  }
 }
 </style>
 
@@ -207,10 +242,16 @@
 import checkIcon from '@/assets/svg/check.svg';
 import gemIcon from '@/assets/svg/gem.svg';
 import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
+import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
 
 export default {
   data () {
     return {
+      components: {
+        selectTranslatedArray,
+        lockableLabel,
+      },
       icons: Object.freeze({
         check: checkIcon,
         gem: gemIcon,
@@ -246,6 +287,10 @@ export default {
       this.paymentData = {};
       this.$root.$emit('bv::hide::modal', 'payments-success-modal');
     },
+    closeGroup () {
+      this.close();
+      return this.groupName.analytics; // this needs to go to Amplitude somehow
+    },
   },
 };
 </script>

website/common/locales/en/groups.json

@@ -214,7 +214,7 @@
   "userIsClamingTask": "`<%= username %> has claimed:` <%= task %>",
   "approvalRequested": "Approval Requested",
   "cantDeleteAssignedGroupTasks": "Can't delete group tasks that are assigned to you.",
-  "groupPlanUpgraded": "<strong><%- groupName %></strong> was upgraded to a Group Plan!",
+  "groupPlanUpgraded": "<strong><%- groupName %></strong> was successfully upgraded to a Group Plan!",
   "groupPlanCreated": "<strong><%- groupName %></strong> was created!",
   "onlyGroupLeaderCanInviteToGroupPlan": "Only the group leader can invite users to a group with a subscription.",
   "paymentDetails": "Payment Details",