From ed6e9dd9cd51c0738a89386ccbf57fd34e81681b Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Tue, 1 Nov 2022 16:54:13 +0100
Subject: [PATCH] webapp: Use correct Complimentary colours

---
 webapp/src/components/FirmwareInfo.vue        |  2 +-
 webapp/src/components/HardwareInfo.vue        |  2 +-
 webapp/src/components/InterfaceApInfo.vue     |  2 +-
 .../src/components/InterfaceNetworkInfo.vue   |  2 +-
 webapp/src/components/InverterChannelInfo.vue |  2 +-
 webapp/src/components/MemoryInfo.vue          |  2 +-
 webapp/src/components/RadioInfo.vue           | 12 +++---
 webapp/src/components/WifiApInfo.vue          |  6 +--
 webapp/src/components/WifiStationInfo.vue     |  6 +--
 webapp/src/views/AboutView.vue                |  8 ++--
 webapp/src/views/ConfigAdminView.vue          |  6 +--
 webapp/src/views/DtuAdminView.vue             |  2 +-
 webapp/src/views/FirmwareUpgradeView.vue      |  8 ++--
 webapp/src/views/HomeView.vue                 | 26 ++++++-------
 webapp/src/views/InverterAdminView.vue        |  4 +-
 webapp/src/views/MqttAdminView.vue            |  8 ++--
 webapp/src/views/MqttInfoView.vue             | 38 +++++++++----------
 webapp/src/views/NetworkAdminView.vue         |  4 +-
 webapp/src/views/NtpAdminView.vue             |  4 +-
 webapp/src/views/NtpInfoView.vue              |  8 ++--
 webapp/src/views/SecurityAdminView.vue        |  2 +-
 21 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index 385d22b2..a0ae8dee 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/webapp/src/components/FirmwareInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             Firmware Information
         </div>
         <div class="card-body">
diff --git a/webapp/src/components/HardwareInfo.vue b/webapp/src/components/HardwareInfo.vue
index e923d689..c1131949 100644
--- a/webapp/src/components/HardwareInfo.vue
+++ b/webapp/src/components/HardwareInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             Hardware Information
         </div>
         <div class="card-body">
diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index adea9810..d85be6e8 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/webapp/src/components/InterfaceApInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             Network Interface (Access Point)
         </div>
         <div class="card-body">
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index dd0902a1..4c96cd17 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/webapp/src/components/InterfaceNetworkInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             Network Interface ({{ networkStatus.network_mode }})
         </div>
         <div class="card-body">
diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index 025c0817..e1144dac 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="card" :class="{ 'border-info': channelNumber == 0 }">
         <div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div>
-        <div v-if="channelNumber == 0" class="card-header bg-info">Phase {{ channelNumber + 1 }}</div>
+        <div v-if="channelNumber == 0" class="card-header text-bg-info">Phase {{ channelNumber + 1 }}</div>
         <div class="card-body">
             <table class="table table-striped table-hover">
                 <thead>
diff --git a/webapp/src/components/MemoryInfo.vue b/webapp/src/components/MemoryInfo.vue
index a2609091..52ca7e11 100644
--- a/webapp/src/components/MemoryInfo.vue
+++ b/webapp/src/components/MemoryInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">Memory Information</div>
+        <div class="card-header text-bg-primary">Memory Information</div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index 03774089..62cf4bdf 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/webapp/src/components/RadioInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             Radio Information
         </div>
         <div class="card-body">
@@ -10,8 +10,8 @@
                         <tr>
                             <th>Chip Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !systemStatus.radio_connected,
-                                'bg-success': systemStatus.radio_connected,
+                                'text-bg-danger': !systemStatus.radio_connected,
+                                'text-bg-success': systemStatus.radio_connected,
                             }">
                                 <span v-if="systemStatus.radio_connected">connected</span>
                                 <span v-else>not connected</span>
@@ -20,9 +20,9 @@
                         <tr>
                             <th>Chip Type</th>
                             <td class="badge" :class="{
-                                'bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
-                                'bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
-                                'bg-secondary': !systemStatus.radio_connected,
+                                'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
+                                'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
+                                'text-bg-secondary': !systemStatus.radio_connected,
                             }">
                                 <span
                                     v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index ee057e57..2fe265a7 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             WiFi Information (Access Point)
         </div>
         <div class="card-body">
