From 4c910ab8db1b231d71ed3ce5c04cb43f09a23434 Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Wed, 24 Feb 2021 16:36:08 +0530
Subject: [PATCH] fix: refactor link preview popover style

---
 frappe/public/scss/desk/global.scss       |  1 +
 frappe/public/scss/desk/link_preview.scss | 82 ++++++++++++++++-------
 frappe/public/scss/desk/variables.scss    |  2 +-
 3 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 7c1ddde68e..e89c8aeb9e 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -280,6 +280,7 @@ select.input-xs {
 /* popover */
 .popover {
 	background-color: var(--popover-bg);
+	border: 0;
 }
 
 .bold {
diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss
index af14c4d8ef..dc7cf726f2 100644
--- a/frappe/public/scss/desk/link_preview.scss
+++ b/frappe/public/scss/desk/link_preview.scss
@@ -1,48 +1,80 @@
 .link-preview-popover {
-	border-radius: 0;
 	max-width: 100%;
+
 	.popover-content {
-		padding: 0;
+		padding: 15px 25px;
+
 		.preview-popover-header {
-			padding: var(--padding-md);
 
 			.preview-header {
-				display: inline-block;
-				vertical-align: top;
+				@include flex(flex, null, center, column);
 			}
 
 			.preview-image {
-				width: 70px;
-				height: 70px;
-				object-fit: cover;
-				margin-right: var(--margin-sm);
+				margin-bottom: var(--margin-sm);
+				// object-fit: cover;
+				// border-radius: var(--border-radius-sm);
+
+				.avatar {
+					width: 52px;
+					height: 52px;
+				}
+			}
+
+			img:after {
+				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
+			}
+
+			img[alt]:after {
+				height: 52px;
+				@include flex();
+				position: absolute;
+				z-index: 1;
+				top: -15px;
+				left: 0px;
+				width: 100%;
+				background-color: var(--bg-color);
 				border-radius: var(--border-radius);
 			}
 
 			.preview-name {
-				display: block;
+				// display: block;
+				font-size: var(--text-base);
+				font-weight: 500;
 			}
 
-			.preview-title {
-				display: block;
+			.preview-title:not(:empty) {
+				margin-top: var(--margin-xs);
+				font-size: var(--text-md);
 			}
 		}
 
-		hr {
-			margin: 0;
-		}
+		.popover-body {
+			padding: 0;
 
-		.preview-table {
-			padding: var(--padding-md);
-			padding-bottom: var(--padding-xs);
-			max-width: 330px;
-			min-width: 200px;
-			overflow-wrap: break-word;
+			.preview-table {
+				padding-bottom: var(--padding-xs);
+				max-width: 330px;
+				min-width: 200px;
+				overflow-wrap: break-word;
 
-			.preview-field {
-				padding-bottom: var(--padding-sm);
-				.preview-label {
-					padding-bottom: 4px;
+				.preview-field {
+
+					.preview-label {
+						padding-bottom: 4px;
+					}
+
+					.preview-value {
+						font-weight: 500;
+					}
+
+					.ql-snow .ql-editor {
+						min-height: 0;
+					}
+
+					&:not(:last-child) {
+						margin-bottom: var(--margin-md);
+					}
 				}
 			}
 		}
diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss
index 26af534c6f..4f43f22b9d 100644
--- a/frappe/public/scss/desk/variables.scss
+++ b/frappe/public/scss/desk/variables.scss
@@ -98,7 +98,7 @@ $mark-padding: 0;
 $enable-shadows: true;
 $popover-border-radius: var(--border-radius);
 $popover-bg: var(--popover-bg);
-$popover-box-shadow: var(--shadow-md);
+$popover-box-shadow: 	0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
 $popover-body-padding-x: var(--padding-md);
 $popover-body-padding-y: var(--padding-md);
 $popover-border-color: var(--dark-border-color);