My Pledges: Update styles and format to match design

- Add a single-pledge view so we can separate out the pending from published
- Update layout and styles of my pledges list
- Adds link and danger button styles

themes/wporg-5ftf/css/components/_my-pledges.scss

@@ -1,67 +1,158 @@
-body.page-my-pledges .entry-content {
-	// move avatar and "pledge x hours" into place, align, etc
+body.page.page-my-pledges {
 
-	.avatar {
+	// Expand archive content area to full-width of header.
+	.site-content .site-main {
+		padding: 0 10px;
+		max-width: $size__site-main;
+	}
+
+	.entry-header {
 		display: none;
-
-		@include breakpoint($breakpoint-tablet) {
-			display: block;
-			// round corners
-		}
 	}
 }
 
-.fftf_pledge {
-	text-align: center;
-	margin-bottom: 25px;
+.my-pledges__header {
 
-	.pledge-logo-container {
-		display: block;
-		background-color: #FAFAFA; // todo make var
-		max-width: 80%;
-		margin: 0 auto;
-
-		.attachment-pledge-logo {
-			max-height: 100px;
-			width: auto;
-			// todo needs tweaking
-		}
+	.entry-content & {
+		margin-top: ms(10);
+		margin-bottom: ms(10);
+		border-bottom: 1px solid $color-gray-light-500;
+		padding-bottom: ms(2);
 	}
 
-	.pledge-title a {
-		text-decoration: underline;
-		// font size etc
+	.my-pledges__title {
+		font-size: ms(8);
 	}
 
-	.pledge-actions {
-		input {
-			display: block;
-			margin: 1em auto;
-
-			&[name="decline_invitation"],
-			&[name="leave_organization"] {
-				color: #bf2b2b; // todo var
-			}
-		}
+	.my-pledges__dedication {
+		color: $color-gray-300;
+		font-size: ms(-1);
 	}
 
+	.my-pledges__avatar {
+		display: none;
+	}
 
 	@include breakpoint($breakpoint-tablet) {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-		grid-template-areas: "logo name actions";
-		text-align: left;
+		grid-template-columns: auto 1fr;
+		grid-template-areas:
+			"avatar name"
+			"avatar dedication";
 
-		.pledge-logo-container {
-			grid-area: logo;
+		.my-pledges__avatar {
+			display: block;
+			margin-right: ms(2);
+			grid-area: avatar;
+
+			img {
+				border-radius: 100%;
+			}
 		}
 
-		.pledge-title {
+		.my-pledges__title {
+			margin: 0;
 			grid-area: name;
 		}
 
-		.pledge-actions {
-			grid-area: actions;
+		.my-pledges__dedication {
+			margin: 0;
+			grid-area: dedication;
+		}
+	}
+}
+
+.my-pledges__notice.notice {
+	margin-bottom: ms(4);
+}
+
+.my-pledges__list {
+
+	&.is-pending-list {
+		margin-top: ms(8);
+		border-top: 1px solid $color-gray-light-500;
+		padding-top: ms(8);
+
+		> h2 {
+			margin-top: 0;
+			margin-bottom: ms(5);
+		}
+	}
+}
+
+.my-pledges__pledge {
+	margin-bottom: ms(6);
+
+	.entry-image {
+		margin-bottom: ms(2);
+	}
+
+	.my-pledges__pledge-meta {
+		margin-bottom: ms(2);
+	}
+
+	.my-pledges__pledge-title {
+		display: inline-block;
+		margin-bottom: ms(-4);
+		font-size: ms(2);
+		text-decoration: underline;
+	}
+
+	.my-pledges__pledge-date {
+		margin: 0;
+		font-size: ms(-1);
+	}
+
+	.my-pledges__pledge-actions {
+
+		.button {
+			display: inline-block;
+			font-size: ms(-3);
+		}
+
+		.button + .button {
+			margin-left: 1em;
+		}
+
+		.button-link {
+			text-align: right;
+		}
+	}
+
+	@include breakpoint($breakpoint-tablet) {
+		display: grid;
+		grid-template-columns: 300px 1fr auto;
+		grid-template-areas: "logo name actions";
+		align-items: center;
+		text-align: left;
+
+		.entry-image {
+			grid-area: logo;
+			margin-bottom: 0;
+			margin-right: ms(2);
+		}
+
+		.my-pledges__pledge-meta {
+			grid-area: name;
+			margin-bottom: 0;
+			margin-right: ms(2);
+		}
+
+		.my-pledges__pledge-actions {
+			grid-area: actions;
+
+			.button {
+				display: block;
+			}
+
+			.button + .button {
+				margin-top: 0.5em;
+				margin-left: 0;
+			}
+
+			.button-link {
+				width: 100%;
+			}
 		}
 	}
 }

themes/wporg-5ftf/css/objects/_buttons.scss

@@ -15,3 +15,40 @@ input[type="submit"] {
 	color: $color__link-button;
 	text-decoration: none;
 }
+
+// Add "danger" button styles, red text on grey background.
+.button.button-danger {
+	color: $color-error-red;
+
+	&:visited {
+		color: $color-error-red;
+	}
+
+	&.hover,
+	&:hover,
+	&.focus,
+	&:focus {
+		color: $color-error-red;
+	}
+
+	&.focus,
+	&:focus {
+		border-color: rgba($color-error-red, 0.6);
+		box-shadow: 0 0 3px $color-error-red;
+	}
+}
+
+.button.button-link {
+	padding: 0;
+	margin-left: 0;
+	margin-right: 0;
+	border: none;
+	background-color: transparent;
+	box-shadow: none;
+	text-decoration: underline;
+
+	&.focus,
+	&:focus {
+		box-shadow: none;
+	}
+}

themes/wporg-5ftf/css/objects/_pledge.scss

@@ -1,4 +1,5 @@
-article.type-5ftf_pledge {
+article.type-5ftf_pledge,
+.my-pledges__pledge {
 
 	.entry-image__placeholder {
 		background: $color-gray-light-100;

themes/wporg-5ftf/css/settings/_colors.scss

@@ -29,6 +29,8 @@ $color-gray-light-300: lighten($color-base-gray,72%);
 $color-gray-light-200: lighten($color-base-gray,74%);
 $color-gray-light-100: lighten($color-base-gray,77%);
 
+$color-error-red: #c92c2c;
+
 // Theme colors
 $color__background-input: $color-gray-light-200;
 $color__text: $color-gray-500;