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>