From 6cf2eb036d60e01ef4ab12163d93e9b8cdf86ca1 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Sat, 9 Oct 2021 23:51:05 +0800
Subject: [PATCH] Fix: Improve settings layout and wording

---
 src/languages/en.js    |  4 ++--
 src/pages/Settings.vue | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 31eaee0e0..0c2a0263b 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -281,6 +281,6 @@ export default {
     promosmsPhoneNumber: "Phone number (for Polish recipient You can skip area codes)",
     promosmsSMSSender: "SMS Sender Name : Pre-registred name or one of defaults: InfoSMS, SMS Info, MaxSMS, INFO, SMS",
     // End notification form
-    "Monitor History": "Monitor History",
-    clearDataOlderThan: "Remove monitor data older than {0} days",
+    "Monitor History": "Monitor History:",
+    clearDataOlderThan: "Keep monitor history data for {0} days.",
 };
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index b5f0f7a71..b5c57c208 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -119,6 +119,15 @@
                                 </div>
                             </div>
 
+                            <!-- Monitor History -->
+                            <div class="mb-4">
+                                <h4 class="mt-4">{{ $t("Monitor History") }}</h4>
+                                <div class="mt-2">
+                                    <label for="keepDataPeriodDays" class="form-label">{{ $t("clearDataOlderThan", [ settings.keepDataPeriodDays ]) }}</label>
+                                    <input id="keepDataPeriodDays" v-model="settings.keepDataPeriodDays" type="number" class="form-control" required min="1" step="1">
+                                </div>
+                            </div>
+
                             <div>
                                 <button class="btn btn-primary" type="submit">
                                     {{ $t("Save") }}
@@ -212,14 +221,6 @@
                                 {{ importAlert }}
                             </div>
 
-                            <div class="mt-3 mb-3">
-                                <h2 class="mb-2">{{ $t("Monitor History") }}</h2>
-                                <div class="my-3">
-                                    <label for="keepDataPeriodDays" class="form-label">{{ $t("clearDataOlderThan", [ settings.keepDataPeriodDays ]) }}</label>
-                                    <input id="keepDataPeriodDays" v-model="settings.keepDataPeriodDays" type="number" class="form-control" required min="1" step="1">
-                                </div>
-                            </div>
-
                             <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
 
                             <div class="mb-3">