@@ -10,8 +10,8 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !networkStatus.ap_status,
-                                'bg-success': networkStatus.ap_status,
+                                'text-bg-danger': !networkStatus.ap_status,
+                                'text-bg-success': networkStatus.ap_status,
                             }">
                                 <span v-if="networkStatus.ap_status">enabled</span>
                                 <span v-else>disabled</span>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index 52fcf64a..37997a9e 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <div class="card-header text-white bg-primary">
+        <div class="card-header text-bg-primary">
             WiFi Information (Station)
         </div>
         <div class="card-body">
@@ -10,8 +10,8 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !networkStatus.sta_status,
-                                'bg-success': networkStatus.sta_status,
+                                'text-bg-danger': !networkStatus.sta_status,
+                                'text-bg-success': networkStatus.sta_status,
                             }">
                                 <span v-if="networkStatus.sta_status">enabled</span>
                                 <span v-else>disabled</span>
diff --git a/webapp/src/views/AboutView.vue b/webapp/src/views/AboutView.vue
index 619aac01..91786754 100644
--- a/webapp/src/views/AboutView.vue
+++ b/webapp/src/views/AboutView.vue
@@ -5,7 +5,7 @@
                 <h2 class="accordion-header" id="headingOne">
                     <button class="accordion-button" type="button" data-bs-toggle="collapse"
                         data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                        <span class="badge bg-secondary">
+                        <span class="badge text-bg-secondary">
                             <BIconInfoCircle class="fs-4" />
                         </span>&nbsp;Project Origin
                     </button>
@@ -41,7 +41,7 @@
                 <h2 class="accordion-header" id="headingTwo">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                         data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                        <span class="badge bg-secondary">
+                        <span class="badge text-bg-secondary">
                             <BIconActivity class="fs-4" />
                         </span>&nbsp;News &amp; Updates
                     </button>
@@ -58,7 +58,7 @@
                 <h2 class="accordion-header" id="headingThree">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                         data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                        <span class="badge bg-secondary">
+                        <span class="badge text-bg-secondary">
                             <BIconBug class="fs-4" />
                         </span>&nbsp;Error Reporting
                     </button>
@@ -75,7 +75,7 @@
                 <h2 class="accordion-header" id="headingFour">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                         data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                        <span class="badge bg-secondary">
+                        <span class="badge text-bg-secondary">
                             <BIconChat class="fs-4" />
                         </span>&nbsp;Discussion
                     </button>
diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue
index fdaee042..6d6f1df1 100644
--- a/webapp/src/views/ConfigAdminView.vue
+++ b/webapp/src/views/ConfigAdminView.vue
@@ -5,7 +5,7 @@
         </BootstrapAlert>
 
         <div class="card">
-            <div class="card-header text-white bg-primary">Backup: Configuration File Backup</div>
+            <div class="card-header text-bg-primary">Backup: Configuration File Backup</div>
             <div class="card-body text-center">
                 Backup the configuration file
                 <button class="btn btn-primary" @click="downloadConfig">Backup
@@ -14,7 +14,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Restore: Restore the Configuration File</div>
+            <div class="card-header text-bg-primary">Restore: Restore the Configuration File</div>
             <div class="card-body text-center">
 
                 <div v-if="!uploading && UploadError != ''">
@@ -66,7 +66,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Initialize: Perform Factory Reset</div>
+            <div class="card-header text-bg-primary">Initialize: Perform Factory Reset</div>
             <div class="card-body text-center">
 
                 <button class="btn btn-danger" @click="onFactoryResetModal">Restore Factory-Default Settings
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 47f892c0..2e05ddcc 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -6,7 +6,7 @@
 
         <form @submit="saveDtuConfig">
             <div class="card">
