Override facebook login if opening on desktop, share news bug fixes, share button in details page made opaque

src/app/components/facebook-login/facebook-login.component.html

@@ -1,20 +1,25 @@
-<section class="social-login" [ngClass]="{'active' : !user }">
-    <section class="login-box">
-        <button (click)="login()"> Login with <ion-icon name="logo-facebook"></ion-icon> </button>
+<ng-container *ngIf="!hideAll">
+    <section class="social-login" [ngClass]="{'active' : !user }">
+        <section class="login-box">
+            <button (click)="login()"> Login with <ion-icon name="logo-facebook"></ion-icon> </button>        
+        </section>
     </section>
-</section>
-
-
-<section class="social-login" [ngClass]="{'active' : showLogout && user }">
-    <section class="login-box">
-        <button (click)="logout()"> 
-            Logout from "{{ user.name }}"?
-            <ion-icon name="logo-facebook"></ion-icon>
-        </button>
+    
+    
+    <section class="social-login" [ngClass]="{'active' : showLogout && user }">
+        <section class="login-box">
+            <button (click)="logout()"> 
+                Logout from "{{ user.name }}"?
+                <ion-icon name="logo-facebook"></ion-icon>
+            </button>
+            <button (click)="showLogout = false">
+                <ion-icon name="close-circle-outline"></ion-icon>
+            </button>
+        </section>
     </section>
-</section>
-
-<section class="profile" *ngIf="user" (click)="showLogout = true">
-    <img [src]="user.picture.data.url" alt="profile-image">
-    <p> {{ user.name }} </p>
-</section>
+    
+    <section class="profile" *ngIf="user" (click)="showLogout = true">
+        <img [src]="user.picture.data.url" alt="profile-image">
+        <p> {{ user.name }} </p>
+    </section>    
+</ng-container>

src/app/components/facebook-login/facebook-login.component.scss

@@ -27,6 +27,9 @@
         border-top-right-radius: 40px;
         background-color: darken($brand-blue, 10%);
         padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
 
         button {
             display: flex;
@@ -39,6 +42,7 @@
             background-color: lighten($light-grey, 45%);
             width: 100%;
             border-radius: 30px;
+            flex-grow: 1;
 
             ion-icon {
                 color: darken($brand-blue, 10%);
@@ -46,6 +50,20 @@
                 width: 30px;
                 height: 30px;
             }
+
+            &:nth-child(2) {
+                margin-left: 20px;
+                background-color: transparent;
+                width: 60px;
+                height: 60px;
+
+                ion-icon {
+                    color: white;
+                    margin: 0;
+                    width: 60px;
+                    height: 60px;
+                }
+            }
         }
     }
 }

src/app/components/facebook-login/facebook-login.component.ts

@@ -19,6 +19,8 @@ export class FacebookLoginComponent implements OnInit {
     user = null;
     token = null;
 
+    hideAll: boolean = false;
+
     showLogout: boolean = false;
 
     constructor(
@@ -32,7 +34,7 @@ export class FacebookLoginComponent implements OnInit {
             this.token = localStorage.getItem('FBToken');
         } else {
             this.setupFbLogin();
-        }        
+        }
     }
 
     async setupFbLogin() {
@@ -40,6 +42,8 @@ export class FacebookLoginComponent implements OnInit {
             // Use the native implementation inside a real app!
             const { FacebookLogin } = Plugins;
             this.fbLogin = FacebookLogin;
+        } else {
+            this.hideAll = true;
         }
     }
 

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

@@ -183,9 +183,7 @@
 .share-button {
     --background: transparent;
     border-radius: 50%;
-    background-color: rgba($green, 0.1);
-    --color: none;
-    color: $green;
-    border: 1px solid $green;
+    background-color: $green;
+    --color: white;
     transform: translate(10px, -10px);
 }

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

@@ -36,7 +36,7 @@ export class HomeDetailsPage implements OnInit {
     }
 
     share() {
-        this.socialSharing.share(this.newsDetails.title, '', IMAGE_BASE_URL + this.newsDetails.image_path + this.newsDetails.image_file_name, this.newsDetails.hls_url ? this.newsDetails.hls_url : '');
+        this.socialSharing.share(this.newsDetails.title, '', this.newsDetails.images ? IMAGE_BASE_URL + this.newsDetails.images[0].data.imagePath + this.newsDetails.images[0].data.imageName : IMAGE_BASE_URL + this.newsDetails.image_path + this.newsDetails.image_file_name, this.newsDetails.hls_url ? this.newsDetails.hls_url : '');
     }
 
     ngOnInit() {

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

@@ -75,11 +75,11 @@ export class MatchDetailsPage implements OnInit {
 
     shareMatchDetails() {
         console.log("Sharing match details...");
-        let message: string;
+        let message: string = '';
 
         if (this.currentMatch.Innings) {
             this.currentMatch.Innings.forEach(inning => {
-                message = this.currentMatch.Teams[inning.Battingteam].Name_Short + ' ' + inning.Total + '/' + inning.Wickets + '(' + inning.Overs + ')' + '\n';
+                message += this.currentMatch.Teams[inning.Battingteam].Name_Short + ' ' + inning.Total + '/' + inning.Wickets + '(' + inning.Overs + ')' + '\n';
             });
         } else {
             message = 'Match to start on, ' + this.currentMatch.Matchdetail.Match.Date + ' @' + this.currentMatch.Matchdetail.Match.Time + '\n' + this.currentMatch.Teams[this.currentMatch.Matchdetail.Team_Home].Name_Short + ' v/s ' + this.currentMatch.Teams[this.currentMatch.Matchdetail.Team_Away].Name_Short;