changes on style for MD

src/app/pages/events/events.page.html

@@ -1,25 +1,29 @@
 <ion-header translucent="true">
-  <ion-toolbar>
-    <ion-item class="ion-text-header-top" lines="none">
-      <div class="div-logo">
-        <img src='assets/images/logo.png' alt='logo'>
-      </div>
-      <ion-label>
-        <h6 class="header-xsmall">Presidente da República</h6>
-        <h2 class="header-large">GABINETE DIGITAL</h2>
-      </ion-label>
-    </ion-item>
-  <ion-buttons slot="end">
-<div class="toggleBox">
-  <div (click)="changeProfile()" class="toggle">
-    <input type="checkbox">
-    <label for="" class="onbtn">PR</label>
-    <label for="" class="ofbtn">MDGPR</label>
-  </div> 
-</div>
-</ion-buttons>
+  <ion-toolbar class="bg-blue">
+    <div class="div-top-header">
+    <div class="div-search">
+      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile">
+      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
 </ion-toolbar>
-  <ion-toolbar>
+<ion-toolbar class="bg-blue">
+<ion-buttons slot="end">
+  <div class="toggleBox">
+    <div (click)="changeProfile()" class="toggle">
+      <input type="checkbox">
+      <label for="" class="onbtn">PR</label>
+      <label for="" class="ofbtn">MDGPR</label>
+    </div> 
+  </div>
+  </ion-buttons>
+</ion-toolbar>
+  <ion-toolbar class="bg-blue">
     <ion-label>
       <ion-item class="ion-text-right" lines="none">
         <ion-label class="ion-text-wrap">
@@ -33,7 +37,7 @@
     </ion-label>
   </ion-toolbar>
   <!-- TABS -->
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="Combinada">
         Combinada
@@ -48,7 +52,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content >
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
   <ion-label>
     <p class="p-small">{{customDate}}</p>

src/app/pages/events/events.page.scss

@@ -1,27 +1,64 @@
 /* HEADER */
+.bg-blue{
+  --background:#0782c9;
+  background:#0782c9;
+  --background-color:#0782c9;
+  background-color:#0782c9;
+  color: #ffffff;
+  --color: #ffffff;
+}
 ion-toolbar{
   --background: white;
 }
 .ion-text-header-top{
   width: 100%;
-
+  --background: transparent;
     text-align: center;
     padding-top: 15px;
+    color: #ffffff;
 
     /* border: 1px solid red; */
   }
+  .div-top-header{
+    width: 400px;
+    height: 50px;
+    margin: 6px auto;
+    background-color: #0782c9;
+    overflow: auto;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
   .div-logo{
-    width: 60px;
-    /* border: 1px solid red; */
-    margin-right: 20px;
+    background: transparent;
+    width: 150px;
+    margin: 2.5px 0 2.5px 71px;
+    float: left;
   }
   .div-logo img{
     width: 100%;
   }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .ion-text-header-top p{
+    --background: transparent;
+    color: #ffffff;
+  }
+  .ion-text-right{
+    --background: transparent;
+    color: #ffffff;
+  }
   .header-large{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12.5pt;
     /* font-weight: 600; */
+    background: transparent;
+    color: #ffffff;
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
@@ -30,6 +67,7 @@ ion-toolbar{
     padding-bottom: 3.5px;
     margin-bottom: 3.5px;
     border-bottom: 1px solid #ccc;
+    background: transparent;
   }
   .header-medium{
     font-size: 12pt;
@@ -46,6 +84,7 @@ ion-toolbar{
     color:#000;
     margin-right: 25px !important;
     text-align: right;
+    /* color: #ffffff; */
   }
   
   /* CONTENT */