More modern look of maintenance information on status page (same design as for the new incident system)

src/pages/StatusPage.vue

@@ -196,19 +196,29 @@
             </div>
 
             <!-- Maintenance -->
-            <template v-if="maintenance.length !== 0">
+            <template v-if="maintenance.length">
                 <div
-                    v-for="maintenanceItem in maintenance" :key="maintenanceItem.id" class="shadow-box alert mb-4 p-4 maintenance" role="alert"
+                    v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
-                    :class="maintenanceClass"
+                    class="shadow-box alert mb-4 p-4 maintenance mt-4 position-relative" role="alert"
                 >
-                    <h4 class="alert-heading" v-text="maintenanceItem.title" />
+                    <div class="item">
-
+                        <div class="row">
-                    <div class="content" v-text="maintenanceItem.description" />
+                            <div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
-
+                                <font-awesome-icon
-                    <!-- Incident Date -->
+                                    icon="wrench"
-                    <div class="date mt-3">
+                                    class="maintenance-icon maintenance-bg-info"
-                        {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
+                                />
-                        ({{ dateFromNow(maintenanceItem.start_date) }})<br />
+                            </div>
+                            <div class="col-11 col-md-11">
+                                <h4 class="alert-heading">{{ maintenanceItem.title }}</h4>
+                                <div class="content">{{ maintenanceItem.description }}</div>
+
+                                <div class="date mt-3">
+                                    {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
+                                    ({{ dateFromNow(maintenanceItem.start_date) }})<br />
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </template>
@@ -933,20 +943,22 @@ footer {
     }
 }
 
-.maintenance {
+.maintenance-bg-info {
-    color: white;
+    color: $maintenance;
+}
 
-    .date {
+.maintenance-icon {
-        font-size: 12px;
+    font-size: 30px;
-    }
+    vertical-align: middle;
 }
 
-.bg-maintenance {
+.dark .shadow-box {
-    background-color: $maintenance;
+    background-color: #0d1117;
 }
 
 .statusMaintenance {
     color: $maintenance;
+    margin-right: 5px;
 }
 
 .mobile {