-                <div class="card-header text-white bg-primary">DTU Configuration</div>
+                <div class="card-header text-bg-primary">DTU Configuration</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>
diff --git a/webapp/src/views/FirmwareUpgradeView.vue b/webapp/src/views/FirmwareUpgradeView.vue
index c76b4914..7e4958ec 100644
--- a/webapp/src/views/FirmwareUpgradeView.vue
+++ b/webapp/src/views/FirmwareUpgradeView.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div v-if="!loading && !uploading && OTAError != ''" class="card">
-            <div class="card-header text-white bg-danger">OTA Error</div>
+            <div class="card-header text-bg-danger">OTA Error</div>
             <div class="card-body text-center">
                 <p class="h1 mb-2">
                     <BIconExclamationCircleFill />
@@ -30,7 +30,7 @@
         </div>
 
         <div v-else-if="!loading && !uploading && OTASuccess" class="card">
-            <div class="card-header text-white bg-success">OTA Status</div>
+            <div class="card-header text-bg-success">OTA Status</div>
             <div class="card-body text-center">
                 <span class="h1 mb-2">
                     <BIconCheckCircle />
@@ -45,7 +45,7 @@
         </div>
 
         <div v-else-if="!loading && !uploading" class="card">
-            <div class="card-header text-white bg-primary">Firmware Upload</div>
+            <div class="card-header text-bg-primary">Firmware Upload</div>
             <div class="card-body text-center">
                 <div class="form-group pt-2 mt-3">
                     <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
@@ -54,7 +54,7 @@
         </div>
 
         <div v-else-if="!loading && uploading" class="card">
-            <div class="card-header text-white bg-primary">Upload Progress</div>
+            <div class="card-header text-bg-primary">Upload Progress</div>
             <div class="card-body text-center">
                 <div class="progress">
                     <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 6d8e1478..60d655a4 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -24,11 +24,11 @@
                     :id="'v-pills-' + inverter.serial" role="tabpanel"
                     :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
                     <div class="card">
-                        <div class="card-header text-white bg-primary d-flex justify-content-between align-items-center"
+                        <div class="card-header d-flex justify-content-between align-items-center"
                             :class="{
-                                'bg-danger': !inverter.reachable,
-                                'bg-warning': inverter.reachable && !inverter.producing,
-                                'bg-primary': inverter.reachable && inverter.producing,
+                                'text-bg-danger': !inverter.reachable,
+                                'text-bg-warning': inverter.reachable && !inverter.producing,
+                                'text-bg-primary': inverter.reachable && inverter.producing,
                             }">
                             <div class="p-1 flex-grow-1">
                                 <div class="d-flex flex-wrap">
@@ -79,7 +79,7 @@
                                         @click="onShowEventlog(inverter.serial)" title="Show Eventlog">
                                         <BIconJournalText style="font-size:24px;" />
                                         <span
-                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
                                             {{ inverter.events }}
                                             <span class="visually-hidden">unread messages</span>
                                         </span>
@@ -202,10 +202,10 @@
                                     Status:</label>
                                 <div class="col-sm-9">
                                     <span class="badge" :class="{
-                                        'bg-danger': currentLimitList.limit_set_status == 'Failure',
-                                        'bg-warning': currentLimitList.limit_set_status == 'Pending',
-                                        'bg-success': currentLimitList.limit_set_status == 'Ok',
-                                        'bg-secondary': currentLimitList.limit_set_status == 'Unknown',
+                                        'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
+                                        'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
+                                        'text-bg-success': currentLimitList.limit_set_status == 'Ok',
+                                        'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
                                     }">
                                         {{ currentLimitList.limit_set_status }}
                                     </span>
@@ -277,10 +277,10 @@
                                 Status:</label>
                             <div class="col">
                                 <span class="badge" :class="{
-                                    'bg-danger': successCommandPower == 'Failure',
-                                    'bg-warning': successCommandPower == 'Pending',
-                                    'bg-success': successCommandPower == 'Ok',
-                                    'bg-secondary': successCommandPower == 'Unknown',
+                                    'text-bg-danger': successCommandPower == 'Failure',
+                                    'text-bg-warning': successCommandPower == 'Pending',
+                                    'text-bg-success': successCommandPower == 'Ok',
+                                    'text-bg-secondary': successCommandPower == 'Unknown',
                                 }">
                                     {{ successCommandPower }}
                                 </span>
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index fce77847..682e61e8 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -5,7 +5,7 @@
         </BootstrapAlert>
 
         <div class="card">
