From dd82745e8284d53dcbad2a5c19b4260bfb83f644 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Fri, 2 Apr 2021 15:51:17 +0530
Subject: [PATCH] Added common header styles, fanzone page changes according to
 delivery of phase 1

---
 src/app/fan-zone/fan-zone.page.html | 13 ++++++++---
 src/app/fan-zone/fan-zone.page.scss | 36 +++++++++--------------------
 src/app/live/live.page.html         |  2 +-
 src/app/live/live.page.scss         | 22 ------------------
 src/app/tabs/tabs.page.html         |  2 +-
 src/app/tabs/tabs.page.scss         |  2 +-
 src/global.scss                     | 22 ++++++++++++++++++
 7 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/src/app/fan-zone/fan-zone.page.html b/src/app/fan-zone/fan-zone.page.html
index 07e4693..355c9ce 100644
--- a/src/app/fan-zone/fan-zone.page.html
+++ b/src/app/fan-zone/fan-zone.page.html
@@ -15,7 +15,7 @@
             <p> {{ googleUserData.name }} </p>
         </section>
 
-        <div class="heading-holder">
+        <div class="common-heading-holder">
             <h2 class="main-header">
                 #FanZone
             </h2>
@@ -45,7 +45,14 @@
                     <label> Fan Cam </label>
                 </div>
             </li>
-            <li [routerLink]="['/collections']">
+            <li (click)="presentCamModal()">
+                <div>
+                    <ion-icon name="bookmarks-outline"></ion-icon>
+
+                    <label> Bookmarks </label>
+                </div>
+            </li>
+            <!-- <li [routerLink]="['/collections']">
                 <div>
                     <ion-icon name="trophy-outline"></ion-icon>
 
@@ -81,7 +88,7 @@
 
                     <label> Polls </label>
                 </div>
-            </li>
+            </li> -->
         </ul>
     </div>
 
diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss
index cdae5b6..04e8aba 100644
--- a/src/app/fan-zone/fan-zone.page.scss
+++ b/src/app/fan-zone/fan-zone.page.scss
@@ -4,25 +4,8 @@
     padding-bottom: 50px;
 }
 
-.heading-holder {
-    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%;
-    }
-
-    p {
-        color: $blue-grey;
-        font-size: 1.2rem;
-        font-weight: 500;
-    }
+.common-heading-holder {
+    margin-bottom: 2rem;
 }
 
 .fan-feature-list {
@@ -36,9 +19,9 @@
     
     li {
         border-radius: 7px;
-        background-color: rgba(white, 0.1);
-        box-shadow: 5px 5px 10px -5px darken($brand-blue, 5%);
-        color: $blue-grey;
+        background-color: darken($brand-blue, 20%);
+        box-shadow: 5px 5px 10px -5px darken($brand-blue, 30%);
+        color: $brand-gold;
         width: 25vw;
         height: 25vw;
         display: flex;
@@ -54,12 +37,14 @@
         display: block;
         font-size: 0.9rem;
         margin-top: 10px;
+        opacity: 0.8;
     }
 
     ion-icon {
         margin: 0 auto;
         display: block;
         font-size: 1.8rem;
+        opacity: 0.8;
     }
 }
 
@@ -71,6 +56,8 @@
     white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
+    
+    display: none;
 
     li {
         margin-right: 15px;
@@ -266,7 +253,7 @@
 
 .social-login {
     width: 100%;
-    height: calc(100vh - 55px);
+    height: calc(100vh - 50px);
     position: fixed;
     left: 0;
     top: 0;
@@ -289,7 +276,7 @@
         box-shadow: 0px 0px 5px $brand-blue;
         border-top-left-radius: 40px;
         border-top-right-radius: 40px;
-        background-color: white;
+        background-color: darken($brand-blue, 10%);
         padding: 20px;
 
         button {
@@ -303,7 +290,6 @@
             background-color: lighten($light-grey, 45%);
             width: 100%;
             border-radius: 30px;
-            box-shadow: 2px 2px 5px $blue-grey;
 
             img {
                 margin-left: 10px;
diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html
index 19ede6c..672f2e3 100644
--- a/src/app/live/live.page.html
+++ b/src/app/live/live.page.html
@@ -2,7 +2,7 @@
 
     <div class="content-container">
 
-        <div class="heading-holder">
+        <div class="common-heading-holder">
             <h2 class="main-header">
                 #Live
             </h2>
diff --git a/src/app/live/live.page.scss b/src/app/live/live.page.scss
index 43372d8..b6b97de 100644
--- a/src/app/live/live.page.scss
+++ b/src/app/live/live.page.scss
@@ -4,28 +4,6 @@
     padding-bottom: 50px;
 }
 
-.heading-holder {
-    margin-bottom: 2.7rem;
-    padding: 0px 7%;
-
-    .main-header {
-        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;
-        font-size: 2.3rem;
-        font-weight: 700;
-        letter-spacing: 1px;    
-        margin: 5% 0%;
-    }
-
-    p {
-        color: lighten($brand-blue, 20%);
-        font-size: 1.2rem;
-        font-weight: 500;
-    }
-}
-
 .match-card {
     width: 86%;
     margin: 0 auto;
diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html
index 7d14890..b34b879 100644
--- a/src/app/tabs/tabs.page.html
+++ b/src/app/tabs/tabs.page.html
@@ -11,7 +11,7 @@
             <ion-icon name="play-circle"></ion-icon>
         </ion-tab-button>
 
-        <ion-tab-button tab="fan-zone" disabled="true">
+        <ion-tab-button tab="fan-zone">
             <ion-icon name="game-controller-outline"></ion-icon>
             <ion-icon name="game-controller"></ion-icon>
         </ion-tab-button>
diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss
index 23c467f..c01e5bf 100644
--- a/src/app/tabs/tabs.page.scss
+++ b/src/app/tabs/tabs.page.scss
@@ -25,7 +25,7 @@ ion-tab-bar {
             ion-icon {
                 &:nth-child(2) {
                     display: block;
-                    color: $brand-gold;
+                    color: lighten($green, 10%);
                 }
     
                 &:nth-child(1) {
diff --git a/src/global.scss b/src/global.scss
index 4e1d4f0..c0fbed8 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -41,6 +41,28 @@ ion-content {
     background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);
 }
 
+.common-heading-holder {
+    margin-bottom: 2.7rem;
+    padding: 0px 7%;
+
+    .main-header {
+        background: linear-gradient(to right, darken($brand-red, 10%), lighten($brand-red, 15%) 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%;
+    }
+
+    p {
+        color: lighten($brand-blue, 20%);
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+}
+
 .header-with-action-buttons {
     display: flex;
     justify-content: space-between;