Minor table UI improvements (#3749)

* Improve icon sizing consistency

* Refactor units table badges

* Bump Node dependencies

* Remove unnecessary &nbsp

package.json

@@ -27,8 +27,8 @@
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.19.6",
-		"@typescript-eslint/eslint-plugin": "^5.60.1",
-		"@typescript-eslint/parser": "^5.60.1",
+		"@typescript-eslint/eslint-plugin": "^5.61.0",
+		"@typescript-eslint/parser": "^5.61.0",
 		"cssnano": "^6.0.1",
 		"esbuild": "^0.18.11",
 		"eslint": "^8.44.0",
@@ -36,21 +36,21 @@
 		"eslint-plugin-editorconfig": "^4.0.3",
 		"eslint-plugin-import": "^2.27.5",
 		"husky": "^8.0.3",
-		"lint-staged": "^13.2.2",
+		"lint-staged": "^13.2.3",
 		"markdownlint-cli2": "^0.8.1",
 		"postcss": "^8.4.24",
 		"postcss-import": "^15.1.0",
 		"postcss-path-replace": "^1.0.4",
-		"postcss-preset-env": "^8.5.1",
+		"postcss-preset-env": "^9.0.0",
 		"postcss-size": "^4.0.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-nginx": "^1.0.3",
 		"prettier-plugin-sh": "^0.12.8",
 		"prettier-plugin-sql": "^0.14.0",
-		"stylelint": "^15.9.0",
-		"stylelint-config-standard": "^33.0.0",
+		"stylelint": "^15.10.0",
+		"stylelint-config-standard": "^34.0.0",
 		"typescript": "^5.1.6",
-		"vitepress": "1.0.0-beta.3",
+		"vitepress": "1.0.0-beta.5",
 		"vue": "^3.3.4"
 	},
 	"browserslist": [

web/css/src/themes/dark.css

@@ -440,6 +440,16 @@
 	}
 }
 
+.units-table-badge {
+	@media (--viewport-large) {
+		color: #dadada;
+		border-color: #212121;
+		box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
+		text-shadow: 0 1px rgb(0 0 0 / 70%);
+		background-color: #252525;
+	}
+}
+
 /* Statistics
    ========================================================================== */
 
@@ -700,17 +710,6 @@
 	}
 }
 
-/* Badge component
-   ========================================================================== */
-
-.badge {
-	color: #dadada;
-	border-color: #212121;
-	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
-	text-shadow: 0 1px rgb(0 0 0 / 70%);
-	background-color: #252525;
-}
-
 /* Icon component
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -1024,9 +1024,19 @@
 		margin-right: 0;
 	}
 
+	& .fas {
+		padding: 5px 5px 5px 10px;
+		font-size: 0.9rem;
+	}
+
 	@media (--viewport-large) {
 		margin-right: 0;
 		margin-bottom: 0;
+
+		& .fas {
+			color: silver;
+			padding: 4px;
+		}
 	}
 }
 
@@ -1038,20 +1048,29 @@
 	align-items: center;
 	padding-right: 10px;
 
-	& .fas {
-		padding: 5px 5px 5px 10px;
-		font-size: 0.9rem;
-	}
-
 	@media (--viewport-large) {
 		background-color: transparent;
 		border: 0;
 		padding-right: 0;
+	}
+}
 
-		& .fas {
-			color: silver;
-			padding: 4px;
-		}
+.units-table-badge {
+	@media (--viewport-large) {
+		display: inline-block;
+		min-width: 26px;
+		line-height: 24px;
+		border-radius: 13px;
+		font-weight: 700;
+		font-size: 0.75rem;
+		box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
+		color: #6c6c6c;
+		padding-left: 4px;
+		padding-right: 4px;
+		text-align: center;
+		text-shadow: 0 1px #fafafa;
+		border: 1px solid #b8b8b8;
+		background-color: #eaeaea;
 	}
 }
 
@@ -2113,26 +2132,6 @@
 	padding-bottom: 20px;
 }
 
-/* Badge component
-   ========================================================================== */
-
-.badge {
-	display: inline-block;
-	min-width: 26px;
-	line-height: 24px;
-	border-radius: 13px;
-	font-weight: 700;
-	font-size: 0.75rem;
-	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
-	color: #6c6c6c;
-	padding-left: 4px;
-	padding-right: 4px;
-	text-align: center;
-	text-shadow: 0 1px #fafafa;
-	border: 1px solid #b8b8b8;
-	background-color: #eaeaea;
-}
-
 /* Icon component
    ========================================================================== */
 

web/css/src/themes/flat.css

@@ -73,6 +73,12 @@
 	}
 }
 
+.units-table-badge {
+	@media (--viewport-large) {
+		box-shadow: none;
+	}
+}
+
 /* Statistics
    ========================================================================== */
 
@@ -93,13 +99,6 @@
 	}
 }
 
