From a2a6e112eef3a48020688f7a46d97010deb89516 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 24 Dec 2021 14:42:32 +0530
Subject: [PATCH] refactor(UI): Single card design for form

---
 frappe/public/js/frappe/form/form.js |  4 ++--
 frappe/public/scss/common/form.scss  |  4 ++--
 frappe/public/scss/common/grid.scss  | 14 ++++++++----
 frappe/public/scss/desk/form.scss    | 34 ++++++++++++++++++----------
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js
index 821fcba95f..9a75e510da 100644
--- a/frappe/public/js/frappe/form/form.js
+++ b/frappe/public/js/frappe/form/form.js
@@ -190,7 +190,7 @@ frappe.ui.form.Form = class FrappeForm {
 
 	setup_std_layout() {
 		this.form_wrapper = $('<div></div>').appendTo(this.layout_main);
-		this.body = $('<div></div>').appendTo(this.form_wrapper);
+		this.body = $('<div class="std-form-layout"></div>').appendTo(this.form_wrapper);
 
 		// only tray
 		this.meta.section_style='Simple'; // always simple!
@@ -226,7 +226,7 @@ frappe.ui.form.Form = class FrappeForm {
 				this.layout.tabs[0].wrapper.prepend(dashboard_parent);
 			}
 		} else {
-			dashboard_parent.insertAfter(this.layout.wrapper.find('.form-message'));
+			this.layout.wrapper.find('.form-page').prepend(dashboard_parent);
 		}
 
 		this.dashboard = new frappe.ui.form.Dashboard(dashboard_parent, this);
diff --git a/frappe/public/scss/common/form.scss b/frappe/public/scss/common/form.scss
index 2fa6ab619e..43ba477624 100644
--- a/frappe/public/scss/common/form.scss
+++ b/frappe/public/scss/common/form.scss
@@ -1,4 +1,5 @@
 .form-control {
+	height: inherit;
 	border: none;
 	font-size: var(--text-md);
 	position: relative;
@@ -13,10 +14,9 @@
 		font-weight: normal;
 		font-size: var(--text-sm);
 	}
-	min-height: var(--input-height);
 	border-radius: $border-radius;
 	font-weight: 400;
-	padding: 8px 12px;
+	padding: 6px 12px;
 	cursor: default;
 	color: var(--disabled-text-color);
 	background-color: var(--disabled-control-bg);
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 3014211222..1903413fbb 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -79,10 +79,9 @@
 
 .grid-static-col,
 .row-index {
-	height: 39px;
-	padding: var(--padding-sm) var(--padding-md);
+	height: 34px;
+	padding: 8px;
 	max-height: 200px;
-	// border-right: 1px solid var(--border-color);
 }
 
 .grid-row-check {
@@ -108,6 +107,7 @@
 .grid-row > .row {
 	.col:last-child {
 		margin-right: calc(-1 * var(--margin-sm));
+		border-right: none;
 	}
 
 	.col {
@@ -149,7 +149,7 @@
 		}
 
 		textarea {
-			height: 40px !important;
+			height: 37px !important;
 		}
 
 		.form-control {
@@ -157,7 +157,7 @@
 			border: 0px;
 			padding-top: 8px;
 			padding-bottom: 9px;
-			height: 40px;
+			height: 34px;
 		}
 
 		.link-btn {
@@ -196,6 +196,10 @@
 		}
 	}
 
+	.grid-static-col[data-fieldtype="Check"] .static-area {
+		padding-top: 2px;
+	}
+
 	.grid-static-col[data-fieldtype="Rating"] .field-area {
 		margin-top: 1rem;
 		margin-left: 1rem;
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index d48987b500..7e7d6170c9 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -1,6 +1,12 @@
 @import "../common/form.scss";
 @import '~cropperjs/dist/cropper.min';
 
+.std-form-layout > .form-layout > .form-page {
+	border-radius: var(--border-radius-md);
+	box-shadow: var(--card-shadow);
+	background-color: var(--card-bg);
+}
+
 .form-section, .form-dashboard-section {
 	margin: 0px;
 
@@ -12,6 +18,7 @@
 
 	.section-head {
 		@extend .head-title;
+		font-size: var(--text-base);
 		width: 100%;
 		padding: var(--padding-sm) var(--padding-md);
 		margin: 0;
@@ -47,8 +54,12 @@
 
 .form-section.card-section,
 .form-dashboard-section {
-	margin-bottom: var(--margin-lg);
-	@extend .frappe-card;
+	border-bottom: 1px solid var(--gray-200);
+	padding: var(--padding-xs);
+}
+
+.row.form-section.card-section.visible-section:last-child {
+	border-bottom: none;
 }
 
 .form-dashboard-section {
@@ -57,9 +68,8 @@
 	}
 	.section-body {
 		display: block;
-		padding-left: var(--padding-md);
-		padding-right: var(--padding-md);
-		padding-bottom: var(--padding-md);
+		padding: var(--padding-md);
+		padding-top: 0;
 	}
 }
 
@@ -85,7 +95,8 @@
 
 .comment-box {
 	@include card();
-	padding: 25px var(--padding-xl);
+	margin-top: var(--margin-lg);
+	padding: var(--padding-lg);
 	.comment-input-header {
 		@extend .head-title;
 		margin-bottom: var(--margin-sm);
@@ -304,19 +315,18 @@
 }
 
 .form-tabs-list {
-	margin-bottom: var(--margin-lg);
+	padding-left: var(--padding-xs);
+	border-bottom: 1px solid var(--gray-200);
 
 	.form-tabs {
 		.nav-item {
 			.nav-link {
-				padding-bottom: var(--padding-md);
 				color: var(--gray-700);
-				padding-left: 0;
-				padding-right: 0;
-				margin-right: var(--margin-xl);
+				padding: var(--padding-md) 0;
+				margin: 0 var(--margin-md);
 
 				&.active {
-					font-weight: 500;
+					font-weight: 600;
 					border-bottom: 1px solid var(--primary);
 					color: var(--text-color);
 				}