From 6616fa54b30fad668af0cb3e0b8349301b0b2ac2 Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Tue, 10 Sep 2024 02:31:27 +0800
Subject: [PATCH] 2871 follow-up style updates (#2876)

* Update sign-in block styles

* Update sidebar styles

* Update single quiz styles

* Update quiz-graded page styles

* Add a separator to the header for standalone

* Hide course progress counter when a user is not enrolled

* Make sure the inner progress bar is on top of the separator
---
 .../patterns/sensei-lesson-header.php         |   7 +-
 .../wporg-learn-2024/src/style/_sensei.scss   | 367 +++++++++++++++---
 .../templates/single-quiz.html                |   6 +-
 .../themes/pub/wporg-learn-2024/theme.json    |   1 +
 4 files changed, 318 insertions(+), 63 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
index 720ff2e0b..67da9358b 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
@@ -7,6 +7,9 @@
  * Original source: https://github.com/Automattic/sensei/blob/af62fb1115daf2063bc56331a7d8b1b3ea805866/themes/sensei-course-theme/patterns/header.html
  */
 
+$course_id = Sensei()->lesson->get_course_id( get_the_ID() );
+$is_user_enrolled = Sensei_Course::is_user_enrolled( $course_id );
+
 ?>
 
 <!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__header","className":"sensei-version\u002d\u002d4-16-2"} -->
@@ -22,7 +25,9 @@
 
 			<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"className":"sensei-course-theme__header__info","layout":{"type":"flex","flexWrap":"nowrap"}} -->
 			<div class="wp-block-group sensei-course-theme__header__info">
-				<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->
+				<?php if ( $is_user_enrolled ) : ?>
+					<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->
+				<?php endif; ?>
 
 				<!-- wp:sensei-lms/exit-course {"fontSize":"small"} /-->
 			</div>
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index 2a0d58ee0..e015e837a 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -12,6 +12,11 @@ body.sensei {
 	--sensei-course-progress-bar-inner-color: var(--wp--custom--color--green-50);
 	--sensei-lesson-meta-color: var(--wp--preset--color--charcoal-4);
 	--sensei-module-lesson-color: var(--wp--preset--color--charcoal-1);
+	--sensei-lm-mobile-header-height: 60px;
+
+	.wp-block-sensei-lms-course-theme-notices:empty {
+		display: none;
+	}
 
 	.sensei-course-theme-header-content {
 		> .wp-block-group {
@@ -22,18 +27,18 @@ body.sensei {
 			gap: var(--wp--preset--spacing--30);
 		}
 
-		.sensei-course-theme-course-progress::after {
-			content: "";
-			display: inline-block;
-			height: 100%;
-			border-right: 1px solid var(--sensei-course-progress-bar-color);
-			position: absolute;
-			margin-left: 30px;
-			top: 0;
-		}
-
 		.wp-block-sensei-lms-exit-course {
 			margin-left: var(--wp--preset--spacing--30);
+
+			&::before {
+				content: "";
+				display: inline-block;
+				height: 100%;
+				border-right: 1px solid var(--sensei-course-progress-bar-color);
+				position: absolute;
+				margin-left: -30px;
+				top: 0;
+			}
 		}
 	}
 
@@ -46,6 +51,7 @@ body.sensei {
 			border-top-right-radius: 5px !important;
 			border-bottom-right-radius: 5px !important;
 			height: 4px !important;
+			z-index: 1;
 		}
 	}
 
@@ -84,11 +90,7 @@ body.sensei {
 
 			.wp-block-sensei-lms-course-theme-notices {
 				margin-block-end: 39px;
-				margin-block-start: 0;
-
-				&:empty {
-					display: none;
-				}
+				margin-block-start: var(--wp--preset--spacing--40);
 			}
 		}
 	}
@@ -105,8 +107,25 @@ body.sensei {
 
 			.sensei-lms-course-navigation-lesson__status {
 				margin-top: 6px;
+
+				&[aria-label="Preview"] {
+					display: none;
+
+					+ .sensei-lms-course-navigation-lesson__title {
+						padding-left: 0;
+						margin-left: 18px;
+						text-decoration: none;
+						display: list-item;
+						list-style-type: disc;
+						list-style-position: outside;
+					}
+				}
 			}
 		}
