move site popup settings to notifications

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

@@ -82,7 +82,7 @@
       </div>
     </div>
     <div class="col-12 d-flex justify-content-center">
-      <div class="settings-content">
+      <div :class="{'settings-content': $route.name !== 'subscription'}">
         <router-view />
       </div>
     </div>

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

@@ -33,6 +33,72 @@
         </tr>
       </table>
     </div>
+    <div class="col-12">
+      <h2>Website</h2>
+      <table class="table">
+        <tr>
+          <td class="bold" v-once>
+            {{ $t('showLevelUpModal') }}
+          </td>
+          <td class="email_push_col">
+             <toggle-switch :checked="!user.preferences.suppressModals.levelUp"
+                           @toggle="set('suppressModals', 'levelUp')"
+                            class="toggle-switch-width"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td class="bold" v-once>
+            {{ $t('showHatchPetModal') }}
+          </td>
+          <td class="email_push_col">
+             <toggle-switch :checked="!user.preferences.suppressModals.hatchPet"
+                           @toggle="set('suppressModals', 'hatchPet')"
+                            class="toggle-switch-width"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td class="bold" v-once>
+            {{ $t('showRaisePetModal') }}
+          </td>
+          <td class="email_push_col">
+             <toggle-switch :checked="!user.preferences.suppressModals.raisePet"
+                           @toggle="set('suppressModals', 'raisePet')"
+                            class="toggle-switch-width"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td class="bold" v-once>
+            {{ $t('showStreakModal') }}
+          </td>
+          <td class="email_push_col">
+             <toggle-switch :checked="!user.preferences.suppressModals.streak"
+                           @toggle="set('suppressModals', 'streak')"
+                            class="toggle-switch-width"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td class="bold" v-once>
+            {{ $t('baileyAnnouncement') }}
+          </td>
+          <td class="email_push_col show_bailey_col">
+            <a @click="showBailey()" class="show_bailey_link"
+            popover-trigger="mouseenter"
+              popover-placement="right"
+              :popover="$t('showBaileyPop')">
+                {{ $t('show') }}
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+      </table>
+    </div>
     <div class="col-12">
       <h2>Email & Push</h2>
 
@@ -72,7 +138,7 @@
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
 .toggle-switch-width {
@@ -113,6 +179,24 @@ small {
 .email_col_padding {
   padding-right: 70px !important;
 }
+
+toggle-switch {
+  padding-right: 8px;
+}
+
+.show_bailey_col {
+  text-align: right;
+}
+
+.show_bailey_link {
+  padding-right: 8px;
+  line-height: 1.71;
+  color: $blue-10 !important;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
 </style>
 
 <script>
@@ -186,6 +270,9 @@ export default {
       settings[`preferences.${preferenceType}.${notification}`] = this.user.preferences[preferenceType][notification];
       this.$store.dispatch('user:set', settings);
     },
+    showBailey () {
+      this.$root.$emit('bv::show::modal', 'new-stuff');
+    },
   },
 };
 </script>

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

@@ -147,52 +147,7 @@
             >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
           </label>
         </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.levelUp"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'levelUp')"
-          >
-          <label>{{ $t('suppressLevelUpModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.hatchPet"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'hatchPet')"
-          >
-          <label>{{ $t('suppressHatchPetModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.raisePet"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'raisePet')"
-          >
-          <label>{{ $t('suppressRaisePetModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.streak"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'streak')"
-          >
-          <label>{{ $t('suppressStreakModal') }}</label>
-        </div>
-        <hr>
-        <button
-          class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('showBaileyPop')"
-          @click="showBailey()"
-        >
-          {{ $t('showBailey') }}
-        </button>
+
         <button
           class="btn btn-primary mr-2 mb-2"
           popover-trigger="mouseenter"
@@ -706,9 +661,6 @@ export default {
       // User.set({'flags.showTour':true});
       // Guide.goto('intro', 0, true);
     },
-    showBailey () {
-      this.$root.$emit('bv::show::modal', 'new-stuff');
-    },
     hasBackupAuthOption (networkKeyToCheck) {
       if (this.user.auth.local.username) {
         return true;

website/common/locales/en/settings.json

@@ -11,10 +11,12 @@
     "startAdvCollapsed": "Advanced Settings in tasks start collapsed",
     "startAdvCollapsedPop": "With this option set, Advanced Settings will be hidden when you first open a task for editing.",
     "dontShowAgain": "Don't show this again",
-    "suppressLevelUpModal": "Don't show popup when gaining a level",
-    "suppressHatchPetModal": "Don't show popup when hatching a pet",
-    "suppressRaisePetModal": "Don't show popup when raising a pet into a mount",
-    "suppressStreakModal": "Don't show popup when attaining a Streak achievement",
+    "showLevelUpModal": "When Gaining a Level",
+    "showHatchPetModal": "When Hatching a Pet",
+    "showRaisePetModal": "When Raising a Pet into a Mount",
+    "showStreakModal": "When Attaining a Streak Achievement",
+    "baileyAnnouncement": "Bailey Announcement",
+    "show": "Show",
     "showTour": "Show Tour",
     "showBailey": "Show Bailey",
     "showBaileyPop": "Bring Bailey the Town Crier out of hiding so you can review past news.",