From 06345fbc0dc706bdfc52b005dc96e12af4b27c02 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 7 Aug 2024 16:18:01 +0200
Subject: [PATCH] firewall.cgi: Fix colouring of the rule actions

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 html/cgi-bin/firewall.cgi                     | 57 +++++++------------
 html/html/themes/ipfire/include/css/style.css |  9 ++-
 2 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/html/cgi-bin/firewall.cgi b/html/cgi-bin/firewall.cgi
index b11381eea..240a959f3 100644
--- a/html/cgi-bin/firewall.cgi
+++ b/html/cgi-bin/firewall.cgi
@@ -1987,41 +1987,28 @@ END
 		&Header::closebox;
 		$checked{"RULE_ACTION"}{$fwdfwsettings{'RULE_ACTION'}}	= 'CHECKED';
 		print <<END;
-			<center>
-				<table width="80%" class='tbl' id='actions'>
-					<tr>
-						<td width="33%" align="center" bgcolor="$color{'color17'}">
-							&nbsp;<br>&nbsp;
-						</td>
-						<td width="33%" align="center" bgcolor="$color{'color25'}">
-							&nbsp;<br>&nbsp;
-						</td>
-						<td width="33%" align="center" bgcolor="$color{'color16'}">
-							&nbsp;<br>&nbsp;
-						</td>
-					</tr>
-					<tr>
-						<td width="33%" align="center">
-							<label>
-								<input type="radio" name="RULE_ACTION" value="ACCEPT" $checked{"RULE_ACTION"}{"ACCEPT"}>
-								<strong>$Lang::tr{'fwdfw ACCEPT'}</strong>
-							</label>
-						</td>
-						<td width="33%" align="center">
-							<label>
-								<input type="radio" name="RULE_ACTION" value="DROP" $checked{"RULE_ACTION"}{"DROP"}>
-								<strong>$Lang::tr{'fwdfw DROP'}</strong>
-							</label>
-						</td>
-						<td width="33%" align="center">
-							<label>
-								<input type="radio" name="RULE_ACTION" value="REJECT" $checked{"RULE_ACTION"}{"REJECT"}>
-								<strong>$Lang::tr{'fwdfw REJECT'}</strong>
-							</label>
-						</td>
-					</tr>
-				</table>
-			</center>
+			<table class='tbl' id='actions'>
+				<tr>
+					<td width="33%" class="policy is-allowed">
+						<label>
+							<input type="radio" name="RULE_ACTION" value="ACCEPT" $checked{"RULE_ACTION"}{"ACCEPT"}>
+							<strong>$Lang::tr{'fwdfw ACCEPT'}</strong>
+						</label>
+					</td>
+					<td width="33%" class="policy is-blocked">
+						<label>
+							<input type="radio" name="RULE_ACTION" value="DROP" $checked{"RULE_ACTION"}{"DROP"}>
+							<strong>$Lang::tr{'fwdfw DROP'}</strong>
+						</label>
+					</td>
+					<td width="33%" class="policy is-rejected">
+						<label>
+							<input type="radio" name="RULE_ACTION" value="REJECT" $checked{"RULE_ACTION"}{"REJECT"}>
+							<strong>$Lang::tr{'fwdfw REJECT'}</strong>
+						</label>
+					</td>
+				</tr>
+			</table>
 
 			<br>
 END
diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 68fe167f3..c935f2ff4 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -7,6 +7,8 @@
 	--color-blue-invert    : #ffffff;
 	--color-orange         : #ff9933;
 	--color-orange-invert  : #ffffff;
+	--color-black          : #000000;
+	--color-black-invert   : #ffffff;
 	--color-grey           : #d6d6d6;
 	--color-light-grey     : #f0f0f0;
 
@@ -458,11 +460,16 @@ table {
 	color: var(--color-red-invert);
 }
 
-.tbl .policy.is-allowed{
+.tbl .policy.is-allowed {
 	background-color: var(--color-green);
 	color: var(--color-green-invert);
 }
 
+.tbl .policy.is-rejected {
+	background-color: var(--color-black);
+	color: var(--color-black-invert);
+}
+
 /* Notes */
 
 .notes .is-warning {
-- 
2.39.5