From dd10a5ef6b7726a67ab431d4c0aa2fc5b430a506 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:21:53 -0400
Subject: [PATCH] My pledges: Style my pledge list and header on small screens

Fixes #292
---
 themes/wporg-5ftf-2024/patterns/my-pledges.php      |  4 ++--
 .../wporg-5ftf-2024/src/my-pledge-list/render.php   |  2 +-
 .../wporg-5ftf-2024/src/my-pledge-list/style.scss   |  8 ++++++++
 themes/wporg-5ftf-2024/src/style/style.scss         | 13 +++++++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/themes/wporg-5ftf-2024/patterns/my-pledges.php b/themes/wporg-5ftf-2024/patterns/my-pledges.php
index de581cd..7c15264 100644
--- a/themes/wporg-5ftf-2024/patterns/my-pledges.php
+++ b/themes/wporg-5ftf-2024/patterns/my-pledges.php
@@ -6,8 +6,8 @@
  */
 
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--40)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"my-pledges-header"} -->
+<div class="wp-block-group alignwide my-pledges-header" style="margin-bottom:var(--wp--preset--spacing--40)">
 	<!-- wp:group {"style":{"border":{"radius":"50%"}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
 	<div class="wp-block-group has-light-grey-2-background-color has-background" style="border-radius:50%">
 		<!-- wp:post-featured-image {"aspectRatio":"1","width":"110px","scale":"contain","style":{"border":{"radius":"50%"}}} /-->
diff --git a/themes/wporg-5ftf-2024/src/my-pledge-list/render.php b/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
index 097511a..ddbbd5a 100644
--- a/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
+++ b/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
@@ -45,7 +45,7 @@ $has_profile_data  = $profile_data['hours_per_week'] && $profile_data['team_name
 	<?php
 	if ( $success_message ) {
 		render_notice( 'success', $success_message );
-		echo '<div style="margin-top:var(--wp--preset--spacing--20);height:0" aria-hidden="true" class="wp-block-spacer"></div>';
+		echo '<div style="margin-top:var(--wp--preset--spacing--40);height:0" aria-hidden="true" class="wp-block-spacer"></div>';
 	}
 	?>
 
diff --git a/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss b/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
index 4e4396e..ba1342c 100644
--- a/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
+++ b/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
@@ -11,6 +11,14 @@
 		margin-top: var(--wp--preset--spacing--20);
 	}
 
+	> h2 {
+		margin-top: 80px !important;
+
+		@media (max-width: 600px) {
+			margin-top: 40px !important;
+		}
+	}
+
 	.my-pledges__pledge-actions {
 		form {
 			display: flex;
diff --git a/themes/wporg-5ftf-2024/src/style/style.scss b/themes/wporg-5ftf-2024/src/style/style.scss
index cdd81df..1cf1438 100644
--- a/themes/wporg-5ftf-2024/src/style/style.scss
+++ b/themes/wporg-5ftf-2024/src/style/style.scss
@@ -71,3 +71,16 @@ body.is-page-in-menu .wp-block-wporg-local-navigation-bar .wp-block-post-title {
 		}
 	}
 }
+
+/* Style the my pledges header */
+.my-pledges-header {
+
+	@media (max-width: 600px) {
+		flex-direction: column;
+		margin-block-end: 40px !important;
+
+		> .wp-block-group {
+			align-items: center;
+		}
+	}
+}