Live details UI -- partial commit

src/app/match-details/match-details.page.html

@@ -1,9 +1,16 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>match-details</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
 
+    <section class="action-buttons">
+        <div class="nav">
+            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <div class="action">
+            <button> <ion-icon name="share-social-outline"></ion-icon> </button>            
+        </div>
+    </section>
+
+    <div class="content-container">
+        
+    </div>
+
 </ion-content>

src/app/match-details/match-details.page.scss

@@ -0,0 +1,64 @@
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+
+ion-content {
+    --background: transparent;
+    background-color: $dark-blue;    
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 5% 15px 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: #161e2d;
+    box-shadow: 0px 0px 5px black;
+    
+    button {
+        background-color: transparent;
+        border: none;
+    }
+    
+    .nav button {
+        color: $blue-grey;
+        display: flex;
+        align-items: center;
+
+        ion-icon {
+            font-size: 24px;
+        }
+        
+        span {
+            margin-left: 5px;
+            font-size: 0.9rem;
+            font-size: 14px;
+        }
+    }
+
+    .action {
+        display: flex;
+    }
+
+    .action button {
+        width: 35px;
+        height: 35px;
+        border: 1px solid $blue-grey;
+        background-color: rgba($blue-grey, 0.1);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 15px;
+
+        ion-icon {
+            color: $blue-grey;
+            font-size: 17px;
+        }
+    }
+
+}

src/app/player-stats/player-stats.page.html

@@ -1,16 +1,16 @@
 <ion-content>
+
+    <section class="action-buttons">
+        <div class="nav">
+            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <div class="action">
+            <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+            <button> <ion-icon name="bookmark-outline"></ion-icon> </button>
+        </div>
+    </section>
     
     <div class="content-container">
-        <section class="action-buttons">
-            <div class="nav">
-                <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
-            </div>
-            <div class="action">
-                <button> <ion-icon name="share-social-outline"></ion-icon> </button>
-                <button> <ion-icon name="bookmark-outline"></ion-icon> </button>
-            </div>
-        </section>
-    
         <section class="player-primary-data">
     
             <section class="details">

src/app/player-stats/player-stats.page.scss

@@ -9,9 +9,15 @@ ion-content {
 .action-buttons {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
-    padding: 20px 5% 10px 3%;
-    margin-bottom: 20px;
+    align-items: center;
+    padding: 15px 5% 15px 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: #161e2d;
+    box-shadow: 0px 0px 5px black;
     
     button {
         background-color: transparent;
@@ -63,6 +69,7 @@ ion-content {
     width: 95%;
     padding-left: 5%;
     position: relative;
+    margin-top: 90px;
     
     &::before {
         content: '';