doneit-web/src/app/modals/profile/profile.page.html

<ion-content class=" bg-blue">

  <div class="profile-header width-100">
    <div class="div-logo">
      <div class="logo height-fit-content">
        <img class="img" src='assets/images/logo-no-bg.png' alt='logo'>
      </div>
    </div>
    <div class="btn-close d-flex" (click)="close()">
      <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
    </div>
  </div>

  <div class="profile-content">

    <div class="profile-title d-flex justify-content-center width-100">
      <ion-label >{{loggeduser.RoleDescription}}</ion-label>
    </div>

    <div class="d-flex mt-10 width-100">
      <ion-buttons slot="start" class="buttonSize" >
        <button (click)="logout()" class="btn-delete" fill="clear" style="background:#ffe0e0;" >
          <ion-label style="color:#d30a0a;">Terminar sessão</ion-label>
        </button>
        <button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff" >
          <ion-label>Editar Perfil</ion-label>
        </button>
      </ion-buttons>
    </div>
    <div class="line"></div>
  </div>
  <div class="notifications-content">
    <ion-label>2 novas notificações</ion-label>
    <ion-list>
      <div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none">
          <div class="item-content width-100">
            <div class="notification-item">
              <img class="notification-icon" slot="end" src="assets/images/icons-default-agenda.svg" >
            </div>
            <div class="approve-event-time">
              <p>08:00</p>
              <p>09:00</p>
            </div>
            <div class="approve-event-detail">
              <p>Luanda | Palácio Presidencial</p>
              <h3>Almoço de Família</h3>
            </div>
            <div class="notification-label"></div>
          </div>
        </div>
        <div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none">
          <div class="item-content width-100">
            <div class="notification-item">
              <img class="notification-icon" slot="end" src="assets/images/icons-correspondencias.svg" >
            </div>
            <div class="approve-event-time">
              <p>28-07-21</p>
              <p>09:00</p>
            </div>
            <div class="approve-event-detail">
              <h3>Relatório FMI</h3>
              <p>Luanda | Palácio Presidencial</p>
            </div>
          </div>
        </div>

    </ion-list>

  </div>

</ion-content>