✨ Expand kids-mode theming across tokens, quiz details, and uploader UI

assets/core/scss/components/_modal.scss

@@ -47,8 +47,8 @@
     max-width: 500px;
     max-height: 90vh;
     background-color: $tutor-surface-l1;
-    border-radius: $tutor-radius-3xl;
-    box-shadow: $tutor-shadow-modal;
+    border-radius: $tutor-modal-radius;
+    box-shadow: $tutor-modal-shadow;
     overflow-y: auto;
 
     // Transitions

assets/core/scss/components/_popover.scss

@@ -9,11 +9,10 @@
   z-index: $tutor-z-dropdown;
   max-width: 276px;
   background-color: $tutor-surface-l1;
-  border: 1px solid $tutor-border-idle;
-  border-radius: $tutor-radius-lg;
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: $tutor-popover-border;
+  border-radius: $tutor-popover-radius;
+  box-shadow: $tutor-popover-shadow;
+  overflow: hidden;
 
   &-header {
     padding: $tutor-spacing-4 $tutor-spacing-4 0;

assets/core/scss/components/_select.scss

@@ -163,9 +163,9 @@
     @include right(0);
     z-index: $tutor-z-dropdown;
     background: $tutor-surface-l1;
-    border: 1px solid $tutor-border-idle;
-    border-radius: $tutor-radius-md;
-    box-shadow: $tutor-shadow-lg;
+    border: $tutor-popover-border;
+    border-radius: $tutor-popover-radius;
+    box-shadow: $tutor-popover-shadow;
     overflow: hidden;
     display: flex;
     flex-direction: column;

assets/core/scss/tokens/_index.scss

@@ -12,3 +12,5 @@
 @forward "text-colors";
 @forward "typography";
 @forward "zIndex";
+@forward "popover";
+@forward "modal";

assets/core/scss/tokens/_modal.scss

@@ -0,0 +1,10 @@
+@use './borders' as *;
+@use './shadows' as *;
+
+$tutor-modal-shadow: var(--tutor-modal-shadow, #{$tutor-shadow-modal});
+$tutor-modal-radius: var(--tutor-modal-radius, #{$tutor-radius-3xl});
+
+$tutor-modal: (
+  shadow: $tutor-modal-shadow,
+  radius: $tutor-modal-radius,
+);

assets/core/scss/tokens/_popover.scss

@@ -0,0 +1,12 @@
+@use './borders' as *;
+@use './shadows' as *;
+
+$tutor-popover-shadow: var(--tutor-popover-shadow, #{$tutor-shadow-lg});
+$tutor-popover-border: var(--tutor-popover-border, 1px solid #{$tutor-border-idle});
+$tutor-popover-radius: var(--tutor-popover-radius, #{$tutor-radius-2xl});
+
+$tutor-popover: (
+  shadow: $tutor-popover-shadow,
+  border: $tutor-popover-border,
+  radius: $tutor-popover-radius,
+)

assets/core/scss/tokens/_shadows.scss

@@ -2,7 +2,7 @@
 // Shadows
 // ==========================================================================
 
-$tutor-shadow-modal: 0px 4px 104.9px 0px #00000040;
+$tutor-shadow-modal: 0px 8px 8px -4px #10182808, 0px 20px 24px -4px #10182814;
 $tutor-shadow-xs: 0px 1px 2px 0px #1018280D;
 $tutor-shadow-sm: 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A;
 $tutor-shadow-md: 0px 2px 4px -2px #1018280F, 0px 4px 8px -2px #1018281A;

assets/src/js/v3/shared/icons/types.ts

@@ -375,6 +375,7 @@ export const icons = [
   'tryAgain',
   'txt',
   'undo',
+  'unread',
   'update',
   'upload',
   'upload2',

assets/src/scss/frontend/components/_quiz-attempt-details.scss

@@ -9,7 +9,7 @@
   );
 
   body:has(#wpadminbar) & {
-    --tutor-quiz-summary-header-top: 46px;
+    --tutor-quiz-summary-header-top: 0px;
   }
 
   @include tutor-breakpoint-up(sm) {
@@ -303,7 +303,7 @@
 
 .tutor-quiz-review-feedback-wrapper {
   max-width: 1220px;
-  padding-block: $tutor-spacing-13;
+  padding: $tutor-spacing-13 $tutor-spacing-6;
   margin-inline: auto;
   display: grid;
   grid-template-columns: 300px 1fr;

assets/src/scss/frontend/dashboard/_reviews.scss

@@ -55,10 +55,9 @@
   }
 
   &-actions {
-    @include tutor-flex(row);
     gap: $tutor-spacing-4;
-    @include tutor-transition(opacity);
     opacity: 0;
+    @include tutor-transition(opacity);
   }
 
   &-text {

assets/src/scss/frontend/kids/_dashboard.scss

@@ -27,6 +27,10 @@
     border-radius: $tutor-radius-3xl;
   }
 
+  .tutor-dashboard-header-user-popover-profile {
+    border-radius: $tutor-radius-3xl;
+  }
+
   // home
   .tutor-student-dashboard-courses {
     .tutor-card.tutor-progress-card:not(:first-child) {
@@ -107,10 +111,6 @@
     }
   }
 
-  .tutor-dashboard-header-user-popover {
-    @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-2xl);
-  }
-
   .tutor-dashboard-header-user-popover-menu li a {
     border-radius: $tutor-radius-2xl;
   }

assets/src/scss/frontend/kids/_modal.scss

@@ -0,0 +1,6 @@
+@use '@Core/scss/tokens' as *;
+
+[data-tutor-ui='kids'] {
+  --tutor-modal-shadow: 0 0 0 1px #{$tutor-border-idle}, 0 3px 0 0 #{$tutor-border-idle}, #{$tutor-shadow-modal};
+  --tutor-modal-radius: #{$tutor-radius-5xl};
+}

assets/src/scss/frontend/kids/_popover.scss

@@ -0,0 +1,7 @@
+@use '@Core/scss/tokens' as *;
+
+[data-tutor-ui='kids'] {
+  --tutor-popover-shadow: 0 0 0 1px #{$tutor-border-idle}, 0 3px 0 0 #{$tutor-border-idle}, #{$tutor-shadow-lg};
+  --tutor-popover-border: none;
+  --tutor-popover-radius: #{$tutor-radius-5xl};
+}

assets/src/scss/frontend/kids/index.scss

@@ -4,5 +4,7 @@
 @forward './nav';
 @forward './tabs';
 @forward './sidebar';
+@forward './popover';
+@forward './modal';
 @forward './dashboard';
 @forward './learning-area';

classes/Icon.php

@@ -391,6 +391,7 @@ final class Icon {
 	const TRY_AGAIN                  = 'try-again';
 	const TXT                        = 'txt';
 	const UNDO                       = 'undo';
+	const UNREAD                     = 'unread';
 	const UPDATE                     = 'update';
 	const UPLOAD                     = 'upload';
 	const UPLOAD_2                   = 'upload-2';

components/StarRating.php

@@ -134,9 +134,9 @@ public function get(): string {
 		$rating    = $this->rating;
 		$icon_size = $this->icon_size;
 
-		$star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $icon_size )->get();
-		$star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $icon_size )->get();
-		$star      = SvgIcon::make()->name( Icon::STAR_LINE )->size( $icon_size )->get();
+		$star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $icon_size )->ignore_kids()->get();
+		$star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $icon_size )->ignore_kids()->get();
+		$star      = SvgIcon::make()->name( Icon::STAR_LINE )->size( $icon_size )->ignore_kids()->get();
 
 		ob_start();
 		?>

components/StarRatingInput.php

@@ -180,9 +180,9 @@ public function get(): string {
 			5 => __( 'Amazing', 'tutor' ),
 		);
 
-		$star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get();
-		$star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get();
-		$star      = SvgIcon::make()->name( Icon::STAR_LINE )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get();
+		$star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get();
+		$star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get();
+		$star      = SvgIcon::make()->name( Icon::STAR_LINE )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get();
 
 		ob_start();
 		?>

templates/dashboard/discussions/comment-card.php

@@ -96,7 +96,7 @@
 			?>
 			<?php if ( get_current_user_id() === (int) $lesson_comment->user_id ) : ?>
 				<div class="tutor-flex">
-					<button x-ref="trigger" @click="toggle()" class="tutor-btn tutor-btn-ghost tutor-btn-x-small tutor-btn-icon">
+					<button x-ref="trigger" @click="toggle()" class="tutor-btn tutor-btn-secondary tutor-btn-x-small tutor-btn-icon">
 						<?php SvgIcon::make()->name( Icon::ELLIPSES )->size( 16 )->color( Color::SECONDARY )->render(); ?>
 					</button>
 					<div x-ref="content" x-show="open" x-cloak @click.outside="handleClickOutside()" class="tutor-popover">

templates/dashboard/discussions/qna-card.php

@@ -281,7 +281,14 @@ class="tutor-popover-menu-item tutor-gap-5"
 								<?php SvgIcon::make()->name( Icon::SPINNER )->size( 20 )->color( Color::SECONDARY )->attr( 'class', 'tutor-animate-spin' )->render(); ?>
 							</template>
 							<template x-if="!(qnaSingleActionMutation?.isPending && currentAction === 'read' && currentQuestionId === <?php echo esc_html( $question_id ); ?>)">
-								<?php SvgIcon::make()->name( Icon::READ )->size( 20 )->render(); ?>
+								<span class="tutor-flex">
+									<template x-if="isUnread">
+										<?php SVGIcon::make()->name( Icon::READ )->size( 20 )->render(); ?>
+									</template>
+									<template x-if="!isUnread">
+										<?php SVGIcon::make()->name( Icon::UNREAD )->size( 20 )->render(); ?>
+									</template>
+								</span>
 							</template>
 							<span x-text="isUnread ? '<?php echo esc_js( __( 'Mark as Read', 'tutor' ) ); ?>' : '<?php echo esc_js( __( 'Mark as Unread', 'tutor' ) ); ?>'"></span>
 						</button>
@@ -341,4 +348,3 @@ class="tutor-popover-menu-item tutor-gap-5 tutor-sm-border-t"
 	<?php endif; ?>
 
 </div>
-

templates/dashboard/instructor/home.php

@@ -343,6 +343,7 @@ class="tutor-btn tutor-btn-outline tutor-btn-small tutor-btn-icon"
 				x-ref="content"
 				x-show="open"
 				x-cloak
+				x-transition.origin.top.right
 				@click.outside="handleClickOutside()"
 				class="tutor-popover tutor-popover-bottom"
 			>

templates/dashboard/quiz-attempts/quiz-attempts-feedback.php

@@ -45,7 +45,6 @@
 						)
 					)
 					->attr( 'x-bind', "register('feedback')" )
-					->wrapper_attr( 'class', 'tutor-mb-16' )
 					->render();
 				?>
 			</div>

templates/dashboard/reviews/review-card.php

@@ -16,9 +16,12 @@
 use Tutor\Components\Button;
 use Tutor\Components\Badge;
 use Tutor\Components\InputField;
+use Tutor\Components\Popover;
 use Tutor\Components\StarRating;
 use Tutor\Components\StarRatingInput;
 use Tutor\Components\Constants\Size;
+use Tutor\Components\Constants\Color;
+use Tutor\Components\Constants\Positions;
 use Tutor\Components\Constants\Variant;
 use Tutor\Helpers\DateTimeHelper;
 
@@ -103,7 +106,7 @@
 
 				<!-- Actions -->
 				<?php if ( $review['is_editable'] ) : ?>
-					<div class="tutor-review-actions">
+					<div class="tutor-flex tutor-review-actions tutor-sm-hidden">
 						<?php
 							Button::make()
 								->label( __( 'Edit Review', 'tutor' ) )
@@ -125,6 +128,46 @@
 								->render();
 						?>
 					</div>
+					<div class="tutor-review-actions tutor-hidden tutor-sm-flex">
+						<?php
+							Popover::make()
+								->placement( Positions::BOTTOM_END )
+								->menu_min_width( '104px' )
+								->menu_item(
+									array(
+										'tag'     => 'button',
+										'icon'    => SvgIcon::make()->name( Icon::EDIT_2 )->size( 20 )->get(),
+										'content' => __( 'Edit', 'tutor' ),
+										'attr'    => array(
+											'@click' => '$refs.edit.click(); hide()',
+										),
+									)
+								)
+								->menu_item(
+									array(
+										'tag'     => 'button',
+										'icon'    => SvgIcon::make()->name( Icon::DELETE_2 )->size( 20 )->get(),
+										'content' => __( 'Delete', 'tutor' ),
+										'attr'    => array(
+											'@click' => "hide(); TutorCore.modal.showModal('{$delete_modal_id}', { id: " . (int) $review['comment_ID'] . ' })',
+										),
+									)
+								)
+								->trigger(
+									Button::make()
+										->label( __( 'Review Actions', 'tutor' ) )
+										->variant( Variant::GHOST )
+										->size( Size::X_SMALL )
+										->icon( SvgIcon::make()->name( Icon::ELLIPSES )->size( 16 )->color( Color::SECONDARY )->get() )
+										->icon_only()
+										->attr( 'x-ref', 'trigger' )
+										->attr( '@click', 'toggle()' )
+										->attr( 'type', 'button' )
+										->get()
+								)
+								->render();
+						?>
+					</div>
 				<?php endif; ?>
 			</div>