fix(styles): text and style for multi-part web_form.js

cypress/integration/web_form.js

@@ -16,11 +16,9 @@ context('Web Form', () => {
 			cy.visit('/update-profile-duplicate');
 			cy.get_field('last_name', 'Data').type('_Test User', {force: true}).wait(200);
 			cy.get('.btn-next').should('be.visible');
-			cy.get('.web-form-footer .btn-primary').should('not.be.visible');
 			cy.get('.btn-next').click();
 			cy.get('.btn-previous').should('be.visible');
 			cy.get('.btn-next').should('not.be.visible');
-			cy.get('.web-form-footer .btn-primary').should('be.visible');
 			cy.get('.web-form-actions .btn-primary').click();
 			cy.wait(500);
 			cy.get('.modal.show > .modal-dialog').should('be.visible');

frappe/public/js/frappe/web_form/web_form.js

@@ -79,9 +79,9 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		}
 
 		$('.web-form-footer').after(`
-			<div id="form-step-footer" class="pull-right">
-				<button class="btn btn-primary btn-previous btn-sm ml-2">${__("Previous")}</button>
-				<button class="btn btn-primary btn-next btn-sm ml-2">${__("Next")}</button>
+			<div id="form-step-footer" class="text-right">
+				<button class="btn btn-default btn-previous btn-sm ml-2">${__("Previous")}</button>
+				<button class="btn btn-default btn-next btn-sm ml-2">${__("Next")}</button>
 			</div>
 		`);
 

frappe/public/scss/website/web_form.scss

@@ -19,12 +19,14 @@
 
 			&.my-4 {
 				background-color: var(--fg-color);
+				box-shadow: var(--card-shadow);
+				padding-top: 1.8rem;
+				padding-bottom: 1.8rem;
 
-					@include media-breakpoint-up(sm) {
-						padding: 1.8rem;
-						border-radius: var(--border-radius-md);
-						box-shadow: var(--card-shadow);
-					}
+				@include media-breakpoint-up(sm) {
+					padding: 1.8rem;
+					border-radius: var(--border-radius-md);
+				}
 			}
 		}
 	}

frappe/website/doctype/web_form/templates/web_form.html

@@ -132,6 +132,9 @@ frappe.init_client_script = () => {
 {% endif %}
 
 <style>
+	body {
+		background-color: var(--bg-color);
+	}
 {% if style is defined %}
 	{{ style }}
 {% endif %}