From d31394ad39a43a113dd30627cfbbeb53e49ef64e Mon Sep 17 00:00:00 2001
From: Lorito Tiago <58330997+LoritoTiago@users.noreply.github.com>
Date: Wed, 26 Jul 2023 16:48:27 +0100
Subject: [PATCH] fix

---
 ios/App/Podfile                               |   1 +
 .../edit-profile/edit-profile.page.html       |  45 +-
 src/app/modals/profile/profile.page.html      |  73 +--
 .../group-messages/group-messages.page.scss   | 497 +++++++++---------
 .../pages/chat/messages/messages.page.scss    | 491 ++++++++---------
 .../chat-popover/chat-popover.page.html       |  19 +-
 src/style/ios.scss                            |  44 +-
 7 files changed, 626 insertions(+), 544 deletions(-)

diff --git a/ios/App/Podfile b/ios/App/Podfile
index f7816bd33..b013e2d80 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -20,6 +20,7 @@ def capacitor_pods
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorLocalNotifications', :path => '../../node_modules/@capacitor/local-notifications'
   pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorPushNotifications', :path => '../../node_modules/@capacitor/push-notifications'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
   pod 'SentryCapacitor', :path => '../../node_modules/@sentry/capacitor'
diff --git a/src/app/modals/profile/edit-profile/edit-profile.page.html b/src/app/modals/profile/edit-profile/edit-profile.page.html
index c5e2211e9..1961636eb 100644
--- a/src/app/modals/profile/edit-profile/edit-profile.page.html
+++ b/src/app/modals/profile/edit-profile/edit-profile.page.html
@@ -1,13 +1,15 @@
 <ion-content class=" bg-blue">
-  <div class="main-content width-100 overflow-y-auto height-100">
+  <div class="main-content width-100 overflow-y-auto height-100 header-fix">
     <div class="profile-header width-100">
       <div class="div-logo  width-40">
         <div class="logo-icon">
           <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
           <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
-          <img *ngIf="ThemeService.currentTheme == 'doneIt' " src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'>
+          <img *ngIf="ThemeService.currentTheme == 'doneIt' "
+            src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'>
         </div>
-        <div *ngIf="ThemeService.currentTheme == 'gov'" class="logo-description d-flex align-center justify-content-center">
+        <div *ngIf="ThemeService.currentTheme == 'gov'"
+          class="logo-description d-flex align-center justify-content-center">
           <div class="logo-description-content">
             <!-- <p class="logo-description-text">Calendário Partilhado</p> -->
             <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
@@ -15,27 +17,33 @@
             <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
           </div>
         </div>
-        <div *ngIf="ThemeService.currentTheme == 'default'" class="logo-description d-flex align-center justify-content-center">
+        <div *ngIf="ThemeService.currentTheme == 'default'"
+          class="logo-description d-flex align-center justify-content-center">
           <div class="logo-description-content">
-            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> --> 
+            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
             <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
             <div class="add-line-white"></div>
             <p class="logo-description-text tp-5 color-white">GABINETE DIGITAL</p>
           </div>
         </div>
 
-        <div *ngIf="ThemeService.currentTheme == 'doneIt'" class="logo-description d-flex align-center justify-content-center">
+        <div *ngIf="ThemeService.currentTheme == 'doneIt'"
+          class="logo-description d-flex align-center justify-content-center">
           <div class="logo-description-content">
-            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> --> 
-            <p class="logo-description-text tp-5 color-white" style="color: transparent;">{{ environment.logoLabel }}</p>
+            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
+            <p class="logo-description-text tp-5 color-white" style="color: transparent;">{{ environment.logoLabel }}
+            </p>
             <div class="add-line-white"></div>
           </div>
         </div>
       </div>
       <div class="btn-close d-flex cursor-pointer" (click)="close()">
-        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
-        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
+          src="assets/images/icons-search-close.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
+          src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
+          src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
       </div>
     </div>
     <div class="profile-content overflow-y-auto width-100 height-100">
@@ -51,9 +59,12 @@
 
       <div>
         <div class="d-flex align-center">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic" src="assets/images/icons-default-profile.svg"></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic" src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic"
+            src="assets/images/icons-default-profile.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic"
+            src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic"
+            src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon>
         </div>
       </div>
 
@@ -94,8 +105,8 @@
               <img style="width: 40px;" src="assets/images/theme/gov/governoangola_A.png">
             </div>
 
-            <div class="btn-close d-flex cursor-pointer pr-10 pl-10" (click)="changeTheme('default')" >
-              <img style="width: 40px;" src="assets/images/logo-removebg-preview.png"/>
+            <div class="btn-close d-flex cursor-pointer pr-10 pl-10" (click)="changeTheme('default')">
+              <img style="width: 40px;" src="assets/images/logo-removebg-preview.png" />
             </div>
 
             <!-- <div class="btn-close d-flex cursor-pointer pr-10" (click)="changeTheme('doneIt')" >
