UI Made thematic

src/app/_colors.scss

@@ -0,0 +1,16 @@
+$brand-black: #272727;
+$brand-red: #ED1C24;
+$brand-red-rgb: 237, 28, 36;
+$light-grey: #666666;
+$light-grey-rgb: 102, 102, 102;
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+$lumous-blue: #1a2389;
+$dark-blue-shade1: #24367c;
+$dark-blue-shade2: #263982;
+$green: #01b868;
+$pink: #d73e53;
+$voilet: #424264;
+$dark-voilet: #09092b;
+$luminous-blue: #2ea9f5;
+$sea-blue: #2ea9f5;

src/app/add-party/add-party.page.html

@@ -1,5 +1,5 @@
 <ion-content>
-    <section class="action-buttons">
+    <section class="header-with-action-buttons">
         <div class="nav">
             <button (click)="back()"> 
                 <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> 

src/app/add-party/add-party.page.scss

@@ -1,9 +1,4 @@
-$dark-blue: #161e2d;
-$blue-grey: #949599;
-$green: #01b868;
-$pink: #d73e53;
-$dark-blue-shade1: #24367c;
-$dark-blue-shade2: #263982;
+@import '../colors';
 
 ion-content {
     --background: white;

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

@@ -1,6 +1,6 @@
 <ion-content>
 
-    <section class="action-buttons">
+    <section class="header-with-action-buttons">
         <div class="nav">
             <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>
@@ -61,7 +61,7 @@
 
     <section class="checkout-data" *ngIf="selectedSeats.length > 0">
         <p> <span> Total: </span> &#8377; {{ getTotalAmount() }} </p>
-        <button class="checkout-button"> Proceed to Payment </button>
+        <button class="checkout-button" (click)="confirmPayment()"> Proceed to Payment </button>
     </section>
 
 </ion-content>

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

@@ -1,92 +1,14 @@
-$dark-blue: #161e2d;
-$blue-grey: #949599;
-$sea-blue: #2ea9f5;
-$green: #01b868;
-
-ion-content {
-    --background: transparent;
-    background-color: $dark-blue;    
-}
+@import '../colors';
+
 
 .push-bottom {
     margin-bottom: 50px;
 }
 
-.action-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 0 3% 0 0%;
-    height: 70px;
+.header-with-action-buttons {
     position: fixed;
     left: 0;
     top: 0;
-    background-color: lighten($blue-grey, 35%);
-    z-index: 2;
-    width: 100%;
-    align-items: center;
-    box-shadow: 0px 0px 5px $dark-blue;
-    
-    button {
-        background-color: transparent;
-        border: none;
-    }
-    
-    .nav button {
-        color: $blue-grey;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-
-        ion-icon {
-            font-size: 24px;
-        }
-        
-        span {
-            font-size: 14px;
-        }
-    }
-
-    header {
-        flex-grow: 1;
-        padding: 0 10px;
-        font-size: 14px;
-        color: darken($blue-grey, 30%);
-        font-weight: 500;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        span {
-            font-weight: 500;
-            color: $blue-grey;
-            font-size: 12px;
-        }
-    }
-
-    .action {
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .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;
-        }
-    }
-
 }
 
 .upfold {

src/app/booking-details/booking-details.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import * as moment from 'moment';
+import { AlertController } from '@ionic/angular';
 
 @Component({
     selector: 'app-booking-details',
@@ -18,9 +19,29 @@ export class BookingDetailsPage implements OnInit {
 
     constructor(
         private route: ActivatedRoute,
-        private location: Location
+        private location: Location,
+        public alertController: AlertController
     ) { }
 
+    async confirmPayment() {
+        const alert = await this.alertController.create({
+            header: 'Purchase Complete',
+            message: 'Your ticket details will be sent over E-Mail and SMS, Enjoy the game!',
+            mode: 'ios',
+            buttons: [{
+                text: 'Okay!',
+                role: 'confirm',
+                handler: () => {
+                    setTimeout(() => {
+                        this.back();
+                    }, 100);
+                }
+            }]
+          });
+      
+          await alert.present();
+    }
+
     ngOnInit() {
         this.matchDay = JSON.parse(this.route.snapshot.paramMap.get('matchData'));
         console.log(this.matchDay);

src/app/booking/booking.page.html

@@ -1,7 +1,7 @@
 <ion-content>
     <div class="content-container">
         <div class="heading-holder">
-            <h2 class="main-header"> Booking </h2>
+            <h2 class="main-header"> # Booking </h2>
         
             <section class="segments">
                 <button [ngClass]="{'active' : selectedDate === bookingDate.dateTime}"

src/app/booking/booking.page.scss

@@ -1,20 +1,14 @@
-$lumous-blue: #1a2389;
-$dark-blue-shade1: #24367c;
-$dark-blue-shade2: #263982;
-$green: #01b868;
-$pink: #d73e53;
-
-ion-content {
-    --background: transparent;
-    background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);    
-}
+@import '../colors';
 
 .heading-holder {
     margin-bottom: 2.3rem;
 }
 
 .main-header {
-    color: white;
+    background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
     font-size: 2.3rem;
     font-weight: 700;
     letter-spacing: 1px;
@@ -32,7 +26,7 @@ ion-content {
 
     button {
         display: inline-block;
-        background-color: rgba(#ffff, 0.4);
+        background-color: rgba($blue-grey, 0.4);
         padding: 10px 15px;
         color: white;
         font-size: 1rem;
@@ -45,7 +39,7 @@ ion-content {
         &.active {
             font-weight: 500;
             background-color: white;
-            color: $lumous-blue;            
+            color: lighten($brand-red, 10%);
         }
     }
 }
@@ -65,7 +59,7 @@ ion-slides {
         display: block;        
         overflow: visible;
         text-align: left;
-        height: 80%;
+        height: 90%;
         position: relative;        
         transform: scale(0.9);
         background-color: transparent;
@@ -81,7 +75,7 @@ ion-slides {
         height: 100%;
         overflow: hidden;
         border-radius: 7px;
-        box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%);        
+        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
 
         figure {
             margin: 0;

src/app/chat/chat.page.html

@@ -1,5 +1,5 @@
 <ion-content>
-    <section class="action-buttons">
+    <section class="header-with-action-buttons">
         <div class="nav">
             <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>

src/app/chat/chat.page.scss

@@ -1,69 +1,8 @@
-$dark-blue: #161e2d;
-$blue-grey: #949599;
-$green: #01b868;
-$pink: #d73e53;
-$dark-blue-shade1: #24367c;
-$dark-blue-shade2: #263982;
-
-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;
+@import '../colors';
 
-        ion-icon {
-            font-size: 24px;
-        }
-        
-        span {
-            margin-left: 5px;
-            font-size: 0.9rem;
-            font-size: 14px;
-        }
-    }
-
-    .action {
-        display: flex;
-    }
 
+.header-with-action-buttons {
     .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;
-        }
-
         &.toggle {
             width: auto;
             padding: 0 10px;
@@ -71,15 +10,15 @@ ion-content {
             color: $blue-grey;
             font-weight: 500;
             letter-spacing: 0.5px;
-
+            
             ion-checkbox {
                 pointer-events: none;
                 margin: 0;
                 margin-right: 10px;
                 --border-color: #949599a6;
-                --border-color-checked: #d73e53;
+                --border-color-checked: #01b868;
                 --background: #94959970;
-                --background-checked: #d73e53;
+                --background-checked: #01b868;
             }
         }
     }
@@ -88,7 +27,6 @@ ion-content {
 
 
 .chat {
-    margin-top: 65px;
     padding: 10px 5%;
     height: calc(100vh - 65px);
     color: white;
@@ -217,7 +155,7 @@ ion-content {
     background-color: white;
     padding: 10px;
     border-radius: 10px;
-    box-shadow: 0px 0px 10px -2px black;
+    box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
     margin: 40px 0;
     overflow: hidden;
     background-color: rgba($blue-grey, 0.3);

src/app/chat/chat.page.ts

@@ -82,7 +82,7 @@ export class ChatPage implements OnInit {
         this.myAccount = this.members[myAccountIndex];
 
         
-        for (let i = 0; i < 5; i += 1) {
+        for (let i = 0; i < 2; i += 1) {
             let options = [];
             
             for (let j = 0; j < 4; j += 1) {
@@ -99,7 +99,7 @@ export class ChatPage implements OnInit {
                 let chat = [];
 
                 for (let k = 0; k < randomNumber; k += 1) {
-                    let randomMemberIndex = Math.floor(Math.random() * 19);         
+                    let randomMemberIndex = Math.floor(Math.random() * 3);
                     chat.push({
                         user: this.members[randomMemberIndex],
                         text: faker.lorem.sentence(),

src/app/collections/collections.page.html

@@ -2,15 +2,16 @@
 
     <ion-button (click)="showGrid = !showGrid"
     class="grid-button">
-        <ion-icon *ngIf="!showGrid" name="grid"></ion-icon>
-        <ion-icon *ngIf="showGrid" name="logo-buffer"></ion-icon>
+        <ion-icon *ngIf="!showGrid" name="apps-outline"></ion-icon>
+        <ion-icon *ngIf="showGrid" name="layers-outline"></ion-icon>
     </ion-button>
     
     <section class="collections">
 
         <ng-container *ngIf="showGrid">
             <ul class="collection-grid">
-                <li *ngFor="let collection of collections">
+                <li *ngFor="let collection of collections; let i = index"
+                (click)="goToCollection(i)">
                     <img [src]="collection.image">
                     <label> {{ collection.name }} </label>
                 </li>
@@ -20,7 +21,7 @@
         <ng-container *ngIf="!showGrid">
             <img class="glass-box" src="assets/collections/glassbox.png" alt="">
 
-            <ion-slides [options]="slideOpts">
+            <ion-slides #slides [options]="slideOpts">
                 <ion-slide *ngFor="let collection of collections">
                     <img [ngClass]="{'bat' : collection.type === 'BAT' || collection.type === 'INVERTED BAT', 
                     'ball' : collection.type === 'BALL', 

src/app/collections/collections.page.scss

@@ -1,10 +1,4 @@
-$lumous-blue: #1a2389;
-$dark-blue-shade1: #24367c;
-$dark-blue-shade2: #263982;
-$green: #01b868;
-$pink: #d73e53;
-$dark-blue: #161e2d;
-$blue-grey: #949599;
+@import '../colors';
 
 .collections {
     height: calc(100vh - 56px);
@@ -15,11 +9,11 @@ $blue-grey: #949599;
 
 .grid-button {
     position: fixed;
-    right: 10px;
-    top: 10px;
-    --border-radius: 10px;
-    width: 40px;
-    height: 40px;
+    right: calc(50% - 35px);
+    bottom: 20px;
+    --border-radius: 50%;
+    width: 70px;
+    height: 70px;
     z-index: 3;
     margin: 0;
     --padding-start: 0;
@@ -28,9 +22,10 @@ $blue-grey: #949599;
     --padding-bottom: 0;
     --background: white;
     --color: #d73e53;
+    --box-shadow: 2px 2px 5px -2px var(--dark-blue);
     
     ion-icon {
-        font-size: 24px;
+        font-size: 28px;
     }
 }
 

src/app/collections/collections.page.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
 
 @Component({
     selector: 'app-collections',
@@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./collections.page.scss'],
 })
 export class CollectionsPage implements OnInit {
+    @ViewChild('slides') slides: IonSlides;
+
+    selectedIndex: number = 0;
 
     slideOpts = {
         slidesPerView: 1,
@@ -14,7 +18,6 @@ export class CollectionsPage implements OnInit {
         centeredSlides: true,
         simulateTouch: false,
         followFinger: false,
-        loop: true,
     };
 
     collections: Array<{
@@ -47,4 +50,11 @@ export class CollectionsPage implements OnInit {
         }];
     }
 
+    goToCollection(index: number) {
+        this.showGrid = false;
+        setTimeout(() => {
+            this.slides.slideTo(index);
+        }, 200);
+    }
+
 }

src/app/home/home.page.scss

@@ -1,12 +1,11 @@
-$dark-blue: #076a93;
-$dark-voilet: #8c6ee5;
+@import '../colors';
 
 .heading-holder {
     margin-bottom: 2.7rem;
 }
 
 .main-header {
-    background: -webkit-linear-gradient(180deg, $dark-blue 50%, $dark-voilet);
+    background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -26,7 +25,7 @@ $dark-voilet: #8c6ee5;
 
     button {
         background-color: transparent;
-        color: $dark-blue;
+        color: $blue-grey;
         font-size: 1.1rem;
         font-weight: 400;
         margin-right: 5%;
@@ -36,7 +35,7 @@ $dark-voilet: #8c6ee5;
         &.active {
             font-weight: 500;
             opacity: 1;
-            color: var(--brand-black);
+            color: $blue-grey;
 
             &::before {
                 content: '';
@@ -46,7 +45,7 @@ $dark-voilet: #8c6ee5;
                 position: absolute;
                 bottom: -18px;
                 left: calc(50% - 4px);                                
-                background-color: var(--brand-red);
+                background-color: $blue-grey;
             }
         }
     }
@@ -69,7 +68,7 @@ ion-slides {
         text-align: left;
         height: 100%;
         position: relative;
-        box-shadow: 0px 10px 25px -7px rgba(var(--light-grey-rgb), 0.5);
+        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
         transition: transform 0.3s;
         transform: scale(0.9);
 

src/app/live/live.page.html

@@ -4,7 +4,7 @@
 
         <div class="heading-holder">
             <h2 class="main-header">
-                Matches
+                #Live
             </h2>
 
             <p>

src/app/live/live.page.scss

@@ -1,13 +1,4 @@
-$lumous-blue: #1a2389;
-$dark-blue-shade1: #24367c;
-$dark-blue-shade2: #263982;
-$green: #01b868;
-$pink: #d73e53;
-
-ion-content {
-    --background: transparent;
-    background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);    
-}
+@import '../colors';
 
 .content-container {
     padding-bottom: 50px;
@@ -18,15 +9,18 @@ ion-content {
     padding: 0px 7%;
 
     .main-header {
+        background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
         font-size: 2.3rem;
         font-weight: 700;
         letter-spacing: 1px;    
         margin: 5% 0%;
-        color: white;
     }
 
     p {
-        color: white;
+        color: $blue-grey;
         font-size: 1.2rem;
         font-weight: 500;
     }
@@ -39,12 +33,13 @@ ion-content {
     padding: 15px 5%;
     overflow: visible;
     position: relative;
-    background: linear-gradient(45deg, $pink 30%, $dark-blue-shade1);
+    background: linear-gradient(45deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 10%) 80%);
+    box-shadow: 2px 2px 10px -2px darken($dark-blue, 5%);
 
     .format {
-        background-color: $green;
+        background-color: darken($green, 5%);
         border-radius: 5px;
-        padding: 7px;
+        padding: 7px 15px;
         color: white;
         font-size: 0.9rem;
         font-weight: 500;
@@ -138,8 +133,8 @@ ion-content {
         margin: 30px auto;
         border-radius: 10px;  
         overflow: hidden;
-        background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2);
-        box-shadow: 0px 0px 5px darken($dark-blue-shade2, 30%);
+        background: linear-gradient(45deg, lighten($dark-blue, 10%) 20%, lighten($dark-blue, 15%));
+        box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%);
         height: 50px;
 
         -webkit-perspective: 1200px;
@@ -173,11 +168,12 @@ ion-content {
     
             button {
                 border-radius: 50%;
-                background-color: $green;
+                background-color: darken($green, 5%);
+                box-shadow: 2px 2px 7px -2px darken($dark-blue, 10%);
                 height: 30px;
                 width: 30px;
                 font-size: 24px;
-                color: white;            
+                color: white;
             }
         }
 
@@ -185,11 +181,12 @@ ion-content {
             display: block;
             width: 100%;
             border-radius: 7px;
-            background-color: $pink;
+            background-color: lighten($brand-red, 10%);
+            font-weight: 500;
             color: white;
             font-size: 1rem;
             height: 40px;
-            box-shadow: 0px 0px 5px 2px darken($dark-blue-shade2, 10%);           
+            box-shadow: 2px 2px 7px -3px darken($dark-blue, 10%);
         }
         
         .card {
@@ -238,7 +235,7 @@ ion-content {
 }
 
 ion-slides {
-    padding: 30px 0 20px 0;
+    padding: 15px 0 20px 0;
     position: relative;
     left: 0;
     top: 0;
@@ -267,7 +264,7 @@ ion-slides {
         height: 100%;
         overflow: hidden;
         border-radius: 7px;
-        box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%);        
+        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
 
         figure {
             margin: 0;

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

@@ -1,13 +1,13 @@
 <ion-content *ngIf="matchStats" [scrollEvents]="true">
 
-    <section class="action-buttons">
+    <section class="header-with-action-buttons">
         <div class="nav">
             <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>
         <header> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br> 
             <span> Live from {{ matchStats.stadium }} Stadium </span> </header>
         <div class="action">
-            <button> <ion-icon name="share-social-outline"></ion-icon> </button>
+            <button> <ion-icon name="share-social"></ion-icon> </button>
         </div>
     </section>
     

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

@@ -1,100 +1,14 @@
-$dark-blue: #161e2d;
-$blue-grey: #949599;
-$luminous-blue: #2ea9f5;
-$voilet: #424264;
-$dark-voilet: #09092b;
-$green: #01b868;
-$pink: #d73e53;
-
-ion-content {
-    --background: white;
-}
-
-.action-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 0 3% 0 0%;
-    height: 70px;
-    position: sticky;
-    position: -webkit-sticky;
-    left: 0;
-    top: 0;
-    background-color: lighten($blue-grey, 35%);
-    z-index: 2;
-    width: 100%;
-    align-items: center;
-    box-shadow: 0px 0px 5px $blue-grey;
-    
-    button {
-        background-color: transparent;
-        border: none;
-    }
-    
-    .nav button {
-        color: $blue-grey;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
+@import '../colors';
 
-        ion-icon {
-            font-size: 24px;
-        }
-        
-        span {
-            font-size: 14px;
-        }
-    }
-
-    header {
-        flex-grow: 1;
-        padding: 0 10px;
-        font-size: 14px;
-        color: darken($blue-grey, 30%);
-        font-weight: 500;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        span {
-            font-weight: 500;
-            color: $blue-grey;
-            font-size: 12px;
-        }
-    }
-
-    .action {
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .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;
-        }
-    }
-
-}
 
 .field-container {
     position: sticky;
     position: -webkit-sticky;
-    top: 70px;
+    top: 0px;
     height: calc(100vh - 70px);
     width: 100%;
     z-index: 0;
+    margin-top: -80px;
 }
 
 .field-image {
@@ -249,8 +163,8 @@ ion-content {
         }
 
         &:nth-child(12) {
-            left: 45%;
-            top: 53%;
+            left: 50%;
+            top: 52%;
             animation: runUp 1s forwards linear;
             animation-delay: 2.8s;
         }
@@ -275,17 +189,17 @@ ion-content {
             0% {
                 transform: translate(0,0);
             } 100% {
-                transform: translate(-5vw, 15vh);
+                transform: translate(7vw, 15vh);
             }
         }
 
         &:nth-child(14) {
-            left: 37%;
+            left: 39%;
             top: 82%;
 
             img {
-                width: 30px;
-                height: 30px;
+                width: 20px;
+                height: 20px;
             }
 
             &::after {
@@ -358,7 +272,7 @@ ion-content {
     display: flex;
     justify-content: center;
     overflow: hidden;
-    background-color: rgba(white, 0.5);
+    background-color: rgba($blue-grey, 0.5);
 
     &.change-bg {
         background-color: rgba($blue-grey, 0.3);
@@ -374,7 +288,7 @@ ion-content {
         }
 
         button:nth-child(3) {
-            color: #4eb54b;
+            color: darken($green, 10%);
         }
 
         button:nth-child(1) {
@@ -412,7 +326,7 @@ ion-content {
         border-radius: 30px;
         border-radius: 30px;
         transition: color 0.3s;
-        color: #4eb54b;        
+        color: darken($green, 10%);        
         height: 100%;
         background-color: transparent;
         font-weight: 700;
@@ -428,7 +342,7 @@ ion-content {
             span {
                 width: 12px;
                 height: 12px;
-                background-color: #4eb54b;
+                background-color: darken($green, 10%);
                 display: block;
                 border-radius: 50%;
 
@@ -440,7 +354,7 @@ ion-content {
                     width: 16px;
                     position: absolute;
                     border-radius: 50%;
-                    border: 12px solid rgba(#4eb54b, 0.5);
+                    border: 12px solid rgba(darken($green, 10%), 0.5);
                     opacity: 0.7;
                     animation: rippleBorder 1.5s infinite;
                 }
@@ -468,16 +382,19 @@ ion-content {
 }
 
 .segment-holder {
-    position: fixed;
+    position: sticky;
     left: 0;
     top: 70px;
-    z-index: 2;
+    z-index: 1;
     width: 100%;
     padding: 20px 0;
-    background-color: lighten($voilet, 10%);
+    background-color: $dark-blue;
+    box-shadow: 0px 0px 10px -2px darken($dark-blue, 10%);
+    transition: background-color 0.3s, box-shadow 0.3s;
 
     &.no-bg {
         background-color: transparent;
+        box-shadow: 0px 0px 0px $dark-blue;
     }
 }
 
@@ -490,11 +407,12 @@ ion-content {
     display: flex;
     justify-content: center;
     overflow: hidden;
-    background-color: rgba($blue-grey, 0.5);
+    background-color: lighten($dark-blue, 15%);
+    box-shadow: 0px 0px 5px inset $dark-blue;
 
     &.active {
         &::before {
-            transform: translateX(100%);
+            transform: translateX(98%);
         }
 
         button:nth-child(2) {
@@ -512,10 +430,12 @@ ion-content {
         left: 0;
         top: 0;
         width: 50%;
-        height: 100%;
+        height: 90%;
+        top: 5%;
         border-radius: 30px;
-        background-color: $luminous-blue;
+        background-color: darken($green, 5%);
         transition: transform 0.3s;
+        transform: translateX(2%);
     }
 
     button {
@@ -537,17 +457,14 @@ ion-content {
     }
 }
 
-.score-container {
-    margin-top: 100px;
-}
 
 .score-card {
     background-color: white;
-    box-shadow: 0px 0px 10px $blue-grey;
+    box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
     border-radius: 7px;
     overflow: hidden;
     width: 90%;
-    margin: 20px auto;
+    margin: 30px auto;
 
     .container {
         width: 90%;
@@ -636,8 +553,6 @@ ion-content {
 }
 
 .player-list {
-    background: linear-gradient(0deg, $voilet 50%, $dark-voilet);
-    margin-top: 78px;
     position: sticky;
     top: 0px;
     z-index: 0;
@@ -653,7 +568,6 @@ ion-content {
         display: flex;
         width: 100%;
         align-items: center;
-        background-color: rgba(#ffff, 0.1);
         border-bottom: 1px solid rgba(white, 0.1);
         padding: 15px 5%;
     }

src/app/tabs/tabs.page.scss

@@ -1,28 +1,17 @@
+@import '../colors';
+
 ion-tab-bar {
-    --background: white;
+    --background: transparent;
+    background-color: $dark-blue;
     --border: none;
-    margin-top: -1px;
-    box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.5);
-    --color: var(--light-grey);
-    --color-selected: var(--brand-black);
-
-    &.live {
-        --background: #24367c;
-        --color: white;
-        --color-selected: #01b868;
-        box-shadow: none;
-    }
-
-    &.dark {
-        --background: #161e2d;
-        --color: white;
-        --color-selected: #01b868;
-        box-shadow: none;
-    }
+    margin-top: -2px;
+    box-shadow: 0px 0px 15px -2px darken($dark-blue, 10%);
+    --color: var(--blue-grey);
+    --color-selected: #01b868;    
 
     ion-tab-button {
         ion-icon {
-            font-size: 20px;
+            font-size: 25px;
 
             &:nth-child(1) {
                 display: block;

src/global.scss

@@ -25,6 +25,8 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
+@import './app/colors';
+
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
 
 * {
@@ -34,6 +36,89 @@
     letter-spacing: 0.5px;
 }
 
+ion-content {
+    --background: transparent;
+    background: linear-gradient(0deg, lighten($dark-blue, 10%), $dark-blue 80%);
+}
+
+.header-with-action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 3% 0 0%;
+    height: 70px;
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0;
+    top: 0;
+    background-color: lighten($dark-blue, 5%);
+    z-index: 2;
+    width: 100%;
+    align-items: center;
+    box-shadow: 0px 0px 5px $dark-blue;
+    
+    button {
+        background-color: transparent;
+        border: none;
+    }
+    
+    .nav button {
+        color: lighten($blue-grey, 10%);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        ion-icon {
+            font-size: 24px;
+        }
+        
+        span {
+            font-size: 14px;
+        }
+    }
+
+    header {
+        flex-grow: 1;
+        padding: 0 15px;
+        font-size: 14px;
+        color: lighten($blue-grey, 50%);
+        font-weight: 500;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            font-weight: 500;
+            color: lighten($blue-grey, 10%);
+            font-size: 12px;
+        }
+    }
+
+    .action {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .action button {
+        width: 40px;
+        height: 40px;
+        border: 2px solid darken($green, 10%);
+        background-color: rgba($green, 0.1);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 15px;
+
+        ion-icon {
+            color: darken($green, 10%);
+            font-size: 20px;
+        }
+    }
+
+}
+
 figure {
     margin: 0;
 }
@@ -55,7 +140,9 @@ figure {
 }
 
 .chat-button {
-    --background: #d73e53;
+    --background: transparent;
+    background-color: lighten($brand-red, 10%);
+    border-radius: 50%;
     position: relative;
     overflow: visible;
     width: 60px;
@@ -67,8 +154,8 @@ figure {
 
     ion-badge {
         position: absolute;
-        right: 10px;
-        top: 10px;
+        right: 7px;
+        top: 7px;
         font-size: 10px;
     }
 }

src/theme/variables.scss

@@ -82,6 +82,8 @@
   --brand-red-rgb: 237, 28, 36;
   --light-grey: #666666;
   --light-grey-rgb: 102, 102, 102;
+  --dark-blue: #161e2d;
+  --blue-grey: #949599;
 
 }