Refactor inline alerts (hestiacp#3157)

Author: AlecRust

package.json

@@ -26,7 +26,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.46.1",
 		"@typescript-eslint/parser": "^5.46.1",
 		"cssnano": "^5.1.14",
-		"eslint": "^8.29.0",
+		"eslint": "^8.30.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-editorconfig": "^4.0.2",
 		"husky": "^8.0.2",
@@ -45,7 +45,7 @@
 		"stylelint-config-prettier": "^9.0.4",
 		"stylelint-config-standard": "^29.0.0",
 		"typescript": "^4.9.4",
-		"vitepress": "1.0.0-alpha.31",
+		"vitepress": "1.0.0-alpha.32",
 		"vue": "^3.2.45"
 	}
 }

web/css/src/themes/dark.css

@@ -8,7 +8,7 @@
 
 :root {
 	--color-text: #cdcdcd;
-	--color-text-link: #52b9ff;
+	--color-text-link: #4fabe9;
 	--color-text-link-hover: #ff3478;
 	--color-background: #282828;
 	--alert-border-color: #212121;
@@ -51,23 +51,8 @@ strong {
 		}
 	}
 
-	&.unseen {
-		& .top-bar-notification-title,
-		& .top-bar-notification-title a {
-			color: #fff;
-		}
-	}
-
-	& a {
-		color: #4fabe9;
-
-		&:hover {
-			color: #09f;
-		}
-
-		&:active {
-			color: #0079cb;
-		}
+	&.unseen .top-bar-notification-title {
+		color: #fff;
 	}
 }
 
@@ -936,13 +921,7 @@ form#vstobjects.suspended {
 /* Inline alerts
    ========================================================================== */
 
-.inline-danger {
-	color: #f33;
-}
-
-.inline-success {
-	color: #53ba55;
-
+.inline-alert-success {
 	& a {
 		color: #fff;
 

web/css/src/themes/default.css

@@ -194,15 +194,6 @@
 	&.unseen {
 		& .top-bar-notification-title {
 			color: #c36;
-
-			& a {
-				color: #c36;
-
-				&:hover,
-				&:active {
-					color: #e83b75;
-				}
-			}
 		}
 
 		& .top-bar-notification-delete {
@@ -211,16 +202,7 @@
 	}
 
 	& a {
-		color: #1a4492;
 		font-weight: 600;
-
-		&:hover {
-			color: #4a87fb;
-		}
-
-		&:active {
-			color: #1a4492;
-		}
 	}
 }
 
@@ -823,8 +805,7 @@
 		display: flex;
 		align-items: center;
 
-		& .inline-success,
-		& .inline-danger {
+		& .inline-alert {
 			margin-right: 20px;
 		}
 
@@ -2334,27 +2315,6 @@ form#vstobjects.suspended {
 	padding-bottom: 30px;
 }
 
-#tooltip {
-	background-color: #3b9de8;
-	border-radius: 15px;
-	bottom: 6px;
-	color: #fff;
-	font-size: 0.8rem;
-	font-weight: 600;
-	height: 26px;
-	left: 12px;
-	letter-spacing: 0;
-	line-height: 25px;
-	margin-left: 12px;
-	margin-top: 7px;
-	padding: 3px 14px 3px 27px;
-	position: absolute;
-	text-transform: uppercase;
-	white-space: nowrap;
-	word-break: keep-all;
-	z-index: -1;
-}
-
 /* Badge component
    ========================================================================== */
 
@@ -2375,10 +2335,10 @@ form#vstobjects.suspended {
 }
 
 .l-unit--suspended .badge {
-	background: #eaeaea !important;
-	color: #c0c0c0 !important;
-	text-shadow: 0 -1px #fafafa !important;
-	box-shadow: 0 1px 2px rgb(120 120 120 / 30%) !important;
+	background: #eaeaea;
+	color: #c0c0c0;
+	text-shadow: 0 -1px #fafafa;
+	box-shadow: 0 1px 2px rgb(120 120 120 / 30%);
 }
 
 /* Icon component
@@ -2633,26 +2593,22 @@ form#vstobjects.suspended {
 /* Inline alerts
 		========================================================================== */
 
-.inline-danger {
-	color: #f33;
+.inline-alert {
+	display: flex;
 	font-weight: 600;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 
 	& .fas {
-		margin-right: 3px;
+		margin-top: 4px;
+		margin-right: 6px;
 	}
 }
 
-.inline-success {
-	color: #53ba55;
-	font-weight: 600;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.inline-alert-danger {
+	color: #f33;
+}
 
-	& .fas {
-		margin-right: 3px;
-	}
+.inline-alert-success {
+	color: #53ba55;
 
 	& a {
 		color: #326b9b;

web/css/src/themes/vestia.css

@@ -37,9 +37,8 @@ strong {
 	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
 }
 
-.top-bar-notification-item.unseen {
-	& .top-bar-notification-title,
-	& .top-bar-notification-title a {
+.top-bar-notification-item {
+	&.unseen .top-bar-notification-title {
 		color: #111;
 	}
 }

web/css/themes/dark.min.css

@@ -219,23 +219,27 @@ function verify_csrf($method, $return = false) {
 }
 
 function show_alert_message($data) {
-	if (!empty($data["error_msg"]) || !empty($data["ok_msg"])) {
-		if (!empty($data["error_msg"])) {
-			$msg_icon = "fa-circle-exclamation icon-red";
-			$msg_text = htmlentities($data["error_msg"]);
-			$msg_class = "inline-danger";
-		} else {
-			$msg_icon = "fa-circle-check icon-green";
-			$msg_text = $data["ok_msg"];
-			$msg_class = "inline-success";
-		}
-		echo '<p class="' .
-			$msg_class .
-			' u-mb20"><i class="fas ' .
-			$msg_icon .
-			'"></i> ' .
-			$msg_text .
-			"</p>";
+	$msgIcon = "";
+	$msgText = "";
+	$msgClass = "";
+
+	if (!empty($data["error_msg"])) {
+		$msgIcon = "fa-circle-exclamation";
+		$msgText = htmlentities($data["error_msg"]);
+		$msgClass = "inline-alert-danger";
+	} elseif (!empty($data["ok_msg"])) {
+		$msgIcon = "fa-circle-check";
+		$msgText = $data["ok_msg"];
+		$msgClass = "inline-alert-success";
+	}
+
+	if (!empty($msgText)) {
+		printf(
+			'<p class="inline-alert %s u-mb20"><i class="fas %s"></i> %s</p>',
+			$msgClass,
+			$msgIcon,
+			$msgText,
+		);
 	}
 }
 

web/css/themes/default.min.css

@@ -72,6 +72,7 @@ class="button button-secondary button-circle button-floating button-floating-top
 <?php if (!empty($_SESSION["error_msg"])): ?>
 	<div>
 		<script>
+			// TODO: This is broken, $ is not defined
 			$(function() {
 				$('#dialog:ui-dialog').dialog('destroy');
 				$('#dialog-message').dialog({

web/css/themes/vestia.min.css

@@ -89,6 +89,7 @@ class="top-bar-notification-item"
 											x-on:click="remove(notification.ID)"
 											type="button"
 											class="top-bar-notification-delete"
+											title="<?= _("Delete notification") ?>"
 										>
 											<i class="fas fa-xmark"></i>
 										</button>