@@ -144,4 +155,4 @@
     </ion-buttons>
   </div>
 
-</ion-footer>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/modals/profile/profile.page.html b/src/app/modals/profile/profile.page.html
index c45fcbaba..4f026b5a7 100644
--- a/src/app/modals/profile/profile.page.html
+++ b/src/app/modals/profile/profile.page.html
@@ -1,19 +1,22 @@
-<ion-header class=" bg-blue ion-no-border">
+<ion-header class=" bg-blue ion-no-border header-fix">
   <div class="profile-header width-100">
     <div class="div-logo d-md-none width-40">
       <div class="logo-icon" *ngIf="hideImage">
         <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
         <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
-        <img *ngIf="ThemeService.currentTheme == 'doneIt' " src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A.png' alt='logo'>
+        <img *ngIf="ThemeService.currentTheme == 'doneIt' "
+          src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A.png' alt='logo'>
       </div>
-      <div *ngIf="ThemeService.currentTheme == 'gov'" class="logo-description d-flex align-center justify-content-center">
+      <div *ngIf="ThemeService.currentTheme == 'gov'"
+        class="logo-description d-flex align-center justify-content-center">
         <div class="logo-description-content">
           <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
           <div class="add-line"></div>
           <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
         </div>
       </div>
-      <div *ngIf="ThemeService.currentTheme == 'default'" class="logo-description d-flex align-center justify-content-center">
+      <div *ngIf="ThemeService.currentTheme == 'default'"
+        class="logo-description d-flex align-center justify-content-center">
         <div class="logo-description-content">
           <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
           <div class="add-line-white"></div>
@@ -22,9 +25,12 @@
       </div>
     </div>
     <div class="btn-close d-flex cursor-pointer" *ngIf="hideImage" (click)="close()">
-      <ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
-      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
-      <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
+      <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
+        src="assets/images/icons-search-close.svg"></ion-icon>
+      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
+        src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
+      <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
+        src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
     </div>
   </div>
 </ion-header>
@@ -32,18 +38,18 @@
   <div class="profile-content">
 
     <div class="profile-name d-flex justify-content-center width-100">
-      <ion-label >{{SessionStore.user.FullName}}</ion-label>
+      <ion-label>{{SessionStore.user.FullName}}</ion-label>
     </div>
     <div class="profile-title d-flex justify-content-center width-100">
