diff --git a/frappe/core/page/desktop/desktop.js b/frappe/core/page/desktop/desktop.js
index 828b52f6b1..aa99d351bc 100644
--- a/frappe/core/page/desktop/desktop.js
+++ b/frappe/core/page/desktop/desktop.js
@@ -108,10 +108,7 @@ $.extend(frappe.desktop, {
help_messages.forEach(function(message, i) {
var $message = $('
')
.attr('data-message-idx', i)
- .html($.format('{0}
\
- {1}
\
- ',
- [message.title, message.description, message.route, message.action]))
+ .html(frappe.render_template('desktop_help_message', message))
.appendTo($help_messages);
});
diff --git a/frappe/core/page/desktop/desktop_help_message.html b/frappe/core/page/desktop/desktop_help_message.html
new file mode 100644
index 0000000000..7de47abf03
--- /dev/null
+++ b/frappe/core/page/desktop/desktop_help_message.html
@@ -0,0 +1,8 @@
+{{ title }}
+{{ description }}
+
\ No newline at end of file
diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css
index b29d93f2b0..8962b02129 100644
--- a/frappe/public/css/desktop.css
+++ b/frappe/public/css/desktop.css
@@ -234,3 +234,24 @@ body[data-route="desktop"] .navbar-set-desktop-icons {
.help-message-wrapper .indicator {
color: #36414C;
}
+.help-message-wrapper .help-progress {
+ display: inline-block;
+ margin-left: 10px;
+ height: 4px;
+ background-color: #fafbfc;
+}
+.help-message-wrapper .help-progress {
+ display: inline-block;
+ margin-left: 10px;
+ height: 4px;
+ width: 100px;
+ background-color: #f5f7fa;
+ border-radius: 2px;
+}
+.help-message-wrapper .help-progress-bar {
+ display: inline-block;
+ height: 4px;
+ background-color: #5E64FF;
+ float: left;
+ border-radius: 2px;
+}
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index 28c89fc46c..8c8680a595 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -293,5 +293,27 @@ body[data-route="desktop"] .navbar-set-desktop-icons {
color: @text-color;
}
+ .help-progress {
+ display: inline-block;
+ margin-left: 10px;
+ height: 4px;
+ background-color: @light-bg;
+ }
+ .help-progress {
+ display: inline-block;
+ margin-left: 10px;
+ height: 4px;
+ width: 100px;
+ background-color: @navbar-bg;
+ border-radius: 2px;
+ }
+ .help-progress-bar {
+ display: inline-block;
+ height: 4px;
+ background-color: @brand-primary;
+ float: left;
+ border-radius: 2px;
+ }
+
}