More page - show details button changes, added Missed class navigational button

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

@@ -19,7 +19,12 @@
 
     <section class="session-details">
         <button class="show-details-button" (click)="showClassDetails  = !showClassDetails "
-        [ngClass]="{'active' : showClassDetails }"> Show Class Details
+        [ngClass]="{'active' : showClassDetails }">
+            <span>
+                <span *ngIf="!showClassDetails"> Show </span>
+                <span *ngIf="showClassDetails"> Hide </span>
+                Class Details
+            </span>
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
         </button>
 

src/app/tabs/more/more.component.html

@@ -18,7 +18,12 @@
         </section>
 
         <button class="profile-details-button" (click)="profileDetails = !profileDetails"
-        [ngClass]="{'active' : profileDetails}"> Profile Details
+        [ngClass]="{'active' : profileDetails}">
+            <span>
+                <span *ngIf="!profileDetails"> Show </span>
+                <span *ngIf="profileDetails"> Hide </span>
+                Profile Details
+            </span>
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
         </button>
     </div>
@@ -117,6 +122,11 @@
                 <h4> My Class </h4>
             </li>
 
+            <li>
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/missed-class.svg"></svg-icon>
+                <h4> Missed Classes </h4>
+            </li>
+
             <li>
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/duel.svg"></svg-icon>
                 <h4> Duel </h4>

src/app/tabs/more/more.component.scss

@@ -93,14 +93,13 @@
     padding: 0 5%;
 
     &.active .icon {
-        transform: rotate(0deg);
+        transform: rotate(90deg);
     }
 
     .icon {
         fill: white;
         width: 15px;
         height: 15px;
-        transform: rotate(90deg);
     }
 }
 
@@ -135,9 +134,8 @@
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
-    justify-content: space-between;
     width: 90%;
-    margin: 20px auto;
+    margin: 20px 4% 20px auto;
     list-style: none;
 
     li {
@@ -146,8 +144,8 @@
         background-color: white;
         border-radius: 10px;
         box-shadow: 1px 1px 5px var(--light-grey);
-        margin-bottom: 20px;
         padding: 15px 15px 10px;
+        margin: 0 1.5% 20px;
 
         .icon {
             width: 40px;

src/assets/custom-icons/missed-class.svg

@@ -0,0 +1,43 @@
+<?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 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<g>
+	<circle style="fill:#FBD971;" cx="21" cy="21" r="21"/>
+	<circle style="fill:#FFFFFF;" cx="12" cy="15" r="6"/>
+	<circle style="fill:#FFFFFF;" cx="30" cy="15" r="6"/>
+	<circle style="fill:#AF8066;" cx="12" cy="15" r="3"/>
+	<circle style="fill:#AF8066;" cx="30" cy="15" r="3"/>
+</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>