@chat21/chat21-ionic 3.0.78-rc.3 → 3.0.78

package/CHANGELOG.md

@@ -1,23 +1,9 @@
 # chat21-ionic ver 3.0
 
-### 3.0.78-rc.3
-- changed: user-typing location moved from conversation-header to conversation-detail component
-- changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component
-- added: styleMap integrations to some elements	
-- bug-fixed: no tooltip showed if no unserved request are present
-
-### 3.0.78-rc.2
-- changed: project item UI and tooltip msg
-- changed: conversation UI in conversations list component
-- changed: conversation detail header component
-- added: open/close info-conversation moved from conversation-header to conversation detail component
+## 3.0.78 in PROD
+- bug-fixed: unassigned request not sound the if is the first at all
 - bug-fixed: canned responses opens in incorrect mode
 
-### 3.0.78-rc.1
-- changed: conversation-list page width increased
-- changed: background changed in info-message component
-- changed: project-item UI
-- changed: conversation-list page UI
 
 ## 3.0.77 in PROD
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.78-rc.3",
+    "version": "3.0.78",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.scss

@@ -1,5 +1,5 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
-    min-width: 360px; //312px;
+    min-width: 312px;
     display: block; // Safari bug fix
     margin-left: 60px;
 }

package/src/app/app.component.ts

@@ -102,7 +102,6 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private isInitialized: boolean = false;
-  private hasToSoundUnservedRequestCount: boolean = false;
   private version: string;
   IS_ONLINE: boolean;
   IS_ON_MOBILE_DEVICE: boolean;
@@ -1125,7 +1124,6 @@ export class AppComponent implements OnInit {
     if (hasClickedLogout === true) {
       this.appStorageService.removeItem('conversations')
       this.isInitialized = false;
-      this.hasToSoundUnservedRequestCount = false;
       // ----------------------------------------------
       // PUSH NOTIFICATIONS
       // ----------------------------------------------
@@ -1150,12 +1148,9 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("hasToSoundUnservedRequestCount::::", this.hasToSoundUnservedRequestCount, this.isInitialized)
-      if(this.hasToSoundUnservedRequestCount){
+      this.logger.debug("hasToSoundUnservedRequestCount::::", this.isInitialized)
+      if(this.isInitialized){
         this.manageTabNotification(unservedRequestCount) //sound and alternate title
-      } else {
-        //not sound the first time
-        this.hasToSoundUnservedRequestCount = true
       }
     }
   }

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.ts

@@ -17,18 +17,11 @@ export class ConversationContentComponent implements OnInit {
   @Input() messages: MessageModel[]
   @Input() senderId: string;
   @Input() baseLocation: string;
-  @Input() isConversationArchived: boolean;
-  @Input() isTypings: boolean;
-  @Input() idUserTypingNow: string;
-  @Input() nameUserTypingNow: string;
-  @Input() typingLocation: string;
-  @Input() fullscreenMode: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onMenuOptionShow = new EventEmitter<boolean>();
-  @Output() onEmojiiPickerShow = new EventEmitter<boolean>()
+  @Output() onMenuOptionShow = new EventEmitter();
   @Output() onAttachmentButtonClicked = new EventEmitter();
   @Output() onScrollContent = new EventEmitter();
 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -52,19 +52,8 @@
 <!-- ----------------------------------------------------------- -->
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
-<div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
-  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
-    <ion-icon name="arrow-forward-outline"></ion-icon>
-    {{translationMap.get('LABEL_CLOSE_GROUP')}}
-  </ion-button>
-  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
-    <ion-icon name="arrow-back-outline"></ion-icon>
-    {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}}
-  </ion-button>
-</div>
 
 <div class="conversation-wpr" style="height: 100%;">
-  
   <div *ngFor="let message of messages; let i = index; let first = first; trackBy: trackByFn">
 
     <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">
@@ -92,12 +81,9 @@
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 
-        [fontColor]="stylesMap.get('bubbleSentTextColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [fontFamily]="stylesMap.get('fontFamily')"
+        [textColor]="'col-msg-sent'"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -135,11 +121,8 @@
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
         [message]="message" 
-        [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
-        [fontSize]="stylesMap?.get('fontSize')"
-        [fontFamily]="stylesMap?.get('fontFamily')"
+        [textColor]="'black'"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -173,18 +156,6 @@
     </div>
   </div>
 
-  <div *ngIf="isTypings" class="msg_container base_receive typing_container">
-    <!-- !isSameSender(idUserTypingNow, i) -->
-    <!-- <div *ngIf="nameUserTypingNow">{{nameUserTypingNow}}</div> -->
-    <user-typing
-      [themeColor]="stylesMap?.get('themeColor')"
-      [translationMap]="translationMap"
-      [idUserTypingNow]="idUserTypingNow"
-      [nameUserTypingNow]="nameUserTypingNow">
-    </user-typing>
-    <div class="typing_info" *ngIf="nameUserTypingNow"> {{nameUserTypingNow}} {{translationMap.get('LABEL_IS_WRITING')}}</div>
-  </div>
-
 </div>
 
 <!-- fileType > {{fileType }} uploadProgress {{uploadProgress}} -->

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -33,51 +33,6 @@
     }
 }
 
