feat: update form print container style

frappe/public/js/frappe/form/templates/print_layout.html

@@ -1,11 +1,9 @@
 <div class="form-print-wrapper">
 	<div class="print-toolbar row">
 		<div class="col-xs-3">
-			<div class="input-group">
+			<div class="flex">
 				<select class="print-preview-select input-sm form-control"></select>
-				<span class="input-group-btn">
-					<button class="btn btn-default btn-sm border print-preview-refresh" type="button">{%= __("Refresh") %}</button>
-				</span>
+				<button class="btn btn-default btn-sm border print-preview-refresh" type="button">{%= __("Refresh") %}</button>
 			</div>
 		</div>
 		<div class="col-xs-2">

frappe/public/scss/form_print.scss

@@ -0,0 +1,27 @@
+.form-print-wrapper {
+	border: 1px solid var(--border-color);
+	border-top: none;
+	@include card($padding: 0);
+}
+
+.print-preview-wrapper {
+	padding: var(--padding-xl) 0px;
+	background-color: var(--fg-color);
+}
+
+.print-toolbar {
+	margin: 0px;
+	padding: var(--padding-md) 0;
+	border-bottom: 1px solid var(--border-color);
+
+	> div {
+		padding-right: 0px;
+	}
+	> div:last-child {
+		padding-right: var(--padding-md);
+	}
+}
+
+.print-preview-refresh {
+	margin-left: var(--margin-xs);
+}

frappe/public/scss/main.scss

@@ -4,6 +4,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "global";
 @import "form";
+@import "form_print";
 @import "timeline";
 @import "list";
 @import "navbar";

frappe/templates/styles/standard.css

@@ -5,11 +5,11 @@
 	}
 	.print-format {
 		background-color: white;
-		box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
+		box-shadow: var(--shadow-lg);
 		max-width: 8.3in;
 		min-height: 11.69in;
 		padding: 0.75in;
-	    margin: auto;
+		margin: auto;
 	}
 
 	.print-format.landscape {