fix: Update signature control style

- Refactor move style from form.less to control.scss

frappe/public/js/frappe/form/controls/signature.js

@@ -29,15 +29,21 @@ frappe.ui.form.ControlSignature = frappe.ui.form.ControlData.extend({
 		let width = this.body.width();
 		if (width > 0 && !this.$pad) {
 			this.$pad = this.body.jSignature({
-				height: 300,
+				height: 200,
+				color: "var(--text-color)",
 				width: this.body.width(),
-				lineWidth: 3
+				lineWidth: 2,
+				"background-color": "var(--control-bg)"
 			}).on('change',
 				this.on_save_sign.bind(this));
 			this.load_pad();
-			this.$reset_button_wrapper = $(`<div class="signature-btn-row">
-				<a href="#" type="button" class="signature-reset btn btn-default">
-				<i class="glyphicon glyphicon-repeat"></i></a>`)
+			this.$reset_button_wrapper = $(`
+					<div class="signature-btn-row">
+						<a href="#" type="button" class="signature-reset btn icon-btn">
+							${frappe.utils.icon('refresh', 'sm')}
+						</a>
+					</div>
+				`)
 				.appendTo(this.$pad)
 				.on("click", '.signature-reset', () => {
 					this.on_reset_sign();

frappe/public/less/form.less

@@ -479,36 +479,6 @@
 	color: @orange !important;
 }
 
-.signature-field {
-	min-height: 300px;
-	background: #fff;
-	border: 1px solid @border-color;
-	border-radius: 3px;
-	position: relative;
-	margin-top: -10px;
-}
-.signature-display {
-	margin: 7px 0px;
-	background: #fff;
-}
-.signature-btn-row {
-	position: absolute;
-	bottom: 12px;
-	right: 12px;
-}
-.signature-reset {
-	z-index: 10;
-	height: 30px;
-	width: 30px;
-	padding: 4px 0px;
-}
-
-.signature-img {
-	background: #fff;
-	border-radius: 3px;
-	margin-top: 5px;
-	max-height: 150px;
-}
 
 .timeline-new-email,
 .timeline-email-import {

frappe/public/scss/desk/controls.scss

@@ -211,8 +211,8 @@ textarea.form-control {
 	z-index: inherit;
 }
 
+// rating
 .rating {
-	// rating
 	--star-fill: var(--gray-300);
 	.star-hover {
 		--star-fill: var(--yellow-100);
@@ -221,3 +221,38 @@ textarea.form-control {
 		--star-fill: var(--yellow-300);
 	}
 }
+
+// signature
+.signature-field {
+	min-height: 110px;
+	background: var(--control-bg);
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius);
+	position: relative;
+	margin-top: -10px;
+}
+
+.signature-display {
+	margin: 7px 0px;
+	background: var(--control-bg);
+}
+
+.signature-btn-row {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+}
+
+.signature-reset {
+	z-index: 10;
+	height: 30px;
+	width: 30px;
+	padding: 4px 0px;
+}
+
+.signature-img {
+	background: var(--control-bg);
+	border-radius: 3px;
+	margin-top: 5px;
+	max-height: 150px;
+}