Calendar UI changes

.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache

@@ -1,18 +1,9 @@
 favicon.ico,1591660351498,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7
-index.html,1591723925436,dd62ea39dc9fb3c8f1de0598c0e8e17c304e3dd08ff918b39ed16e303a0da7d5
 manifest.webmanifest,1591723813630,648e3277153af7b5ba06a2fb0a1da6b89f858f631f124008b5d5726744ab43f4
-ngsw.json,1591723925456,84f8a687e4ef85e4016dfcb6a934ca40b0b8e4956bdb159fe9ff3a8dcedb3fa5
-3rdpartylicenses.txt,1591723915550,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368
-polyfills-es2015.690002c25ea8557bb4b0.js,1591723916477,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
-runtime-es2015.1eba213af0b233498d9d.js,1591723916220,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
-runtime-es5.1eba213af0b233498d9d.js,1591723916310,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
-safety-worker.js,1591723925458,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-styles.39830a50db7cf7fbf8fe.css,1591723915550,bd7a8170a542a3f1a9fdaccb24d97d52fb2ee971af7395b990901ed8cbc9f695
-worker-basic.min.js,1591723925458,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
 assets/custom-icons/add.svg,1591670038987,0beaf5cea5310deddf58f5dc94cffc2c26cecfaa5890aae565ab9705ee342506
 assets/custom-icons/atomic.svg,1591670021393,48c2717734d3d37cbf7dabaf6fb22f0e5fcd662e319e9e61417c46461e236d8d
-assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
 assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22139bcc237a6e19f070e51ce90e76919c66aa
+assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
 assets/custom-icons/book (1).svg,1591670042956,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
 assets/custom-icons/book.svg,1591670046795,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
 assets/custom-icons/calendar.svg,1591670019330,86593b34bb094a0308ff9aae96b373e7561d95737a97b62c5df257d9aa94730c
@@ -29,22 +20,35 @@ assets/custom-icons/folder.svg,1591670036971,ff596b961aa3bf39968e69c946ca3197b64
 assets/custom-icons/globe.svg,1591670048690,1fdc780fc12f486a70f2825e51064c7ebe497e6db5a308c2ffa5b6d86a552b41
 assets/custom-icons/home.svg,1591677387594,fcc78971c4496f782b894d47df39954b657488ceaa83189092978429c600493f
 assets/custom-icons/information.svg,1591670056330,2fb0cdf7a54fb27fcd5461b379a57dda72483f48e400217db1162fe2416b30ea
+assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
 assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accdb5a82ecbee149eb68100580146f09b85d9a
 assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2
 assets/custom-icons/mortarboard.svg,1591670033049,226d6ad39b7ea5f7da6321237835319335d29a6571dce10378a88c42b5be4f2e
-assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
-assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
 assets/custom-icons/newspaper.svg,1591670054424,3b6d1b91044b650e42124be91b5161d988e2f900cff843f74018ce614216527c
+assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
 assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0
-assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
 assets/icons/icon-128x128.png,1591723765595,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d
-assets/icons/icon-192x192.png,1591723765604,5b2471e9386f4fe3dcf1d2151c7048c3cc22d3c504161debeca3af3a2efd0a04
+assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
 assets/icons/icon-152x152.png,1591723765603,b1cb2eb328c9eedac5eb3994d04c73040c462a73cf7254c38eafa2d582a078d6
+assets/icons/icon-192x192.png,1591723765604,5b2471e9386f4fe3dcf1d2151c7048c3cc22d3c504161debeca3af3a2efd0a04
 assets/icons/icon-384x384.png,1591723765605,e28ae36bf6b6f9c9a5eb8716806f3077d2932c9723f89d0c0275fbde43dcdce9
+assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
 assets/icons/icon-72x72.png,1591723765606,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce
 assets/icons/icon-96x96.png,1591723765606,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508
-assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
-polyfills-es5.9e286f6d9247438cbb02.js,1591723919569,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
-ngsw-worker.js,1591723925457,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
-main-es2015.910cc19d4ed4092109c8.js,1591723923481,6dad9eb6e6cb8aff2b7454e890abb7fae1bc105144172129133c1863b28c1c48
-main-es5.910cc19d4ed4092109c8.js,1591723922556,3f535c49f709b5b51a98383c5fd0924f295ceac0fe5de44872c4658903e6ce8b
+index.html,1591859976810,d1b6a2ca3180b5631b7d3d345574ee2faaf2bbb302331f8a531e9e12bc78ded4
+3rdpartylicenses.txt,1591859967077,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368
+ngsw.json,1591859976831,03c739de8c383926f715a64a9e210e87627ba55104fbd16a6004987413d295fd
+polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
+runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+safety-worker.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+styles.7003c259858c27ffbfcc.css,1591859967077,5d9cdd8c0befba4473e41fc8f531ae8236ff2178638d85d994314960504e15eb
+worker-basic.min.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200
+assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
+assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
+assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
+polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
+ngsw-worker.js,1591859976831,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
+main-es2015.2f069b420a31c7186041.js,1591859975039,ff2a96ec3176a11f611fa254963df3232c6988e6ff0dcd1683ac664bb514db32
+main-es5.2f069b420a31c7186041.js,1591859974085,e5bfec9a6e904739a094b68fe0a1445f5a02d308b1c10a403344cf3d20135b4e

