improve firewall rules table (WIP)

3 files changed, 33 insertions, 29 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-dark.css b/src/usr/local/www/bootstrap/css/pfSense-dark.css
index 63380de..e1ec492 100644
--- a/src/usr/local/www/bootstrap/css/pfSense-dark.css
+++ b/src/usr/local/www/bootstrap/css/pfSense-dark.css
@@ -46,6 +46,10 @@ table.sortable-theme-bootstrap {
     background-color: #212121 !important;
 }
 
+.table>tbody+tbody {
+    border-top: 2px solid #616161;
+}
+
 .dropdown-menu {
     background-color: #000;
     opacity: .93;
@@ -307,21 +311,6 @@ a.list-group-item .list-group-item-heading, .list-group-item .list-group-item-he
     background-color: #009688;
 }
 
-.bg-info {
-    color: #000;
-    background-color: #B0BEC5;
-}
-
-.bg-danger {
-    color: #000;
-    background-color: #EF9A9A;
-}
-
-.bg-warning {
-    color: #000;
-    background-color: #FFF9C4;
-}
-
 .bg-success {
     color: #000;
     background-color: #80CBC4;
diff --git a/src/usr/local/www/bootstrap/css/pfSense.css b/src/usr/local/www/bootstrap/css/pfSense.css
index ff2976a..546718c 100644
--- a/src/usr/local/www/bootstrap/css/pfSense.css
+++ b/src/usr/local/www/bootstrap/css/pfSense.css
@@ -276,7 +276,7 @@ ul.context-links li a {
 }
 
 .table>tbody>tr>td {
-    padding: 4px 4px 4px 10px;
+    padding: 6px 4px 6px 10px;
 }
 
 /* active table row */
@@ -502,8 +502,8 @@ footer a {
 }
 
 .bg-info {
-    color: #000;
-    background-color: #80DEEA;
+    color: #01579B;
+    background-color: #E1F5FE;
 }
 
 .bg-danger {
@@ -521,6 +521,21 @@ footer a {
     background-color: #A5D6A7;
 }
 
+.table-hover>tbody>tr.hover-success:hover {
+    color: #000;
+    background-color: #A5D6A7;   
+}
+
+.table-hover>tbody>tr.hover-danger:hover {
+    color: #000;
+    background-color: #EF9A9A;   
+}
+
+.table-hover>tbody>tr.hover-warning:hover {
+    color: #000;
+    background-color: #FFF9C4;
+}
+
 /** icons are often used with onclick actions, so we need the cursor to change to a pointer */
 .icon-pointer
 {
diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php
index 127896b..4106304 100644
--- a/src/usr/local/www/firewall_rules.php
+++ b/src/usr/local/www/firewall_rules.php
@@ -301,7 +301,7 @@ display_top_tabs($tab_array);
 	     ((count($config['interfaces']) == 1) && ($if == 'wan')))):
 		$alports = implode('<br />', filter_get_antilockout_ports(true));
 ?>
-					<tr id="antilockout">
+					<tr id="antilockout" class="hover-success">
 						<td></td>
 						<td title="<?=gettext("traffic is passed")?>"><i class="fa fa-check text-success"></i></td>
 						<td>*</td>
@@ -312,14 +312,14 @@ display_top_tabs($tab_array);
 						<td>*</td>
 						<td>*</td>
 						<td></td>
-						<td><?=gettext("Anti-Lockout Rule");?></td>
+						<td class="bg-info"><?=gettext("Anti-Lockout Rule");?></td>
 						<td>
-							<a href="system_advanced_admin.php" class="fa fa-cog" title="<?=gettext("Settings");?>"></a>
+							<a href="system_advanced_admin.php" title="<?=gettext("Settings");?>"><i class="fa fa-cog"></i></a>
 						</td>
 					</tr>
 <?php endif;?>
 <?php if (isset($config['interfaces'][$if]['blockpriv'])): ?>
-					<tr id="frrfc1918">
+					<tr id="frrfc1918" class="hover-danger">
 						<td></td>
 						<td title="<?=gettext("traffic is blocked")?>"><i class="fa fa-times text-danger"></i></td>
 						<td>*</td>
@@ -330,14 +330,14 @@ display_top_tabs($tab_array);
 						<td>*</td>
 						<td>*</td>
 						<td></td>
-						<td><?=gettext("Block private networks");?></td>
+						<td class="bg-info"><?=gettext("Block private networks");?></td>
 						<td>
-							<a href="interfaces.php?if=<?=htmlspecialchars($if)?>" class="fa fa-cog" title="<?=gettext("Settings");?>"></a>
+							<a href="interfaces.php?if=<?=htmlspecialchars($if)?>" title="<?=gettext("Settings");?>"><i class="fa fa-cog"></i></a>
 						</td>
 					</tr>
 <?php endif;?>
 <?php if (isset($config['interfaces'][$if]['blockbogons'])): ?>
-					<tr id="frrfc1918">
+					<tr id="frrfc1918" class="hover-danger">
 					<td></td>
 						<td title="<?=gettext("traffic is blocked")?>"><i class="fa fa-times text-danger"></i></td>
 						<td>*</td>
@@ -348,9 +348,9 @@ display_top_tabs($tab_array);
 						<td>*</td>
 						<td>*</td>
 						<td></td>
-						<td><?=gettext("Block bogon networks");?></td>
+						<td class="bg-info"><?=gettext("Block bogon networks");?></td>
 						<td>
-							<a href="interfaces.php?if=<?=htmlspecialchars($if)?>" class="fa fa-cog" title="<?=gettext("Settings");?>"></a>
+							<a href="interfaces.php?if=<?=htmlspecialchars($if)?>" title="<?=gettext("Settings");?>"><i class="fa fa-cog"></i></a>
 						</td>
 					</tr>
 <?php endif;?>
@@ -628,10 +628,10 @@ for ($i = 0; isset($a_filter[$i]); $i++):
 							<?php } ?>
 							<?=$schedule_span_begin;?><?=htmlspecialchars($filterent['sched']);?>&nbsp;<?=$schedule_span_end;?>
 						</td>
-						<td>
+						<td class="bg-info">
 							<?=htmlspecialchars($filterent['descr']);?>
 						</td>
-						<td>
+						<td class="action-icons">
 						<!-- <?=(isset($filterent['disabled']) ? 'enable' : 'disable')?> -->
 							<a href="firewall_rules_edit.php?id=<?=$i;?>" class="fa fa-pencil" title="<?=gettext('Edit')?>"></a>
 							<a href="firewall_rules_edit.php?dup=<?=$i;?>" class="fa fa-clone" title="<?=gettext('Copy')?>"></a>