-            <div class="card-header text-white bg-primary">Add a new Inverter</div>
+            <div class="card-header text-bg-primary">Add a new Inverter</div>
             <div class="card-body">
                 <form class="form-inline" v-on:submit.prevent="onSubmit">
                     <div class="form-group">
@@ -30,7 +30,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Inverter List</div>
+            <div class="card-header text-bg-primary">Inverter List</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table">
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index f78ea13e..2ada9558 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -6,7 +6,7 @@
 
         <form @submit="saveMqttConfig">
             <div class="card">
-                <div class="card-header text-white bg-primary">MqTT Configuration</div>
+                <div class="card-header text-bg-primary">MqTT Configuration</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label class="col-sm-4 form-check-label" for="inputMqtt">Enable MqTT</label>
@@ -32,7 +32,7 @@
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
-                <div class="card-header text-white bg-primary">
+                <div class="card-header text-bg-primary">
                     MqTT Broker Parameter
                 </div>
                 <div class="card-body">
@@ -127,7 +127,7 @@
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
-                <div class="card-header text-white bg-primary">LWT Parameters</div>
+                <div class="card-header text-bg-primary">LWT Parameters</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
@@ -164,7 +164,7 @@
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
-                <div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Parameters</div>
+                <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Parameters</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputHassTopic" class="col-sm-2 col-form-label">Prefix Topic:</label>
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index 0650a240..2f20f46d 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="'MqTT Info'" :isLoading="dataLoading">
         <div class="card">
-            <div class="card-header text-white bg-primary">Configuration Summary</div>
+            <div class="card-header text-bg-primary">Configuration Summary</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
@@ -9,8 +9,8 @@
                             <tr>
                                 <th>Status</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_enabled,
-                                    'bg-success': mqttDataList.mqtt_enabled,
+                                    'text-bg-danger': !mqttDataList.mqtt_enabled,
+                                    'text-bg-success': mqttDataList.mqtt_enabled,
                                 }">
                                     <span v-if="mqttDataList.mqtt_enabled">enabled</span>
                                     <span v-else>disabled</span>
@@ -39,8 +39,8 @@
                             <tr>
                                 <th>Retain</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_retain,
-                                    'bg-success': mqttDataList.mqtt_retain,
+                                    'text-bg-danger': !mqttDataList.mqtt_retain,
+                                    'text-bg-success': mqttDataList.mqtt_retain,
                                 }">
                                     <span v-if="mqttDataList.mqtt_retain">enabled</span>
                                     <span v-else>disabled</span>
@@ -49,8 +49,8 @@
                             <tr>
                                 <th>TLS</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_tls,
-                                    'bg-success': mqttDataList.mqtt_tls,
+                                    'text-bg-danger': !mqttDataList.mqtt_tls,
+                                    'text-bg-success': mqttDataList.mqtt_tls,
                                 }">
                                     <span v-if="mqttDataList.mqtt_tls">enabled</span>
                                     <span v-else>disabled</span>
@@ -67,7 +67,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary
+            <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary
             </div>
             <div class="card-body">
                 <div class="table-responsive">
@@ -76,8 +76,8 @@
                             <tr>
                                 <th>Status</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_hass_enabled,
-                                    'bg-success': mqttDataList.mqtt_hass_enabled,
+                                    'text-bg-danger': !mqttDataList.mqtt_hass_enabled,
+                                    'text-bg-success': mqttDataList.mqtt_hass_enabled,
                                 }">
                                     <span v-if="mqttDataList.mqtt_hass_enabled">enabled</span>
                                     <span v-else>disabled</span>
@@ -90,8 +90,8 @@
                             <tr>
                                 <th>Retain</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_hass_retain,
-                                    'bg-success': mqttDataList.mqtt_hass_retain,
+                                    'text-bg-danger': !mqttDataList.mqtt_hass_retain,
+                                    'text-bg-success': mqttDataList.mqtt_hass_retain,
                                 }">
                                     <span v-if="mqttDataList.mqtt_hass_retain">enabled</span>
                                     <span v-else>disabled</span>
@@ -100,8 +100,8 @@
                             <tr>
                                 <th>Expire</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_hass_expire,
