From 6ebf51587c941d521eb4e8e3c3ee34f964baea08 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 15:38:59 +0600 Subject: [PATCH 01/13] fix(popover): add kids style tokens --- assets/core/scss/components/_popover.scss | 9 +- assets/core/scss/tokens/_index.scss | 3 +- assets/core/scss/tokens/_popover.scss | 12 ++ assets/src/scss/frontend/kids/_dashboard.scss | 183 ++++++++++++++++++ assets/src/scss/frontend/kids/_popover.scss | 7 + assets/src/scss/frontend/kids/index.scss | 9 + 6 files changed, 217 insertions(+), 6 deletions(-) create mode 100644 assets/core/scss/tokens/_popover.scss create mode 100644 assets/src/scss/frontend/kids/_dashboard.scss create mode 100644 assets/src/scss/frontend/kids/_popover.scss create mode 100644 assets/src/scss/frontend/kids/index.scss diff --git a/assets/core/scss/components/_popover.scss b/assets/core/scss/components/_popover.scss index 48c70ecef1..8a25550d68 100644 --- a/assets/core/scss/components/_popover.scss +++ b/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; diff --git a/assets/core/scss/tokens/_index.scss b/assets/core/scss/tokens/_index.scss index b6e77dca22..84cc2a048c 100644 --- a/assets/core/scss/tokens/_index.scss +++ b/assets/core/scss/tokens/_index.scss @@ -10,4 +10,5 @@ @forward "tabs"; @forward "text-colors"; @forward "typography"; -@forward "zIndex"; \ No newline at end of file +@forward "zIndex"; +@forward "popover"; diff --git a/assets/core/scss/tokens/_popover.scss b/assets/core/scss/tokens/_popover.scss new file mode 100644 index 0000000000..db16201f26 --- /dev/null +++ b/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, +) \ No newline at end of file diff --git a/assets/src/scss/frontend/kids/_dashboard.scss b/assets/src/scss/frontend/kids/_dashboard.scss new file mode 100644 index 0000000000..32db679d6f --- /dev/null +++ b/assets/src/scss/frontend/kids/_dashboard.scss @@ -0,0 +1,183 @@ +@use '@Core/scss/tokens' as *; +@use '@Core/scss/mixins' as *; +@use './mixins' as *; + +[data-tutor-ui='kids'] { + .tutor-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-5xl, sm); + } + + .tutor-badge { + border-radius: $tutor-radius-2xl; + } + + .tutor-stat-card, + .tutor-progress-card, + .tutor-discussion-card, + .tutor-upcoming-lesson-card, + .tutor-wishlist-grid .tutor-course-card, + .tutor-review-card, + .tutor-dashboard-home-chart, + .tutor-dashboard-home-card, + .tutor-dashboard-home-sort .tutor-popover-bottom { + @include tutor-kids-shadow; + } + + .tutor-progress-card .tutor-progress-card-thumbnail { + border-radius: $tutor-radius-3xl; + } + + // home + .tutor-student-dashboard-courses { + .tutor-card.tutor-progress-card:not(:first-child) { + margin-top: $tutor-spacing-4; + } + } + + .tutor-dashboard-home-sort .tutor-popover-bottom { + @include tutor-kids-shadow(true, $tutor-border-idle, $tutor-radius-2xl); + + .tutor-popover-menu-item { + border-radius: $tutor-radius-2xl; + } + } + + // wishList + .tutor-dashboard-courses-wrapper { + .tutor-dashboard-courses-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm); + } + + .tutor-dashboard-courses, + .tutor-wishlist-grid { + gap: $tutor-spacing-6 $tutor-spacing-5; + } + } + + // quiz attempts + .tutor-quiz-attempts-list { + padding: 2px 2px 7px; + + .tutor-quiz-previous-attempts { + box-shadow: -2px 0 0 $tutor-border-idle; + border-radius: $tutor-radius-3xl; + + .tutor-quiz-attempts-item:hover { + &:not(:first-of-type) { + @include tutor-kids-shadow($tutor-border-brand-tertiary); + border-bottom: 1px solid transparent; + } + } + } + .tutor-quiz-attempts-item-wrapper.tutor-quiz-previous-attempts { + @include tutor-kids-shadow(true, $tutor-border-brand-tertiary); + } + + .tutor-quiz-attempts-item-wrapper:hover { + @include tutor-kids-shadow($tutor-border-brand-tertiary); + + &:not(:last-of-type) { + border-bottom: 1px solid transparent; + } + } + } + + // user account/profile + .tutor-user-profile { + .tutor-profile-card { + @include tutor-kids-shadow(false); + } + + .tutor-user-profile-statistics .tutor-statistic-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-3xl); + } + + .tutor-profile-card-header { + border-radius: $tutor-radius-5xl; + } + } + + .tutor-account-billing-wrapper { + border-radius: $tutor-radius-5xl; + } + + .tutor-review-card { + .tutor-review-form { + border-radius: $tutor-radius-6xl; + } + } + + .tutor-dashboard-header-user-popover-menu li a { + border-radius: $tutor-radius-2xl; + } + + // user account/notification + .tutor-profile-notification-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-5xl, sm); + } + + // discussions + .tutor-dashboard-page-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm); + } + .tutor-discussion-card-wrapper { + gap: $tutor-spacing-6 $tutor-spacing-4; + + @include tutor-breakpoint-down(sm) { + padding: $tutor-spacing-4; + } + + .tutor-card { + box-shadow: none; + background-color: $tutor-surface-l1-hover; + border: 1px solid $tutor-border-idle; + } + } + + .tutor-discussion-single { + @include tutor-kids-shadow(false); + } + + .tutor-my-courses-card-wrapper { + gap: $tutor-spacing-6; + + .tutor-my-courses-card { + @include tutor-kids-shadow(true, $tutor-border-idle, $tutor-radius-3xl); + } + } + + // calendar + .tutor-calendar { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm); + + .tutor-calendar-actions { + gap: $tutor-spacing-3; + } + + .tutor-calendar-grid { + border-radius: $tutor-radius-5xl; + + .tutor-calendar-day { + &:first-of-type { + border-top-left-radius: $tutor-radius-5xl; + } + + &:nth-last-of-type(7) { + border-bottom-left-radius: $tutor-radius-5xl; + } + } + } + } + + // note + .tutor-dashboard-lesson-notes { + .tutor-dashboard-page-card { + @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm); + } + + .tutor-lesson-note:hover { + @include tutor-kids-shadow(true, $tutor-border-brand-tertiary); + border-bottom: 1px solid transparent; + } + } +} diff --git a/assets/src/scss/frontend/kids/_popover.scss b/assets/src/scss/frontend/kids/_popover.scss new file mode 100644 index 0000000000..ba9a917387 --- /dev/null +++ b/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}; +} diff --git a/assets/src/scss/frontend/kids/index.scss b/assets/src/scss/frontend/kids/index.scss new file mode 100644 index 0000000000..0c2b5993a1 --- /dev/null +++ b/assets/src/scss/frontend/kids/index.scss @@ -0,0 +1,9 @@ +@forward './mixins'; +@forward './button'; +@forward './input'; +@forward './nav'; +@forward './tabs'; +@forward './sidebar'; +@forward './popover'; +@forward './dashboard'; +@forward './learning-area'; From 8615cab77d1b142414787f87601da544b0d5653f Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 15:51:07 +0600 Subject: [PATCH 02/13] fix(qna): update unread action icons --- assets/icons/kids/read.svg | 1 + assets/icons/kids/unread.svg | 1 + assets/icons/unread.svg | 1 + assets/src/js/v3/shared/icons/types.ts | 1 + classes/Icon.php | 1 + templates/dashboard/discussions/qna-card.php | 12 +++++++++++- 6 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 assets/icons/kids/read.svg create mode 100644 assets/icons/kids/unread.svg create mode 100644 assets/icons/unread.svg diff --git a/assets/icons/kids/read.svg b/assets/icons/kids/read.svg new file mode 100644 index 0000000000..72ec205848 --- /dev/null +++ b/assets/icons/kids/read.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/kids/unread.svg b/assets/icons/kids/unread.svg new file mode 100644 index 0000000000..f32f75a0a0 --- /dev/null +++ b/assets/icons/kids/unread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/unread.svg b/assets/icons/unread.svg new file mode 100644 index 0000000000..f5fc43d976 --- /dev/null +++ b/assets/icons/unread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/src/js/v3/shared/icons/types.ts b/assets/src/js/v3/shared/icons/types.ts index de28c43c5c..ccbf7a7c3e 100644 --- a/assets/src/js/v3/shared/icons/types.ts +++ b/assets/src/js/v3/shared/icons/types.ts @@ -373,6 +373,7 @@ export const icons = [ 'tryAgain', 'txt', 'undo', + 'unread', 'update', 'upload', 'upload2', diff --git a/classes/Icon.php b/classes/Icon.php index 1c1ace5779..6a17674919 100644 --- a/classes/Icon.php +++ b/classes/Icon.php @@ -390,6 +390,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'; diff --git a/templates/dashboard/discussions/qna-card.php b/templates/dashboard/discussions/qna-card.php index 06cffcaae4..1667dc8284 100644 --- a/templates/dashboard/discussions/qna-card.php +++ b/templates/dashboard/discussions/qna-card.php @@ -279,7 +279,14 @@ class="tutor-popover-menu-item tutor-gap-5" render_svg_icon( Icon::SPINNER, 20, 20, array( 'class' => 'tutor-animate-spin tutor-icon-secondary' ) ); ?> @@ -321,6 +328,7 @@ class="tutor-popover-menu-item tutor-gap-5 tutor-sm-border-t" ?> +<<<<<<< HEAD
@@ -338,3 +346,5 @@ class="tutor-popover-menu-item tutor-gap-5 tutor-sm-border-t" ?>
+======= +>>>>>>> 5366583c1 (fix(qna): update unread action icons) From fe3380a615a0f0844012122f01f05d5e2ed5d8eb Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 16:20:53 +0600 Subject: [PATCH 03/13] fix(discussions): refine unread icon styling --- assets/icons/unread.svg | 2 +- assets/src/scss/frontend/kids/_dashboard.scss | 4 ++++ templates/dashboard/discussions/comment-card.php | 2 +- templates/dashboard/discussions/qna-card.php | 4 ++-- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/assets/icons/unread.svg b/assets/icons/unread.svg index f5fc43d976..bdbc242aef 100644 --- a/assets/icons/unread.svg +++ b/assets/icons/unread.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/src/scss/frontend/kids/_dashboard.scss b/assets/src/scss/frontend/kids/_dashboard.scss index 32db679d6f..a83fb7943e 100644 --- a/assets/src/scss/frontend/kids/_dashboard.scss +++ b/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) { diff --git a/templates/dashboard/discussions/comment-card.php b/templates/dashboard/discussions/comment-card.php index 5fb70ea6ef..d8e7b37a68 100644 --- a/templates/dashboard/discussions/comment-card.php +++ b/templates/dashboard/discussions/comment-card.php @@ -96,7 +96,7 @@ ?> user_id ) : ?>
-
diff --git a/templates/dashboard/discussions/qna-card.php b/templates/dashboard/discussions/qna-card.php index 1cec7fcfe5..44aa25934c 100644 --- a/templates/dashboard/discussions/qna-card.php +++ b/templates/dashboard/discussions/qna-card.php @@ -283,10 +283,10 @@ class="tutor-popover-menu-item tutor-gap-5" From b0137d61543b6f4ecb3f0274a1f1cf78330a42a6 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 16:23:50 +0600 Subject: [PATCH 04/13] chore: Remove conflicted forward --- assets/src/scss/frontend/kids/index.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/assets/src/scss/frontend/kids/index.scss b/assets/src/scss/frontend/kids/index.scss index c345947f72..0c2b5993a1 100644 --- a/assets/src/scss/frontend/kids/index.scss +++ b/assets/src/scss/frontend/kids/index.scss @@ -7,11 +7,3 @@ @forward './popover'; @forward './dashboard'; @forward './learning-area'; -@forward './mixins'; -@forward './button'; -@forward './input'; -@forward './nav'; -@forward './tabs'; -@forward './sidebar'; -@forward './dashboard'; -@forward './learning-area'; From 5fbbf6d20708292c703f9513831f12b31ca611bd Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 16:45:35 +0600 Subject: [PATCH 05/13] fix(quiz): refine feedback layout spacing --- .../src/scss/frontend/components/_quiz-attempt-details.scss | 4 ++-- templates/dashboard/quiz-attempts/quiz-attempts-feedback.php | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/src/scss/frontend/components/_quiz-attempt-details.scss b/assets/src/scss/frontend/components/_quiz-attempt-details.scss index d0702339f7..38e43b2400 100644 --- a/assets/src/scss/frontend/components/_quiz-attempt-details.scss +++ b/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; diff --git a/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php b/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php index 8255b821d3..90db02e7b6 100644 --- a/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php +++ b/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php @@ -45,7 +45,6 @@ ) ) ->attr( 'x-bind', "register('feedback')" ) - ->wrapper_attr( 'class', 'tutor-mb-16' ) ->render(); ?>
From c25dded59d5d2cced8ff1fda4d6f6ea9da7c3d8f Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 16:48:03 +0600 Subject: [PATCH 06/13] refactor(qna): remove unused mark-as text --- templates/dashboard/discussions/qna-card.php | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/templates/dashboard/discussions/qna-card.php b/templates/dashboard/discussions/qna-card.php index 44aa25934c..4a47f94396 100644 --- a/templates/dashboard/discussions/qna-card.php +++ b/templates/dashboard/discussions/qna-card.php @@ -348,19 +348,3 @@ class="tutor-popover-menu-item tutor-gap-5 tutor-sm-border-t"
- -
- 'qna-edit-' . (int) $question_id, - 'default_value' => $question->comment_content, - 'submit_handler' => '(data) => updateQnAMutation?.mutate({ ...data, question_id: ' . (int) $question->comment_ID . ' })', - 'cancel_handler' => 'setEditing(null)', - 'is_pending' => 'updateQnAMutation?.isPending', - ) - ); - ?> -
- From fc1594e84c1e33424325661715578f584cd263a8 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 17:53:32 +0600 Subject: [PATCH 07/13] feat: Add transition to sortable section popover --- templates/dashboard/instructor/home.php | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/dashboard/instructor/home.php b/templates/dashboard/instructor/home.php index 3fe95677c0..8d64d13fbc 100644 --- a/templates/dashboard/instructor/home.php +++ b/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" > From f95c55216af7fb62e0345359ffbb9531e09176a3 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Mon, 30 Mar 2026 18:02:09 +0600 Subject: [PATCH 08/13] feat: Use tokens for select dropdown --- assets/core/scss/components/_select.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/core/scss/components/_select.scss b/assets/core/scss/components/_select.scss index 32f2b11365..1048bb7159 100644 --- a/assets/core/scss/components/_select.scss +++ b/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; From b62842414f3196a1360e3e49c30fa7b2426e090f Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Tue, 31 Mar 2026 11:57:00 +0600 Subject: [PATCH 09/13] feat(reviews): add mobile review actions popover --- .../src/scss/frontend/dashboard/_reviews.scss | 3 +- templates/dashboard/reviews/review-card.php | 45 ++++++++++++++++++- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/assets/src/scss/frontend/dashboard/_reviews.scss b/assets/src/scss/frontend/dashboard/_reviews.scss index e71fbca692..69ae32b6c5 100644 --- a/assets/src/scss/frontend/dashboard/_reviews.scss +++ b/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 { diff --git a/templates/dashboard/reviews/review-card.php b/templates/dashboard/reviews/review-card.php index 934004a3e9..5100933a7d 100644 --- a/templates/dashboard/reviews/review-card.php +++ b/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 @@ -
+
label( __( 'Edit Review', 'tutor' ) ) @@ -125,6 +128,46 @@ ->render(); ?>
+
+ 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(); + ?> +
From 1fd467066f0d84e905788e310437bb492bdc12e9 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Tue, 31 Mar 2026 11:57:25 +0600 Subject: [PATCH 10/13] feat(icons): add learning mode icon lookup --- components/SvgIcon.php | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/components/SvgIcon.php b/components/SvgIcon.php index 15598015ab..bbda3e9e08 100644 --- a/components/SvgIcon.php +++ b/components/SvgIcon.php @@ -12,6 +12,7 @@ namespace Tutor\Components; +use Tutor\Options_V2; use TUTOR\User; defined( 'ABSPATH' ) || exit; @@ -71,6 +72,7 @@ class SvgIcon extends BaseComponent { * @var int */ protected $height = 16; + /** * Icon color. * @@ -82,6 +84,17 @@ class SvgIcon extends BaseComponent { */ protected $color = ''; + /** + * Learning mode for icon lookup. + * + * If provided, the icon is resolved for the specified learning mode. + * + * @since 4.0.0 + * + * @var string + */ + protected $learning_mode = ''; + /** * Set icon name. * @@ -155,6 +168,20 @@ public function color( string $color ): self { return $this; } + /** + * Set learning mode. + * + * @since 4.0.0 + * + * @param string $learning_mode Learning mode. + * + * @return $this + */ + public function learning_mode( string $learning_mode ): self { + $this->learning_mode = $learning_mode; + return $this; + } + /** * Set custom HTML attribute. * @@ -184,8 +211,8 @@ public function get(): string { $icon_path = tutor()->path . 'assets/icons/' . $this->name . '.svg'; - // If learning mode is kids, check kids folder first. - if ( tutor_utils()->is_kids_mode() ) { + // Kids mode has a dedicated icon directory; other modes use the default set. + if ( Options_V2::LEARNING_MODE_KIDS === $this->learning_mode || ( empty( $this->learning_mode ) && tutor_utils()->is_kids_mode() ) ) { $kids_path = tutor()->path . 'assets/icons/kids/' . $this->name . '.svg'; if ( file_exists( $kids_path ) ) { $icon_path = $kids_path; @@ -196,7 +223,7 @@ public function get(): string { return ''; } - $svg = file_get_contents( $icon_path ); + $svg = file_get_contents( $icon_path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Reading a local SVG asset from the plugin directory. if ( ! $svg ) { return ''; } From 0aa6f5f44d3b9c8f4e35948b10a5ab6af05f8fb7 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Tue, 31 Mar 2026 11:59:37 +0600 Subject: [PATCH 11/13] fix(ratings): keep star icons on modern set --- components/StarRating.php | 7 ++++--- components/StarRatingInput.php | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/StarRating.php b/components/StarRating.php index fd19ce2320..360f42ba43 100644 --- a/components/StarRating.php +++ b/components/StarRating.php @@ -15,6 +15,7 @@ defined( 'ABSPATH' ) || exit; use TUTOR\Icon; +use Tutor\Options_V2; /** * Class StarRating @@ -134,9 +135,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 )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); + $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $icon_size )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); + $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $icon_size )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); ob_start(); ?> diff --git a/components/StarRatingInput.php b/components/StarRatingInput.php index 4e80ed137b..c84adbada4 100644 --- a/components/StarRatingInput.php +++ b/components/StarRatingInput.php @@ -15,6 +15,7 @@ defined( 'ABSPATH' ) || exit; use TUTOR\Icon; +use Tutor\Options_V2; use Tutor\components\Constants\Size; /** @@ -180,9 +181,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 )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); + $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); + $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->learning_mode( Options_V2::LEARNING_MODE_MODERN )->get(); ob_start(); ?> From 5a48b041848afedd554bc2888aae439b20847206 Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Tue, 31 Mar 2026 12:19:40 +0600 Subject: [PATCH 12/13] feat(modals): add kids modal tokens --- assets/core/scss/components/_modal.scss | 4 ++-- assets/core/scss/tokens/_index.scss | 2 +- assets/core/scss/tokens/_modal.scss | 10 ++++++++++ assets/core/scss/tokens/_shadows.scss | 2 +- assets/src/scss/frontend/kids/_modal.scss | 6 ++++++ assets/src/scss/frontend/kids/index.scss | 1 + 6 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 assets/core/scss/tokens/_modal.scss create mode 100644 assets/src/scss/frontend/kids/_modal.scss diff --git a/assets/core/scss/components/_modal.scss b/assets/core/scss/components/_modal.scss index b846f459eb..b9d3994981 100644 --- a/assets/core/scss/components/_modal.scss +++ b/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 diff --git a/assets/core/scss/tokens/_index.scss b/assets/core/scss/tokens/_index.scss index a817de2414..89c4672a1f 100644 --- a/assets/core/scss/tokens/_index.scss +++ b/assets/core/scss/tokens/_index.scss @@ -13,4 +13,4 @@ @forward "typography"; @forward "zIndex"; @forward "popover"; - +@forward "modal"; diff --git a/assets/core/scss/tokens/_modal.scss b/assets/core/scss/tokens/_modal.scss new file mode 100644 index 0000000000..bea56ee5da --- /dev/null +++ b/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, +); diff --git a/assets/core/scss/tokens/_shadows.scss b/assets/core/scss/tokens/_shadows.scss index ff3c54151b..6ab3dbe795 100644 --- a/assets/core/scss/tokens/_shadows.scss +++ b/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; diff --git a/assets/src/scss/frontend/kids/_modal.scss b/assets/src/scss/frontend/kids/_modal.scss new file mode 100644 index 0000000000..aeff9f975f --- /dev/null +++ b/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}; +} diff --git a/assets/src/scss/frontend/kids/index.scss b/assets/src/scss/frontend/kids/index.scss index 0c2b5993a1..6374380438 100644 --- a/assets/src/scss/frontend/kids/index.scss +++ b/assets/src/scss/frontend/kids/index.scss @@ -5,5 +5,6 @@ @forward './tabs'; @forward './sidebar'; @forward './popover'; +@forward './modal'; @forward './dashboard'; @forward './learning-area'; From 7a9e26aa0d232733515c8940f6c1318ede1d2a5f Mon Sep 17 00:00:00 2001 From: b-l-i-n-d Date: Tue, 31 Mar 2026 17:11:23 +0600 Subject: [PATCH 13/13] chore: Remove unused import --- components/StarRating.php | 1 - components/StarRatingInput.php | 1 - 2 files changed, 2 deletions(-) diff --git a/components/StarRating.php b/components/StarRating.php index 7908f8b4c4..12ce38333b 100644 --- a/components/StarRating.php +++ b/components/StarRating.php @@ -15,7 +15,6 @@ defined( 'ABSPATH' ) || exit; use TUTOR\Icon; -use Tutor\Options_V2; /** * Class StarRating diff --git a/components/StarRatingInput.php b/components/StarRatingInput.php index a65eb97417..5fd9678ca2 100644 --- a/components/StarRatingInput.php +++ b/components/StarRatingInput.php @@ -15,7 +15,6 @@ defined( 'ABSPATH' ) || exit; use TUTOR\Icon; -use Tutor\Options_V2; use Tutor\components\Constants\Size; /**