From f723930d118122e3bdca5ddc2038949ccdb63a72 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Tue, 14 Jun 2022 15:04:46 +0800
Subject: [PATCH] Fix: Unify design with Security page

---
 src/assets/app.scss                       |  8 ++++++++
 src/components/settings/Notifications.vue |  6 +++---
 src/components/settings/Security.vue      | 18 +++---------------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index c3f2fa798..93ff3ff3a 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -473,6 +473,14 @@ textarea.form-control {
     outline: none !important;
 }
 
+h5.settings-subheading::after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+
 // Localization
 
 @import "localization.scss";
diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
index dcda9ad64..b99a12250 100644
--- a/src/components/settings/Notifications.vue
+++ b/src/components/settings/Notifications.vue
@@ -20,10 +20,10 @@
             </button>
         </div>
 
-        <div class="my-4">
-            <h4>{{ $t("settingsCertificateExpiry") }}</h4>
+        <div class="my-4 pt-4">
+            <h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
             <p>{{ $t("certificationExpiryDescription") }}</p>
-            <div class="mt-2 mb-4 ps-2 cert-exp-days col-12 col-xl-6">
+            <div class="mt-1 mb-3 ps-2 cert-exp-days col-12 col-xl-6">
                 <div v-for="day in settings.tlsExpiryNotifyDays" :key="day" class="d-flex align-items-center justify-content-between cert-exp-day-row py-2">
                     <span>{{ day }} {{ $tc("day", day) }}</span>
                     <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">
diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
index a5d42f82b..1cb0d83ce 100644
--- a/src/components/settings/Security.vue
+++ b/src/components/settings/Security.vue
@@ -8,7 +8,7 @@
                     <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                 </p>
 
-                <h5 class="my-4">{{ $t("Change Password") }}</h5>
+                <h5 class="my-4 settings-subheading">{{ $t("Change Password") }}</h5>
                 <form class="mb-3" @submit.prevent="savePassword">
                     <div class="mb-3">
                         <label for="current-password" class="form-label">
@@ -62,7 +62,7 @@
             </template>
 
             <div v-if="! settings.disableAuth" class="mt-5 mb-3">
-                <h5 class="my-4">
+                <h5 class="my-4 settings-subheading">
                     {{ $t("Two Factor Authentication") }}
                 </h5>
                 <div class="mb-4">
@@ -78,7 +78,7 @@
 
             <div class="my-4">
                 <!-- Advanced -->
-                <h5 class="my-4">{{ $t("Advanced") }}</h5>
+                <h5 class="my-4 settings-subheading">{{ $t("Advanced") }}</h5>
 
                 <div class="mb-4">
                     <button v-if="settings.disableAuth" id="enableAuth-btn" class="btn btn-outline-primary me-2 mb-2" @click="enableAuth">{{ $t("Enable Auth") }}</button>
@@ -346,15 +346,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" scoped>
-@import "../../assets/vars.scss";
-
-h5::after {
-    content: "";
-    display: block;
-    width: 50%;
-    padding-top: 8px;
-    border-bottom: 1px solid $dark-border-color;
-}
-</style>