From 3cfe40fa65fb69430d7a3825c6f207f188661e98 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 7 Aug 2024 15:39:40 +0200
Subject: [PATCH] vpnmain.cgi: Fix connection status colours

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 html/cgi-bin/vpnmain.cgi                      | 16 ++++++++--------
 html/html/themes/ipfire/include/css/style.css | 11 +++++++++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/html/cgi-bin/vpnmain.cgi b/html/cgi-bin/vpnmain.cgi
index 25e0f0a53..4423a29a8 100644
--- a/html/cgi-bin/vpnmain.cgi
+++ b/html/cgi-bin/vpnmain.cgi
@@ -3402,21 +3402,21 @@ END
 	foreach my $line (@status) {
 		if (($line =~ /\"$confighash{$key}[1]\".*IPsec SA established/) ||
 		($line =~ /$confighash{$key}[1]\{.*INSTALLED/)) {
-			$col1="bgcolor='${Header::colourgreen}'";
-			$active = "<b><font color='#FFFFFF'>$Lang::tr{'capsopen'}</font></b>";
+			$col1="class='status is-connected'";
+			$active = "$Lang::tr{'capsopen'}";
 			last;
 		} elsif ($line =~ /$confighash{$key}[1]\[.*CONNECTING/) {
-			$col1="bgcolor='${Header::colourorange}'";
-			$active = "<b><font color='#FFFFFF'>$Lang::tr{'vpn connecting'}</font></b>";
+			$col1="class='status is-connecting'";
+			$active = "$Lang::tr{'vpn connecting'}";
 		} elsif ($line =~ /$confighash{$key}[1]\{.*ROUTED/) {
-			$col1="bgcolor='${Header::colourorange}'";
-			$active = "<b><font color='#FFFFFF'>$Lang::tr{'vpn on-demand'}</font></b>";
+			$col1="class='status is-connecting'";
+			$active = "$Lang::tr{'vpn on-demand'}";
 		}
 	}
 	# move to blue if really down
 	if ($confighash{$key}[0] eq 'off' && $col1 =~ /${Header::colourred}/ ) {
-		$col1="bgcolor='${Header::colourblue}'";
-		$active = "<b><font color='#FFFFFF'>$Lang::tr{'capsclosed'}</font></b>";
+		$col1="class='status is-disabled'";
+		$active = "$Lang::tr{'capsclosed'}";
 	}
 	print <<END
 	<td align='center' $col1>$active</td>
diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index dac06ea89..5b1f84b3e 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -5,6 +5,8 @@
 	--color-red-invert     : #ffffff;
 	--color-blue           : #333399;
 	--color-blue-invert    : #ffffff;
+	--color-orange         : #ff9933;
+	--color-orange-invert  : #ffffff;
 	--color-grey           : #d6d6d6;
 	--color-light-grey     : #f0f0f0;
 
@@ -385,7 +387,7 @@ table {
 	font-weight: bold;
 }
 
-.tbl .status.is-running {
+.tbl .status.is-running, .tbl .status.is-connected {
 	background-color: var(--color-green);
 	color: var(--color-green-invert);
 }
@@ -397,12 +399,17 @@ table {
 	width: 33%;
 }
 
+.tbl .status.is-connecting {
+	background-color: var(--color-orange);
+	color: var(--color-orange-invert);
+}
+
 .tbl .status.is-vulnerable {
 	background-color: var(--color-red);
 	color: var(--color-red-invert);
 }
 
-.tbl .status.is-mitigation {
+.tbl .status.is-disabled, .tbl .status.is-mitigation {
 	background-color: var(--color-blue);
 	color: var(--color-blue-invert);
 }
-- 
2.39.5