More page UI enhancements

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

@@ -28,7 +28,7 @@
         </button>
     </div>
 
-    <section *ngIf="profileDetails">
+    <section *ngIf="profileDetails" class="profile-details-holder">
         <section class="segment-buttons">
             <button (click)="selectedSegment='badges'"
             [ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
@@ -39,7 +39,7 @@
         </section>
 
         <div class="segment-holder">
-            <ul class="badge-list" *ngIf="selectedSegment === 'badges'">
+            <ul class="segment-list" *ngIf="selectedSegment === 'badges'">
                 <li>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
                     <div class="content">
@@ -73,8 +73,7 @@
                 </li>
             </ul>
 
-
-            <ul class="friend-list" *ngIf="selectedSegment === 'friends'">
+            <ul class="segment-list" *ngIf="selectedSegment === 'friends'">
                 <li>
                     <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                     <div class="content">
@@ -122,11 +121,6 @@
                 <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

@@ -7,9 +7,9 @@
     align-items: center;
     padding: 0 5%;
     height: 60px;
-    position: absolute;
+    position: fixed;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     width: 100%;
 
     button {
@@ -103,14 +103,20 @@
     }
 }
 
+.profile-details-holder {
+    width: 100%;
+    background-color: var(--ash-black);
+    padding: 30px 0;
+}
+
 .segment-buttons {
     display: flex;
     align-items: stretch;
-    height: 35px;
+    height: 40px;
     border-radius: 7px;
     overflow: hidden;
     width: 90%;
-    margin: 20px auto;
+    margin: 0px auto 20px;
     background-color: var(--dark-grey);
     padding: 1px;
 
@@ -123,8 +129,8 @@
         border: 0px;
 
         &.active {
-            background-color: white;
-            color: var(--teal);
+            background-color: var(--teal-green);
+            color: white;
             font-weight: 500;
         }
     }
@@ -135,7 +141,7 @@
     align-items: stretch;
     flex-wrap: wrap;
     width: 90%;
-    margin: 20px 4% 20px auto;
+    margin: 30px 4% 0 auto;
     list-style: none;
 
     li {
@@ -175,16 +181,11 @@
     font-size: 16px;
 }
 
-.segment-holder {
-    margin-bottom: 40px;
-}
-
-.badge-list {
+.segment-list {
     list-style: none;
     width: 90%;
     margin: 0 auto;
     border-radius: 10px;
-    padding: 0px 10px;
 
     li {
         display: flex;
@@ -192,10 +193,13 @@
         align-items: center;
         justify-content: space-between;
         padding: 15px 10px;
-        background-color: white;
-        box-shadow: 1px 1px 5px var(--light-grey);
+        background-color: var(--black);
         border-radius: 15px;
         margin-bottom: 15px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     .icon {
@@ -203,43 +207,6 @@
         height: 40px;
     }
 
-    .content {
-        width: calc(100% - 60px);
-    }
-
-    label {
-        display: block;
-        font-size: 16px;
-        color: var(--ash-black);
-        font-weight: 500;
-    }
-
-    p {
-        font-size: 14px;
-        color: var(--light-grey);
-    }
-}
-
-
-.friend-list {
-    list-style: none;
-    width: 90%;
-    margin: 0 auto;
-    border-radius: 10px;
-    padding: 0px 10px;
-
-    li {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        padding: 15px 10px;
-        background-color: white;
-        box-shadow: 1px 1px 5px var(--light-grey);
-        border-radius: 15px;
-        margin-bottom: 15px;
-    }
-
     img {
         width: 50px;
         height: 50px;
@@ -250,13 +217,13 @@
     }
 
     .content {
-        width: calc(100% - 70px);
+        width: calc(100% - 60px);
     }
 
     label {
         display: block;
         font-size: 16px;
-        color: var(--ash-black);
+        color: var(--light-grey);
         font-weight: 500;
     }