Merge pull request #36798 from nextchamp-saqib/v16-fixes-2

fix: various UI fixes

frappe/desk/page/desktop/desktop.css

@@ -267,7 +267,7 @@
                 height: var(--folder-thumbnail-icon-height);
                 width: var(--folder-thumbnail-icon-height);
                 padding: 0px;
-                border-radius: 2px;
+                border-radius: 4px;
                 & .icon{
                     width: 5px;
                     height: 5px;
@@ -527,4 +527,4 @@
   height: 100%;
   background: none;
     color: var(--neutral-white);
-}
+}

frappe/desk/page/desktop/desktop.js

@@ -432,7 +432,7 @@ class DesktopPage {
 			},
 			{
 				icon: "rotate-ccw",
-				label: "Reset to Default",
+				label: "Reset Desktop Layout",
 				onClick: function () {
 					reset_to_default();
 					window.location.reload();

frappe/public/js/frappe/dom.js

@@ -347,12 +347,12 @@ frappe.get_modal = function (title, content) {
 						<span class="indicator hidden"></span>
 						<h4 class="modal-title">${title}</h4>
 					</div>
-					<div class="modal-actions">
-						<button class="btn btn-modal-minimize btn-link hide">
+					<div class="modal-actions d-flex">
+						<button class="btn btn-ghost btn-modal-minimize icon-btn hide">
 							${frappe.utils.icon("collapse")}
 						</button>
-						<button class="btn btn-modal-close btn-link" data-dismiss="modal">
-							${frappe.utils.icon("close", "sm")}
+						<button class="btn btn-ghost btn-modal-close icon-btn" data-dismiss="modal">
+							${frappe.utils.icon("x", "sm")}
 						</button>
 					</div>
 				</div>

frappe/public/js/frappe/ui/menu.js

@@ -103,10 +103,13 @@ frappe.ui.menu = class ContextMenu {
 						${iconMarkup}
 					</div>
 					<span class="menu-item-title">${__(item.label)}</span>
-					<div class="menu-item-icon" style="margin-left:auto">
-						${item.items && item.items.length ? frappe.utils.icon(`chevron-${chevron_direction}`) : ""}
-					</div>
-
+					${
+						item.items && item.items.length
+							? `<div class="menu-item-icon" style="margin-left:auto">
+						${frappe.utils.icon(`chevron-${chevron_direction}`)}
+					</div>`
+							: ""
+					}
 				</a>
 			</div>`);
 			if (!item.url) {

frappe/public/js/frappe/utils/utils.js

@@ -1397,7 +1397,7 @@ Object.assign(frappe.utils, {
 		return icon_html.get(0).outerHTML;
 	},
 	desktop_pallete: {
-		blue: "#0981E3",
+		blue: "#0289F7",
 		gray: "#7B808A",
 	},
 	icon(

frappe/public/scss/common/buttons.scss

@@ -87,6 +87,19 @@
 	}
 }
 
+.btn.btn-ghost {
+	background-color: transparent;
+	color: var(--text-color);
+	&:hover,
+	&:active {
+		background-color: var(--btn-ghost-hover-bg);
+		color: var(--text-color);
+	}
+	&:focus-visible {
+		box-shadow: var(--focus-default) !important;
+	}
+}
+
 .btn.btn-default {
 	background-color: var(--control-bg);
 	color: var(--text-color);

frappe/public/scss/common/css_variables.scss

@@ -99,6 +99,7 @@ $disabled-input-height: 22px;
 	--btn-primary: var(--gray-900);
 	--btn-default-bg: var(--gray-100);
 	--btn-default-hover-bg: var(--gray-300);
+	--btn-ghost-hover-bg: var(--gray-200);
 
 	// Border Colors
 	--border-primary: var(--gray-900);

frappe/public/scss/common/modal.scss

@@ -33,6 +33,8 @@ body.modal-open[style^="padding-right"] {
 		border-color: var(--border-color);
 	}
 	.modal-header {
+		display: flex;
+		align-items: center;
 		position: sticky;
 		top: 0;
 		z-index: 3;
@@ -53,15 +55,11 @@ body.modal-open[style^="padding-right"] {
 		}
 
 		.modal-actions {
+			margin-right: -6px;
 			.btn-modal-minimize {
-				padding-right: 0;
-
 				.icon {
 					width: 14px;
 					height: 14px;
-					use {
-						stroke: var(--gray-500);
-					}
 				}
 			}
 		}

frappe/public/scss/desk/dark.scss

@@ -42,6 +42,7 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	// Button Colors
 	--btn-default-bg: var(--gray-800);
 	--btn-default-hover-bg: var(--gray-700);
+	--btn-ghost-hover-bg: var(--gray-800);
 	--btn-primary: var(--gray-300);
 
 	// Border Colors