style / padding issues

website/client/src/pages/settings/notificationSettings.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="row standard-page px-0">
     <div class="col-12">
-      <h1 class="page-header" v-once>{{ $t('notifications') }}</h1>
+      <h1
+        v-once
+        class="page-header"
+      >
+        {{ $t('notifications') }}
+      </h1>
     </div>
     <div class="col-12">
-      <h2 v-once>{{ $t('allNotifications') }}</h2>
+      <h2 v-once>
+        {{ $t('allNotifications') }}
+      </h2>
 
       <table class="table">
         <tr>
-          <td class="bold">{{ $t('unsubscribeAllPush') }}</td>
+          <td class="bold">
+            {{ $t('unsubscribeAllPush') }}
+          </td>
           <td>
-            <toggle-switch :checked="user.preferences.pushNotifications.unsubscribeFromAll"
-                           @toggle="set('pushNotifications', 'unsubscribeFromAll')"
+            <toggle-switch
+              :checked="user.preferences.pushNotifications.unsubscribeFromAll"
+              @toggle="set('pushNotifications', 'unsubscribeFromAll')"
             />
-
           </td>
         </tr>
         <tr>
           <td>
             <span class="bold">{{ $t('unsubscribeAllEmails') }}</span> <br>
-           <small>{{ $t('unsubscribeAllEmailsText') }}</small>
+            <small>{{ $t('unsubscribeAllEmailsText') }}</small>
           </td>
           <td>
-            <toggle-switch :checked="user.preferences.emailNotifications.unsubscribeFromAll"
-                           @toggle="set('emailNotifications', 'unsubscribeFromAll')"
+            <toggle-switch
+              :checked="user.preferences.emailNotifications.unsubscribeFromAll"
+              @toggle="set('emailNotifications', 'unsubscribeFromAll')"
             />
           </td>
         </tr>
@@ -37,59 +47,81 @@
       <h2>Website</h2>
       <table class="table">
         <tr>
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t('showLevelUpModal') }}
           </td>
           <td class="email_push_col">
-             <toggle-switch :checked="!user.preferences.suppressModals.levelUp"
-                           @toggle="set('suppressModals', 'levelUp')"
-                            class="toggle-switch-width"
+            <toggle-switch
+              :checked="!user.preferences.suppressModals.levelUp"
+              class="toggle-switch-width"
+              @toggle="set('suppressModals', 'levelUp')"
             />
           </td>
         </tr>
         <tr>
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t('showHatchPetModal') }}
           </td>
           <td class="email_push_col">
-             <toggle-switch :checked="!user.preferences.suppressModals.hatchPet"
-                           @toggle="set('suppressModals', 'hatchPet')"
-                            class="toggle-switch-width"
+            <toggle-switch
+              :checked="!user.preferences.suppressModals.hatchPet"
+              class="toggle-switch-width"
+              @toggle="set('suppressModals', 'hatchPet')"
             />
           </td>
         </tr>
         <tr>
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t('showRaisePetModal') }}
           </td>
           <td class="email_push_col">
-             <toggle-switch :checked="!user.preferences.suppressModals.raisePet"
-                           @toggle="set('suppressModals', 'raisePet')"
-                            class="toggle-switch-width"
+            <toggle-switch
+              :checked="!user.preferences.suppressModals.raisePet"
+              class="toggle-switch-width"
+              @toggle="set('suppressModals', 'raisePet')"
             />
           </td>
         </tr>
         <tr>
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t('showStreakModal') }}
           </td>
           <td class="email_push_col">
-             <toggle-switch :checked="!user.preferences.suppressModals.streak"
-                           @toggle="set('suppressModals', 'streak')"
-                            class="toggle-switch-width"
+            <toggle-switch
+              :checked="!user.preferences.suppressModals.streak"
+              class="toggle-switch-width"
+              @toggle="set('suppressModals', 'streak')"
             />
           </td>
         </tr>
         <tr>
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t('baileyAnnouncement') }}
           </td>
           <td class="email_push_col show_bailey_col">
