Ripple effect for in progress class - Calendar page

src/app/calendar/calendar.component.html

@@ -37,51 +37,48 @@
     <section class="schedule-details">
         <header> {{ selectedDate }}, {{ selectedMonth }} {{ selectedYear }}  </header>
         <ul>
-            <li class="attended">
-                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+            <li class="progress" [routerLink]="['/quiz']">
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
                 <div class="content-holder">
                     <div class="content">
-                        <label> Mathematics class </label>
-                        <p> 8:00 AM to 10:00 AM </p>
+                        <label> Social Science class </label>
+                        <p> 4:00 PM to 5:00 PM </p>
                     </div>
-                    <span class="status"> Attended </span>
+                    <span class="status"> In Progress </span>
                 </div>
             </li>
 
-            <li class="absent">
-                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+            <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 <div class="content-holder">
                     <div class="content">
-                        <label> Physics class </label>
-                        <p> 11:00 AM to 1:00 PM </p>
+                        <label> Chemistry class </label>
+                        <p> 2:00 PM to 3:00 PM </p>
                     </div>
-                    <span class="status"> Absent </span>
+                    <span class="status"> Late by 10 mins </span>
                 </div>
-
             </li>
 
-            <li class="late">
-                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+            <li class="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 <div class="content-holder">
                     <div class="content">
-                        <label> Chemistry class </label>
-                        <p> 2:00 PM to 3:00 PM </p>
+                        <label> Physics class </label>
+                        <p> 11:00 AM to 1:00 PM </p>
                     </div>
-                    <span class="status"> Late by 10 mins </span>
+                    <span class="status"> Absent </span>
                 </div>
-
             </li>
 
-            <li class="progress">
-                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+            <li class="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                 <div class="content-holder">
                     <div class="content">
-                        <label> Social Science class </label>
-                        <p> 4:00 AM to 5:00 PM </p>
+                        <label> Mathematics class </label>
+                        <p> 8:00 AM to 10:00 AM </p>
                     </div>
-                    <span class="status"> Progress </span>
+                    <span class="status"> Attended </span>
                 </div>
-
             </li>
         </ul>
 

src/app/calendar/calendar.component.scss

@@ -144,7 +144,7 @@
     border-top-right-radius: 30px;
     position: relative;
     z-index: 0;
-    
+
     &::before {
         content: '';
         position: absolute;
@@ -220,6 +220,7 @@
         &.progress {
             .status-icon {
                 fill: var(--teal);
+                animation: ripple 1.5s infinite;
             }
 
             .status {
@@ -235,6 +236,15 @@
             display: none;
         }
 
+        @keyframes ripple {
+            50% {
+                box-shadow: 0px 0px 1px 10px transparent;
+            }
+            0% {
+                box-shadow: 0px 0px 1px 0px var(--teal);
+            }
+        }
+
         &::before {
             content: '';
             position: absolute;
@@ -252,6 +262,10 @@
             height: 20px;
             fill: var(--light-grey);
             background-color: white;
+
+            &.status-icon {
+                border-radius: 50%;
+            }
         }
 
         .content-holder {

src/app/tabs/courses/quiz/quiz.component.html

@@ -20,7 +20,7 @@
             <div class="question-number wrong">
                 <span>
                     <label> 2 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </span>
             </div>
             <div class="question-number correct">
@@ -32,7 +32,7 @@
             <div class="question-number wrong">
                 <span>
                     <label> 4 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </span>
             </div>
             <div class="question-number correct">
@@ -44,13 +44,13 @@
             <div class="question-number wrong">
                 <span>
                     <label> 6 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </span>
             </div>
             <div class="question-number current wrong">
                 <span>
                     <label> 7 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </span>
             </div>
 
@@ -123,7 +123,7 @@
                 <li class="wrong">
                     <label> 1. Option 1 </label>
                     <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                     </div>
                 </li>
                 <li>
@@ -170,7 +170,7 @@
                 <li class="wrong">
                     <label> 1. Option 1 </label>
                     <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                     </div>
                 </li>
                 <li>

src/app/tabs/courses/quiz/quiz.component.scss

@@ -124,9 +124,9 @@
             background-color: var(--black);
 
             &.wrong {
-                background-color: var(--black);
+                background-color: var(--danger-dark);
                 .icon {
-                    fill: var(--danger-dark) !important;
+                    fill: var(--black) !important;
                 }
             }