From b0c8d29eb40e396d95ca3de385f706703c1d1250 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 29 Jun 2020 19:36:47 +0530
Subject: [PATCH] feat: update items layout for links widget

---
 .../public/js/frappe/widgets/links_widget.js  |  8 +++----
 frappe/public/scss/desktop.scss               | 22 ++++++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frappe/public/js/frappe/widgets/links_widget.js b/frappe/public/js/frappe/widgets/links_widget.js
index 93700f6329..684528d781 100644
--- a/frappe/public/js/frappe/widgets/links_widget.js
+++ b/frappe/public/js/frappe/widgets/links_widget.js
@@ -55,17 +55,17 @@ export default class LinksWidget extends Widget {
 				return `<span class="link-content help-video-link ellipsis" data-youtubeid="${item.youtube_id}">
 						${item.label ? item.label : item.name}</span>`;
 
-			return `<a data-route="${generate_route(item)}" class="link-content ellipsis">
-					${item.label ? item.label : item.name}</a>`;
+			return `<span class="link-content ellipsis">
+					${item.label ? item.label : item.name}</span>`;
 		};
 
 		this.link_list = this.links.map(item => {
-			return $(`<div class="link-item ${
+			return $(`<a href="${generate_route(item)}" class="link-item ${
 				item.onboard ? "onboard-spotlight" : ""
 			} ${disabled_dependent(item)}" type="${item.type}">
 					<span class="indicator-pill no-margin ${get_indicator_color(item)}"></span>
 					${get_link_for_item(item)}
-			</div>`);
+			</a>`);
 		});
 
 		this.link_list.forEach(link => link.appendTo(this.body));
diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss
index a52ab6ec13..62f149d937 100644
--- a/frappe/public/scss/desktop.scss
+++ b/frappe/public/scss/desktop.scss
@@ -374,10 +374,22 @@ $panel-bg: $gray-50;
 	&.links-widget-box {
 		padding-left: 0px;
 		.link-item {
-			color: var(--gray-900);
-			position: relative;
-			margin: 10px 0px;
-			cursor: default;
+			display: block;
+			text-decoration: none;
+			color: var(--grey-900);
+			padding: 5px;
+			margin: 1px 0px;
+			border-radius: 6px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--grey-50);
+
+				.indicator-pill,
+				.indicator-pill-right {
+					background: white;
+				}
+			}
 
 			&:first-child {
 				margin-top: 15px;
@@ -408,8 +420,6 @@ $panel-bg: $gray-50;
 			.indicator-pill {
 				margin-right: 0px;
 				margin-right: 5px;
-				color: inherit;
-				font-weight: inherit;
 			}
 		}
 	}