fix: Set toast's background color based on alert type

frappe/public/js/frappe/ui/messages.js

@@ -365,7 +365,7 @@ frappe.show_alert = frappe.toast = function(message, seconds=7, actions={}) {
 	let indicator_icon_map = {
 		'orange': "solid-warning",
 		'yellow': "solid-warning",
-		'blue': "solid-success",
+		'blue': "solid-info",
 		'green': "solid-success",
 		'red': "solid-error"
 	};
@@ -387,8 +387,10 @@ frappe.show_alert = frappe.toast = function(message, seconds=7, actions={}) {
 		icon = 'solid-info';
 	}
 
+	const indicator = message.indicator || 'blue';
+
 	const div = $(`
-		<div class="alert desk-alert">
+		<div class="alert desk-alert ${indicator}">
 			<div class="alert-message-container">
 				<div class="alert-title-container">
 					<div>${frappe.utils.icon(icon, 'lg')}</div>
@@ -398,7 +400,8 @@ frappe.show_alert = frappe.toast = function(message, seconds=7, actions={}) {
 			</div>
 			<div class="alert-body" style="display: none"></div>
 			<a class="close">${frappe.utils.icon('close-alt')}</a>
-		</div>`);
+		</div>
+	`);
 
 	div.hide().appendTo("#alert-container").show();
 

frappe/public/scss/desk/dark.scss

@@ -166,4 +166,26 @@
 		color: var(--text-color);
 		background: var(--gray-500);
 	}
+
+	.desk-alert {
+		&.red {
+			--toast-bg: var(--red-900);
+		}
+
+		&.yellow {
+			--toast-bg: var(--yellow-900);
+		}
+
+		&.orange {
+			--toast-bg: var(--orange-900);
+		}
+
+		&.blue {
+			--toast-bg: var(--blue-900);
+		}
+
+		&.green {
+			--toast-bg: var(--green-900);
+		}
+	}
 }

frappe/public/scss/desk/toast.scss

@@ -9,7 +9,27 @@
 	}
 }
 
-#alert-container .desk-alert {
+.desk-alert {
+	&.red {
+		--toast-bg: var(--red-100);
+	}
+
+	&.yellow {
+		--toast-bg: var(--yellow-50);
+	}
+
+	&.orange {
+		--toast-bg: var(--orange-50);
+	}
+
+	&.blue {
+		--toast-bg: var(--blue-50);
+	}
+
+	&.green {
+		--toast-bg: var(--green-50);
+	}
+
 	box-shadow: var(--modal-shadow);
 	width: 400px;
 	min-height: 50px;