src/app/calendar/calendar.component.html

@@ -9,66 +9,68 @@
         </button>
     </header>
 
-    <h2 class="calendar-header">
-        {{ selectedMonth }} {{ selectedYear }}
-    </h2>
+    <div class="calendar-holder">
+        <h2 class="calendar-header">
+            {{ selectedMonth }} {{ selectedYear }}
+        </h2>
 
-    <section class="mini-calendar">
-		<div class="days">
-			<span> S </span><span> M </span><span> T </span><span> W </span>
-			<span> T </span><span> F </span><span> S </span>
-		</div>
-		<div class="dates">
-			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
-			<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth && currentYear === selectedYear,
-			'active': selectedDate === selectedMonthDay }"
-			*ngFor="let selectedMonthDay of selectedMonthDays"
-			(click)="selectedDate = selectedMonthDay">
-				{{ selectedMonthDay }}
-			</span>
-			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
-				{{ succeedingDay }}
-			</span>
-		</div>
-	</section>
+        <section class="mini-calendar">
+    		<div class="days">
+    			<span> S </span><span> M </span><span> T </span><span> W </span>
+    			<span> T </span><span> F </span><span> S </span>
+    		</div>
+    		<div class="dates">
+    			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
+    			<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth && currentYear === selectedYear,
+    			'active': selectedDate === selectedMonthDay }"
+    			*ngFor="let selectedMonthDay of selectedMonthDays"
+    			(click)="selectedDate = selectedMonthDay">
+    				{{ selectedMonthDay }}
+    			</span>
+    			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
+    				{{ succeedingDay }}
+    			</span>
+    		</div>
+    	</section>
+    </div>
 
     <section class="schedule-details">
         <header> {{ selectedDate }}, {{ selectedMonth }} {{ selectedYear }}  </header>
         <ul>
             <li class="attended">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                 <div class="content">
                     <label> Mathematics class </label>
                     <p> 8:00 AM to 10:00 AM </p>
                 </div>
-                <button> Attended </button>
+
             </li>
 
             <li class="absent">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 <div class="content">
                     <label> Physics class </label>
                     <p> 11:00 AM to 1:00 PM </p>
                 </div>
-                <button> Absent </button>
+
             </li>
 
             <li class="late">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 <div class="content">
                     <label> Chemistry class </label>
                     <p> 2:00 PM to 3:00 PM </p>
                 </div>
-                <button> Late </button>
+
             </li>
 
             <li class="progress">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
                 <div class="content">
                     <label> Social Science class </label>
                     <p> 4:00 AM to 5:00 PM </p>
                 </div>
-                <button> In Progress </button>
+
             </li>
         </ul>
     </section>

src/app/calendar/calendar.component.scss

@@ -11,10 +11,6 @@
     align-items: center;
     padding: 0 5%;
     height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
 
     .close-button {
         border: 0px;
@@ -41,6 +37,15 @@
     }
 }
 
