Style conversation flow for group-messages

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();