fix

src/app/pages/chat/group-messages/group-messages.module.ts

@@ -15,6 +15,7 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ImageCropperModule } from 'ngx-image-cropper';
 import { AngularCropperjsModule } from 'angular-cropperjs';
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { AngularCropperjsModule } from 'angular-cropperjs';
     GroupMessagesPageRoutingModule,
     ChatPopoverPageModule,
     BtnModalDismissPageModule,
+    LettersAvatarModule
     /* ImageCropperModule,
     AngularCropperjsModule */
 

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

@@ -346,8 +346,16 @@
 
 .typing {
   position: relative;
-  top: -34px;
+  top: -25px;
   height: 0px;
   left: 0px;
   margin-left: 22px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+}
+
+
+.typing ngx-letters-avatar {
+  padding-left: 10px;
 }

src/app/pages/chat/messages/messages.module.ts

@@ -11,7 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatMenuModule } from '@angular/material/menu';
-
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -21,6 +21,7 @@ import { MatMenuModule } from '@angular/material/menu';
     FontAwesomeModule,
     MessagesPageRoutingModule,
     MatMenuModule,
+    LettersAvatarModule
   ],
   declarations: [MessagesPage]
 })

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

@@ -307,8 +307,16 @@ display: block;
 
 .typing {
   position: relative;
-  top: -34px;
+  top: -25px;
   height: 0px;
   left: 0px;
   margin-left: 22px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+}
+
+
+.typing ngx-letters-avatar {
+  padding-left: 10px;
 }