From 39a23ae8066270094be8a20e5bf8fb301ac8e610 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:08:35 -0400
Subject: [PATCH] My Pledges: Fix notice style, spacing, add logged out message

---
 .../src/my-pledge-list/render.php             | 26 +++++++++-------
 .../src/my-pledge-list/style.scss             | 30 +++++++++++--------
 themes/wporg-5ftf-2024/src/style/_notice.scss |  4 +--
 .../templates/page-my-pledges.html            |  4 +--
 4 files changed, 38 insertions(+), 26 deletions(-)

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 d91d23b..097511a 100644
--- a/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
+++ b/themes/wporg-5ftf-2024/src/my-pledge-list/render.php
@@ -9,7 +9,10 @@ use function WordPressdotorg\Theme\FiveForTheFuture_2024\My_Pledge_List\{render_
 use const WordPressDotOrg\FiveForTheFuture\Contributor\CPT_ID as CONTRIBUTOR_POST_TYPE;
 
 if ( ! is_user_logged_in() ) {
-	// @todo — add error message.
+	render_notice( 'warning', sprintf(
+		__( 'Please <a href="%s">log in to your WordPress.org account</a> in order to view your pledges.', 'wporg-5ftf' ),
+		esc_url( wp_login_url( get_permalink() ) )
+	) );
 	return;
 }
 
@@ -41,7 +44,7 @@ $has_profile_data  = $profile_data['hours_per_week'] && $profile_data['team_name
 >
 	<?php
 	if ( $success_message ) {
-		render_notice( 'info', $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>';
 	}
 	?>
@@ -49,6 +52,7 @@ $has_profile_data  = $profile_data['hours_per_week'] && $profile_data['team_name
 	<?php if ( $has_contributions ) : ?>
 
 		<?php if ( $contributor_publish_posts ) : ?>
+			<h2 class="screen-reader-text"><?php esc_html_e( 'Pledges', 'wporg-5ftf' ); ?></h2>
 
 			<div class="my-pledges__list">
 				<?php
@@ -62,9 +66,9 @@ $has_profile_data  = $profile_data['hours_per_week'] && $profile_data['team_name
 
 		<?php if ( $contributor_pending_posts ) : ?>
 
-			<div class="my-pledges__list is-pending-list">
-				<h2><?php esc_html_e( 'Pending Pledges', 'wporg-5ftf' ); ?></h2>
+			<h2><?php esc_html_e( 'Pending Pledges', 'wporg-5ftf' ); ?></h2>
 
+			<div class="my-pledges__list is-pending-list">
 				<?php
 				if ( ! $has_profile_data ) {
 					render_notice(
@@ -86,12 +90,14 @@ $has_profile_data  = $profile_data['hours_per_week'] && $profile_data['team_name
 
 	<?php else : ?>
 
-		<?php echo wp_kses_data( sprintf(
-			__( 'You don’t currently have any sponsorships. If your employer is sponsoring part of your time to contribute to WordPress, please ask them to <a href="%s">submit a pledge</a> and list you as a contributor.', 'wporg-5ftf' ),
-			esc_url( $pledge_url )
-		) ); ?>
-
-		<?php // todo add some resources here about how they can convince their boss to sponsor some of their time? ?>
+		<p>
+			<?php
+			echo wp_kses_data( sprintf(
+				__( 'You don’t currently have any sponsorships. If your employer is sponsoring part of your time to contribute to WordPress, please ask them to <a href="%s">submit a pledge</a> and list you as a contributor.', 'wporg-5ftf' ),
+				esc_url( $pledge_url )
+			) );
+			?>
+		</p>
 
 	<?php endif; ?>
 </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 905e830..ed57964 100644
--- a/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
+++ b/themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
@@ -1,18 +1,24 @@
-.my-pledges__list > * + * {
-	margin-top: var(--wp--preset--spacing--60);
-}
+.wp-block-wporg-my-pledge-list {
+	> p {
+		max-width: var(--wp--custom--layout--content-size);
+	}
 
-.my-pledges__list.is-pending-list > .wp-block-wporg-notice {
-	margin-top: var(--wp--preset--spacing--20);
-}
+	.my-pledges__list > * + * {
+		margin-top: var(--wp--preset--spacing--60);
+	}
 
-.my-pledges__pledge-actions {
-	.wp-block-button {
-		display: inline-block;
+	.my-pledges__list.is-pending-list > .wp-block-wporg-notice {
+		margin-top: var(--wp--preset--spacing--20);
+	}
 
-		[disabled="disabled"] {
-			--wp--custom--button--color--background: var(--wp--preset--color--blueberry-2);
-			pointer-events: none;
+	.my-pledges__pledge-actions {
+		.wp-block-button {
+			display: inline-block;
+
+			[disabled="disabled"] {
+				--wp--custom--button--color--background: var(--wp--preset--color--blueberry-2);
+				pointer-events: none;
+			}
 		}
 	}
 }
diff --git a/themes/wporg-5ftf-2024/src/style/_notice.scss b/themes/wporg-5ftf-2024/src/style/_notice.scss
index e91eae7..8f76861 100644
--- a/themes/wporg-5ftf-2024/src/style/_notice.scss
+++ b/themes/wporg-5ftf-2024/src/style/_notice.scss
@@ -12,9 +12,9 @@
 	line-height: var(--wp--custom--body--small--typography--line-height);
 
 	/* stylelint-disable-next-line */
-	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.6 12a7.6 7.6 0 1 1-15.2 0 7.6 7.6 0 0 1 15.2 0zm1.4 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9.9 1.906v.086h1.297v-.086c.006-.347.045-.639.117-.875.073-.235.188-.44.345-.612a3.06 3.06 0 0 1 .626-.498c.272-.163.504-.35.698-.563.196-.211.347-.451.453-.72.106-.272.159-.578.159-.916 0-.493-.117-.923-.35-1.292a2.312 2.312 0 0 0-.97-.866c-.416-.209-.903-.313-1.46-.313-.507 0-.97.097-1.39.29a2.412 2.412 0 0 0-1.007.857c-.254.375-.392.834-.413 1.378h1.378c.021-.32.101-.581.24-.784.14-.206.315-.357.526-.453.212-.097.434-.145.667-.145.257 0 .49.054.698.163.212.106.38.257.508.453.127.197.19.43.19.698 0 .224-.042.428-.127.612-.084.185-.2.348-.344.49-.145.142-.309.27-.49.385-.281.17-.521.357-.72.563-.2.205-.354.474-.463.806-.106.333-.162.78-.168 1.342zm.045 2.58a.88.88 0 0 0 .64.263c.166 0 .317-.041.453-.123a.938.938 0 0 0 .326-.326.864.864 0 0 0 .127-.458.85.85 0 0 0-.272-.635.867.867 0 0 0-.634-.267.872.872 0 0 0-.64.267.858.858 0 0 0-.267.635c0 .251.09.466.267.644z' fill='%23008A20'/%3E%3C/svg%3E");
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cg stroke='%23008A20' stroke-width='1.5'%3E%3Cpath d='m8.25 13 2.629 2L15.5 9'/%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3C/g%3E%3C/svg%3E%0A");
 	background-repeat: no-repeat;
-	background-position: var(--wp--preset--spacing--10) calc(var(--wp--preset--spacing--10) + 4px);
+	background-position: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
 	background-size: 24px 24px;
 	margin-top: 1px;
 
diff --git a/themes/wporg-5ftf-2024/templates/page-my-pledges.html b/themes/wporg-5ftf-2024/templates/page-my-pledges.html
index c11fc4e..533d497 100644
--- a/themes/wporg-5ftf-2024/templates/page-my-pledges.html
+++ b/themes/wporg-5ftf-2024/templates/page-my-pledges.html
@@ -1,7 +1,7 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
 
-<!-- wp:group {"tagName":"article","layout":{"inherit":true,"type":"constrained"}} -->
-<article class="wp-block-group">
+<!-- wp:group {"tagName":"article","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained"}} -->
+<article class="wp-block-group" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
 
 	<!-- wp:pattern {"slug":"wporg-5ftf-2024/my-pledges"} /-->