fix(modal): update button styles and add ghost button hover effect

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/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