+.calendar-holder {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    background-color: var(--ash-black);
+    left: 0;
+    padding-top: 15px;
+}
+
 .calendar-header {
     color: white;
     font-size: 18px;
@@ -119,10 +124,22 @@
 .schedule-details {
     max-height: calc(100vh - 60px);
     background-color: white;
-    padding: 20px 5% 100px;
+    padding: 40px 5% 100px;
     overflow: auto;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 60px;
+        height: 4px;
+        border-radius: 30px;
+        background-color: var(--light-grey);
+        left: calc(50% - 30px);
+        top: 20px;
+    }
 
     header {
         color: var(--dark-grey);
@@ -144,59 +161,42 @@
         position: relative;
 
         &.attended {
-            button {
-                background-color: var(--green);
+            .status-icon {
+                fill: var(--green);
             }
-
             &::before {
                 border-color: var(--green);
             }
-
-            .checkmark {
-                fill: var(--green);
-            }
         }
 
         &.absent {
-            button {
-                background-color: rgba(red, 0.5);
+            .status-icon {
+                fill: rgba(red, 0.5);
             }
 
             &::before {
                 border-color: rgba(red, 0.5);
             }
-
-            .checkmark {
-                fill: rgba(red, 0.5);
-            }
         }
 
         &.late {
-            button {
-                background-color: rgba(orange, 0.5);
+            .status-icon {
+                fill: rgba(orange, 0.5);
             }
 
             &::before {
                 border-color: rgba(orange, 0.5);
             }
-
-            .checkmark {
-                fill: rgba(orange, 0.5);
-            }
         }
 
         &.progress {
-            button {
-                background-color: var(--teal);
+            .status-icon {
+                fill: var(--teal);
             }
 
             &::before {
                 border-color: var(--teal);
             }
-
-            .checkmark {
-                fill: var(--teal);
-            }
         }
 
         &:last-child::before {
@@ -214,26 +214,16 @@
         }
 
         .icon {
-            background-color: white;
             z-index: 1;
             position: relative;
             width: 20px;
             height: 20px;
             fill: var(--light-grey);
-        }
-
-        button {
-            border-radius: 20px;
-            width: 90px;
-            height: 25px;
-            font-size: 12px;
-            border: 0px;
-            color: white;
-            background-color: var(--light-grey);
+            background-color: white;
         }
 
         .content {
-            width: calc(100% - 40px - 120px);
+            width: calc(100% - 40px);
         }
 
         label {

src/assets/custom-icons/close-circle.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" style="enable-background:new 0 0 33 33;" xml:space="preserve">
+<g>
+	<path d="M16.5,0C7.388,0,0,7.388,0,16.5C0,25.611,7.388,33,16.5,33C25.611,33,33,25.611,33,16.5C33,7.388,25.611,0,16.5,0z
+		 M25.643,22.107l-3.535,3.535L16.5,20.035l-5.607,5.607l-3.535-3.535l5.607-5.607l-5.607-5.607l3.535-3.535l5.607,5.607
+		l5.607-5.607l3.535,3.535L20.035,16.5L25.643,22.107z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom-icons/question-mark.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="98.27px" height="98.27px" viewBox="0 0 98.27 98.27" style="enable-background:new 0 0 98.27 98.27;" xml:space="preserve"
+	>
+<g>
+	<path d="M49.135,0C21.998,0,0,21.999,0,49.135S21.998,98.27,49.135,98.27c27.136,0,49.134-21.999,49.134-49.135S76.27,0,49.135,0z
+		 M53.234,82.086c-1.539,1.521-3.684,2.293-6.369,2.293c-2.746,0-4.918-0.754-6.456-2.241c-1.545-1.495-2.328-3.604-2.328-6.269
+		c0-2.754,0.769-4.887,2.284-6.336c1.51-1.44,3.696-2.172,6.5-2.172c2.714,0,4.861,0.746,6.386,2.219
+		c1.528,1.479,2.304,3.596,2.304,6.289C55.555,78.472,54.773,80.564,53.234,82.086z M68.424,40.295
+		c-1.572,2.511-4.566,5.354-8.9,8.45c-2.817,2.083-4.627,3.684-5.355,4.74c-0.686,0.995-1.034,2.346-1.034,4.014v1.98
+		c0,0.828-0.672,1.5-1.5,1.5H41.045c-0.828,0-1.5-0.672-1.5-1.5v-2.621c0-3.041,0.663-5.732,1.972-8
+		c1.296-2.244,3.665-4.638,7.043-7.116c3.135-2.239,5.209-4.06,6.183-5.422c0.923-1.297,1.392-2.768,1.392-4.369
+		c0-1.742-0.615-3.024-1.881-3.92c-1.329-0.941-3.246-1.419-5.698-1.419c-4.252,0-9.173,1.366-14.624,4.061
+		c-0.739,0.366-1.639,0.064-2.008-0.676l-4.316-8.67c-0.36-0.725-0.082-1.604,0.63-1.988c6.689-3.614,13.864-5.447,21.325-5.447
+		c6.421,0,11.613,1.578,15.434,4.69c3.864,3.15,5.825,7.402,5.825,12.639C70.82,34.697,70.014,37.749,68.424,40.295z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom-icons/warning.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 295.428 295.428" style="enable-background:new 0 0 295.428 295.428;" xml:space="preserve">
+<path d="M147.714,0C66.264,0,0,66.264,0,147.714s66.264,147.714,147.714,147.714c81.45,0,147.714-66.264,147.714-147.714
+	S229.164,0,147.714,0z M147.714,232.68c-8.284,0-15-6.716-15-15c0-8.284,6.716-15,15-15c8.284,0,15,6.716,15,15
+	C162.714,225.964,155.998,232.68,147.714,232.68z M162.714,155.68c0,8.284-6.716,15-15,15c-8.284,0-15-6.716-15-15v-79
+	c0-8.284,6.716-15,15-15c8.284,0,15,6.716,15,15V155.68z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>