Merge pull request #7197 from Automattic/update/awaiting-grade-notice

Style the "Awaiting Grade" notice
Automattic · Nov 1, 2023 · 423c951 · 423c951
2 parents 67e35a9 + 9fa8152
commit 423c951
Show file tree

Hide file tree

Showing 15 changed files with 242 additions and 85 deletions.
diff --git a/assets/css/3rd-party/themes/course/learning-mode.scss b/assets/css/3rd-party/themes/course/learning-mode.scss
@@ -1,3 +1,4 @@
+@import '~@wordpress/base-styles/breakpoints';
 @import "questions";
 @import "quiz";
 
@@ -250,19 +251,38 @@ body {
 	}
 }
 
-// Notice
+/* Notices */
 .sensei-course-theme-lesson-quiz-notice {
 	font-family: var(--wp--preset--font-family--system);
 	margin: 1.5rem 0;
 }
 
+.sensei-course-theme-quiz-graded-notice {
+	&__text {
+		margin: 0 0 32px;
+	}
+
+	.wp-block-button__link {
+		background-color: var(--wp--preset--color--background);
+		color: var(--wp--preset--color--primary);
+	}
+
+	&__pending-grade:hover {
+		border-color: var(--wp--preset--color--background);
+		cursor: default;
+	}
+
+	@media (min-width: $break-medium) {
+		border-radius: 4px;
+	}
+}
+
 /* Modern Template */
 .sensei-modern .sensei-course-theme__sidebar:not(.sensei-course-theme__secondary-sidebar) {
 	border: 1px solid var(--sensei-text-color);
 	border-radius: 4px;
 }
 
-
 .learning-mode-full-width .wp-block-sensei-lms-course-theme-course-progress-counter {
 	opacity: 1;
 }
diff --git a/assets/css/learning-mode-compat.scss b/assets/css/learning-mode-compat.scss
@@ -177,12 +177,14 @@ $breakpoint: 782px;
 	&.is-link,
 	&.wp-block-button > .wp-block-button__link {
 		border-radius: 2px;
+		box-sizing: border-box;
+		display: inline-block;
 		font-weight: 400;
+		height: 100%;
+		justify-content: center;
 		padding: 0.83em 1.11em;
 		text-decoration: none;
-		height: 100%;
 		width: 100%; // Fix the animation issue.
-		justify-content: center;
 
 		@media screen and (max-width: $breakpoint) {
 			padding: 0.83em 0.556em;
@@ -208,7 +210,7 @@ $breakpoint: 782px;
 		background-color: var(--sensei-secondary-color);
 		color: var(--sensei-button-text-color);
 
-		&:hover {
+		&:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover {
 			color: var(--sensei-button-fill-hover-color);
 			background-color: var(--sensei-primary-color);
 			border-color: var(--sensei-primary-color);
@@ -294,3 +296,17 @@ $breakpoint: 782px;
 		}
 	}
 }
+
+/* Quiz Notice */
+.sensei-course-theme-quiz-graded-notice {
+	&__title {
+		font-size: 24px;
+		font-weight: 700;
+		line-height: normal;
+	}
+
+	&__text {
+		font-size: 18px;
+		line-height: normal;
+	}
+}
diff --git a/assets/css/notices.scss b/assets/css/notices.scss
@@ -1,6 +1,5 @@
 .sensei-lms-notice {
 	background-color: #F6F7F7;
-	border: solid 1px #DCDCDE;
 	margin-bottom: 21px;
 	padding: 17px 26px;
 	color: #1E1E1E;

diff --git a/assets/css/sensei-course-theme/blocks/contact-teacher.scss b/assets/css/sensei-course-theme/blocks/contact-teacher.scss
@@ -68,10 +68,6 @@
 	}
 }
 
