Style conversation flow for group-messages

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;