Added common header styles, fanzone page changes according to delivery of phase 1

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>
 

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;

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>

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;

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>

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) {

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;