New Style Guide implementation

src/app/_colors.scss

@@ -1,13 +1,20 @@
 $brand-black: #272727;
-$brand-red: #ED1C24;
-$brand-red-rgb: 237, 28, 36;
+
+// Brand colors
+$brand-red: #e41c1e;
+$brand-blue: #485dbf;
+$brand-red-rgb: 228, 28, 30;
+$brand-gold: #efd19f;
+
+// Custom colors
 $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;
+
+$brand-blue-shade1: #24367c;
+$brand-blue-shade2: #263982;
+
 $green: #01b868;
 $pink: #d73e53;
 $voilet: #424264;

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

@@ -17,7 +17,7 @@ ion-content {
     z-index: 2;
     width: 100%;
     align-items: center;
-    box-shadow: 0px 0px 5px $dark-blue;
+    box-shadow: 0px 0px 5px $brand-blue;
     
     button {
         background-color: transparent;

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

@@ -81,7 +81,7 @@
 
             &.active {
                 background-color: rgba(#ffff, 0.8);
-                color: $dark-blue;
+                color: $brand-blue;
             }
         }
     }
@@ -208,7 +208,7 @@
     
     header h3 {
         margin: 0;
-        color: lighten($dark-blue, 10%);
+        color: lighten($brand-blue, 10%);
         font-weight: 700;
         letter-spacing: 1px;
         font-size: 1.1rem;
@@ -236,7 +236,7 @@
         margin: 0 auto;
 
         &.active {
-            background-color: $dark-blue;
+            background-color: $brand-blue;
 
             p {
                 color: white;

src/app/booking/booking.page.scss

@@ -95,7 +95,7 @@ ion-slides {
         height: 100%;
         overflow: hidden;
         border-radius: 7px;
-        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+        box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
 
         figure {
             margin: 0;

src/app/chat/chat.page.scss

@@ -57,7 +57,7 @@
         
         h5 {
             position: relative;
-            background-color: $dark-blue;
+            background-color: $brand-blue;
             padding: 0 10px;
             margin: 0;
             font-size: 1.2rem;
@@ -95,7 +95,7 @@
     }
 
     li {
-        background-color: lighten($dark-blue, 10%);
+        background-color: lighten($brand-blue, 10%);
         color: white;
         max-width: 80%;
         display: block;
@@ -155,7 +155,7 @@
     background-color: white;
     padding: 10px;
     border-radius: 10px;
-    box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+    box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
     margin: 40px 0;
     overflow: hidden;
     background-color: rgba($blue-grey, 0.3);
@@ -163,7 +163,7 @@
     header {
         font-size: 1.5rem;
         line-height: 1.5;
-        color: $dark-blue;
+        color: $brand-blue;
         border-bottom: 2px solid rgba(white, 0.5);
         padding: 5px 5px 15px 5px;
         color: white;
@@ -199,7 +199,7 @@
                 top: 0;
                 height: 100%;
                 width: 0%;
-                background-color: $dark-blue;
+                background-color: $brand-blue;
                 pointer-events: none;
                 transition: transform 0.3s, width 0.3s, background-color 0.3s;
                 border-radius: 10px;
@@ -238,7 +238,7 @@
     left: 0;
     bottom: 0;
     z-index: 1;
-    background-color: lighten($dark-blue, 2%);
+    background-color: lighten($brand-blue, 2%);
     box-shadow: 0px 0px 5px black;
     display: flex;
     align-items: center;
@@ -251,7 +251,7 @@
     input {
         flex-grow: 1;
         border: 0px;
-        background-color: lighten($dark-blue, 10%);
+        background-color: lighten($brand-blue, 10%);
         height: 40px;
         border-radius: 20px;
         color: white;

src/app/collections/collections.page.scss

@@ -48,7 +48,7 @@
         min-height: 100px;
         border-radius: 10px;
         background-color: rgba(white, 0.8);
-        box-shadow: 2px 2px 10px -4px $dark-blue;
+        box-shadow: 2px 2px 10px -4px $brand-blue;
         position: relative;
         padding: 10px;
         margin: 10px;

src/app/components/player-details/player-details.component.scss

@@ -1,8 +1,7 @@
-$dark-blue: #161e2d;
-$blue-grey: #949599;
+@import '../../colors';
 
 .container {
-    background-color: $dark-blue;
+    background: linear-gradient(45deg, darken($brand-blue, 15%), darken($brand-blue, 20%) 80%);
     padding: 40px 0;
 }
 
@@ -46,7 +45,7 @@ $blue-grey: #949599;
             margin: 0;
             display: block;
             overflow: hidden;
-            box-shadow: 0px 0px 5px $dark-blue;
+            box-shadow: 0px 0px 5px darken($brand-blue, 20%);
 
             &:nth-child(2) {
                 z-index: 0;
@@ -73,7 +72,7 @@ $blue-grey: #949599;
         position: absolute;
         bottom: 60px;
         left: 0;
-        color: $blue-grey;
+        color: lighten($brand-red, 15%);
         font-size: 1rem;
         display: flex;
         align-items: center;
@@ -84,7 +83,7 @@ $blue-grey: #949599;
             margin-right: 10px;
             font-size: 2rem;
             vertical-align: middle;
-            color: var(--brand-red);
+            color: lighten($brand-red, 15%);
         }
     }
 
@@ -113,13 +112,13 @@ $blue-grey: #949599;
     transform: translateY(-50px);
     z-index: 1;
     position: relative;
-    background-color: rgba($dark-blue, 0.8);
-    box-shadow: 0px -10px 10px rgba($dark-blue, 0.8);
+    background-color: rgba(darken($brand-blue, 20%), 0.8);
+    box-shadow: 0px -10px 10px rgba(darken($brand-blue, 20%), 0.8);
 
     li {
         width: 27vw;
         height: 27vw;
-        background-color: rgba($dark-blue, 0.8);
+        background-color: rgba($brand-blue, 0.8);
         border: 1px solid rgba($blue-grey, 0.3);
         display: flex;
         border-radius: 10px;
@@ -174,27 +173,28 @@ $blue-grey: #949599;
         justify-content: flex-start;
 
         h4 {
-            color: #148dfc;
+            color: lighten($green, 10%);
             font-size: 0.8rem;
             font-weight: 500;
             letter-spacing: 0.5px;
+            margin: 0;
         }
 
         span {
             margin-right: 10px;
-            border: 7px solid #148dfc;
+            border: 7px solid lighten($green, 10%);
             border-radius: 50%;
             height: 25px;
             width: 25px;
-            background-color: $dark-blue;
+            background-color: darken($brand-blue, 20%);
         }
     }
 
     ul {
         list-style: none;
         padding: 0;
-        background-color: lighten($dark-blue, 5%);
-        box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+        background-color: darken($brand-blue, 10%);
+        box-shadow: 0px 0px 10px darken($brand-blue, 20%);
         border-radius: 10px;
         overflow: hidden;
 
@@ -221,7 +221,7 @@ $blue-grey: #949599;
             line-height: 1.3;
 
             span {
-                color: $blue-grey;
+                color: lighten($brand-blue, 10%);
                 font-size: 0.8rem;
                 display: block;
             }
@@ -239,8 +239,8 @@ $blue-grey: #949599;
         .share-button {
             width: 30px;
             height: 30px;
-            border: 1px solid $blue-grey;
-            background-color: rgba($blue-grey, 0.1);
+            border: 1px solid lighten($brand-blue, 10%);
+            background-color: rgba(lighten($brand-blue, 10%), 0.2);
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -248,7 +248,7 @@ $blue-grey: #949599;
             margin-left: 10px;
 
             ion-icon {
-                color: $blue-grey;
+                color: lighten($brand-blue, 10%);
                 font-size: 15px;
             }
         }
@@ -256,8 +256,8 @@ $blue-grey: #949599;
 }
 
 .about {
-    background-color: lighten($dark-blue, 5%);
-    box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+    background-color: darken($brand-blue, 10%);
+    box-shadow: 0px 0px 10px darken($brand-blue, 20%);
     border-radius: 10px;
     overflow: hidden;
     width: 90%;
@@ -295,7 +295,7 @@ $blue-grey: #949599;
     }
 
     label {
-        color: $blue-grey;
+        color: lighten($brand-blue, 10%);
         font-size: 0.7rem;
         display: block;
         line-height: 1.3;

src/app/components/polls/polls.component.scss

@@ -24,7 +24,7 @@ ion-slide {
     header {
         font-size: 1.2rem;
         line-height: 1.5;
-        color: $dark-blue;
+        color: $brand-blue;
         border-bottom: 2px solid rgba(white, 0.5);
         padding: 5px 5px 15px 5px;
         color: white;
@@ -60,7 +60,7 @@ ion-slide {
                 top: 0;
                 height: 100%;
                 width: 0%;
-                background-color: $dark-blue;
+                background-color: $brand-blue;
                 pointer-events: none;
                 transition: transform 0.3s, width 0.3s, background-color 0.3s;
                 border-radius: 10px;

src/app/fan-zone/fan-zone.page.scss

@@ -37,7 +37,7 @@
     li {
         border-radius: 7px;
         background-color: rgba(white, 0.1);
-        box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%);
+        box-shadow: 5px 5px 10px -5px darken($brand-blue, 5%);
         color: $blue-grey;
         width: 25vw;
         height: 25vw;
@@ -128,7 +128,7 @@
         height: 100%;
         position: relative;
         transition: transform 0.3s;
-        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+        box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
         width: 100%;
         background-color: rgba(black, 0.9);
         background-size: cover;
@@ -286,7 +286,7 @@
         bottom: 0;
         left: 0;
         width: 100%;
-        box-shadow: 0px 0px 5px $dark-blue;
+        box-shadow: 0px 0px 5px $brand-blue;
         border-top-left-radius: 40px;
         border-top-right-radius: 40px;
         background-color: white;

src/app/home/home.page.scss

@@ -68,7 +68,7 @@ ion-slides {
         text-align: left;
         height: 100%;
         position: relative;
-        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+        box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
         transition: transform 0.3s;
         transform: scale(0.9);
 
@@ -222,13 +222,13 @@ ion-slides {
         .read-more {
             background-color: transparent;
             font-size: 0.9rem;
-            color: $dark-blue;
+            color: $brand-blue;
             font-weight: 400;
 
             ion-icon {
                 font-size: 1.2rem;
                 vertical-align: middle;
-                color: $dark-blue;
+                color: $brand-blue;
             }
         }
     }

src/app/live/live.page.html

@@ -121,10 +121,6 @@
                 
                         </ion-slide>
                     </ion-slides>
-    
-                    <button class="view-more-button" (click)="showBookingDetailsByIndex()">
-                        Book Now
-                    </button>
                 </section>
                 
             </li>
@@ -132,17 +128,11 @@
 
     </div>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button class="chat-button" (click)="presentChatModal()">
             <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
             <ion-badge color="dark"> 10 </ion-badge>
         </ion-fab-button>
-    </ion-fab>
-
-    <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showAddParty">
-        <ion-fab-button class="chat-button" (click)="presentAddChatModal()">
-            <ion-icon name="add-outline"></ion-icon>
-        </ion-fab-button>
     </ion-fab> -->
 
 </ion-content>

src/app/live/live.page.scss

@@ -9,7 +9,7 @@
     padding: 0px 7%;
 
     .main-header {
-        background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
+        background: linear-gradient(to right, darken($brand-red, 10%), lighten($brand-red, 30%) 50%);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -20,7 +20,7 @@
     }
 
     p {
-        color: $blue-grey;
+        color: lighten($brand-blue, 20%);
         font-size: 1.2rem;
         font-weight: 500;
     }
@@ -33,8 +33,8 @@
     padding: 15px 5%;
     overflow: visible;
     position: relative;
-    background: linear-gradient(45deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 10%) 80%);
-    box-shadow: 2px 2px 10px -2px darken($dark-blue, 5%);
+    background: linear-gradient(45deg, lighten($brand-red, 15%), darken($brand-blue, 20%) 80%);
+    box-shadow: 2px 2px 10px -2px darken($brand-blue, 30%);
 
     .format {
         background-color: darken($green, 5%);
@@ -45,7 +45,7 @@
         font-weight: 500;
         letter-spacing: 0.5px;
         position: absolute;
-        left: 10%;
+        left: 15px;
         top: -12px;
     }
 
@@ -133,8 +133,8 @@
         margin: 30px auto;
         border-radius: 10px;  
         overflow: hidden;
-        background: linear-gradient(45deg, lighten($dark-blue, 10%) 20%, lighten($dark-blue, 15%));
-        box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%);
+        background: linear-gradient(45deg, darken($brand-blue, 10%) 20%, darken($brand-blue, 20%));
+        box-shadow: 5px 5px 10px -5px darken($brand-blue, 30%);
         height: 50px;
 
         -webkit-perspective: 1200px;
@@ -169,7 +169,7 @@
             button {
                 border-radius: 50%;
                 background-color: darken($green, 5%);
-                box-shadow: 2px 2px 7px -2px darken($dark-blue, 10%);
+                box-shadow: 2px 2px 7px -2px darken($brand-blue, 10%);
                 height: 30px;
                 width: 30px;
                 font-size: 24px;
@@ -181,12 +181,12 @@
             display: block;
             width: 100%;
             border-radius: 7px;
-            background-color: lighten($brand-red, 10%);
+            background-color: lighten($brand-red, 15%);
             font-weight: 500;
             color: white;
             font-size: 1rem;
             height: 40px;
-            box-shadow: 2px 2px 7px -3px darken($dark-blue, 10%);
+            box-shadow: 2px 2px 7px -3px darken($brand-blue, 10%);
         }
         
         .card {
@@ -264,7 +264,7 @@ ion-slides {
         height: 100%;
         overflow: hidden;
         border-radius: 7px;
-        box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+        box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
 
         figure {
             margin: 0;

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

@@ -151,28 +151,8 @@
     </div>
 
     <ng-container *ngIf="selectedSegment === 'MATCH'">
-        <div class="field-container" *ngIf="selectedRoster === 'LIVE'">
-            <figure class="field-image">
-                <img src="assets/home-team/ground.png">
-            </figure>
+        <div class="commentary-container" *ngIf="selectedRoster === 'LIVE'">
             
-            <ul class="field-setting" [ngClass]="{'active': selectedRoster === 'LIVE' }">
-                <li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
-                    <img [src]="player.image">
-                </li>
-
-                <li (click)="selectPlayerDetails()">
-                    <img [src]="matchData.away.players[0].image">
-                </li>
-
-                <li (click)="selectPlayerDetails()">
-                    <img [src]="matchData.away.players[1].image">
-                </li>
-
-                <li>
-                    <img src="assets/icons/ball.png">
-                </li>
-            </ul>
         </div>
     
         <div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">

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

@@ -1,7 +1,7 @@
 @import '../colors';
 
 
-.field-container {
+.commentary-container {
     position: sticky;
     position: -webkit-sticky;
     top: 0px;
@@ -11,27 +11,6 @@
     margin-top: -80px;
 }
 
-.field-image {
-    display: block;
-    width: 100%;
-    height: 100%;  
-    z-index: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 0;
-
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        animation: popOut 0.3s forwards linear;
-        border-radius: 50%;
-        transform: scale(0);
-    }
-}
-
 @keyframes popOut {
     0% {
         transform: scale(0);
@@ -48,187 +27,13 @@
     }
 }
 
-.field-setting {
-    position: absolute;
-    z-index: 1;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    top: 5%;
-    left: 0%;
-    width: 100%;
-    height: 90%;
-    overflow: visible;
-    opacity: 0;
-    transition: transform 0.5s, opacity 0.3s;
-    transform: translateY(10%);
-    pointer-events: none;
-    transition-delay: 0.3s;
-
-    &.active {
-        transform: translateY(0%);
-        opacity: 1;
-        pointer-events: all;
-    }
-    
-    li {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 1;
-
-        &::after {
-            content: '';
-            display: block;
-            width: 50px;
-            height: 10px;
-            border-radius: 50%;
-            background-color: lighten($blue-grey, 20%);
-            box-shadow: 0px 2px 5px $dark-blue;
-            margin-top: -5px;
-        }
-        
-        img {
-            display: block;
-            margin: 0 auto;
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            object-position: top;
-            position: relative;
-        }
-
-        &:nth-child(1) {
-            left: 10%;
-            top: 90%;
-        }
-
-        &:nth-child(2) {
-            left: 15%;
-            top: 60%;
-        }
-
-        &:nth-child(3) {
-            left: 15%;
-            top: 30%;
-        }
-
-        &:nth-child(4) {
-            left: 5%;
-            top: 5%;
-        }
-
-        &:nth-child(5) {
-            left: 40%;
-            top: 20%;
-        }
-
-        &:nth-child(6) {
-            left: 70%;
-            top: 20%;
-        }
-
-        &:nth-child(7) {
-            left: 80%;
-            top: 40%;
-        }
-
-        &:nth-child(8) {
-            left: 70%;
-            top: 60%;
-        }
-
-        &:nth-child(9) {
-            left: 40%;
-            top: 80%;
-            animation: bowlerMovement 1.5s forwards linear;
-        }
-
-        @keyframes bowlerMovement {
-            0% {
-                transform: translate(0, 0);
-            } 100% {
-                transform: translate(0, -20vh);
-            }
-        }
-
-        &:nth-child(10) {
-            left: 80%;
-            top: 90%;
-        }
-        
-        &:nth-child(11) {
-            left: 2%;
-            top: 40%;
-        }
-
-        &:nth-child(12) {
-            left: 50%;
-            top: 52%;
-            animation: runUp 1s forwards linear;
-            animation-delay: 2.8s;
-        }
-
-        @keyframes runUp {
-            0% {
-                transform: translate(0,0);
-            } 100% {
-                transform: translate(-5vw, -15vh);
-            }
-        }
-
-        &:nth-child(13) {
-            left: 42%;
-            top: 33%;
-
-            animation: runDown 1s forwards linear;
-            animation-delay: 3s;
-        }
-
-        @keyframes runDown {
-            0% {
-                transform: translate(0,0);
-            } 100% {
-                transform: translate(7vw, 15vh);
-            }
-        }
-
-        &:nth-child(14) {
-            left: 39%;
-            top: 82%;
-
-            img {
-                width: 20px;
-                height: 20px;
-            }
-
-            &::after {
-                display: none;
-            }
-
-
-            animation: ballMovement 5s forwards linear;
-        }
-
-        @keyframes ballMovement {
-            0% {
-                transform: translate(0, 0);
-            } 50% {
-                transform: translate(0, -35vh);
-            } 100% {
-                transform: translate(50vw, 10vh);
-            }
-        }
-    }
-}
-
 .player-details {
     position: relative;
     z-index: 2;
     border-radius: 10px;
     overflow: hidden;
-    box-shadow: 0px 0px 5px $dark-blue;
-    background-color: $dark-blue;
+    box-shadow: 0px 0px 5px darken($brand-blue, 30%);
+    background-color: darken($brand-blue, 30%);
     left: 0;
     top: 0;
 
@@ -241,16 +46,16 @@
         height: 40px;
         margin: 15px 5% 15px auto;
         border-radius: 50%;
-        border: 1px solid $blue-grey;
-        background-color: rgba($blue-grey, 0.1);
+        border: 2px solid lighten($brand-blue, 10%);
+        background-color: rgba(lighten($brand-blue, 10%), 0.2);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 2;
 
         ion-icon {
-            color: $blue-grey;
-            font-size: 20px;
+            color: lighten($brand-blue, 10%);
+            font-size: 22px;
         }
     }
 
@@ -388,13 +193,13 @@
     z-index: 1;
     width: 100%;
     padding: 20px 0;
-    background-color: $dark-blue;
-    box-shadow: 0px 0px 10px -2px darken($dark-blue, 10%);
+    background-color: darken($brand-blue, 20%);
+    box-shadow: 0px 0px 10px -2px darken($brand-blue, 20%);
     transition: background-color 0.3s, box-shadow 0.3s;
 
     &.no-bg {
         background-color: transparent;
-        box-shadow: 0px 0px 0px $dark-blue;
+        box-shadow: 0px 0px 0px $brand-blue;
     }
 }
 
@@ -407,8 +212,8 @@
     display: flex;
     justify-content: center;
     overflow: hidden;
-    background-color: lighten($dark-blue, 15%);
-    box-shadow: 0px 0px 5px inset $dark-blue;
+    background-color: $brand-blue;
+    box-shadow: 0px 0px 5px inset $brand-blue;
 
     &.active {
         &::before {
@@ -460,7 +265,7 @@
 
 .score-card {
     background-color: white;
-    box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
+    box-shadow: 10px 10px 15px -7px darken($brand-blue, 10%);
     border-radius: 7px;
     overflow: hidden;
     width: 90%;

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

@@ -33,8 +33,8 @@ export class MatchDetailsPage implements OnInit {
     isPlayerSelected: boolean = false;
     isHomeTeamSelected: boolean = true;
 
-    selectedSegment: string = 'MATCH';
-    selectedRoster: string = 'LIVE';
+    selectedSegment: 'MATCH' | 'SCORE' = 'MATCH';
+    selectedRoster: 'LIVE' | 'HOME' | 'AWAY' = 'LIVE';
 
     roles = ['BOWLER', 'BATSMAN'];
 

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

@@ -1,9 +1,9 @@
-$dark-blue: #161e2d;
+$brand-blue: #161e2d;
 $blue-grey: #949599;
 
 ion-content {
     --background: transparent;
-    background-color: $dark-blue;
+    background-color: $brand-blue;
 }
 
 .content-container {

src/app/quiz/quiz.page.scss

@@ -72,7 +72,7 @@
         left: 0;
         top: 0;
         border-radius: 30px;
-        background: linear-gradient(90deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 20%) 80%);
+        background: linear-gradient(90deg, lighten($brand-red, 5%) 5%, lighten($brand-blue, 20%) 80%);
         width: 100%;
         height: 100%;
         transition: width 1s linear;
@@ -179,7 +179,7 @@
     border-radius: 10px;
     text-align: center;
     background-color: lighten($blue-grey, 35%);
-    box-shadow: 0px 3px 5px $dark-blue;
+    box-shadow: 0px 3px 5px $brand-blue;
 
     h2 {
         color: $green;

src/app/quiz/swipe-cards/swipe-cards.component.scss

@@ -17,7 +17,7 @@
     width: 100%;
     background: #FFFFFF;
     border-radius: 20px;
-    box-shadow: 0px 0px 15px -2px $dark-blue;
+    box-shadow: 0px 0px 15px -2px $brand-blue;
     overflow: hidden;
     position: absolute;
     will-change: transform;
@@ -58,7 +58,7 @@
     justify-content: space-between;
     height: 50px;
     background-color: white;
-    box-shadow: 0px 0px 10px 0px $dark-blue;
+    box-shadow: 0px 0px 10px 0px $brand-blue;
     
     button {
         width: 70px;
@@ -75,13 +75,13 @@
         &:first-child {
             margin-left: -30px;
             color: $pink;
-            box-shadow: -5px 0px 10px 0px $dark-blue;
+            box-shadow: -5px 0px 10px 0px $brand-blue;
         }
 
         &:last-child {
             margin-right: -30px;
             color: $green;
-            box-shadow: 5px 0px 10px 0px $dark-blue;
+            box-shadow: 5px 0px 10px 0px $brand-blue;
         }
     }
 }

src/app/shop/shop.page.scss

@@ -106,8 +106,8 @@
     height: 70px;
     display: flex;
     align-items: stretch;
-    background-color: $dark-blue;
-    box-shadow: 0px 0px 5px $dark-blue;
+    background-color: $brand-blue;
+    box-shadow: 0px 0px 5px $brand-blue;
     overflow: hidden;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
@@ -185,7 +185,7 @@
             margin: 10px 0;
             font-size: 1rem;
             font-weight: 500;
-            color: $dark-blue;
+            color: $brand-blue;
         }
     }
 }
@@ -202,7 +202,7 @@
     justify-content: center;
 
     button {
-        color: $dark-blue;
+        color: $brand-blue;
         border: none;
         border-radius: 30px;
         height: 40px;

src/app/tabs/tabs.page.html

@@ -1,7 +1,7 @@
 <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">
     <ion-tab-bar slot="bottom" [ngClass]="{'live' : selectedTab === 'live', 
     'dark' : selectedTab === 'player-stats'}">
-        <ion-tab-button tab="home">
+        <ion-tab-button tab="home" disabled="true">
             <ion-icon name="home-outline"></ion-icon>
             <ion-icon name="home"></ion-icon>
         </ion-tab-button>
@@ -11,7 +11,7 @@
             <ion-icon name="play-circle"></ion-icon>
         </ion-tab-button>
 
-        <ion-tab-button tab="fan-zone">
+        <ion-tab-button tab="fan-zone" disabled="true">
             <ion-icon name="game-controller-outline"></ion-icon>
             <ion-icon name="game-controller"></ion-icon>
         </ion-tab-button>

src/app/tabs/tabs.page.scss

@@ -2,19 +2,18 @@
 
 ion-tab-bar {
     --background: transparent;
-    background-color: $dark-blue;
+    background: linear-gradient(to right, darken($brand-blue, 10%), $brand-blue);
     --border: none;
     margin-top: -2px;
-    box-shadow: 0px 0px 15px -2px darken($dark-blue, 10%);
-    --color: var(--blue-grey);
-    --color-selected: #01b868;    
-
+    box-shadow: 0px 0px 15px -2px darken($brand-blue, 20%);
+    
     ion-tab-button {
         ion-icon {
             font-size: 25px;
 
             &:nth-child(1) {
                 display: block;
+                color: lighten($brand-blue, 30%);
             }
 
             &:nth-child(2) {
@@ -26,6 +25,7 @@ ion-tab-bar {
             ion-icon {
                 &:nth-child(2) {
                     display: block;
+                    color: $brand-gold;
                 }
     
                 &:nth-child(1) {

src/global.scss

@@ -38,7 +38,7 @@
 
 ion-content {
     --background: transparent;
-    background: linear-gradient(0deg, lighten($dark-blue, 10%), $dark-blue 80%);
+    background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);
 }
 
 .header-with-action-buttons {
@@ -51,11 +51,11 @@ ion-content {
     position: -webkit-sticky;
     left: 0;
     top: 0;
-    background-color: lighten($dark-blue, 5%);
+    background-color: darken($brand-blue, 10%);
     z-index: 2;
     width: 100%;
     align-items: center;
-    box-shadow: 0px 0px 5px $dark-blue;
+    box-shadow: 0px 0px 5px darken($brand-blue, 20%);
     
     button {
         background-color: transparent;
@@ -63,7 +63,7 @@ ion-content {
     }
     
     .nav button {
-        color: lighten($blue-grey, 10%);
+        color: lighten($brand-blue, 20%);
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -81,8 +81,8 @@ ion-content {
         flex-grow: 1;
         padding: 0 15px;
         font-size: 14px;
-        color: lighten($blue-grey, 50%);
-        font-weight: 500;
+        color: white;
+        font-weight: 600;
         text-align: left;
         white-space: nowrap;
         overflow: hidden;
@@ -90,7 +90,7 @@ ion-content {
 
         span {
             font-weight: 500;
-            color: lighten($blue-grey, 10%);
+            color: lighten($brand-blue, 20%);
             font-size: 12px;
         }
     }
@@ -103,8 +103,8 @@ ion-content {
     .action button {
         width: 40px;
         height: 40px;
-        border: 2px solid darken($green, 10%);
-        background-color: rgba($green, 0.1);
+        border: 2px solid $green;
+        background-color: rgba($green, 0.2);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -112,7 +112,7 @@ ion-content {
         margin-left: 15px;
 
         ion-icon {
-            color: darken($green, 10%);
+            color: $green;
             font-size: 20px;
         }
     }
@@ -121,26 +121,4 @@ ion-content {
 
 figure {
     margin: 0;
-}
-
-
-.chat-button {
-    --background: transparent;
-    background-color: lighten($brand-red, 10%);
-    border-radius: 50%;
-    position: relative;
-    overflow: visible;
-    width: 60px;
-    height: 60px;
-
-    ion-icon {
-        font-size: 25px;
-    }
-
-    ion-badge {
-        position: absolute;
-        right: 7px;
-        top: 7px;
-        font-size: 10px;
-    }
 }