Made UI white BG

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

@@ -8,9 +8,9 @@
     </section>
 
     <ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
-        <ng-container *ngIf="i === 2">
+        <ng-container *ngIf="i === 6">
             <header class="stats-header">
-                <h4> {{ stat.comp_type }} </h4>
+                <h4> {{ stat.parent_series_name }} </h4>
             </header>
     
             <ul class="statistics" *ngIf="stat.overall.batting_record">
@@ -75,7 +75,7 @@
         </ul>
     </section>
     
-    <ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
+    <!-- <ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
         <ng-container *ngIf="i !== 2">
             <header class="stats-header">
                 <h4> {{ stat.comp_type }} </h4>
@@ -116,5 +116,5 @@
             </ul>
 
         </ng-container>
-    </ng-container>
+    </ng-container> -->
 </div>

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

@@ -11,7 +11,7 @@ interface HighestScoreDetails {
     };
     match_id: string;
     match_date: string;
-    vs: IdentifiableData;
+    vs: any;
 }
 
 interface BattingRecord {

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

@@ -35,7 +35,7 @@
 
     </section>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
         <ion-fab-button class="share-button">
             <ion-icon name="share-social-outline"></ion-icon>
         </ion-fab-button>

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

@@ -183,6 +183,9 @@
 .share-button {
     --background: transparent;
     border-radius: 50%;
-    background: linear-gradient(to left, darken($brand-red, 20%), $brand-gold);
-    transform: translate(-10px, -10px);
+    background-color: rgba($green, 0.1);
+    --color: none;
+    color: $green;
+    border: 1px solid $green;
+    transform: translate(10px, -10px);
 }

src/app/home/home.page.scss

@@ -9,7 +9,7 @@
 
     button {
         background-color: transparent;
-        color: lighten($brand-blue, 20%);
+        color: $brand-blue;
         font-size: 1.1rem;
         font-weight: 400;
         margin-right: 5%;
@@ -19,7 +19,7 @@
         &.active {
             font-weight: 500;
             opacity: 1;
-            color: lighten($brand-blue, 20%);
+            color: $brand-blue;
 
             &::before {
                 content: '';
@@ -29,7 +29,7 @@
                 position: absolute;
                 bottom: -18px;
                 left: calc(50% - 4px);                                
-                background-color: lighten($brand-blue, 20%);
+                background-color: $brand-blue;
             }
         }
     }
@@ -120,7 +120,7 @@ ion-slides {
         transform: translateY(0px);
         box-shadow: 0px 0px 0px var(--light-grey);
         transition: border-radius 0.3s, transform 0.3s, width 0.3s, margin 0.3s, box-shadow 0.3s;
-        border-bottom: 1px solid rgba(var(--light-grey-rgb), 0.3);
+        border-bottom: 1px solid rgba(var(--light-grey-rgb), 0.1);
         z-index: 2;
     }
 
@@ -160,7 +160,6 @@ ion-slides {
         height: 50px;
         padding: 0 3%;
         position: relative;
-        box-shadow: 0px 0px 0px var(--light-grey);
         transition: border-radius 0.3s, transform 0.3s, width 0.3s, margin 0.3s, box-shadow 0.3s;
         z-index: 1;
         margin: 0 auto;
@@ -171,33 +170,18 @@ ion-slides {
             height: 100%;
 
             button {
-                background-color: #f3f3f3;
+                background-color: rgba($green, 0.1);
                 margin-right: 5px;
                 width: 30px;
                 height: 30px;
                 border-radius: 50%;
-
-                &.wide-button {
-                    width: auto;
-                    border-radius: 5px;
-                    padding: 0 10px;
-                }
-                
-
-                &.active {
-                    ion-icon, span {
-                        color: var(--brand-red);
-                    }
-                }
-
-                span {
-                    vertical-align: middle;
-                    color: var(--light-grey);
-                }
+                border: 1px solid $green;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
                 
                 ion-icon {
-                    vertical-align: middle;
-                    color: var(--brand-black);
+                    color: $green;
                     font-size: 1.2rem;
                 }
             }

src/app/league-table/league-table.page.scss

@@ -16,11 +16,11 @@
         top: 0;
         z-index: 1;
         width: 100px;
-        background-color: darken($brand-blue, 25%);
-        box-shadow: 0px 0px 10px 0px darken($brand-blue, 30%);
+        background-color: lighten($brand-blue, 40%);
         
         thead {
             background-color: rgba($green, 0.8);
+            color: white;
         }
     }
 
@@ -36,14 +36,15 @@
     }
 
     table {
-        color: white;
-        background-color: darken($brand-blue, 15%);
+        color: $brand-blue;
+        background-color: lighten($brand-blue, 50%);
         table-layout:fixed;
         height: 100%;
         
         thead {
-            background-color: rgba($green, 0.3);
-            font-size: 14px;            
+            background-color: rgba($green, 0.2);
+            font-size: 14px;
+            color: $green;
             
             th {
                 padding: 15px 0;

src/app/live/live.page.html

@@ -12,7 +12,6 @@
             </p>
         </div>
 
-
         <section class="match-card" (click)="showMatchDetails()" *ngIf="currentMatch">
             <span class="format"> {{ currentMatch.Matchdetail.Series.Name }} </span>
             <header> <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Full }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Full }} </h4> </header>
@@ -32,7 +31,7 @@
         </section>
 
         <ul class="statistical-pages">
-            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}" *ngIf="currentMatch.Innings">
+            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}" *ngIf="currentMatch && currentMatch.Innings">
                 <header>
                     <label> Scorecard </label>
                     <button (click)="showScoreCard = !showScoreCard"> 

