Home page UI

src/app/tabs/home/home.component.html

@@ -19,9 +19,9 @@
 </section>
 
 <ul class="subject-list">
-    <header> <h5> Latest Classes: </h5> </header>
+    <header> <h5> Today's Classes: </h5> </header>
 
-    <li>
+    <li class="attended">
         <div class="schedule">
             <label> 3:30 PM </label>
             <p> 40 Minutes </p>
@@ -33,10 +33,10 @@
                 <span> Dwayne the Rock </span>
             </p>
         </div>
-        <button class="view-button"> View </button>
+        <button class="view-button"> Watch </button>
     </li>
 
-    <li>
+    <li class="absent">
         <div class="schedule">
             <label> 4:20 PM </label>
             <p> 40 Minutes </p>
@@ -48,12 +48,12 @@
                 <span> Dwayne the Rock </span>
             </p>
         </div>
-        <button class="view-button"> View </button>
+        <button class="view-button"> Watch </button>
     </li>
 
-    <header> <h5> Today: </h5> </header>
+    <header> <h5> Yesterday: </h5> </header>
 
-    <li>
+    <li class="late">
         <div class="schedule">
             <label> 5:30 PM </label>
             <p> 40 Minutes </p>
@@ -65,10 +65,10 @@
                 <span> Dwayne the Rock </span>
             </p>
         </div>
-        <button class="view-button"> View </button>
+        <button class="view-button"> Watch </button>
     </li>
 
-    <li>
+    <li class="attended">
         <div class="schedule">
             <label> 6:20 PM </label>
             <p> 40 Minutes </p>
@@ -80,6 +80,70 @@
                 <span> Dwayne the Rock </span>
             </p>
         </div>
-        <button class="view-button"> View </button>
+        <button class="view-button"> Watch </button>
+    </li>
+
+    <header> <h5> Mon, March 29: </h5> </header>
+
+    <li class="attended">
+        <div class="schedule">
+            <label> 5:30 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> Mathematics </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> Watch </button>
+    </li>
+
+    <li class="late">
+        <div class="schedule">
+            <label> 6:20 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> English </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> Watch </button>
+    </li>
+
+    <header> <h5> Sat, March 27: </h5> </header>
+
+    <li class="absent">
+        <div class="schedule">
+            <label> 5:30 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> Mathematics </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> Watch </button>
+    </li>
+
+    <li class="absent">
+        <div class="schedule">
+            <label> 6:20 PM </label>
+            <p> 40 Minutes </p>
+        </div>
+        <div class="subject">
+            <label> English </label>
+            <p>
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <span> Dwayne the Rock </span>
+            </p>
+        </div>
+        <button class="view-button"> Watch </button>
     </li>
 </ul>

src/app/tabs/home/home.component.scss

@@ -38,6 +38,10 @@
     align-items: center;
     justify-content: center;
     color: white;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
 
     .tutor {
         position: absolute;
@@ -78,7 +82,7 @@
 
 .subject-list {
     position: relative;
-    width: 90%;
+    width: 88%;
     margin: 0 auto;
     list-style: none;
 
@@ -107,6 +111,28 @@
         box-shadow: 0px 0px 5px -2px var(--black);
         justify-content: space-between;
         position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 7px;
+            height: 100%;
+            background-color: transparent;
+        }
+
+        &.attended::before {
+            background-color: var(--teal-green);
+        }
+
+        &.absent::before {
+            background-color: rgba(red, 0.5);
+        }
+
+        &.late::before {
+            background-color: rgba(orange, 0.5);
+        }
     }
 
     .schedule {

src/app/welcome/welcome.component.scss

@@ -15,17 +15,6 @@
         border-bottom-right-radius: 30px;
         pointer-events: none;
     }
-
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 70px;
-        pointer-events: none;
-        width: 100%;
-        background: linear-gradient(0deg, white, transparent);
-    }
 }
 
 .upfold {