From a7a265c4b1e04998cc949c0fa3cc6e49858366db Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 19 Jan 2022 14:29:50 +0530
Subject: [PATCH] fix: Set toast's background color based on alert type

---
 frappe/public/js/frappe/ui/messages.js |  9 ++++++---
 frappe/public/scss/desk/dark.scss      | 22 ++++++++++++++++++++++
 frappe/public/scss/desk/toast.scss     | 22 +++++++++++++++++++++-
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/frappe/public/js/frappe/ui/messages.js b/frappe/public/js/frappe/ui/messages.js
index 185d275ac3..17845c0787 100644
--- a/frappe/public/js/frappe/ui/messages.js
+++ b/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();
 
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index f894704ca2..d2c2c70fda 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/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);
+		}
+	}
 }
diff --git a/frappe/public/scss/desk/toast.scss b/frappe/public/scss/desk/toast.scss
index d10cfd871e..18d7ef9944 100644
--- a/frappe/public/scss/desk/toast.scss
+++ b/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;