Reduce clutter in action tables

src/Website/Views/Admin/ApiKeys.cshtml

@@ -11,13 +11,18 @@
 	<table class="actions">
 		@foreach (var apiKey in Model)
 		{
-			<tr>
+			<tr class="@(apiKey.Enabled ?"green":"red")">
 				<td>@apiKey.Name</td>
 				<td class="stretch"><pre>@apiKey.Key</pre></td>
 				<td><img src="/images/copy.svg" alt="Copy" title="Copy" onclick="navigator.clipboard.writeText('@apiKey.Key')" /></td>
-				<td>@(apiKey.Enabled?"Enabled":"Disabled")</td>
-				<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
-				<td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
+				@if (apiKey.Enabled)
+				{
+					<td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
+				}
+				else
+				{
+					<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
+				}
 				<td><a asp-action="DeleteApiKey" asp-route-key="@apiKey.Key"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
 			</tr>
 		}

src/Website/Views/Admin/Mailboxes.cshtml

@@ -9,12 +9,17 @@
 	<table class="actions">
 		@foreach (var alias in Model)
 		{
-			<tr>
+			<tr class="@(alias.Active?"green":"red")">
 				<td>@alias.Source</td>
 				<td class="stretch">@alias.Destination</td>
-				<td>@(alias.Active?"Enabled":"Disabled")</td>
-				<td><a asp-action="EnableAlias" asp-route-id="@alias.Id"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
-				<td><a asp-action="DisableAlias" asp-route-id="@alias.Id"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
+				@if (alias.Active)
+				{
+					<td><a asp-action="DisableAlias" asp-route-id="@alias.Id"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
+				}
+				else
+				{
+					<td><a asp-action="EnableAlias" asp-route-id="@alias.Id"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
+				}
 				<td><a asp-action="DeleteAlias" asp-route-id="@alias.Id"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
 			</tr>
 		}

src/Website/wwwroot/css/style.scss

@@ -235,8 +235,18 @@ table.actions {
 	border-collapse: collapse;
 	width:100%;
 
-	tr:hover {
-		background: $Grey-300;
+	tr{
+		&.green{
+			background: $LightGreen-A100;
+		}
+		
+		&.red{
+			background: $Red-A100;
+		}
+
+		&:hover {
+			background: $Grey-300;
+		}
 	}
 
 	td {