-.manage_conversation_info_container{
-    height: 34px;
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    position: fixed;
-    transition: transform 300ms ease-in-out 0s;
-    transform: translate(0px);
-    right: 300px;
-    top: 60px;
-    z-index:10;
-    background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
-    
-    &.close{
-        right: 0px;
-    }
-
-    &.mobile{
-        right: 0px;
-    }
-    &::before{
-        content: "";
-        width: 102px;
-        height: 34px;
-        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
-        position: relative;
-        left: 50px;
-        z-index: -1;
-    }
-
-    ion-button {
-        text-transform: unset;
-        &:hover {
-            --background-hover: transparent;
-            text-decoration: underline;
-            text-decoration-color: var(--ion-color-primary);
-        }
-    }
-
-    ion-icon{
-        margin: 5px;
-    }
-}
-
-
 ion-item {
     --padding-end: 0px;
     --inner-padding-end: 0px;
@@ -111,27 +66,6 @@ ion-item {
     color: #080f1a;
 }
 
-.typing_container{
-    display:flex;
-    align-items: center;
-
-    user-typing {
-        text-align: right;
-    }
-    .typing_info{  
-        color: var(--basic-gray);
-        margin-left: 10px;
-        font-size: 12px;
-        animation: blinker 1s linear infinite;
-
-        @keyframes blinker {
-            50% {
-              opacity: 0;
-            }
-          }
-    }
-}
-
 .messages {
     border-radius: 18px;
     padding: 0;
@@ -208,8 +142,8 @@ ion-item {
     }
     /* message */
     .msg_receive {
-        background-color: var(--bck-msg-received);
-        color: var(--col-msg-received);
+        background-color: var(--light-white);
+        color: #1a1a1a;
         // max-width: 260px;
         max-width: calc(100% - 70px);
         min-width: 14px;
@@ -233,7 +167,6 @@ ion-item {
     .has-metadata {
         max-width: 100% !important;
     }
-
 }
 
 .time {

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -1,5 +1,5 @@
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -24,17 +24,14 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
-  @Input() isMobile: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
-  @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
-  
+
   public public_Key: any
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
-  public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -69,11 +66,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   ngOnInit() {
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
-    
-  }
-
-  ngOnChanges(changes: SimpleChanges){
-    this.isMobile? this.openInfoConversation = false: null;
   }
 
 
@@ -144,11 +136,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onElementRendered.emit(event)
   }
 
-  onOpenCloseInfoConversationFN(){
-    this.openInfoConversation = !this.openInfoConversation
-    this.onOpenCloseInfoConversation.emit(this.openInfoConversation)
-  }
-
   /**
    * Track by function for ngFor loops
    *

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -50,7 +50,7 @@
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
-        [color]="fontColor" 
+        [color]="textColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -18,9 +18,7 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
-  @Input() fontColor: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
+  @Input() textColor: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.scss

@@ -6,12 +6,12 @@
 
 .base_info {
     border-radius: 14px;
-    // border: 1px solid rgba(24, 119, 242, 0.1);
+    border: 1px solid #C9E4F6;
     padding-left: 4px;
     padding-right: 4px;
     padding: 6px 10px;
     display: inline-block;
-    background: rgba(24, 119, 242, 0.1);
+    background: #C9E4F6;
     font-size: 0.70em;
     color: var(--basic-gray);
     margin-left: 5px; //32px;

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -80,70 +80,42 @@
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
-  <div>
-    <ion-avatar item-start>
-      <!-- [style.background-color]="conversation.color"  -->
-      <div #avatarPlaceholder class="avatar-placeholder"
-        [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
-        [innerHTML]="conversation.avatar"></div>
-      <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
-        [style.background-image]="'url(' + conversation.image + ')'"></div>
-      <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
-    </ion-avatar>
-  </div>
-  <div class="conv-container">
-    <ion-label>
-      <div class="conversation_project truncate">
-        <!-- DIRECT CONV -->
-        <div *ngIf="conversation.channel_type === TYPE_DIRECT">
-          <svg xmlns="http://www.w3.org/2000/svg" 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>
-          <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
-        </div>
-        <!-- GROUP CONV -->
-        <div *ngIf="conversation.uid.startsWith(TYPE_GROUP)">
-          <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
-          <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
-        </div>
-        <!-- SUPPORT-GROUP CONV -->
-        <div  *ngIf="conversation.uid.startsWith(TYPE_SUPPORT_GROUP)">
-          <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
-          <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
-          <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
-        </div>
-      </div>
-      <div style="display: flex;">
-        <span class="conversation_with truncate" [class.not-read]="conversation.is_new">
-          {{conversation.conversation_with_fullname}}
-        </span>
-      </div>
-      <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
-  
-        <!-- -------------------------------------------------------------------------- -->
-        <!-- if conversation type is image display the image icon before the message -->
-        <!-- -------------------------------------------------------------------------- -->
-        <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr">
-          <ion-icon name="image-outline" class="icon-image-before-msg"></ion-icon>
-        </div>
-        <p [class.not-read]="conversation.is_new" class="truncate" [ngClass]="{'truncate-on-desktop': !isApp}"
-          [innerHTML]="conversation.last_message_text"></p> -->
-  
-        <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
-        <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
-          class="icon-image-before-msg"></ion-icon>
-        <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
-          class="icon-attach-before-msg"></ion-icon>
-        <!-- </div> -->
-        <!-- [innerHTML]="conversation.last_message_text" -->
-        <span [class.not-read]="conversation.is_new">
-          {{ conversation.last_message_text }}
-        </span>
+  <ion-avatar item-start>
+    <!-- [style.background-color]="conversation.color"  -->
+    <div #avatarPlaceholder class="avatar-placeholder"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
+      [innerHTML]="conversation.avatar"></div>
+    <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
+      [style.background-image]="'url(' + conversation.image + ')'"></div>
+    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+  </ion-avatar>
+  <ion-label>
+    <div class="conversation_with truncate">{{conversation.conversation_with_fullname}}</div>
+    <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
+
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- if conversation type is image display the image icon before the message -->
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr">
+        <ion-icon name="image-outline" class="icon-image-before-msg"></ion-icon>
       </div>
-    </ion-label>
-  </div>
+      <p [class.not-read]="conversation.is_new" class="truncate" [ngClass]="{'truncate-on-desktop': !isApp}"
+        [innerHTML]="conversation.last_message_text"></p> -->
+
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
+      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
+        class="icon-image-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
+        class="icon-attach-before-msg"></ion-icon>
+      <!-- </div> -->
+      <!-- [innerHTML]="conversation.last_message_text" -->
+      <span [class.not-read]="conversation.is_new">
+        {{ conversation.last_message_text }}
+      </span>
+    </div>
+  </ion-label>
 
-  <ion-note *ngIf="!conversation.archived" class="conversation_time" [ngClass]="{'is-on-mobile': isApp}">
-    {{conversation.timestamp | amTimeAgo}}
-  </ion-note>
+  <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
     <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.scss

@@ -9,8 +9,8 @@
 }
 ion-item {
     cursor: pointer;
-    height: 90px; //70px;
-    --min-height: 90px; //70px;
+    height: 70px;
+    --min-height: 70px;
     position: relative;
     display: flex;
     text-decoration: none;
@@ -19,13 +19,6 @@ ion-item {
     --padding-start: 0;
     --inner-padding-end: 0;
     --background-hover: #000000 !important;
-    border-radius: 16px;
-    margin: 4px 5px;
-    .conv-container{
-        width: 84%;
-        height: 100%;
-        padding: 12px 0;
-    }
     .selected {
         // border-radius: 10px;
         // padding-left: 8px;
@@ -40,13 +33,12 @@ ion-item {
     ion-avatar {
         position: relative;
         padding: 0;
-        margin: 20px 8px 0px 8px;//0 12px 0 8px;
-        height: 40px; //50px;
-        width: 40px; //50px;
-        min-width: 40px; //50px;
-        min-height: 40px; //50px;
-        line-height: 40px; //50px;
-        align-self: end;
+        margin: 0 12px 0 8px;
+        height: 50px;
+        width: 50px;
+        min-width: 50px;
+        min-height: 50px;
+        line-height: 50px;
         .avatar-placeholder {
             position: absolute;
             top: 0;
@@ -55,7 +47,7 @@ ion-item {
             height: 100%;
             border-radius: 50%;
             text-align: center;
-            font-size: 15px; //20px;
+            font-size: 20px;
             color: #ffffff;
             font-weight: 500;
         }
@@ -78,46 +70,22 @@ ion-item {
         justify-content: center;
         min-width: 0;
         padding: 0;
-        margin: 0;
         font-family: Helvetica, Helvetica, Arial, sans-serif;
         line-height: 1.28;
         text-rendering: optimizeLegibility;
-        .conversation_project{
-            display: inline-flex;
-            align-items: center;
-            line-height: 1.2rem;
-            font-weight: 500;
-            color: #779bbb;
-            font-size: 10px;
-            max-width: 90%;
-            svg {
-                fill:#779bbb;
-                vertical-align: sub;
-            }
-            span{
-                padding-left: 5px
-            }
-        }
         .conversation_with {
             color: rgba(0, 0, 0, 1);
             font-size: 15px;
             font-weight: 400;
             line-height: 1.4;
-            width: 70% !important;
-            &.not-read {
-                font-weight: 600;
-                color: #3c4858; //#1876f2;
-            }
         }
-        
         .conversation_message {
             p {
-                color: #6e6f73; //#3c4858;
-                font-size: 15px;
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
                 font-weight: 400;
                 height: 18px;
                 vertical-align: middle;
-                align-self: center;
                 &.not-read {
                     font-weight: 600;
                     color: #1876f2;
@@ -125,13 +93,13 @@ ion-item {
             }
 
             span {
-                color: rgb(60, 72, 88);
-                font-size: 12px;
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
                 font-weight: 400;
                 height: 18px;
                 &.not-read {
                     font-weight: 600;
-                    color: #3c4858; //#1876f2;
+                    color: #1876f2;
                 }
             }
         }
@@ -139,15 +107,8 @@ ion-item {
     ion-note {
         position: absolute;
         right: 8px;
-        top: 40px;
+        top: 4px;
         font-size: 10px;
-        display: flex;
-        flex-direction: column;
-        color: #6e6f73;
-
-        &.is-on-mobile{
-            top: 10px;
-        }
     }
     ion-buttons {
         margin: 0;
@@ -179,10 +140,10 @@ ion-item {
     }
 
     .notification_point-on-desktop {
-        bottom: 22px !important;
+        bottom: 29px !important;
     }
     .notification_point-on-mobile {
-        bottom: 22px !important;
+        bottom: 29px !important;
         right: 8px;
     }
 }
@@ -248,8 +209,7 @@ ion-item:hover {
 }
 
 .ion-selected {
-    --background: rgba(24, 119, 242, 0.04);
-    border-right: 4px solid #1876f2;
+    --background: rgb(231, 241, 255);
 }
 
 .time-in-archived {