From 0ab496408eeef46c8d4440da4159023bd1133f12 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 2 Dec 2020 13:01:49 +0530
Subject: [PATCH] fix(minor): timeline

---
 frappe/desk/page/user_profile/user_profile.html  |  2 +-
 frappe/desk/page/user_profile/user_profile.js    | 12 ++++++------
 .../public/js/frappe/utils/energy_point_utils.js | 16 +++++++++-------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frappe/desk/page/user_profile/user_profile.html b/frappe/desk/page/user_profile/user_profile.html
index 0d7ee51a37..b4d0fe8c22 100644
--- a/frappe/desk/page/user_profile/user_profile.html
+++ b/frappe/desk/page/user_profile/user_profile.html
@@ -37,7 +37,7 @@
 		</div>
 		<div class="recent-activity">
 			<p class="recent-activity-title h6 uppercase">{%=__("Recent Activity") %}</p>
-			<div class="recent-activity-list">
+			<div class="recent-activity-list py-2">
 			</div>
 			<div class="show-more-activity"><a class="text-muted">{%=__("Show More Activity") %}</a></div>
 		</div>
diff --git a/frappe/desk/page/user_profile/user_profile.js b/frappe/desk/page/user_profile/user_profile.js
index c9e211c0ef..dabbc90015 100644
--- a/frappe/desk/page/user_profile/user_profile.js
+++ b/frappe/desk/page/user_profile/user_profile.js
@@ -1,6 +1,6 @@
 frappe.provide('frappe.energy_points');
 
-frappe.pages['user-profile'].on_page_load = function(wrapper) {
+frappe.pages['user-profile'].on_page_load = function (wrapper) {
 
 	frappe.ui.make_app_page({
 		parent: wrapper,
@@ -8,7 +8,7 @@ frappe.pages['user-profile'].on_page_load = function(wrapper) {
 	});
 
 	let user_profile = new UserProfile(wrapper);
-	$(wrapper).bind('show', ()=> {
+	$(wrapper).bind('show', () => {
 		user_profile.show();
 	});
 };
@@ -27,7 +27,7 @@ class UserProfile {
 
 		//validate if user
 		if (route.length > 1) {
-			frappe.db.exists('User', this.user_id).then( exists => {
+			frappe.db.exists('User', this.user_id).then(exists => {
 				if (exists) {
 					this.make_user_profile();
 				} else {
@@ -104,7 +104,7 @@ class UserProfile {
 			user: this.user_id,
 			date: date_from || frappe.datetime.year_start(),
 		}).then((r) => {
-			this.heatmap.update( {dataPoints: r} );
+			this.heatmap.update({ dataPoints: r });
 		});
 	}
 
@@ -127,7 +127,7 @@ class UserProfile {
 			based_on: 'creation'
 		};
 
-		this.line_chart = new frappe.Chart( '.performance-line-chart', {
+		this.line_chart = new frappe.Chart('.performance-line-chart', {
 			type: 'line',
 			height: 200,
 			data: {
@@ -160,7 +160,7 @@ class UserProfile {
 			field: field
 		}).then(chart => {
 			if (chart.labels.length) {
-				this.percentage_chart = new frappe.Chart( '.performance-percentage-chart', {
+				this.percentage_chart = new frappe.Chart('.performance-percentage-chart', {
 					type: 'percentage',
 					data: {
 						labels: chart.labels,
diff --git a/frappe/public/js/frappe/utils/energy_point_utils.js b/frappe/public/js/frappe/utils/energy_point_utils.js
index df7c875ae9..113f5455ce 100644
--- a/frappe/public/js/frappe/utils/energy_point_utils.js
+++ b/frappe/public/js/frappe/utils/energy_point_utils.js
@@ -5,8 +5,8 @@ frappe.provide('frappe.energy_points');
 
 Object.assign(frappe.energy_points, {
 	get_points(points) {
-		return `<span class="bold" style="color: ${points >= 0 ? '#45A163': '#e42121'}">
-			${points > 0 ? '+': ''}${points}
+		return `<span class="bold" style="color: ${points >= 0 ? '#45A163' : '#e42121'}">
+			${points > 0 ? '+' : ''}${points}
 		</span>`;
 	},
 	format_form_log(log) {
@@ -14,7 +14,7 @@ Object.assign(frappe.energy_points, {
 		const formatted_log = `<span>
 			<!--${this.get_points(log.points)}&nbsp;-->
 			<a href="/app/Form/Energy Point Log/${log.name}">${this.get_form_log_message(log)}</a>
-			${log.reason ? separator + log.reason: ''}
+			${log.reason ? separator + log.reason : ''}
 		</span>`;
 		return formatted_log;
 	},
@@ -22,12 +22,14 @@ Object.assign(frappe.energy_points, {
 		// redundant code to honor readability and to avoid confusion
 		const separator = `<span>&nbsp;-&nbsp;</span>`;
 		const route = frappe.utils.get_form_link(log.reference_doctype, log.reference_name);
-		const formatted_log = `<span>
-			<!--${this.get_points(log.points)}&nbsp;-->
+		const formatted_log = `<div class="flex">
+			<span class="indicator-pill ${log.points >= 0 ? 'green' : 'red'} mr-2">
+				${this.get_points(log.points)}
+			</span>
 			<a href="${route}" class="text-muted">${this.get_history_log_message(log)}</a>
-			${log.reason ? separator + log.reason: ''}
+			${log.reason ? separator + log.reason : ''}
 			${separator + frappe.datetime.comment_when(log.creation)}
-		</span>`;
+		</div>`;
 		return formatted_log;
 	},
 	get_history_log_message(log) {