Merge pull request #2304 from themeum/course-wishlist

Course Wishlist

Author: shewa12

assets/icons/star-2.svg

@@ -318,8 +318,9 @@ export const icons = [
   'sortMinor',
   'spinner',
   'spreadsheet',
-  'star',
-  'star2',
+  'starFill',
+  'starHalf',
+  'starLine',
   'stepper',
   'stopwatch',
   'storeEye',

assets/icons/star-fill.svg

@@ -1,7 +1,6 @@
 // Components styles index
 // Import all shared UI components
 
-@forward 'course-card';
 @forward 'lesson-item';
 @forward 'progress-bar';
 @forward 'quiz-question';

assets/icons/star-half.svg

@@ -6,31 +6,30 @@
 
 .tutor-course-card {
   height: 100%;
-  display: block;
   @include tutor-transition(background-color);
 
   &:hover {
     background-color: $tutor-surface-l1-hover;
   }
 
-  &-thumbnail {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-    border-radius: $tutor-radius-sm;
-    margin-bottom: $tutor-spacing-4;
-
-    .tutor-ratio {
-      width: 100%;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
+	&-thumbnail {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		border-radius: $tutor-radius-sm;
+		margin-bottom: $tutor-spacing-4;
+
+		.tutor-ratio {
+			width: 100%;
+		}
+
+		img {
+			width: 100%;
+      border-radius: $tutor-radius-sm;
+			object-fit: cover;
+			object-position: center;
+		}
+	}
 
   &-badge {
     position: absolute;
@@ -39,6 +38,14 @@
     z-index: $tutor-z-positive;
   }
 
+	&-separator {
+		display: inline-block;
+		width: 4px;
+		height: 4px;
+		background: $tutor-text-subdued;
+		border-radius: $tutor-radius-lg;
+	}
+
   &-rating {
     margin-bottom: $tutor-spacing-2;
 
@@ -63,7 +70,7 @@
   }
 
   &-title {
-    @include tutor-typography('p2', 'medium', 'primary');
+    @include tutor-typography('small', 'medium', 'primary');
     margin-bottom: $tutor-spacing-2;
   }
 
@@ -78,6 +85,10 @@
     padding-top: $tutor-spacing-4;
     @include tutor-flex(row, center, flex-start);
     gap: $tutor-spacing-5;
+    @include tutor-typography('small', 'medium', 'primary');
+    del {
+      @include tutor-typography('tiny', 'regular', 'subdued');
+    }
   }
 
   &-price {
@@ -89,3 +100,11 @@
   }
 }
 
+@media (max-width: $tutor-breakpoint-sm) {
+  .tutor-dashboard-page-card-body {
+    &.tutor-dashboard-wishlist-wrapper {
+      margin: 10px;
+      border: unset;
+    }
+  }
+}

assets/icons/star-line.svg

@@ -19,7 +19,7 @@
 		background-color: $tutor-surface-l1-hover;
 	}
 
-	.tutor-courses-thumb {
+	.tutor-progress-card-thumbnail {
 		position: relative;
 		flex: 0 0 200px;
 		aspect-ratio: 16 / 9;
@@ -133,11 +133,10 @@
 			background-color: transparent;
 		}
 
-		.tutor-courses-thumb {
+		.tutor-progress-card-thumbnail {
 			width: 100%;
 			max-width: 100%;
 			margin-bottom: $tutor-spacing-4;
-			aspect-ratio: 16 / 9;
 		}
 
 		&-kebab-overlay {