@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -4,6 +4,10 @@
     height: auto;
     padding: 0;
     margin: 0;
+
+    ion-icon{
+        color: var(--basic-blue);
+    }
     .buttons-left {
         position: absolute;
         left: 0;
@@ -165,10 +169,6 @@
     border-radius: 50%;
 }
 
-.send-msg-activated {
-    color: #3880ff !important;
-}
-
 .send-msg-disabled {
     cursor: default;
     opacity: 0.8;

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -9,7 +9,7 @@ import { LoaderPreviewPage } from 'src/app/pages/loader-preview/loader-preview.p
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { Observable } from 'rxjs';
@@ -62,16 +62,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public messageString: string;
   public HAS_PASTED: boolean = false;
   public toastMsg: string;
-  public TEXAREA_PLACEHOLDER: string;
-  public LONG_TEXAREA_PLACEHOLDER: string;
-  public SHORT_TEXAREA_PLACEHOLDER: string;
-  public SHORTER_TEXAREA_PLACEHOLDER: string;
-  public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
-  public openCanned: boolean = false;
-  public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
+
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
   msg: string
 
@@ -89,7 +84,26 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
   emojiColor: string ="#3880ff"
-  emojiiCategories = [ 'recent', 'people', 'nature', 'activity']
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity'] //, 'custom']
+
+  customEmojis = [
+    {
+      name: 'Customer-Service',
+      shortNames: ['customer'],
+      text: 'ee',
+      emoticons: [],
+      keywords: ['github'],
+      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/Customer-Service.png',
+    },
+    {
+      name: 'Octocat',
+      shortNames: ['octocat'],
+      text: 'rr',
+      emoticons: [],
+      keywords: ['github'],
+      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/FAQ-Chatbot.png',
+    }
+  ];
   /**
    * Constructor
    * @param chooser 
@@ -118,15 +132,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (this.areVisibleCAR === false) {
       this.emojiPerLine = 7
     }
-    // this.events.subscribe((cannedmessage) => {
-    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
-    // })
 
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
     this.listenToNewCannedResponseCreated()
-    this.getWindowWidth();
     this.isOnMobileDevice()
   }
 
@@ -147,15 +154,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
-      this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
-
     }
 
-    if (this.conversationWith.startsWith("support-group")) {
-      this.IS_SUPPORT_GROUP_CONVERSATION = true
-    } else {
-      this.IS_SUPPORT_GROUP_CONVERSATION = false
-    }
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
@@ -206,36 +206,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
-
-  getWindowWidth(): any {
-    this.currentWindowWidth = window.innerWidth;
-
-
-    // if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    //   this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
-    // } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    // } else if (!this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // }
-
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ", checkPlatformIsMobile());
-    if (checkPlatformIsMobile() === true) {
-
-      if (this.currentWindowWidth <= 430 && this.currentWindowWidth >= 274) {
-        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-      } else if (this.currentWindowWidth <= 273) {
-        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-      }
-    }
-  }
-
   // -------------------------------------------------------------------------------------------
   // Change the placeholder of the 'send message' textarea according to the width of the window  
   // -------------------------------------------------------------------------------------------
@@ -243,37 +213,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
     //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
-
-
-
-    // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    // } else if (!this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // }
-
-    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ', checkPlatformIsMobile());
-    if (checkPlatformIsMobile() === true) {
-
-      if (event.target.innerWidth <= 430 && event.target.innerWidth >= 274) {
-        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-      } else if (this.currentWindowWidth <= 273) {
-        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-      }
-
-    }
-
-    // if (checkPlatformIsMobile && event.target.innerWidth <= 430) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (checkPlatformIsMobile && event.target.innerWidth > 430) { 
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    // }
   }
 
 
@@ -579,8 +518,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
   openCannedResponses() {
-    this.openCanned = !this.openCanned
-    this.onClickOpenCannedResponses.emit(this.openCanned);
+    this.onClickOpenCannedResponses.emit();
   }
 
 
@@ -698,7 +636,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // Note: on mac keyboard "metakey" matches "cmd"
     
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -7,7 +7,8 @@
   </app-info-direct>
 
   <app-info-group *ngIf="panelType === 'group-panel' && IS_GROUP_PANEL === true"
-    [groupDetail]="groupDetail">
+    [groupDetail]="groupDetail"
+    [isMobile]="isMobile">
   </app-info-group>
 
   <app-info-support-group *ngIf="panelType === 'support-group-panel'"

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -28,11 +28,12 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
 export class InfoContentComponent implements OnInit {
   @Input() openInfoConversation: boolean;
-  @Input() translationMap: Map<string, string>;
   // @Input() member: UserModel;
   @Input() loggedUser: UserModel
   @Input() tenant: string
-  @Input() groupDetail: any
+  @Input() groupDetail: any;
+  @Input() isMobile: boolean;
+  @Input() translationMap: Map<string, string>;
 
 
   public member: UserModel;

package/src/app/components/conversation-info/info-direct/info-direct.component.html

@@ -8,15 +8,7 @@
         <div class="image-profile">
           <app-avatar-profile [itemAvatar]='member'></app-avatar-profile>
         </div>
-
-        <div class="user-presence">
-          <app-user-presence 
-            [idUser]='member.uid'
-            [translationMap]='translationMap' 
-            [borderColor]='borderColor'
-            [fontColor]='fontColor'>
-          </app-user-presence>
-        </div>
+        
         <!-- -> {{member |json}} -->
         <div class="info-profile">
           <div class="name">

package/src/app/components/conversation-info/info-direct/info-direct.component.ts

@@ -15,8 +15,6 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() translationMap: Map<string, string>;
   @Input() conversationWith: string;
 
-  borderColor = '#ffffff';
-  fontColor = '#949494';
   advancedAttributes: Array<any> = [];
   private logger: LoggerService = LoggerInstance.getInstance();
 

package/src/app/components/conversation-info/info-group/info-group.component.html

@@ -1,115 +1,51 @@
 <!-- <pre style="font-size: 12px;"> {{ groupDetail | json }} </pre>  -->
 
 <ion-content class="group-profile">
-  <ion-card class="first-card">
-    <div class="chat21-box-profile chat21-box">
-      <div class="chat21-content">
-        <div class="image-profile">
-          <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
-        </div>
-
-        <div class="info-profile">
-          <div class="name">
-            <span class="read">{{groupDetail?.name}}</span>
+    <ion-card>
+      <div class="chat21-box-profile chat21-box">
+        <div class="chat21-content">
+          <div class="image-profile">
+            <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
           </div>
-        </div>
-        <!-- <div class="member-email">
-          <a [href]="'mailto:' + member.email + '?Subject='">
-            {{member.email}}
-          </a>
-        </div> -->
-      </div>
-
-    </div>
-  </ion-card>
   
-  <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
-    <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
-      <ion-avatar slot="start">
-        <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
-        </h3>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-  <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
-  <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
-    <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
-      <ion-avatar  slot="start" style="margin-right: 12px;"> 
-        <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-        <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }"></div>
-      </ion-avatar>
-      <ion-label>
-        <h3>
-          {{ member.fullname }}
-        </h3>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-
-
-
-
-  <div *ngIf="groupDetail" style="display:none">
-    <div *ngFor='let member of groupDetail?.member_array'>
-      <ion-grid>
-        <ion-row class="ion-align-items-center">
-          <ion-col size="3">
-            <div class="member-profile">
-              <!-- (click)="copyLoggedUserUID({member.userid)" -->
-              <!-- <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
-                content-type="template" > -->
-              <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-              <!-- </div> -->
-              <!-- <ng-template #useruidTooltip>
-                <span> {{member.userid}}</span>
-              </ng-template> -->
-
-              <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }">
-              </div>
+          <div class="info-profile">
+            <div class="name">
+              <span class="read">{{groupDetail?.name}}</span>
             </div>
-
-
-          </ion-col>
-          <ion-col>
-            <ion-label>
-              {{ member.fullname }}
-            </ion-label>
-
-            <!-- <div class="info-group-member-email">
-              <a [href]="'mailto:' + member.email + '?Subject='">
-                {{member.email}}
-              </a>
-            </div> -->
-
-
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-      <!-- </ion-avatar>
-      </ion-item> -->
-      <!-- {{member | json}}
+          </div>
+        </div>
+  
+      </div>
+    </ion-card>
     
-    >>>  {{member?.avatar}} -->
-    </div>
-  </div>
-
-  <!-- <ion-list> 
-
-
-  </ion-list> -->
-
-  <!-- </div> -->
-
-
-  <!-- <app-advanced-info-accordion 
-  [advancedAttributes]="advancedAttributes"
-  [translationMap]="translationMap">
-
-  </app-advanced-info-accordion> -->
-
-</ion-content>
+    <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
+      <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+        <ion-avatar slot="start">
+          <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
+          </h3>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  
+    <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
+    <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
+      <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+        <ion-avatar  slot="start" style="margin-right: 12px;"> 
+          <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+          <div class="status-icon-container" [class.mobile]="isMobile" >
+            <svg xmlns="http://www.w3.org/2000/svg" [class.online]="(member?.userOnline)" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          </div>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            {{ member.fullname }}
+          </h3>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  
+  </ion-content>

package/src/app/components/conversation-info/info-group/info-group.component.scss

@@ -7,74 +7,114 @@
         -webkit-box-shadow: none;
         box-shadow: none;
         border-bottom: 1px solid rgba(169, 169, 169, 0.2);
-    }
 
-    .image-profile {
-        padding: 0 0 0 0;
-        width: 100px;
-        height: 100px;
-        margin: auto;
-        line-height: 100px;
-        font-size: 40px;
-        color: white;
-    }
+        .image-profile {
+            padding: 0 0 0 0;
+            width: 100px;
+            height: 100px;
+            margin: auto;
+            line-height: 100px;
+            font-size: 40px;
+            color: white;
+        }
 
-    .member-profile {
-        padding: 0 0 0 0;
-        width: 55px;
-        height: 55px;
-        margin: auto;
-        line-height: 57px;
-        font-size: 25px;
-        color: white;
-        position: relative;
+        .info-profile {
+            padding: 10px 0 0 0;
+            text-align: center;
+            .name {
+                -webkit-font-smoothing: antialiased;
+                text-rendering: optimizeLegibility;
+                text-size-adjust: none;
+                user-select: text;
+                font-family: "Roboto", "Helvetica Neue", sans-serif;
+                -webkit-box-direction: normal;
+                color: #333333;
+                font-weight: 500;
+                font-size: 17px;
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+                display: block;
+                font-size: large;
+                font-weight: bold;
+            }
+        }
     }
 
-    .user-online {
-        height: 11px;
-        width: 11px;
-        border-radius: 50%;
-        position: absolute;
-        top: 44px;
-        left: 40px;
-        border: 0.5px solid #fff;
-    }
 
-    .user-presence {
-        position: absolute;
-        top: 88px;
-        height: 12px;
-        left: calc(50% + 30px);
-        width: 100px;
-    }
+    #members-list{
+        ion-item{
+            display: flex;
+            height: 60px;
+
+            .status-icon-container{
+                position: absolute;
+                top: 35px;
+                left: 45px;
+                background-color: white;
+                height: 17px;
+                width: 17px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+        
+                &.mobile{
+                    top: 30px;
+                    left: 50px;
+                }
+            
+                svg{
+                    fill: #f44336;
+            
+                    &.online{
+                        fill: #4caf50;
+                    }
+                }
+            }
 
-    .info-profile {
-        padding: 10px 0 0 0;
-        text-align: center;
-        .name {
-            -webkit-font-smoothing: antialiased;
-            text-rendering: optimizeLegibility;
-            text-size-adjust: none;
-            user-select: text;
-            font-family: "Roboto", "Helvetica Neue", sans-serif;
-            -webkit-box-direction: normal;
-            color: #333333;
-            font-weight: 500;
-            font-size: 17px;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-            display: block;
-            font-size: large;
-            font-weight: bold;
         }
     }
 
-    .info-group-member-email {
-        font-size: 13px;
-        margin-top: 2px;
-        white-space: nowrap;
-        width: 205px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+    
+
+    // .member-profile {
+    //     padding: 0 0 0 0;
+    //     width: 55px;
+    //     height: 55px;
+    //     margin: auto;
+    //     line-height: 57px;
+    //     font-size: 25px;
+    //     color: white;
+    //     position: relative;
+    // }
+
+    // .user-online {
+    //     height: 11px;
+    //     width: 11px;
+    //     border-radius: 50%;
+    //     position: absolute;
+    //     top: 44px;
+    //     left: 40px;
+    //     border: 0.5px solid #fff;
+    // }
+    
+
+    // .user-presence {
+    //     position: absolute;
+    //     top: 88px;
+    //     height: 12px;
+    //     left: calc(50% + 30px);
+    //     width: 100px;
+    // }
+
+    
+
+    // .info-group-member-email {
+    //     font-size: 13px;
+    //     margin-top: 2px;
+    //     white-space: nowrap;
+    //     width: 205px;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    // }
 }

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -23,6 +23,7 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
   // objectKeys = Object.keys;
 
   @Input() groupDetail: any;
+  @Input() isMobile: boolean;
   // @Input() member_array: any;
   public displaySkeletonScreen: boolean = true;
   public member_array: any

package/src/app/components/{ddp-header/ddp-header.component.html → conversations-list/header-conversations-list/header-conversations-list.component.html}

@@ -1,6 +1,6 @@
-<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
+<ion-toolbar [class.mobile]="isMobile">
 
-  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
+  <ion-buttons *ngIf="isMobile || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
@@ -11,7 +11,7 @@
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
-  <ion-buttons slot="start">
+  <ion-buttons slot="start" *ngIf="isMobile">
     <ion-button *ngIf="sound_btn==='enabled'" ion-button fill="clear" (click)="onSoundChangeFN('disabled')">
       <ion-icon slot="icon-only" name="volume-high-outline" ></ion-icon>
     </ion-button>

package/src/app/components/{ddp-header/ddp-header.component.scss → conversations-list/header-conversations-list/header-conversations-list.component.scss}

@@ -1,3 +1,19 @@
+
+ion-toolbar {
+    height: var(--header-height);   
+    &:not(.mobile){
+        --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    ion-button{
+        --color: var(--basic-blue);
+    }
+}
+
 ion-title img {
     height: 30px;
 }
@@ -23,8 +39,4 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
-}
-
-.bottom-border-on-mobile {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }