Style conversation flow for group-messages

src/app/app-routing.module.ts

@@ -9,7 +9,12 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
-  },
+  },
+  {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  },
+  {
     path: 'chat',
     loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
   },

src/app/home/home-routing.module.ts

@@ -153,7 +153,7 @@ const routes: Routes = [
   },
   {
     path: '',
-    redirectTo: 'home/events',
+    redirectTo: '/home/events',
     pathMatch: 'full'
   }
 ];

src/app/pages/chat/group-messages/group-messages.page.html

@@ -26,10 +26,67 @@
 
 
 <ion-content>
-  <!-- <p>HHHHH</p> -->
+  <div class="welcome-text">
-  
+    <ion-label>Esta conversa passou a grupo</ion-label><br />
-  
+    <ion-label>A conversa original mantêm-se como chat individual</ion-label>
-  
+  </div>
+  <div class="messages">
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <img src='assets/images/1.jpg' tappable>
+        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Presidente da República</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Pois é, momentos históricos</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Ministro do interior</ion-label>
+        <span class="time">16:23</span>
+      </div>
+      <div>
+        <ion-label>Grande momento</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+  </div>
 
 </ion-content>
 <ion-footer>

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
@@ -75,22 +76,70 @@
         } 
     }
  }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
 
+    .incoming, .outgoing{
+      width: 305px;
+       padding: 15px 20px;
+       border-radius: 10px;
+    }
+
+     .incoming{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       
+       }
+     }
+     .outgoing{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+      color: #0782c9;
+      
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        float: right;
+      }
+   }
+ }
 
  ion-footer{
    .row{
      width: 380px;
     margin: 0 auto;
    }
-  ion-col{
+
-/*     border: 1px solid red; */
-  }
   .chat-icon-options{
     display:block !important;
     font-size: 25px;
     float: right !important;
     margin-top: 10px;
   }
+
   .chat-icon-send{
     font-size: 45px;
     margin: 0 auto;

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts

@@ -70,9 +70,6 @@ export class PublicationDetailPage implements OnInit {
       this.showLoader = false;
     });
   }
-  doRefresh(event){
-
-  }
 
   close(){
     this.modalController.dismiss();

src/app/shared/popover/chat-popover/chat-popover.page.html

@@ -1,20 +1,3 @@
-<!-- <div>
-  <ion-toolbar>
-    <div class="buttons">
-    <div class="btn-item">
-      <ion-button class="btn-cancel" shape="round" >Sair do Grupo</ion-button>.
-      <ion-button class="btn-ok" shape="round" >Alterar nome</ion-button>
-    </div>
-    <div class="btn-class">
-      <hr class="solid">
-    </div>
-    <div class="btn-item">
-      <ion-button  class="btn-delete" shape="round">Apagar grupo</ion-button>
-    </div>
-  </div>
-  </ion-toolbar>
-</div> -->
-
 <ion-content>
   <ion-row>
     <ion-col>