Fix: Unify design with Security page

This commit is contained in:
Nelson Chan 2022-06-14 15:04:46 +08:00
parent e425e408a2
commit f723930d11
3 changed files with 14 additions and 18 deletions

View File

@ -473,6 +473,14 @@ textarea.form-control {
outline: none !important; outline: none !important;
} }
h5.settings-subheading::after {
content: "";
display: block;
width: 50%;
padding-top: 8px;
border-bottom: 1px solid $dark-border-color;
}
// Localization // Localization
@import "localization.scss"; @import "localization.scss";

View File

@ -20,10 +20,10 @@
</button> </button>
</div> </div>
<div class="my-4"> <div class="my-4 pt-4">
<h4>{{ $t("settingsCertificateExpiry") }}</h4> <h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
<p>{{ $t("certificationExpiryDescription") }}</p> <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"> <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> <span>{{ day }} {{ $tc("day", day) }}</span>
<button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)"> <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">

View File

@ -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> <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> </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"> <form class="mb-3" @submit.prevent="savePassword">
<div class="mb-3"> <div class="mb-3">
<label for="current-password" class="form-label"> <label for="current-password" class="form-label">
@ -62,7 +62,7 @@
</template> </template>
<div v-if="! settings.disableAuth" class="mt-5 mb-3"> <div v-if="! settings.disableAuth" class="mt-5 mb-3">
<h5 class="my-4"> <h5 class="my-4 settings-subheading">
{{ $t("Two Factor Authentication") }} {{ $t("Two Factor Authentication") }}
</h5> </h5>
<div class="mb-4"> <div class="mb-4">
@ -78,7 +78,7 @@
<div class="my-4"> <div class="my-4">
<!-- Advanced --> <!-- Advanced -->
<h5 class="my-4">{{ $t("Advanced") }}</h5> <h5 class="my-4 settings-subheading">{{ $t("Advanced") }}</h5>
<div class="mb-4"> <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> <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> </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>