-                                    'bg-success': mqttDataList.mqtt_hass_expire,
+                                    'text-bg-danger': !mqttDataList.mqtt_hass_expire,
+                                    'text-bg-success': mqttDataList.mqtt_hass_expire,
                                 }">
                                     <span v-if="mqttDataList.mqtt_hass_expire">enabled</span>
                                     <span v-else>disabled</span>
@@ -110,8 +110,8 @@
                             <tr>
                                 <th>Individual Panels</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_hass_individualpanels,
-                                    'bg-success': mqttDataList.mqtt_hass_individualpanels,
+                                    'text-bg-danger': !mqttDataList.mqtt_hass_individualpanels,
+                                    'text-bg-success': mqttDataList.mqtt_hass_individualpanels,
                                 }">
                                     <span v-if="mqttDataList.mqtt_hass_individualpanels">enabled</span>
                                     <span v-else>disabled</span>
@@ -124,7 +124,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Runtime Summary</div>
+            <div class="card-header text-bg-primary">Runtime Summary</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
@@ -132,8 +132,8 @@
                             <tr>
                                 <th>Connection Status</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !mqttDataList.mqtt_connected,
-                                    'bg-success': mqttDataList.mqtt_connected,
+                                    'text-bg-danger': !mqttDataList.mqtt_connected,
+                                    'text-bg-success': mqttDataList.mqtt_connected,
                                 }">
                                     <span v-if="mqttDataList.mqtt_connected">connected</span>
                                     <span v-else>disconnected</span>
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 9ac98f72..a9c0b537 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -6,7 +6,7 @@
 
         <form @submit="saveNetworkConfig">
             <div class="card">
-                <div class="card-header text-white bg-primary">WiFi Configuration</div>
+                <div class="card-header text-bg-primary">WiFi Configuration</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
@@ -50,7 +50,7 @@
             </div>
 
             <div class="card" v-show="!networkConfigList.dhcp">
-                <div class="card-header text-white bg-primary">
+                <div class="card-header text-bg-primary">
                     Static IP Configuration
                 </div>
                 <div class="card-body">
diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue
index 6c19c498..138edc9b 100644
--- a/webapp/src/views/NtpAdminView.vue
+++ b/webapp/src/views/NtpAdminView.vue
@@ -6,7 +6,7 @@
 
         <form @submit="saveNtpConfig">
             <div class="card">
-                <div class="card-header text-white bg-primary">NTP Configuration</div>
+                <div class="card-header text-bg-primary">NTP Configuration</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
@@ -41,7 +41,7 @@
         </form>
 
         <div class="card">
-            <div class="card-header text-white bg-primary">Manual Time Synchronization</div>
+            <div class="card-header text-bg-primary">Manual Time Synchronization</div>
             <div class="card-body">
                 <div class="row mb-3">
                     <label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index 59a56003..aa2f2ecf 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="'NTP Info'" :isLoading="dataLoading">
         <div class="card">
-            <div class="card-header text-white bg-primary">Configuration Summary</div>
+            <div class="card-header text-bg-primary">Configuration Summary</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
@@ -25,7 +25,7 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-white bg-primary">Current Time</div>
+            <div class="card-header text-bg-primary">Current Time</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
@@ -33,8 +33,8 @@
                             <tr>
                                 <th>Status</th>
                                 <td class="badge" :class="{
-                                    'bg-danger': !ntpDataList.ntp_status,
-                                    'bg-success': ntpDataList.ntp_status,
+                                    'text-bg-danger': !ntpDataList.ntp_status,
+                                    'text-bg-success': ntpDataList.ntp_status,
                                 }">
                                     <span v-if="ntpDataList.ntp_status">synced</span>
                                     <span v-else>not synced</span>
diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue
index 8976e725..f6878172 100644
--- a/webapp/src/views/SecurityAdminView.vue
+++ b/webapp/src/views/SecurityAdminView.vue
@@ -6,7 +6,7 @@
 
         <form @submit="savePasswordConfig">
             <div class="card">
-                <div class="card-header text-white bg-primary">Admin password</div>
+                <div class="card-header text-bg-primary">Admin password</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>