-      <ion-label *ngIf="SessionStore.user.RoleDescription" >{{SessionStore.user.RoleDescription}}</ion-label>
+      <ion-label *ngIf="SessionStore.user.RoleDescription">{{SessionStore.user.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" >
+      <ion-buttons slot="start" class="buttonSize">
+        <button (click)="logout()" class="btn-delete" fill="clear">
           <ion-label style="color:#d30a0a;">Terminar sessão</ion-label>
         </button>
-        <button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff" >
+        <button (click)="editProfile()" class="btn-cancel" fill="clear" color="#fff">
           <ion-label>Editar Perfil</ion-label>
         </button>
       </ion-buttons>
@@ -60,31 +66,34 @@
 
       <ion-list>
         <div class="item cursor-pointer ion-no-padding ion-no-margin" lines="none"
-        *ngFor = "let item of notificationdata; let i = index"
-        (click)="notificatinsRoutes(item.index,item.Service,item.Object,item.IdObject,item.FolderId)"
-        >
-            <div class="item-conten-{{item.Service}}-{{item.TypeAgenda}}-{{item.Role}}">
-              <div class="notification-item">
-                <img class="notification-icon" slot="end" *ngIf = "item.Service == 'agenda'"  src="assets/images/icons-default-agenda.svg" >
-                <img class="notification-icon" slot="end" *ngIf = "item.Service == 'gabinete-digital'"  src="assets/images/icons-correspondencias.svg" >
-                <img class="notification-icon" slot="end" *ngIf = "item.Service == 'accoes'"  src="assets/images/icons-nav-accoes-active.svg" >
-                <img class="notification-icon" slot="end" *ngIf = "item.Service == 'chat'"  src="assets/images/icons-nav-agenda-active.svg" >
-              </div>
-              <div class="approve-event-time">
-                <p *ngIf = "item.Service == 'agenda'">{{item.dateInit}}</p>
-                <p *ngIf = "item.Service == 'agenda'">{{item.dateEnd}}</p>
-              </div>
-              <div class="approve-event-detail">
-                <p *ngIf = "item.Service == 'agenda'">{{item.Location}}</p>
-                <h3 id="profile-title">{{item.title}}</h3>
-                <p id="profile-title" *ngIf = "item.Service != 'agenda'">{{item.body}}</p>
-              </div>
+          *ngFor="let item of notificationdata; let i = index"
+          (click)="notificatinsRoutes(item.index,item.Service,item.Object,item.IdObject,item.FolderId)">
+          <div class="item-conten-{{item.Service}}-{{item.TypeAgenda}}-{{item.Role}}">
+            <div class="notification-item">
+              <img class="notification-icon" slot="end" *ngIf="item.Service == 'agenda'"
+                src="assets/images/icons-default-agenda.svg">
+              <img class="notification-icon" slot="end" *ngIf="item.Service == 'gabinete-digital'"
+                src="assets/images/icons-correspondencias.svg">
+              <img class="notification-icon" slot="end" *ngIf="item.Service == 'accoes'"
+                src="assets/images/icons-nav-accoes-active.svg">
+              <img class="notification-icon" slot="end" *ngIf="item.Service == 'chat'"
+                src="assets/images/icons-nav-agenda-active.svg">
+            </div>
+            <div class="approve-event-time">
+              <p *ngIf="item.Service == 'agenda'">{{item.dateInit}}</p>
+              <p *ngIf="item.Service == 'agenda'">{{item.dateEnd}}</p>
+            </div>
+            <div class="approve-event-detail">
+              <p *ngIf="item.Service == 'agenda'">{{item.Location}}</p>
+              <h3 id="profile-title">{{item.title}}</h3>
+              <p id="profile-title" *ngIf="item.Service != 'agenda'">{{item.body}}</p>
             </div>
           </div>
+        </div>
       </ion-list>
 
     </div>
 
   </div>
 
-</ion-content>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss
index d1f31a8cd..245e9b100 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -1,152 +1,163 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
 
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
+.header-toolbar {
+  --background: transparent;
+  --opacity: 1;
 
-        .header-top{
-          overflow: auto;
-          padding: 0 !important;
-          background: #fff;
+  .main-header {
+    width: 100%;
+    /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 30px 20px 0px 20px;
+    color: #000;
+    transform: translate3d(0, 1px, 0);
 
-          .left{
-            width: fit-content;
-            float: left;
-            //font-size: rem(35);
-            overflow: hidden;
-          }
+    .header-top {
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
 
-          .middle-container{
-            display: flex;
-            overflow: auto;
-            height: auto;
-            width:calc(100% - 47px);
-            float: left;
+      .left {
+        width: fit-content;
+        float: left;
+        //font-size: rem(35);
+        overflow: hidden;
+      }
 
-            /* white-space: nowrap;
+      .middle-container {
+        display: flex;
+        overflow: auto;
+        height: auto;
+        width: calc(100% - 47px);
+        float: left;
+
+        /* white-space: nowrap;
               overflow: hidden !important;
               text-overflow: ellipsis !important; */
 
-            .middle{
-              width: 100%;
-              padding: 0!important;
-              margin: 0 0 0 10px;
-              font-size: rem(25);
-            }
-          }
-          .middle-container-options{
-            padding: 0!important;
-            float: left;
-            width: calc(100% - 67px);
-            text-align: right;
-
-            .middle-container-options-icons{
-              color: #0782c9;
-              font-size: rem(23);
-            }
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: rem(25);
-            color: #0782c9;
-          }
-          .header-top-btn{
-            background: transparent;
-            font-size: rem(25) !important;
-            font-weight: 100 !important;
-            /* color: #0782c9; */
-            color: #42b9fe;
-            padding: 0 5px 0 5px;
-          }
+        .middle {
+          width: 100%;
+          padding: 0 !important;
+          margin: 0 0 0 10px;
+          font-size: rem(25);
         }
-        .header-bottom{
-          padding-left: 10px;
-          overflow: auto;
-          margin: 0 auto;
+      }
 
-          .header-bottom-icon{
-            width: rem(30);
-            font-size: rem(25);
-            float: left;
-            padding: 2px;
+      .middle-container-options {
+        padding: 0 !important;
+        float: left;
+        width: calc(100% - 67px);
+        text-align: right;
 
-          }
-          .header-bottom-contacts{
-            width: calc(100% - 40px);
-            font-size: rem(15);
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
-            padding: 5px;
-            margin: 1px;
-
-            .contacts-list{
-              white-space: nowrap;
-              overflow: hidden !important;
-              text-overflow: ellipsis !important;
-            }
-          }
+        .middle-container-options-icons {
+          color: #0782c9;
+          font-size: rem(23);
         }
+      }
 
-        .div-icon{
-          width: rem(40);
-          float: right;
-          font-size: rem(35);
-          overflow: auto;
-          padding: 1px;
-        }
-        .div-icon ion-icon{
-          float: right;
-          padding-left: 20px;
-        }
+      .right {
+        padding: 0 !important;
+        float: right;
+        font-size: rem(25);
+        color: #0782c9;
+      }
+
+      .header-top-btn {
+        background: transparent;
+        font-size: rem(25) !important;
+        font-weight: 100 !important;
+        /* color: #0782c9; */
+        color: #42b9fe;
+        padding: 0 5px 0 5px;
+      }
     }
- }
- ion-content{
-   .welcome-text{
+
+    .header-bottom {
+      padding-left: 10px;
+      overflow: auto;
+      margin: 0 auto;
+
+      .header-bottom-icon {
+        width: rem(30);
+        font-size: rem(25);
+        float: left;
+        padding: 2px;
+
+      }
+
+      .header-bottom-contacts {
+        width: calc(100% - 40px);
+        font-size: rem(15);
+        color: #797979;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        float: left;
+        padding: 5px;
+        margin: 1px;
+
+        .contacts-list {
+          white-space: nowrap;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+        }
+      }
+    }
+
+    .div-icon {
+      width: rem(40);
+      float: right;
+      font-size: rem(35);
+      overflow: auto;
+      padding: 1px;
+    }
+
+    .div-icon ion-icon {
+      float: right;
+      padding-left: 20px;
+    }
+  }
+}
+
+ion-content {
+  .welcome-text {
     /* width: 322px; */
-     width: em(422px);
-     background: #ebebeb;
-     text-align: center;
-     font-size: rem(13);
-     color: #797979;
-     padding: 10px;
-     margin: 0 auto;
-     line-height: 1.2rem;
-     margin: 20px 39px 25px;
-     border-radius: 8px;
-   }
-   .info-text{
-     display: flex;
-     width: fit-content;
-     height: auto;
-     background: var(--chat-alert-msg-color);
-     text-align: center;
-     font-size: rem(13);
-     color: #262420;
-     padding: 10px;
-     margin: 10px auto;
-     line-height: 1.2rem;
-     border-radius: 8px;
-   }
-   .info-text-leave{
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     width: fit-content;
+    width: em(422px);
+    background: #ebebeb;
+    text-align: center;
+    font-size: rem(13);
+    color: #797979;
+    padding: 10px;
+    margin: 0 auto;
+    line-height: 1.2rem;
+    margin: 20px 39px 25px;
+    border-radius: 8px;
+  }
+
+  .info-text {
+    display: flex;
+    width: fit-content;
+    height: auto;
+    background: var(--chat-alert-msg-color);
+    text-align: center;
+    font-size: rem(13);
+    color: #262420;
+    padding: 10px;
+    margin: 10px auto;
+    line-height: 1.2rem;
+    border-radius: 8px;
+  }
+
+  .info-text-leave {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
     padding: 10px;
     background: #e0e9ee;
     border-radius: 8px;
@@ -155,12 +166,13 @@
     font-size: rem(13) !important;
     /* margin: 15px 0px 15px 0px; */
 
-    .info-text-leave ion-label{
+    .info-text-leave ion-label {
       font-size: rem(13) !important;
       line-height: 1.2rem;
     }
-   }
-   .messages{
+  }
+
+  .messages {
     font-size: rem(13);
     font-family: Roboto;
     overflow: auto;
@@ -176,66 +188,74 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
-    .messages-list-item-wrapper{
+    .messages-list-item-wrapper {
       overflow: hidden;
     }
-    .messages-list-item-wrapper-active{
+
+    .messages-list-item-wrapper-active {
       background: #e6f6ff75 !important;
     }
 
-    .message-container{
+    .message-container {
       //border: 1px solid red;
     }
 
 
-    .incoming-true, .incoming-false{
+    .incoming-true,
+    .incoming-false {
       width: 305px;
-       padding: 15px 20px;
-       border-radius: 10px;
+      padding: 15px 20px;
+      border-radius: 10px;
     }
 
-    .incoming-true{
+    .incoming-true {
       margin: 10px 75px 10px 20px;
-       background: #ebebeb;
-       float: left;
-       }
-     }
-     .incoming-false{
-      margin: 10px 20px 10px 75px;
-       background:  var(--chat-incoming-msg-color);
-       float: right;
-     }
-     .title{
-      color: var(--title-text-color);
+      background: #ebebeb;
+      float: left;
+    }
+  }
 
-      font-weight: bold;
-      margin-bottom: 5px;
+  .incoming-false {
+    margin: 10px 20px 10px 75px;
+    background: var(--chat-incoming-msg-color);
+    float: right;
+  }
 
-      .time{
-        color: #797979;
-        text-align: right;
-        float: right;
-      }
-   }
+  .title {
+    color: var(--title-text-color);
 
-   .online{
-    color:#99e47b !important;
-    }
-  .offline{
-    color:#cbced1 !important;
-    }
-  .away{
-    color:#ffd21f !important;
-    }
-    .invisible{
-      color:#cbced1 !important;
-    }
-    .busy{
-      color:#f5455c !important;
-    }
- }
+    font-weight: bold;
+    margin-bottom: 5px;
 
- .info-meeting{
+    .time {
+      color: #797979;
+      text-align: right;
+      float: right;
+    }
+  }
+
+  .online {
+    color: #99e47b !important;
+  }
+
+  .offline {
+    color: #cbced1 !important;
+  }
+
+  .away {
+    color: #ffd21f !important;
+  }
+
+  .invisible {
+    color: #cbced1 !important;
+  }
+
+  .busy {
+    color: #f5455c !important;
+  }
+}
+
+.info-meeting {
   /* width: 322px; */
   width: em(422);
   background: var(--chat-alert-msg-color);
@@ -248,99 +268,104 @@
   /* margin: 15px 0px 15px 0px; */
   border-radius: 8px;
 
-  .info-meeting-small{
+  .info-meeting-small {
     font-size: rem(10);
     font-style: italic;
   }
-  .info-meeting-medium{
+
+  .info-meeting-medium {
     font-size: rem(12);
   }
-  .info-meeting-normal{
+
+  .info-meeting-normal {
     color: #0782c9;
     font-weight: 700;
     text-decoration: underline;
   }
-  .info-meeting-normal:hover{
+
+  .info-meeting-normal:hover {
     text-decoration: underline;
     color: #0782c9;
   }
- }
+}
 
- ion-footer{
+ion-footer {
   padding-top: 7.5px;
-  padding-bottom: 7.5px;
- .container{
-   justify-content: center;
-   justify-content: space-evenly;
-   align-items: center;
+  padding-bottom: 20px;
 
-   .message-box{
-     margin: 0 5px 0 5px;
-   }
+  .container {
+    justify-content: center;
+    justify-content: space-evenly;
+    align-items: center;
 
- }
+    .message-box {
+      margin: 0 5px 0 5px;
+    }
 
- .chat-icon-options{
-   display:block !important;
-   font-size: rem(35);
-   float: right !important;
-   margin-top: 5px;
- }
+  }
 
- .chat-icon-send{
-   font-size: rem(40);
-   margin: 0 auto;
-   margin-top: 4px;
- }
+  .chat-icon-options {
+    display: block !important;
+    font-size: rem(35);
+    float: right !important;
+    margin-top: 5px;
+  }
 
-  .type-message{
-   display: flex;
-   border: 1px solid #ebebeb;
-   border-radius: 25px;
-   padding-left: 15px;
-   align-items: center;
+  .chat-icon-send {
+    font-size: rem(40);
+    margin: 0 auto;
+    margin-top: 4px;
+  }
 
-   overflow: auto;
+  .type-message {
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+    align-items: center;
 
-   ion-textarea{
-     margin: 0 !important;
-     align-self: center;
-   }
- }
+    overflow: auto;
+
+    ion-textarea {
+      margin: 0 !important;
+      align-self: center;
+    }
+  }
 
 }
+
 .preview-slides {
   margin-top: 20%;
   background: #e6e6e6;
 
   img {
-      padding-top: 20px;
-      padding-bottom: 20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
   }
 }
 
 .transparent-modal {
-    .modal-wrapper {
-        --background: rgba(44, 39, 45, 0.2);
-    }
+  .modal-wrapper {
+    --background: rgba(44, 39, 45, 0.2);
+  }
 }
 
 
 .image-slide,
 .image-card {
-    overflow: visible;
+  overflow: visible;
 }
 
 .image-card {
-    z-index: 9;
+  z-index: 9;
 }
 
 .backdrop {
-    height: 200%;
-    width: 100%;
-    background: black;
-    position: absolute;
-    z-index: 10;
+  height: 200%;
+  width: 100%;
+  background: black;
+  position: absolute;
+  z-index: 10;
 }
 
 
@@ -361,14 +386,14 @@
 }
 
 
-.float-status{
+.float-status {
   position: relative !important;
   float: right;
   display: flex;
   align-items: self-end;
 }
 
-.float-status-image{
+.float-status-image {
   position: relative !important;
   float: right;
   display: flex;
@@ -385,15 +410,15 @@
 }
 
 .float-status-all {
-  font-size: rem(13)  !important;
+  font-size: rem(13) !important;
 }
 
 .try {
   color: red;
-    background: #f3414159;
-    padding: 6px;
-    border-radius: 10px;
-    cursor: pointer;
+  background: #f3414159;
+  padding: 6px;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
 
diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index db2f70427..a25a0e441 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -4,151 +4,158 @@
 
 @media only screen and (min-width: 100px) {
 
-  :host{
+  :host {
     font-size: 14px;
   }
 }
 
 @media only screen and (min-width: 500px) {
 
-  :host{
+  :host {
     font-size: 16px;
   }
 }
 
 
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
+.header-toolbar {
+  --background: transparent;
+  --opacity: 1;
 
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
+  .main-header {
+    width: 100%;
+    /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 30px 20px 0px 20px;
+    color: #000;
+    transform: translate3d(0, 1px, 0);
 
-        .header-top{
-          margin: 0px auto;
-          overflow: auto;
+    .header-top {
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+
+      .left {
+        width: fit-content;
+        float: left;
+        //font-size: rem(35);
+        overflow: hidden;
+
+        .header-top-btn {
+          background: transparent;
+          font-size: rem(25) !important;
+          font-weight: 100 !important;
+          /* color: #0782c9; */
+          color: #42b9fe;
+        }
+      }
+
+      .middle-container {
+        overflow: auto;
+        height: auto;
+
+        .middle {
           padding: 0 !important;
-          background: #fff;
-
-          .left{
-            width: fit-content;
-            float: left;
-            //font-size: rem(35);
-            overflow: hidden;
-
-            .header-top-btn{
-              background: transparent;
-              font-size: rem(25)  !important;
-              font-weight: 100 !important;
-              /* color: #0782c9; */
-              color: #42b9fe;
-            }
-          }
-
-          .middle-container{
-            overflow: auto;
-            height: auto;
-
-            .middle{
-              padding: 0!important;
-              float: left;
-              width:calc(100% - 77px);
-              margin: 0px 0 0 10px;
-              display: flex;
-              align-items: center;
-            }
-          }
-
-          .middle-container-options{
-            padding: 0!important;
-            float: left;
-            width: calc(100% - 25px);
-            text-align: right;
-
-            .middle-container-options-icons{
-              color: #0782c9;
-              font-size: rem(23);
-            }
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: rem(25 );
-            color: #0782c9;
-            margin: 5px 0 0 0;
-          }
-        }
-        .header-bottom{
-          width: 310px;
-          overflow: auto;
-          margin: 0 auto;
-
-          .header-bottom-icon{
-            width: rem(30);
-            font-size: rem(25);
-            float: left;
-            padding: 2px;
-
-          }
-          .header-bottom-contacts{
-            width: 275px;
-            font-size: rem(15) ;
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
-            padding: 5px;
-            margin: 1px;
-          }
-        }
-
-        .title{
-          font-size: rem(25);
-          white-space: nowrap;
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
           float: left;
+          width: calc(100% - 77px);
+          margin: 0px 0 0 10px;
+          display: flex;
+          align-items: center;
         }
-        .div-icon{
-          width: rem(40);
-          float: right;
-          font-size: rem(35);
-          overflow: auto;
-          padding: 1px;
-        }
-        .div-icon ion-icon{
-          float: right;
-          padding-left: 20px;
-        }
-    }
- }
+      }
 
- ion-content{
-   .welcome-text{
+      .middle-container-options {
+        padding: 0 !important;
+        float: left;
+        width: calc(100% - 25px);
+        text-align: right;
+
+        .middle-container-options-icons {
+          color: #0782c9;
+          font-size: rem(23);
+        }
+      }
+
+      .right {
+        padding: 0 !important;
+        float: right;
+        font-size: rem(25);
+        color: #0782c9;
+        margin: 5px 0 0 0;
+      }
+    }
+
+    .header-bottom {
+      width: 310px;
+      overflow: auto;
+      margin: 0 auto;
+
+      .header-bottom-icon {
+        width: rem(30);
+        font-size: rem(25);
+        float: left;
+        padding: 2px;
+
+      }
+
+      .header-bottom-contacts {
+        width: 275px;
+        font-size: rem(15);
+        color: #797979;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        float: left;
+        padding: 5px;
+        margin: 1px;
+      }
+    }
+
+    .title {
+      font-size: rem(25);
+      white-space: nowrap;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      float: left;
+    }
+
+    .div-icon {
+      width: rem(40);
+      float: right;
+      font-size: rem(35);
+      overflow: auto;
+      padding: 1px;
+    }
+
+    .div-icon ion-icon {
+      float: right;
+      padding-left: 20px;
+    }
+  }
+}
+
+ion-content {
+  .welcome-text {
     /* width: 322px; */
-     width: rem(422);
-     background: #ebebeb;
-     text-align: center;
-     font-size: rem(13) ;
-     color: #797979;
-     padding: 10px;
-     margin: 0 auto;
-     line-height: 1.2rrem;
-     margin: 20px 39px 25px;
-     border-radius: 8px;
-   }
-   .messages{
-    font-size: rem(13) ;
+    width: rem(422);
+    background: #ebebeb;
+    text-align: center;
+    font-size: rem(13);
+    color: #797979;
+    padding: 10px;
+    margin: 0 auto;
+    line-height: 1.2rrem;
+    margin: 20px 39px 25px;
+    border-radius: 8px;
+  }
+
+  .messages {
+    font-size: rem(13);
     font-family: Roboto;
     overflow: auto;
 
@@ -163,55 +170,59 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
-    .messages-list-itrem-wrapper{
+    .messages-list-itrem-wrapper {
       overflow: hidden;
     }
-    .messages-list-itrem-wrapper-active{
+
+    .messages-list-itrem-wrapper-active {
       background: #e6f6ff75 !important;
     }
 
-    .message-container{
+    .message-container {
       //border: 1px solid red;
     }
 
 
-    .incoming-true, .incoming-false{
+    .incoming-true,
+    .incoming-false {
       width: 305px;
-       padding: 15px 20px;
-       border-radius: 10px;
+      padding: 15px 20px;
+      border-radius: 10px;
     }
 
-     .incoming-true{
+    .incoming-true {
       margin: 10px 75px 10px 20px;
-       background: #ebebeb;
-       float: left;
-       }
-     }
-     .incoming-false{
-      margin: 10px 20px 10px 75px;
-       background:  var(--chat-incoming-msg-color);
-       float: right;
-     }
-     .title{
-         display: inline;
-      color: var(--title-text-color);
-      font-weight: bold;
-      margin-bottom: 5px;
+      background: #ebebeb;
+      float: left;
+    }
+  }
 
-      .time{
-        color: #797979;
-        text-align: right;
-        float: right;
-      }
-   }
- }
+  .incoming-false {
+    margin: 10px 20px 10px 75px;
+    background: var(--chat-incoming-msg-color);
+    float: right;
+  }
 
- .info-meeting{
+  .title {
+    display: inline;
+    color: var(--title-text-color);
+    font-weight: bold;
+    margin-bottom: 5px;
+
+    .time {
+      color: #797979;
+      text-align: right;
+      float: right;
+    }
+  }
+}
+
+.info-meeting {
   /* width: 322px; */
   width: rem(422);
   background: var(--chat-alert-msg-color);
   text-align: center;
-  font-size: rem(13) ;
+  font-size: rem(13);
   color: #262420;
   padding: 10px;
   margin: 10px auto;
@@ -219,104 +230,114 @@
   /* margin: 15px 0px 15px 0px; */
   border-radius: 8px;
 
-  .info-meeting-small{
-    font-size: rem(10) ;
+  .info-meeting-small {
+    font-size: rem(10);
     font-style: italic;
   }
-  .info-meeting-medium{
+
+  .info-meeting-medium {
     font-size: rem(12);
   }
-  .info-meeting-normal{
+
+  .info-meeting-normal {
     color: #0782c9;
     font-weight: 700;
     text-decoration: underline;
   }
-  .info-meeting-normal:hover{
+
+  .info-meeting-normal:hover {
     text-decoration: underline;
     color: #0782c9;
   }
- }
+}
 
- ion-footer{
+ion-footer {
   padding-top: 7.5px;
-  padding-bottom: 7.5px;
- .container{
-   justify-content: center;
-   justify-content: space-evenly;
-   align-itrems: center;
- }
+  padding-bottom: 20px;
 
- .chat-icon-options{
-   display:block !important;
-   font-size: rem(35);
-   float: right !important;
-   margin-top: 5px;
- }
+  .container {
+    justify-content: center;
+    justify-content: space-evenly;
+    align-itrems: center;
+  }
 
- .chat-icon-send{
-   font-size: rem(40);
-   margin: 0 auto;
-   margin-top: 4px;
- }
+  .chat-icon-options {
+    display: block !important;
+    font-size: rem(35);
+    float: right !important;
+    margin-top: 5px;
+  }
 
-  .type-message{
-   display: flex;
-   border: 1px solid #ebebeb;
-   border-radius: 25px;
-   padding-left: 15px;
-   align-itrems: center;
-   overflow: auto;
+  .chat-icon-send {
+    font-size: rem(40);
+    margin: 0 auto;
+    margin-top: 4px;
+  }
 
-   ion-textarea{
-     margin: 0 !important;
-     align-self: center;
-     overflow: auto;
-   }
- }
+  .type-message {
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+    align-itrems: center;
+    overflow: auto;
+
+    ion-textarea {
+      margin: 0 !important;
+      align-self: center;
+      overflow: auto;
+    }
+  }
 
 }
 
- .text-color-blue{
-    font-size: rem(15);
-    color: #0782c9;
-    font-weight: 500;
-    letter-spacing: normal;
- }
- .user-status-online{
-    display: block;
-    float: left;
-    color:#99e47b;
-    padding-left: 10px;
- }
- .online{
+.text-color-blue {
+  font-size: rem(15);
+  color: #0782c9;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.user-status-online {
   display: block;
   float: left;
-  color:#99e47b;
+  color: #99e47b;
   padding-left: 10px;
 }
-.offline{
- color:#cbced1;
- display: block;
- float: left;
- padding-left: 10px;
-}
-.away{
-color:#ffd21f;
-display: block;
- float: left;
- padding-left: 10px;
-}
-.invisible{
-  color:#cbced1;
+
+.online {
   display: block;
- float: left;
- padding-left: 10px;
+  float: left;
+  color: #99e47b;
+  padding-left: 10px;
 }
-.busy{
-  color:#f5455c;
+
+.offline {
+  color: #cbced1;
   display: block;
- float: left;
- padding-left: 10px;
+  float: left;
+  padding-left: 10px;
+}
+
+.away {
+  color: #ffd21f;
+  display: block;
+  float: left;
+  padding-left: 10px;
+}
+
+.invisible {
+  color: #cbced1;
+  display: block;
+  float: left;
+  padding-left: 10px;
+}
+
+.busy {
+  color: #f5455c;
+  display: block;
+  float: left;
+  padding-left: 10px;
 }
 
 
@@ -337,7 +358,7 @@ display: block;
 }
 
 
-button{
+button {
   padding: 0px;
   border: 0px;
 }
@@ -348,14 +369,14 @@ button::-moz-focus-inner {
 }
 
 
-.float-status{
+.float-status {
   position: relative !important;
   float: right;
   display: flex;
   align-itrems: self-end;
 }
 
-.float-status-image{
+.float-status-image {
   position: relative !important;
   float: right;
   display: flex;
@@ -377,10 +398,10 @@ button::-moz-focus-inner {
 
 .try {
   color: red;
-    background: #f3414159;
-    padding: 6px;
-    border-radius: 10px;
-    cursor: pointer;
+  background: #f3414159;
+  padding: 6px;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
 .font-40-rem {
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.html b/src/app/shared/popover/chat-popover/chat-popover.page.html
index 855a51407..b47f7dcf8 100644
--- a/src/app/shared/popover/chat-popover/chat-popover.page.html
+++ b/src/app/shared/popover/chat-popover/chat-popover.page.html
@@ -1,16 +1,19 @@
 <ion-content class="options-container">
-  <div class="arrow-right">
+  <div class="arrow-right header-fix">
     <button class="btn-no-color" (click)="close('cancel')">
-      <ion-icon *ngIf="ThemeService.currentTheme == 'default' "slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
-      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" class="arrow-right-icon" src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon>
+      <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" class="arrow-right-icon"
+        src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" class="arrow-right-icon"
+        src='assets/images/theme/gov/icons-calendar-arrow-right.svg'></ion-icon>
     </button>
   </div>
   <div class="buttons">
-    <button *ngIf="isAdmin" (click)="addUser()" class="btn-cancel" shape="round" >Adicionar</button>
-    <button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button>
-    <button *ngIf="isAdmin" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round" >Alterar nome do grupo</button>
+    <button *ngIf="isAdmin" (click)="addUser()" class="btn-cancel" shape="round">Adicionar</button>
+    <button (click)="leaveGroup()" class="btn-cancel" shape="round">Sair do Grupo</button>
+    <button *ngIf="isAdmin" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round">Alterar
+      nome do grupo</button>
     <div class="solid"></div>
-    <button  (click)="close('cancel')" full class="btn-cancel mobile-only" shape="round" >Cancelar</button>
+    <button (click)="close('cancel')" full class="btn-cancel mobile-only" shape="round">Cancelar</button>
     <button *ngIf="isAdmin" (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
   </div>
-</ion-content>
+</ion-content>
\ No newline at end of file
diff --git a/src/style/ios.scss b/src/style/ios.scss
index 3ec4f0cab..cb2053a12 100644
--- a/src/style/ios.scss
+++ b/src/style/ios.scss
@@ -82,6 +82,7 @@
             -o-transform: none !important;
         }
     }
+
     .modal-desktop-remove-background::part(backdrop) {
         display: none;
         transform: none !important;
@@ -101,7 +102,7 @@
 .chat-mobile-modal-to-Desktop::part(backdrop) {
     display: none;
     transform: none !important;
-} 
+}
 
 
 .modal-width-100::part(content) {
@@ -159,34 +160,45 @@ ion-modal::part(content) {
     bottom: 0 !important;
     right: 0 !important;
     top: unset !important;
-  }
-  .group-duration::part(content) {
-    width: 100% !important;
-    left: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    top: unset !important;
-  }
+}
 
-  .chat-popover::part(content) {
+.group-duration::part(content) {
     width: 100% !important;
     left: 0 !important;
     bottom: 0 !important;
     right: 0 !important;
     top: unset !important;
-  }
-  .messages-options::part(content) {
+}
+
+.chat-popover::part(content) {
     width: 100% !important;
     left: 0 !important;
     bottom: 0 !important;
     right: 0 !important;
     top: unset !important;
-  }
-  .events-options::part(content) {
+}
+
+.messages-options::part(content) {
     width: 100% !important;
     left: 0 !important;
     bottom: 0 !important;
     right: 0 !important;
     top: unset !important;
-  }
-  
\ No newline at end of file
+}
+
+.events-options::part(content) {
+    width: 100% !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+    top: unset !important;
+}
+
+
+ion-toolbar {
+    padding-top: 0px !important;
+}
+
+.header-fix {
+    padding-top: var(--ion-safe-area-top);
+}
\ No newline at end of file