UI improvements

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">

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 };

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...",

src/pages/Dashboard.vue

@@ -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>

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>