From 8718b60bfcd66b83e6855bfd5f8d6b44dae22fc3 Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Wed, 4 Oct 2023 10:18:46 +0530
Subject: [PATCH] fix: sidebar, multiselect, body tag letterspacing

* fixed space between multiselect pills
* fixed sidebar spacing and alignment
* added letterspacing of 0.02em in the body tag as this is the new base spacing.
---
 frappe/public/js/frappe/dom.js                |  2 +-
 .../frappe/form/templates/form_sidebar.html   | 36 +++++++++----------
 frappe/public/js/frappe/ui/tags.js            |  2 +-
 frappe/public/scss/common/controls.scss       |  1 +
 frappe/public/scss/desk/global.scss           |  2 ++
 frappe/public/scss/desk/sidebar.scss          |  4 +++
 6 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index bb67cef187..203e5bde7a 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -295,7 +295,7 @@ frappe.get_data_pill = (label, target_id = null, remove_action = null, image = n
 		<button class="data-pill btn">
 			<div class="flex align-center ellipsis">
 				${image ? image : ""}
-				<span class="pill-label ${image ? "ml-2" : ""}">${label}</span>
+				<span class="pill-label">${label}</span>
 			</div>
 		</button>
 	`);
diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html
index 60d2a4ae60..4fb76ba669 100644
--- a/frappe/public/js/frappe/form/templates/form_sidebar.html
+++ b/frappe/public/js/frappe/form/templates/form_sidebar.html
@@ -45,7 +45,7 @@
 	<li class="flex flex-wrap">
 		<span class="assignments"></span>
 		<button class="add-assignment-btn data-pill btn">
-			<svg class="es-icon mr-2 icon-sm"><use href="#es-line-add-people"></use></svg>
+			<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
 			<span class="ellipsis">{%= __("Add Assignee") %}</span>
 		</button>
 	</li>
@@ -56,7 +56,7 @@
 
 		<li class="explore-full-btn hidden">
 			<button class="data-pill btn">
-				<svg class="es-icon mr-2 icon-sm">
+				<svg class="es-icon ml-0 icon-sm">
 					<use href="#es-line-folder-alt"></use>
 				</svg>
 				<span class="pill-label ellipsis">
@@ -64,6 +64,21 @@
 				</span>
 			</button>
 		</li>
+		<li class="attachments-actions">
+			<button class="data-pill btn add-attachment-btn">
+				<svg class="es-icon ml-0 icon-sm">
+					<use href="#es-line-attachment"></use>
+				</svg>
+				<span class="pill-label ellipsis">
+					{%= __("Add File") %}
+				</span>
+			</button>
+			<button class="text-muted btn btn-default icon-btn explore-btn">
+				<svg class="es-icon icon-sm">
+					<use href="#es-line-folder-alt"></use>
+				</svg>
+			</button>
+		</li>
 		<button class="show-all-btn hidden">
 			<svg class="es-icon icon-sm">
 				<use href="#es-line-preview"></use>
@@ -73,21 +88,6 @@
 			</a>
 		</button>
 	</li>
-	<li class="attachments-actions">
-		<button class="data-pill btn add-attachment-btn">
-			<svg class="es-icon mr-2 icon-sm">
-				<use href="#es-line-attachment"></use>
-			</svg>
-			<span class="pill-label ellipsis">
-				{%= __("Add File") %}
-			</span>
-		</button>
-		<button class="text-muted btn btn-default icon-btn explore-btn">
-			<svg class="es-icon icon-sm">
-				<use href="#es-line-folder-alt"></use>
-			</svg>
-		</button>
-	</li>
 </ul>
 <ul class="list-unstyled sidebar-menu form-reviews">
 	<li class="sidebar-label reviews-label">
@@ -112,7 +112,7 @@
 	<li class="flex flex-wrap">
 		<span class="shares"></span>
 		<button class="share-doc-btn text-muted data-pill btn">
-			<svg class="es-icon mr-2 icon-sm"><use href="#es-line-share"></use></svg>
+			<svg class="es-icon ml-0 icon-sm"><use href="#es-line-share"></use></svg>
 			{%= __("Invite") %}
 		</button>
 	</li>
diff --git a/frappe/public/js/frappe/ui/tags.js b/frappe/public/js/frappe/ui/tags.js
index bcc72b7238..a4d1bcf0c9 100644
--- a/frappe/public/js/frappe/ui/tags.js
+++ b/frappe/public/js/frappe/ui/tags.js
@@ -19,7 +19,7 @@ frappe.ui.Tags = class {
 		this.$inputWrapper = this.get_list_element(this.$input);
 		this.$placeholder = this.get_list_element(
 			$(`<button class="tags-btn text-muted data-pill btn" id="add_tags">
-			<svg class="es-icon mr-2 icon-sm"><use href="#es-line-tag"></use></svg>
+			<svg class="es-icon ml-0 icon-sm"><use href="#es-line-tag"></use></svg>
 			${__(placeholder)}
 		</button>`)
 		);
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index a9d77793dd..c77c1319cd 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -60,6 +60,7 @@ select.form-control {
 	height: auto;
 	padding: 10px;
 	padding-bottom: 5px;
+	gap: 6px;
 	.link-field {
 		width: 100%;
 	}
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 4104491f88..b2612b148e 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -7,6 +7,7 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 	color: var(--text-muted);
 	font-weight: var(--weight-regular);
+	letter-spacing: 0.02em;
 	background-color: var(--bg-color);
 
 	&.full-width {
@@ -384,6 +385,7 @@ kbd {
 	font-family: var(--font-stack);
 	color: var(--text-light);
 	line-height: 1.2em;
+	letter-spacing: 0.02em;
 	height: 20px;
 	padding: 4px 8px;
 }
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 72702c4576..ef270093bf 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -41,6 +41,9 @@ body[data-route^="Module"] .main-menu {
 	.data-pill {
 		width: 100%;
 		justify-content: unset;
+		.es-icon {
+			margin: 0px 6px;
+		}
 
 	}
 	&.user-actions {
@@ -405,6 +408,7 @@ body[data-route^="Module"] .main-menu {
 .explore-full-btn,
 .attachments-actions {
 	margin-bottom: var(--margin-md);
+	gap: 6px;
 }
 
 .show-all-btn {