src/app/live/live.page.scss

@@ -1,9 +1,5 @@
 @import '../colors';
 
-.content-container {
-    padding-bottom: 50px;
-}
-
 .match-card {
     width: 86%;
     margin: 0 auto;

src/app/live/live.page.ts

@@ -209,8 +209,8 @@ export interface RawMatchData {
 export class LivePage implements OnInit {
     @ViewChild('slides') slides: IonSlides;
     
-    showScoreCard: boolean = true;
-    showFixtures: boolean = true;
+    showScoreCard: boolean = false;
+    showFixtures: boolean = false;
 
     slideOpts = {
         slidesPerView: 1.5,

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

@@ -234,7 +234,6 @@
                      <label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Position }} </label>
                      <div class="details">
                         <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Name_Full }} </h4>
-                        <!-- <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '4'" src="assets/icons/captain-band.png"> -->
                         <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '4'" src="assets/icons/gloves.png">
                         <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '1'" src="assets/icons/batsman.png">
                         <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '2'" src="assets/icons/ball.png">
@@ -249,7 +248,6 @@
                     <label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Position }} </label>
                     <div class="details">
                        <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Name_Full }} </h4>
-                       <!-- <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '4'" src="assets/icons/captain-band.png"> -->
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '4'" src="assets/icons/gloves.png">
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '1'" src="assets/icons/batsman.png">
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '2'" src="assets/icons/ball.png">

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

@@ -14,7 +14,7 @@
 
     ul {
         list-style: none;
-        color: lighten($brand-blue, 20%);
+        color: darken($brand-blue, 20%);
         line-height: 1.5;
         padding: 0;
     }
@@ -22,7 +22,7 @@
     li {
         padding: 10px 5% 10px 5px;
         display: flex;
-        border-bottom: 2px solid $brand-blue;
+        border-bottom: 1px solid rgba($brand-blue, 0.2);
         justify-content: space-between;
     }
 
@@ -40,7 +40,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: darken($brand-blue, 30%);
+            background-color: $brand-blue;
             width: 30px;
             height: 30px;
             border-radius: 50%;
@@ -92,8 +92,8 @@
     box-shadow: 0px 0px 5px darken($brand-blue, 30%);
     background-color: darken($brand-blue, 30%);
     left: 0;
-    top: 10%;
-    height: 90%;
+    top: 20%;
+    height: 80%;
     overflow: auto;
     transform: translateY(50vh);
     opacity: 0;
@@ -163,6 +163,7 @@
     &.active {
         &::before {
             transform: translateX(120px);
+            left: -2px;
         }
 
         button:nth-child(3) {
@@ -177,6 +178,7 @@
     &.live {
         &::before {
             transform: translateX(80px);
+            left: 0;
             width: 40px;
         }
 
@@ -188,10 +190,10 @@
     &::before {
         content: '';
         position: absolute;
-        left: 0;
-        top: 0;
+        left: 2px;
+        top: 2px;
         width: 80px;
-        height: 100%;
+        height: calc(100% - 4px);
         border-radius: 30px;
         background-color: white;
         transition: transform 0.3s, width 0.5s;
@@ -266,7 +268,7 @@
     z-index: 1;
     width: 100%;
     padding: 20px 0;
-    background: linear-gradient(to bottom, darken($brand-blue, 20%) 50%, transparent);
+    background: linear-gradient(to bottom, white 50%, transparent);
     transition: background-color 0.3s, box-shadow 0.3s;
 }
 
@@ -441,7 +443,7 @@
         display: flex;
         width: 100%;
         align-items: center;
-        border-bottom: 1px solid rgba(white, 0.1);
+        border-bottom: 2px solid rgba($brand-blue, 0.1);
         padding: 15px 5%;
     }
 
@@ -478,7 +480,7 @@
         h4 {
             margin: 0;
             font-size: 1rem;
-            color: white;
+            color: $brand-blue;
             max-width: calc(100% - 40px);
             white-space: nowrap;
             text-overflow: ellipsis;

src/global.scss

@@ -37,8 +37,8 @@
 }
 
 ion-content {
-    --background: transparent;
-    background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);
+    --background: #f4f4f4;
+    // background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);
 }
 
 .common-heading-holder {
@@ -57,7 +57,7 @@ ion-content {
     }
 
     p {
-        color: lighten($brand-blue, 20%);
+        color: $brand-blue;
         font-size: 1.2rem;
         font-weight: 500;
     }