From 46ee149b700e26c517eaabb1ccf6db111e1f5482 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 26 May 2022 12:12:29 +0800
Subject: [PATCH] Chore: Slightly improve design

---
 src/components/settings/Notifications.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
index 187f4b7d5..9e9553c3a 100644
--- a/src/components/settings/Notifications.vue
+++ b/src/components/settings/Notifications.vue
@@ -26,7 +26,7 @@
             <div class="mt-2 mb-4 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 }} {{ $t("day(s)") }}</span>
-                    <button type="button" class="btn btn-outline-primary ms-2 px-3 py-1" @click="removeExpiryNotifDay(day)">
+                    <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">
                         <font-awesome-icon class="" icon="times" />
                     </button>
                 </div>
@@ -95,6 +95,11 @@ export default {
 <style lang="scss" scoped>
 @import "../../assets/vars.scss";
 
+.btn-rm-expiry {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
 .dark {
     .list-group-item {
         background-color: $dark-bg2;