-.sensei-contact-teacher-wrapper {
-	display: flex;
-}
-
 .sensei-contact-teacher-form {
 	textarea {
 		font-family: inherit;

diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss
@@ -6,15 +6,14 @@ $breakpoint: 782px;
 	gap: 12px;
 }
 
-
 .sensei-course-theme__button,
 .sensei-course-theme__link,
 .sensei-course-theme .wp-block-button.is-style-outline > .wp-block-button__link {
 	align-items: center;
 	height: 100%;
 	justify-content: center;
 	white-space: nowrap;
-	width: 100%;
+	width: auto;
 	padding: 1rem 32px;
 	line-height: 100%;
 

diff --git a/assets/css/sensei-course-theme/notices.scss b/assets/css/sensei-course-theme/notices.scss
@@ -1,22 +1,24 @@
+@import '~@wordpress/base-styles/breakpoints';
 @import '../notices';
-@import './quiz-graded';
-
-
-$mobile_break_point: 782px;
 
 body.sensei-course-theme {
 	& > .sensei-message {
 		display: none;
 	}
 }
 
+/* All notices */
 .sensei-course-theme .sensei-lms-notice {
-	background-color: rgba(125, 125, 125, 0.08);
-	border-color: var(--border-color);
-	color: inherit;
-	padding: 1.125rem 1.5rem;
+	background-color: var(--wp--preset--color--foreground, #f6f7f7);
+	color: var(--wp--preset--color--background, #1e1e1e);
+	padding: 24px;
+
+	@media (min-width: $break-medium) {
+		padding-bottom: 24px;
+	}
 }
 
+/* Quiz notice on lesson page */
 .sensei-course-theme-lesson-quiz-notice {
 	display: flex;
 	flex-flow: wrap;
@@ -54,17 +56,21 @@ body.sensei-course-theme {
 	}
 
 	&__action {
-		display: flex;
 		align-items: center;
+		color: inherit;
+		display: flex;
+
+		&:active {
+			background-color: inherit;
+		}
 	}
 
 	&__link-chevron {
 		width: 24px;
 		height: 24px;
 	}
 
-	@media screen and (max-width: ($mobile_break_point)) {
-
+	@media screen and (max-width: $break-medium) {
 		flex-wrap: nowrap;
 		gap: 0;
 
@@ -75,6 +81,67 @@ body.sensei-course-theme {
 	}
 }
 
+/* Quiz notice on quiz page */
+.sensei-course-theme-quiz-graded-notice {
+	/* --content-padding comes from mobile.scss */
+	margin-left: calc(var(--content-padding) * -1);
+	margin-right: calc(var(--content-padding) * -1);
+	padding-bottom: 36px;
+
+	@media (min-width: $break-medium) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	&__title {
+		margin: 0 0 10px 0;
+	}
+
+	&__text {
+		margin: 0 0 20px;
+	}
+
+	&__actions {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.wp-block-button__link {
+			display: inline-block;
+		}
+
+		@media (min-width: $break-medium) {
+			flex-direction: row;
+		}
+	}
+
+	&__pending-grade {
+		opacity: 0.6;
+
+		.wp-block-button__link:hover {
+			cursor: default;
+		}
+	}
+
+	&__reset-quiz-form {
+		margin-bottom: 0;
+
+		.sensei-course-theme__button {
+			background-color: transparent;
+			border: none;
+			color: inherit;
+			font-family: var(--wp--preset--font-family--body-font);
+			font-size: 18px;
+		}
+
+		@media (min-width: $break-medium) {
+			margin-left: auto;
+		}
+	}
+}
+
+/* Locked lesson notice */
 .sensei-course-theme-locked-lesson-notice {
 	&__header {
 		display: flex;

diff --git a/assets/css/sensei-course-theme/quiz-graded.scss b/assets/css/sensei-course-theme/quiz-graded.scss
diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -202,16 +202,11 @@ $vertical-spacing-desktop: 80px;
 }
 
 .wp-block-sensei-lms-quiz-actions {
-
 	& > div:first-child.sensei-quiz-actions-secondary {
 		flex-grow: 1;
 		justify-content: end;
 	}
 
-	.sensei-course-theme__button.is-primary {
-		width: auto;
-	}
-
 	button:disabled {
 		cursor: not-allowed;
 		pointer-events: none;

diff --git a/changelog/update-awaiting-grade-notice b/changelog/update-awaiting-grade-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update style of "Awaiting Grade" notice in Learning Mode
diff --git a/changelog/update-graded-notice b/changelog/update-graded-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update style of "Your Grade" notice in Learning Mode
diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php
@@ -2502,15 +2502,15 @@ private static function maybe_get_button_html_for_quiz_footer( $lesson_id = null
 			}
 
 			$block  = new Sensei_Block_Contact_Teacher();
-			$button = self::get_primary_button_anchor_html( __( 'Contact teacher', 'sensei-lms' ), '#' );
+			$button = self::get_primary_button_html( __( 'Contact teacher', 'sensei-lms' ), '#' );
 			return $block->render_contact_teacher_block( [], $button );
 		}
 
 		$prev_next_urls  = sensei_get_prev_next_lessons( $lesson_id );
 		$next_lesson_url = $prev_next_urls['next']['url'] ?? null;
 
 		if ( $next_lesson_url ) {
-			return self::get_primary_button_anchor_html( __( 'Continue to next lesson', 'sensei-lms' ), $next_lesson_url );
+			return self::get_primary_button_html( __( 'Continue to next lesson', 'sensei-lms' ), $next_lesson_url );
 		}
 
 		return null;
@@ -2519,17 +2519,36 @@ private static function maybe_get_button_html_for_quiz_footer( $lesson_id = null
 	/**
 	 * Returns the HTML for a primary button anchor.
 	 *
-	 * @param string $button_text The button text.
-	 * @param string $url         The URL.
+	 * @param string      $button_text The button text.
+	 * @param string|null $url         The URL.
+	 * @param array       $classes     CSS classes to add to the button.
 	 *
 	 * @return string The HTML for the primary button anchor.
 	 */
-	private static function get_primary_button_anchor_html( $button_text, $url ) {
-		return '<a class="wp-element-button sensei-course-theme__button is-primary" href="' . esc_url( $url ) . '">' .
-						esc_html( $button_text ) .
-				'</a>';
-	}
+	public static function get_primary_button_html( $button_text, $url = null, $classes = [] ) {
+		$href    = '';
+		$classes = array_merge(
+			array(
+				'wp-block-button__link',
+				'wp-element-button',
+				'sensei-course-theme__button',
+				'is-primary',
+			),
+			$classes
+		);
 
+		if ( $url ) {
+			$href = ' href="' . esc_url( $url ) . '"';
+		}
+
+		return (
+			'<div class="wp-block-button">
+				<a class="' . esc_attr( implode( ' ', $classes ) ) . '"' . $href . '>' .
+					esc_html( $button_text ) .
+				'</a>
+			</div>'
+		);
+	}
 }
 
 /**