Changes on home page | styles

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

@@ -1,10 +1,9 @@
 <ion-header translucent="true">
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <button (click)="logout()" class="ion-icon-logout">
-        <ion-icon name="log-out-outline">Sair</ion-icon>      
-      </button>
-    </ion-buttons>
+      <ion-buttons slot="start" class="logout-button"  (click)="logout()">
+        <ion-icon slot="start" name="log-out-outline"></ion-icon>
+        <ion-label>Sair</ion-label>
+      </ion-buttons> 
   <!-- customized TOGGLE button -->
   <label class="switch"><input type="checkbox" id="togBtn">
     <div class="slider round">
@@ -13,7 +12,7 @@
 </label>
 </ion-toolbar>
   <ion-toolbar>
-    <ion-title>
+    <ion-label>
       <ion-item class="ion-text-header-top" lines="none">
         <div class="div-logo">
           <img src='assets/images/logo.png' alt='logo'>
@@ -32,7 +31,7 @@
           <p class="p-small">{{customDate}}</p>
         </ion-label>
       </ion-item>
-    </ion-title>
+    </ion-label>
   </ion-toolbar> 
 </ion-header>
 

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

@@ -1,7 +1,10 @@
 /* HEADER */
+ion-toolbar{
+  --background: white;
+}
 .ion-text-header-top{
     text-align: center;
-    padding-top: 20px;
+    padding-top: 15px;
   }
   .div-logo{
     width: 98px;
@@ -17,6 +20,8 @@
   .header-medium{
     font-size: 16pt;
     font-family: roboto;
+    background: transparent;
+    margin-right: 5px;
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
@@ -30,6 +35,7 @@
     font-size: 12pt;
     margin-top: 25px;
     color:#000;
+    margin-right: 5px;
   }
   
   /* CONTENT */
@@ -153,7 +159,7 @@
       width: 90px;
       height: 34px;
       float: right;
-      margin-right: 37px;
+      margin:20px 20px 0 0;
     }
     
     .switch input {display:none;}
@@ -244,3 +250,8 @@
       border-radius: 50%;
       border: 1px solid #e16817;
     }
+
+    .logout-button{
+      padding: 15px;
+      color:red;
+    }