+
+		.sensei-lms-course-navigation-lesson__extra[aria-label^="Preview"] {
+			display: none;
+		}
 	}
 
 	.sensei-course-theme__sidebar {
@@ -200,18 +219,28 @@ body.sensei {
 
 	.wp-block-sensei-lms-lesson-actions {
 		.wp-block-sensei-lms-button-view-quiz,
+		.wp-block-sensei-lms-button-complete-lesson {
+			> button {
+				font-weight: 600 !important;
+				line-height: 1;
+			}
+		}
+
+		.wp-block-sensei-lms-button-view-quiz {
+			&:hover {
+				background-color: var(--wp--preset--color--deep-blueberry) !important;
+			}
+		}
+
 		.wp-block-sensei-lms-button-complete-lesson {
 			background-color: var(--wp--custom--color--green-50) !important;
 			border-color: transparent;
 
 			&:hover {
-				opacity: 0.9;
+				background-color: var(--wp--custom--color--green-60) !important;
 			}
 
 			> button {
-				font-weight: 600 !important;
-				line-height: 1;
-
 				&:focus,
 				&:focus-visible {
 					outline: var(--wp--custom--color--green-50);
@@ -227,57 +256,267 @@ body.sensei {
 	}
 
 	&.quiz {
-		#sensei-quiz-list .question-title {
-			font-size: var(--wp--preset--font-size--heading-4);
-		}
+		.wp-block-sensei-lms-course-theme-notices {
+			margin-block-start: 0;
 
-		.wp-block-sensei-lms-quiz .wp-block-sensei-lms-quiz-question {
-			margin-top: var(--wp--preset--spacing--40);
-		}
+			.sensei-course-theme-quiz-graded-notice {
+				padding: 40px;
+				margin-bottom: var(--wp--preset--spacing--40);
 
-		.wp-block-sensei-lms-quiz .sensei-lms-question-block__header {
-			margin-bottom: var(--wp--preset--spacing--20);
-		}
+				.sensei-course-theme-quiz-graded-notice__title {
+					font-size: var(--wp--preset--font-size--heading-5);
+					font-weight: 600;
+					margin-block-start: 0;
+				}
+
+				.sensei-course-theme-quiz-graded-notice__text {
+					font-size: var(--wp--preset--font-size--normal);
+				}
+
+				.sensei-course-theme-quiz-graded-notice__actions {
+					gap: var(--wp--preset--spacing--20);
+
+					.wp-block-button {
+
+						@media screen and (max-width: 782px) {
+							width: 100%;
+						}
 
-		#sensei-quiz-list fieldset {
-			padding: 0;
-			border: none;
+						> a {
+							font-size: var(--wp--preset--font-size--normal);
+							font-weight: 600;
+							width: 100%;
 
-			ul {
-				margin-top: 0;
+							&:focus,
+							&:focus-visible {
+								border: none;
+								outline-offset: 3.5px;
+								outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+							}
+
+							&:hover {
+								background-color: var(--wp--preset--color--deep-blueberry) !important;
+							}
+						}
+					}
+
+					.sensei-course-theme-quiz-graded-notice__reset-quiz-form {
+						margin-left: 0;
+
+						@media screen and (max-width: 782px) {
+							width: 100%;
+						}
+
+						> button {
+							font-size: var(--wp--preset--font-size--normal);
+							font-weight: 600;
+							border: 1px solid var(--wp--preset--color--blueberry-1);
+							width: 100%;
+
+							&:focus,
+							&:focus-visible {
+								outline-offset: 2.5px;
+								outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+								color: var(--wp--preset--color--white);
+								background-color: var(--wp--preset--color--blueberry-1);
+
+								&:hover {
+									background-color: var(--sensei-button-outline-hover-color) !important;
+									outline: none;
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 
-		#sensei-quiz-list li ul li input,
-		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label::before {
-			flex-shrink: 0;
-		}
 
-		#sensei-quiz-list li ul li input:focus,
-		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox:focus + label::before {
-			outline: 1.5px solid var(--wp--preset--color--blueberry-1);
-			outline-offset: 1.5px;
+		.entry-content {
+			margin-top: 0;
+
+			#sensei-quiz-list {
+				margin-block-end: 0;
+
+				.wp-block-sensei-lms-quiz-question {
+					margin-top: 0;
+
+					&:not(:first-of-type) {
+						margin-top: var(--wp--preset--spacing--40);
+					}
+				}
+
+				.sensei-lms-question-block__header {
+					margin-bottom: var(--wp--preset--spacing--20);
+
+					.question-title {
+						font-size: var(--wp--preset--font-size--heading-6);
+						font-family: var(--wp--preset--font-family--inter);
+						font-weight: 600;
+					}
+				}
+
+				fieldset {
+					padding: 0;
+					border: none;
+
+					.answers {
+						margin-top: 0;
+
+						li > label {
+							font-family: var(--wp--preset--font-family--inter);
+							font-size: 16px;
+							font-weight: 400;
+						}
+
+						li > input,
+						.sensei-multiple-choice-answer-option-checkbox + label::before {
+							flex-shrink: 0;
+						}
+
+						li > input:focus,
+						.sensei-multiple-choice-answer-option-checkbox:focus + label::before {
+							outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+							outline-offset: 1.5px;
+						}
+
+						.sensei-multiple-choice-answer-option-checkbox {
+							// Checkboxes need to be displayed, otherwise keyboard nav will not work.
+							// The following code is copied from `screen-reader-text` so that the checkboxes
+							// exist on the page, but are not shown visually. The visual checkboxes are added
+							// by `::before` on the label.
+							display: initial !important;
+							clip: rect(1px, 1px, 1px, 1px);
+							word-wrap: normal !important;
+							border: 0;
+							clip-path: inset(50%);
+							height: 1px;
+							margin: -1px;
+							overflow: hidden;
+							padding: 0;
+							position: absolute;
+							width: 1px;
+
+							+ label {
+								margin-left: 0;
+							}
+						}
+					}
+
+					.sensei-lms-question__answer-feedback {
+						margin-bottom: 0;
+						font-size: var(--wp--preset--font-size--small);
+					}
+				}
+			}
 		}
 
-		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox {
-			// Checkboxes need to be displayed, otherwise keyboard nav will not work.
-			// The following code is copied from `screen-reader-text` so that the checkboxes
-			// exist on the page, but are not shown visually. The visual checkboxes are added
-			// by `::before` on the label.
-			display: initial !important;
-			clip: rect(1px, 1px, 1px, 1px);
-			word-wrap: normal !important;
-			border: 0;
-			clip-path: inset(50%);
-			height: 1px;
-			margin: -1px;
-			overflow: hidden;
-			padding: 0;
-			position: absolute;
-			width: 1px;
 
-			+ label {
-				margin-left: 0;
+		.sensei-course-theme__quiz__footer__wrapper {
+			padding-bottom: var(--wp--preset--spacing--50);
+
+			a,
+			button {
+				font-weight: 600 !important;
+				line-height: 1;
+				font-size: var(--wp--preset--font-size--normal);
+				padding: 17px 32px !important;
+			}
+
+			.wp-block-sensei-lms-quiz-actions {
+
+				@media screen and (max-width: 782px) {
+					flex-direction: column;
+					gap: var(--wp--preset--spacing--20);
+				}
+
+				.wp-block-button {
+
+					@media screen and (max-width: 782px) {
+						width: 100%;
+					}
+
+					> a {
+						width: 100%;
+
+						&:focus,
+						&:focus-visible {
+							outline-offset: 4.5px;
+							outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+							color: var(--wp--preset--color--white);
+							background-color: var(--wp--preset--color--blueberry-1);
+							border: none;
+						}
+
+						&:hover {
+							background-color: var(--wp--preset--color--deep-blueberry) !important;
+						}
+					}
+				}
+
+				.sensei-quiz-actions-primary {
+
+					@media screen and (max-width: 782px) {
+						width: 100%;
+					}
+
+					.sensei-quiz-action {
+						background-color: var(--wp--custom--color--green-50);
+						border-color: transparent !important;
+
+						&:hover {
+							background-color: var(--wp--custom--color--green-60);
+						}
+
+						> button {
+							&:focus,
+							&:focus-visible {
+								outline: var(--wp--custom--color--green-50);
+							}
+						}
+					}
+				}
+
+				.sensei-quiz-actions-secondary {
+
+					@media screen and (max-width: 782px) {
+						flex-direction: column;
+						width: 100%;
+					}
+					gap: var(--wp--preset--spacing--20);
+
+					.sensei-quiz-action {
+						border: solid 1px var(--sensei-secondary-color);
+						border-radius: 2px;
+						text-align: center;
+
+						@media screen and (max-width: 782px) {
+							width: 100%;
+						}
+
+						&:hover {
+							background-color: var(--sensei-button-outline-hover-color);
+						}
+
+						> button {
+							color: var(--sensei-primary-color);
+							text-decoration: none !important;
+							width: 100%;
+
+							&:focus,
+							&:focus-visible {
+								background-color: var(--wp--custom--button--outline--focus--color--background);
+								color: var(--wp--custom--button--outline--hover--color--text);
+								box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
+
+								&:hover {
+									background-color: var(--sensei-button-outline-hover-color);
+									color: var(--sensei-primary-color);
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 	}
@@ -454,6 +693,16 @@ body.sensei {
 	.sensei-course-theme__header--standalone {
 		.sensei-course-theme-header-content {
 			border-bottom: 1px solid var(--wp--custom--color--border);
+
+			div:nth-of-type(2)::before {
+				content: "";
+				display: inline-block;
+				height: 100%;
+				border-right: 1px solid var(--sensei-course-progress-bar-color);
+				position: absolute;
+				margin-left: -30px;
+				top: 0;
+			}
 		}
 
 		// Also hide the leading slash for the Lesson title breadcrumb when it is hidden.
diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html
index bb0536cd9..d1a54bedf 100644
--- a/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html
+++ b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html
@@ -2,15 +2,15 @@
 
 <!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-header"} /-->
 
-<!-- wp:group {"className":"sensei-course-theme__quiz__main-content sensei-version\u002d\u002d4-16-2 sensei-course-theme__main-content", "tagName": "main","style"={"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|edge-space"}}}} -->
-<main class="wp-block-group sensei-course-theme__quiz__main-content sensei-version--4-16-2 sensei-course-theme__main-content" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--edge-space)">
+<!-- wp:group {"className":"sensei-course-theme__quiz__main-content sensei-version\u002d\u002d4-16-2 sensei-course-theme__main-content", "tagName": "main","style"={"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|40"}}}} -->
+<main class="wp-block-group sensei-course-theme__quiz__main-content sensei-version--4-16-2 sensei-course-theme__main-content" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--40)">
 
 	<!-- wp:sensei-lms/quiz-back-to-lesson /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
 	<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
 		
-		<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"0"},"padding":{"bottom":"0"}}},"fontSize":"heading-1"} /-->
+		<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
 
 		<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"right":"0","left":"0","top":"0","bottom":"0"}}},"className":"sensei-course-theme__quiz__header__right","layout":{"type":"constrained"}} -->
 		<div class="wp-block-group sensei-course-theme__quiz__header__right" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"></div>
diff --git a/wp-content/themes/pub/wporg-learn-2024/theme.json b/wp-content/themes/pub/wporg-learn-2024/theme.json
index 8aad04eb8..e65ac0e8c 100644
--- a/wp-content/themes/pub/wporg-learn-2024/theme.json
+++ b/wp-content/themes/pub/wporg-learn-2024/theme.json
@@ -48,6 +48,7 @@
 			"color": {
 				"border": "var(--wp--preset--color--light-grey-1)",
 				"green-50": "#008A20",
+				"green-60": "#007017",
 				"green-70": "#005C12"
 			},
 			"form": {