-            <a @click="showBailey()" class="show_bailey_link"
-            popover-trigger="mouseenter"
+            <a
+              class="show_bailey_link"
+              popover-trigger="mouseenter"
               popover-placement="right"
-              :popover="$t('showBaileyPop')">
-                {{ $t('show') }}
+              :popover="$t('showBaileyPop')"
+              @click="showBailey()"
+            >
+              {{ $t('show') }}
             </a>
           </td>
         </tr>
@@ -113,23 +145,28 @@
           </th>
         </tr>
         <tr
-            v-for="notification in notificationsIds"
-            :key="notification"
+          v-for="notification in notificationsIds"
+          :key="notification"
         >
-          <td class="bold" v-once>
+          <td
+            v-once
+            class="bold"
+          >
             {{ $t(notification) }}
           </td>
           <td class="email_push_col">
-             <toggle-switch :checked="user.preferences.emailNotifications[notification]"
-                           @toggle="set('emailNotifications', notification)"
-                            class="toggle-switch-width"
+            <toggle-switch
+              :checked="user.preferences.emailNotifications[notification]"
+              class="toggle-switch-width"
+              @toggle="set('emailNotifications', notification)"
             />
           </td>
           <td class="email_push_col">
-              <toggle-switch :checked="user.preferences.pushNotifications[notification]"
-                           @toggle="set('pushNotifications', notification)"
-                             v-if="!onlyEmailsIds.includes(notification)"
-                            class="toggle-switch-width"
+            <toggle-switch
+              v-if="!onlyEmailsIds.includes(notification)"
+              :checked="user.preferences.pushNotifications[notification]"
+              class="toggle-switch-width"
+              @toggle="set('pushNotifications', notification)"
             />
           </td>
         </tr>
@@ -153,6 +190,7 @@
     }
   }
 }
+
 .email_push_col {
   width: 50px;
   padding-left: 0 !important;
@@ -196,7 +234,7 @@ toggle-switch {
 .show_bailey_link {
   padding-right: 8px;
   line-height: 1.71;
-  color: $blue-10 !important;
+  // color: $blue-10 !important;
 
   &:hover {
     text-decoration: underline;

website/client/src/pages/settings/siteDataRows/apiRow.vue

@@ -35,7 +35,7 @@
         >
         </div>
 
-        <div class="d-flex justify-content-center data-download-selection">
+        <div class="d-flex justify-content-center api-key-input">
           <locked-input
             :label="$t('APITokenTitle')"
             :value="apiToken"
@@ -54,13 +54,13 @@
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
-.data-download-selection {
+.api-key-input {
   margin-top: 20px;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
 
   td {
     border: 0;
-    padding: 0 0 1rem !important;
+    padding: 0 !important;
 
     &:first-of-type {
       text-align: end;
@@ -77,6 +77,10 @@
     .dropdown-menu {
       min-width: 0;
     }
+
+    .form-group {
+      margin-bottom: 0;
+    }
   }
 }
 </style>

website/client/src/pages/settings/siteDataRows/userDataRow.vue

@@ -84,16 +84,17 @@
 
 .data-download-selection {
   margin-top: 20px;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
+
 
   td {
-    border: 0;
-    padding: 0 0 1rem !important;
+    border: 0 !important;
+    padding-bottom: 0 !important;
 
     &:first-of-type {
       text-align: end;
       vertical-align: middle;
-      padding-right: 1rem !important;
+      padding-right: 0.5rem !important;
 
       font-weight: bold;
       line-height: 1.71;
@@ -101,6 +102,12 @@
     }
   }
 
+  tr:first-of-type {
+    td {
+      padding-bottom: 0.5rem !important;
+    }
+  }
+
   ::v-deep {
     .dropdown-menu {
       min-width: 0;

website/client/src/pages/settings/siteDataRows/webhooksRow.vue

@@ -40,6 +40,7 @@
               <template v-if="unsaved.includes(index)">
                 <button
                   class="btn btn-primary ml-2"
+                  :disabled="!isValidUrl(webhook.url)"
                   @click="saveWebhook(webhook, index)"
                 >
                   Save