fix: minor success page css changes

(cherry picked from commit 5cdf21d8ee)

frappe/public/scss/website/web_form.scss

@@ -299,27 +299,41 @@
 
 				.success-page {
 					background-color: var(--fg-color);
-					padding: 2rem;
+					padding: 5rem 2rem;
+					margin-top: 3rem;
 					border: 1px solid var(--dark-border-color);
 					border-radius: var(--border-radius);
 					text-align: center;
 
-					svg.icon {
-						width: 5rem;
-						height: 5rem;
-						margin: 1rem;
-					}
+					.success-header {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						gap: 0.5rem;
+						margin-top: 1rem;
+
+						.success-icon {
+							width: 3rem;
+							height: 3rem;
+							margin: 0;
 
-					h2 {
-						margin-top: 0;
-						margin-bottom: 0;
+							@include media-breakpoint-down(sm) {
+								width: 2rem;
+								height: 2rem;
+							}
+						}
+
+						.success-title {
+							margin-top: 0;
+							margin-bottom: 0;
+						}
 					}
 
-					.success-message {
-						margin-bottom: 1.6rem;
+					.success-body .success-message {
+						margin: 1rem 0rem 1.5rem;
 					}
 
-					a {
+					.success-footer a {
 						margin: 0rem 0.3rem 1rem;
 					}
 				}

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

@@ -112,30 +112,37 @@
 
 	<!-- success page -->
 	<div class="success-page hide">
-		<svg class="icon">
-			<use href="#icon-solid-success"></use>
-		</svg>
-		<h2 class="success-title">{{ _(success_title) or _("Submitted") }}</h2>
-		<p class="success-message">{{ _(success_message) or _("Thank you for spending your valuable time to fill this form") }}</p>
-
-		{% if success_url %}
-			<div class="success_url_message">
-				<p>
-					<span>Click on this </span>
-					<a href="{{ success_url }}">{{_("URL")}}</a>
-					<span> if you are not redirected within </span>
-					<span class="time">5</span>
-					<span> seconds.</span>
-				</p>
-			</div>
-		{% else %}
-			{% if show_list %}
-				<a href="/{{ route }}/list" class="show-list-button btn btn-default btn-md">{{ _("See previous responses", null, "Button in web form") }}</a>
-			{% endif %}
-			{% if not login_required or allow_multiple %}
-				<a href="/{{ route }}/new" class="new-btn btn btn-default btn-md">{{ _("Submit another response", null, "Button in web form") }}</a>
+		<div class="success-header">
+			<svg class="success-icon icon">
+				<use href="#icon-solid-success"></use>
+			</svg>
+			<h2 class="success-title">{{ _(success_title) or _("Submitted") }}</h2>
+		</div>
+
+		<div class="success-body">
+			<p class="success-message">{{ _(success_message) or _("Thank you for spending your valuable time to fill this form") }}</p>
+		</div>
+
+		<div class="success-footer">
+			{% if success_url %}
+				<div class="success_url_message">
+					<p>
+						<span>Click on this </span>
+						<a href="{{ success_url }}">{{_("URL")}}</a>
+						<span> if you are not redirected within </span>
+						<span class="time">5</span>
+						<span> seconds.</span>
+					</p>
+				</div>
+			{% else %}
+				{% if show_list %}
+					<a href="/{{ route }}/list" class="show-list-button btn btn-default btn-md">{{ _("See previous responses", null, "Button in web form") }}</a>
+				{% endif %}
+				{% if not login_required or allow_multiple %}
+					<a href="/{{ route }}/new" class="new-btn btn btn-default btn-md">{{ _("Submit another response", null, "Button in web form") }}</a>
+				{% endif %}
 			{% endif %}
-		{% endif %}
+		</div>
 	</div>
 
 {% endblock page_content %}