-/* Badge component
-   ========================================================================== */
-
-.badge {
-	box-shadow: none;
-}
-
 /* Collapse component
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -221,6 +221,14 @@ h1 {
 	}
 }
 
+.units-table-badge {
+	@media (--viewport-large) {
+		border-color: #eaeaea;
+		box-shadow: none;
+		border-radius: 4px;
+	}
+}
+
 /* Statistics
    ========================================================================== */
 
@@ -360,15 +368,6 @@ h1 {
 	box-shadow: none;
 }
 
-/* Badge component
-   ========================================================================== */
-
-.badge {
-	border-color: #eaeaea;
-	box-shadow: none;
-	border-radius: 4px;
-}
-
 /* Shortcuts panel
    ========================================================================== */
 

web/templates/pages/list_firewall.php

@@ -159,7 +159,7 @@
 				</div>
 				<div class="units-table-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
-					<?php if (!empty($data[$key]['COMMENT'])) echo '' . $data[$key]['COMMENT']; else echo "&nbsp;"; ?>
+					<?php if (!empty($data[$key]['COMMENT'])) { echo $data[$key]['COMMENT']; } ?>
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Protocol") ?>:</span>

web/templates/pages/list_packages.php

@@ -213,7 +213,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Web Domains") ?>:</span>
-					<span class="badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
+					<span class="units-table-badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
 						<?php if ($data[$key]["WEB_DOMAINS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -223,7 +223,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Web Aliases") ?>:</span>
-					<span class="badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
+					<span class="units-table-badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
 						<?php if ($data[$key]["WEB_ALIASES"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -233,7 +233,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("DNS Zones") ?>:</span>
-					<span class="badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
+					<span class="units-table-badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
 						<?php if ($data[$key]["DNS_DOMAINS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -243,7 +243,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("DNS Records") ?>:</span>
-					<span class="badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
+					<span class="units-table-badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
 						<?php if ($data[$key]["DNS_RECORDS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -253,7 +253,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Mail Domains") ?>:</span>
-					<span class="badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
+					<span class="units-table-badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
 						<?php if ($data[$key]["MAIL_DOMAINS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -263,7 +263,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Mail Accounts") ?>:</span>
-					<span class="badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
+					<span class="units-table-badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
 						<?php if ($data[$key]["MAIL_ACCOUNTS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -273,7 +273,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Databases") ?>:</span>
-					<span class="badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
+					<span class="units-table-badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
 						<?php if ($data[$key]["DATABASES"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -283,7 +283,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Cron Jobs") ?>:</span>
-					<span class="badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
+					<span class="units-table-badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
 						<?php if ($data[$key]["CRON_JOBS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>
@@ -293,7 +293,7 @@
 				</div>
 				<div class="units-table-cell compact u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Backups") ?>:</span>
-					<span class="badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
+					<span class="units-table-badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
 						<?php if ($data[$key]["BACKUPS"] == "unlimited") { ?>
 							&infin;
 						<?php } else { ?>

web/templates/pages/list_search.php

@@ -163,7 +163,7 @@
 						<?= $value["USER"] ?>
 					</a>
 					<?php if (!($_SESSION["POLICY_SYSTEM_HIDE_ADMIN"] === "yes" && $value["USER"] !== "admin") && $_SESSION["userContext"] === "admin") { ?>
-						<a href="/login/?loginas=<?= $value["USER"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $value["USER"] ?>">
+						<a href="/login/?loginas=<?= $value["USER"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $value["USER"] ?>" class="u-ml5">
 							<i class="fas fa-right-to-bracket icon-green icon-dim"></i>
 							<span class="u-hidden-visually"><?= _("Log in as") ?> <?= $value["USER"] ?></span>
 						</a>

web/templates/pages/list_user.php

@@ -171,7 +171,7 @@
 					<ul class="units-table-row-actions">
 						<?php if ($key == $user_plain) { ?>
 							<li class="units-table-row-action">
-								<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
+								<i class="fas fa-user-check" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
 								<span class="u-hide-desktop"><?= $key ?> (<?= $data[$key]["NAME"] ?>)</span>
 							</li>
 						<?php } else { ?>
@@ -272,31 +272,31 @@
 				</div>
 				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Web Domains") ?>:</span>
-					<span class="badge">
+					<span class="units-table-badge">
 						<?= $data[$key]["U_WEB_DOMAINS"] ?>
 					</span>
 				</div>
 				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("DNS Zones") ?>:</span>
-					<span class="badge">
+					<span class="units-table-badge">
 						<?= $data[$key]["U_DNS_DOMAINS"] ?>
 					</span>
 				</div>
 				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Mail Domains") ?>:</span>
-					<span class="badge">
+					<span class="units-table-badge">
 						<?= $data[$key]["U_MAIL_DOMAINS"] ?>
 					</span>
 				</div>
 				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
-					<span class="badge">
+					<span class="units-table-badge">
 						<?= $data[$key]["U_DATABASES"] ?>
 					</span>
 				</div>
 				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
-					<span class="badge">
+					<span class="units-table-badge">
 						<?= $data[$key]["U_BACKUPS"] ?>
 					</span>
 				</div>