From 8d63e8d4e6aece82adce77a2c100b02511474621 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 20 Nov 2019 16:58:53 -0500
Subject: [PATCH] Style button & modal

---
 .../css/components/_components.scss           |  1 +
 .../css/components/_pledge-dialog.scss        | 64 +++++++++++++++++++
 .../css/components/_pledge-single.scss        | 56 ++++++----------
 themes/wporg-5ftf/css/settings/_colors.scss   |  1 +
 4 files changed, 84 insertions(+), 38 deletions(-)
 create mode 100644 themes/wporg-5ftf/css/components/_pledge-dialog.scss

diff --git a/themes/wporg-5ftf/css/components/_components.scss b/themes/wporg-5ftf/css/components/_components.scss
index 0958305..b879cfb 100644
--- a/themes/wporg-5ftf/css/components/_components.scss
+++ b/themes/wporg-5ftf/css/components/_components.scss
@@ -27,6 +27,7 @@
 @import "page";
 @import "pagination";
 @import "pledge-contributors";
+@import "pledge-dialog";
 @import "pledge-list";
 @import "pledge-single";
 @import "search-form";
diff --git a/themes/wporg-5ftf/css/components/_pledge-dialog.scss b/themes/wporg-5ftf/css/components/_pledge-dialog.scss
new file mode 100644
index 0000000..035f5c4
--- /dev/null
+++ b/themes/wporg-5ftf/css/components/_pledge-dialog.scss
@@ -0,0 +1,64 @@
+.pledge-dialog {
+	position: absolute;
+	z-index: 100;
+	width: 300px;
+	margin-top: 20px;
+	padding: 20px;
+	background: #fff;
+	border: 1px solid $color-gray-light-400;
+	box-shadow: rgba($color-gray-900, 0.1) 0 3px 30px;
+	font-size: ms(-3);
+
+	&[hidden] {
+		display: none;
+	}
+
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		top: -11px;
+		right: 40px;
+		border-style: solid;
+		border-color: transparent transparent #fff;
+		border-width: 0 12px 12px;
+	}
+	
+	&:before {
+		top: -12px;
+		border-bottom-color: $color-gray-light-400;
+	}
+
+	p:first-child {
+		margin-top: 0;
+	}
+
+	label {
+		display: inline-block;
+		margin-bottom: 4px;
+		font-size: ms(-4);
+		font-weight: bold;
+		color: $color-gray-500;
+	}
+
+	input[type="email"] {
+		display: block;
+		width: 100%;
+		margin: 0 0 20px 0;
+		padding: ms(-7) ms(-2);
+		border: 1px solid $color-gray-100;
+		box-shadow: none;
+	}
+
+	input[type="submit"] {
+		font-size: ms(-3);
+	}
+
+	.pledge-dialog__close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 10px;
+		text-decoration: none;
+	}
+}
\ No newline at end of file
diff --git a/themes/wporg-5ftf/css/components/_pledge-single.scss b/themes/wporg-5ftf/css/components/_pledge-single.scss
index 53ec1b8..ef66054 100644
--- a/themes/wporg-5ftf/css/components/_pledge-single.scss
+++ b/themes/wporg-5ftf/css/components/_pledge-single.scss
@@ -56,49 +56,29 @@ body.single.single-5ftf_pledge {
 
 		.report-wrapper {
 			margin-bottom: 1em;
+
+			a {
+				color: $color-alert-red;
+			}
+		}
+
+		.edit-pledge-wrapper .button {
+			padding-right: 4px;
+			text-decoration: none;
+			color: $color__wp-blue;
+			font-size: 1rem;
+
+			&:hover {
+				border-bottom: 1px solid currentColor;
+			}
 		}
 
 		@include breakpoint( $breakpoint-tablet ) {
-			display: grid;
-			grid-template-columns: 50% 50%;
+			display: flex;
 
-			#toggle-management-link-form,
-			#request-management-link {
-				float: right;
-				clear: both;
+			.report-wrapper {
+				flex: 1 0 auto;
 			}
 		}
 	}
-
-	#request-management-link {
-		width: 300px;
-		border: 1px solid #ebeced; // setup var
-		box-shadow: rgba(25, 30, 35, 0.1) 0 3px 30px;
-		margin-top: 20px;
-		padding: 15px;
-
-		// todo add the upper ^ carot thing
-			// border-radius or something to draw triangle
-			// element inside the box, but then abs position outside it?
-			// z-index above parent so it's above box-shadow - probably happens by default?
-
-		p:first-child {
-			margin-top: 0;
-		}
-
-		input[type="email"] {
-			width: 100%;
-			margin: 0 0 20px 0;
-		}
-
-		input[type="submit"] {
-			float: right;
-			clear: both;
-			margin-bottom: 20px;
-		}
-
-		#form-messages {
-			clear: both;
-		}
-	}
 }
diff --git a/themes/wporg-5ftf/css/settings/_colors.scss b/themes/wporg-5ftf/css/settings/_colors.scss
index c6db87a..8b1cd96 100644
--- a/themes/wporg-5ftf/css/settings/_colors.scss
+++ b/themes/wporg-5ftf/css/settings/_colors.scss
@@ -30,6 +30,7 @@ $color-gray-light-200: lighten($color-base-gray,74%);
 $color-gray-light-100: lighten($color-base-gray,77%);
 
 $color-error-red: #c92c2c;
+$color-alert-red: #d94f4f;
 
 // Theme colors
 $color__background-input: $color-gray-light-200;