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

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

@@ -28,7 +28,7 @@
       <small>{{ $t('unsubscribeAllEmailsText') }}</small>
     </div>
     <div class="col-8">
-      <table class="table"></table>
+      <table class="table">
         <tr>
           <td></td>
           <th>
@@ -38,10 +38,7 @@
             <span>{{ $t('push') }}</span>
           </th>
         </tr>
-      <tr
+        <tr v-for="notification in notificationsIds" :key="notification">
-        v-for="notification in notificationsIds"
-        :key="notification"
-      >
           <td>
             <span>{{ $t(notification) }}</span>
           </td>
@@ -58,9 +55,11 @@
               type="checkbox"
               @change="set('pushNotifications', notification)"
             >
-          <hr>
+          <td v-else>
+            &nbsp;
           </td>
         </tr>
+      </table>
     </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