style: Update kids mode style

Author: b-l-i-n-d

assets/core/scss/mixins/_avatars.scss

@@ -38,6 +38,10 @@ $tutor-avatar-sizes: (
     font-size: 'tiny',
     icon-size: 12px,
   ),
+  28: (
+    font-size: 'tiny',
+    icon-size: 12px,
+  ),
   32: (
     font-size: 'tiny',
     icon-size: 16px,

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

@@ -3,6 +3,26 @@
 @use './mixins' as *;
 
 [data-tutor-ui='kids'] {
+  .tutor-dashboard-nav-mobile-list > li > a,
+  .tutor-dashboard-nav-mobile-list > li > button {
+    span {
+      &:last-of-type {
+        color: $tutor-text-primary;
+        font-weight: $tutor-font-weight-medium;
+      }
+    }
+    &.active span {
+      &:first-of-type {
+        @include tutor-kids-shadow(false, $tutor-border-brand, $tutor-radius-full, sm);
+        background-color: $tutor-surface-brand-tertiary;
+      }
+
+      &:last-of-type {
+        font-weight: $tutor-font-weight-semibold;
+      }
+    }
+  }
+
   .tutor-card {
     @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-5xl, sm);
   }

components/Constants/Size.php

@@ -30,6 +30,7 @@ abstract class Size {
 	public const SIZE_16  = 16;
 	public const SIZE_20  = 20;
 	public const SIZE_24  = 24;
+	public const SIZE_28  = 28;
 	public const SIZE_32  = 32;
 	public const SIZE_40  = 40;
 	public const SIZE_48  = 48;

templates/dashboard/components/sidebar-nav-mobile.php

@@ -53,12 +53,14 @@
 			?>
 			<li>
 				<a class="<?php echo esc_attr( $active_class ); ?>" href="<?php echo esc_url( $menu_link ?? '#' ); ?>">
-					<?php
-					SvgIcon::make()
-						->name( ( $is_active_menu && ! tutor_utils()->is_kids_mode() ) ? $active_icon_name : $menu_icon_name )
-						->size( Size::SIZE_20 )
-						->render();
-					?>
+					<span class="tutor-flex-center tutor-p-2">
+						<?php
+						SvgIcon::make()
+							->name( ( $is_active_menu && ! tutor_utils()->is_kids_mode() ) ? $active_icon_name : $menu_icon_name )
+							->size( Size::SIZE_20 )
+							->render();
+						?>
+					</span>
 					<span class="tutor-tiny"><?php echo esc_html( $menu_title ); ?></span>
 				</a>
 			</li>
@@ -70,7 +72,7 @@
 				<?php
 				Avatar::make()
 					->user( get_current_user_id() )
-					->size( Size::SIZE_20 )
+					->size( Size::SIZE_28 )
 					->render();
 				?>
 				<span class="tutor-tiny"><?php esc_html_e( 'Profile', 'tutor' ); ?></span>
@@ -87,7 +89,9 @@
 					:aria-expanded="open ? 'true' : 'false'"
 					aria-haspopup="true"
 				>
-					<?php SvgIcon::make()->name( Icon::THREE_DOTS_VERTICAL )->size( 16 )->render(); ?>
+					<span class="tutor-flex-center tutor-p-2">
+						<?php SvgIcon::make()->name( Icon::ELLIPSES )->size( 20 )->render(); ?>
+					</span>
 					<span class="tutor-tiny"><?php esc_html_e( 'More', 'tutor' ); ?></span>
 				</button>
 				<!-- Popover panel -->