From ed218e73bb17d5f3895bf56aa4d994498ebeedb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karel=20Kr=C3=BDda?= <karel.kryda@gmail.com>
Date: Sun, 8 May 2022 20:03:24 +0200
Subject: [PATCH] UI improvements

---
 src/components/MonitorList.vue   |  9 +++++----
 src/icon.js                      |  2 ++
 src/languages/en.js              |  3 +--
 src/pages/Dashboard.vue          | 29 +++++++++++++++++++++++++++--
 src/pages/MaintenanceDetails.vue |  8 ++++++--
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 8662dfee4..01f1c0fa7 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -1,10 +1,11 @@
 <template>
     <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
-            <div class="search-wrapper float-start">
-                <select v-model="selectedList" class="form-control">
-                    <option value="monitor" selected>{{ $t('Monitor List') }}</option>
-                    <option value="maintenance">{{ $t('Maintenance List') }}</option>
+            <div class="search-wrapper float-start" style="margin-left: 5px;">
+                <font-awesome-icon icon="filter" />
+                <select v-model="selectedList" class="form-control" style="margin-left: 5px;">
+                    <option value="monitor" selected>{{ $t('Monitors') }}</option>
+                    <option value="maintenance">{{ $t('Maintenance') }}</option>
                 </select>
             </div>
             <div class="search-wrapper">
diff --git a/src/icon.js b/src/icon.js
index c59b2a1c5..b2b670c8c 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -43,6 +43,7 @@ import {
     faAngleDown,
     faWrench,
     faHeartbeat,
+    faFilter,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -85,6 +86,7 @@ library.add(
     faAngleDown,
     faWrench,
     faHeartbeat,
+    faFilter,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/languages/en.js b/src/languages/en.js
index 37f7cb437..b235904ec 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -8,8 +8,7 @@ export default {
     maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
     acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
     Maintenance: "Maintenance",
-    "Monitor List": "Monitor List",
-    "Maintenance List": "Maintenance List",
+    "Monitors": "Monitors",
     "Schedule maintenance": "Schedule maintenance",
     "Affected Monitors": "Affected Monitors",
     "Pick Affected Monitors...": "Pick Affected Monitors...",
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 207e5b3a1..e2a5275fe 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container-fluid">
         <div class="row">
-            <div v-if="! $root.isMobile" class="col-12 col-md-5 col-xl-4">
+            <div v-if="!$root.isMobile" class="col-12 col-md-5 col-xl-4">
                 <div class="dropdown dropdown-create">
                     <button class="btn btn-primary mb-3 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                         <font-awesome-icon icon="plus" /> {{ $t("Create") }}
@@ -14,7 +14,7 @@
                         </li>
                         <li>
                             <button type="button" class="dropdown-item" @click="$router.push('/addMaintenance')">
-                                <font-awesome-icon icon="exclamation-circle" /> {{ $t("Maintenance") }}
+                                <font-awesome-icon icon="wrench" /> {{ $t("Maintenance") }}
                             </button>
                         </li>
                     </ul>
@@ -45,7 +45,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/vars.scss";
+
 .container-fluid {
     width: 98%;
 }
+
+.dropdown-create {
+    display: flex;
+    justify-content: end;
+}
+
+.dark {
+    .dropdown-create {
+        ul {
+            background-color: $dark-bg;
+            border-color: $dark-bg2;
+            border-width: 2px;
+
+            li button {
+                color: $dark-font-color;
+            }
+
+            li button:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+}
 </style>
diff --git a/src/pages/MaintenanceDetails.vue b/src/pages/MaintenanceDetails.vue
index ae4b5a7b2..432e7c3f3 100644
--- a/src/pages/MaintenanceDetails.vue
+++ b/src/pages/MaintenanceDetails.vue
@@ -22,14 +22,14 @@
 
             <label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label>
             <br>
-            <button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: bold;">
+            <button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
                 {{ monitor }}
             </button>
             <br />
 
             <label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Selected status pages") }}</label>
             <br>
-            <button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: bold;">
+            <button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
                 {{ statusPage }}
             </button>
 
@@ -154,4 +154,8 @@ textarea {
     background-color: #5cdd8b;
 }
 
+.dark .btn-monitor {
+    color: #020b05 !important;
+}
+
 </style>