Updates notifications screen to a more consistent UI (#11635)

website/client/src/components/settings/notifications.vue

@@ -28,39 +28,38 @@
       <small>{{ $t('unsubscribeAllEmailsText') }}</small>
     </div>
     <div class="col-8">
-      <table class="table"></table>
+      <table class="table">
-      <tr>
+        <tr>
-        <td></td>
+          <td></td>
-        <th>
+          <th>
-          <span>{{ $t('email') }}</span>
+            <span>{{ $t('email') }}</span>
-        </th>
+          </th>
-        <th>
+          <th>
-          <span>{{ $t('push') }}</span>
+            <span>{{ $t('push') }}</span>
-        </th>
+          </th>
-      </tr>
+        </tr>
-      <tr
+        <tr v-for="notification in notificationsIds" :key="notification">
-        v-for="notification in notificationsIds"
+          <td>
-        :key="notification"
+            <span>{{ $t(notification) }}</span>
-      >
+          </td>
-        <td>
+          <td>
-          <span>{{ $t(notification) }}</span>
+            <input
-        </td>
+              v-model="user.preferences.emailNotifications[notification]"
-        <td>
+              type="checkbox"
-          <input
+              @change="set('emailNotifications', notification)"
-            v-model="user.preferences.emailNotifications[notification]"
+            >
-            type="checkbox"
+          </td>
-            @change="set('emailNotifications', notification)"
+          <td v-if="onlyEmailsIds.indexOf(notification) === -1">
-          >
+            <input
-        </td>
+              v-model="user.preferences.pushNotifications[notification]"
-        <td v-if="onlyEmailsIds.indexOf(notification) === -1">
+              type="checkbox"
-          <input
+              @change="set('pushNotifications', notification)"
-            v-model="user.preferences.pushNotifications[notification]"
+            >
-            type="checkbox"
+          <td v-else>
-            @change="set('pushNotifications', notification)"
+            &nbsp;
-          >
+          </td>
-          <hr>
+        </tr>
-        </td>
+      </table>
-      </tr>
     </div>
   </div>
 </template>
@@ -74,6 +73,8 @@ export default {
   data () {
     return {
       notificationsIds: Object.freeze([
+        'majorUpdates',
+        'onboarding',
         'newPM',
         'wonChallenge',
         'giftedGems',
@@ -85,8 +86,6 @@ export default {
         'invitedQuest',
         'importantAnnouncements',
         'weeklyRecaps',
-        'onboarding',
-        'majorUpdates',
         'subscriptionReminders',
       ]),
       // list of email-only notifications

website/common/locales/en/settings.json

@@ -120,7 +120,7 @@
     "giftedSubscriptionFull": "Hello <%= username %>, <%= sender %> has sent you <%= monthCount %> months of subscription!",
     "giftedSubscriptionWinterPromo": "Hello <%= username %>, you received <%= monthCount %> months of subscription as part of our holiday gift-giving promotion!",
     "invitedParty": "You were invited to a Party",
-    "invitedGuild": "You were invited to a  Guild",
+    "invitedGuild": "You were invited to a Guild",
     "importantAnnouncements": "Reminders to check in to complete tasks and receive prizes",
     "weeklyRecaps": "Summaries of your account activity in the past week (Note: this is currently disabled due to performance issues, but we hope to have this back up and sending e-mails again soon!)",
     "onboarding": "Guidance with setting up your Habitica account",
@@ -211,4 +211,4 @@
     "suggestMyUsername": "Suggest my username",
     "everywhere": "Everywhere",
     "onlyPrivateSpaces": "Only in private spaces"
-}
+}