Updates to writing prompt block in full post reader (#76092)

* Updates to writing prompt block in full post reader * Some minor updates to see if we can get this working on native mobile. * Brought icon into Calypso * Added blockquote style * Updates to help native mobile apps * Update to line color for native mobile apps * Dark mode icon variation * Change border color back to a variable * Moved background icon image inline and added dark color scheme preference * Removed dark color scheme preference * Changed to --color-neutral-10 to help native apps * Adding native mobile styles for dark mode
Automattic · Apr 26, 2023 · 808d0f1 · 808d0f1
1 parent d99ccca
commit 808d0f1
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/client/assets/stylesheets/reader-mobile.scss b/client/assets/stylesheets/reader-mobile.scss
@@ -4,3 +4,10 @@
 @import "shared/utils";
 
 @import "client/blocks/reader-full-post/content";
+
+@media (prefers-color-scheme: dark) {
+	.reader-full-post__story-content .jetpack-blogging-prompt .jetpack-blogging-prompt__label::before {
+		// stylelint-disable-next-line function-url-quotes
+		background-image: url("data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.3438 17.3438h-4.68755c-.08594 0-.15625.0703-.15625.1562v.625c0 .3457.2793.625.625.625h3.75c.3457 0 .625-.2793.625-.625v-.625c0-.0859-.0703-.1562-.1562-.1562zm-2.3438-16.0938c-3.53711 0-6.40625 2.86914-6.40625 6.40625 0 2.37105 1.28906 4.44145 3.20313 5.54885v2.2637c0 .3457.27929.625.625.625h5.15622c.3457 0 .625-.2793.625-.625v-2.2637c1.9141-1.1074 3.2032-3.1778 3.2032-5.54885 0-3.53711-2.8692-6.40625-6.4063-6.40625zm2.498 10.7383-.7011.4062v2.293h-3.59377v-2.293l-.70118-.4062c-1.53711-.8887-2.50195-2.52541-2.50195-4.33205 0-2.76172 2.23828-5 5-5 2.7617 0 5 2.23828 5 5 0 1.80664-.9648 3.44335-2.502 4.33205z' fill='%23fff'/%3E%3C/svg%3E");
+	}
+}
diff --git a/client/blocks/reader-full-post/_content.scss b/client/blocks/reader-full-post/_content.scss
@@ -442,3 +442,85 @@
 	padding-left: 16px;
 	padding-right: 16px;
 }
+
+// Writing Prompts Block Styles
+.reader-full-post__story-content .jetpack-blogging-prompt {
+	border: 1px solid var(--color-neutral-10);
+	border-radius: 2px;
+	box-sizing: border-box;
+	margin-bottom: 24px;
+	padding: 24px;
+
+	&.is-style-quote {
+		border: unset;
+		border-left: 4px solid var(--color-neutral-80);
+		margin-bottom: 16px;
+		padding: 0 24px;
+	}
+
+	.jetpack-blogging-prompt__answers {
+		display: flex;
+
+		img {
+			border: 2px solid #fff;
+			border-radius: 50%;
+			height: 24px;
+			width: 24px;
+		}
+
+		.image-wrapper {
+			height: 24px;
+			width: 24px;
+		}
+
+		.image-wrapper:first-child,
+		img:first-child {
+			margin-left: -2px;
+		}
+		.image-wrapper:not(:first-child),
+		img:not(:first-child) {
+			margin-left: -12px;
+		}
+	}
+
+	.jetpack-blogging-prompt__answers-link {
+		color: var(--studio-gray-80);
+		flex: 1;
+		font-family: sans-serif;
+		font-size: $font-body;
+		margin-left: 8px;
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	.jetpack-blogging-prompt__label {
+		font-family: sans-serif;
+		font-size: $font-body-small;
+		margin-bottom: 16px;
+		padding-left: 22px;
+		position: relative;
+
+		&::before {
+			// stylelint-disable-next-line function-url-quotes
+			background-image: url("data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.3438 17.3438h-4.68755c-.08594 0-.15625.0703-.15625.1562v.625c0 .3457.2793.625.625.625h3.75c.3457 0 .625-.2793.625-.625v-.625c0-.0859-.0703-.1562-.1562-.1562zm-2.3438-16.0938c-3.53711 0-6.40625 2.86914-6.40625 6.40625 0 2.37105 1.28906 4.44145 3.20313 5.54885v2.2637c0 .3457.27929.625.625.625h5.15622c.3457 0 .625-.2793.625-.625v-2.2637c1.9141-1.1074 3.2032-3.1778 3.2032-5.54885 0-3.53711-2.8692-6.40625-6.4063-6.40625zm2.498 10.7383-.7011.4062v2.293h-3.59377v-2.293l-.70118-.4062c-1.53711-.8887-2.50195-2.52541-2.50195-4.33205 0-2.76172 2.23828-5 5-5 2.7617 0 5 2.23828 5 5 0 1.80664-.9648 3.44335-2.502 4.33205z' fill='%231e1e1e'/%3E%3C/svg%3E");
+			background-repeat: no-repeat;
+			background-size: 24px 24px;
+			content: "";
+			display: inline-block;
+			height: 24px;
+			left: -5px;
+			opacity: 0.65;
+			position: absolute;
+			width: 24px;
+			top: 1px;
+		}
+	}
+
+	.jetpack-blogging-prompt__text {
+		font-size: $font-title-medium;
+		margin-bottom: 24px;
+	}
+}