@chat21/chat21-ionic 3.0.61-rc4 → 3.0.61-rc5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc5
+- Fixes the bug: on mobile devices the chat content is shifted to the right
+- Adds the ability to open and close the "user detail sidebar" by clicking on the avatar of the logged teammate present on the sidebar
+- Fixes the bug: canned responses remain visible even if, after making a filter, the backslash is deleted
+- Prevents the "open canned responses" button from inserting a backslash if another one exists before
+- Hides the badge that displays the number of unassigned conversations if there are none
+- Improves custom scrollbar displayed in the sidebar and in user detail sidebar 
+- Adds custom scrollbars to the conversation list and to the conversation detail
+
 ### 3.0.61-rc4
 - Hides the item showing unassigned conversations in the list of archived conversations
 - Adds in the list of conversations to the "archive" button the tooltip "Resolve" if the conversation is of type "support" and the tooltip "Archive" if the conversation is of type "direct" or "group"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc4",
+    "version": "3.0.61-rc5",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.html

@@ -20,7 +20,8 @@
       <!-- <app-details></app-details> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
-      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true}">
+      <!--  -->
+      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true && IS_ON_MOBILE_DEVICE === false}">
       </ion-router-outlet>
     </ion-split-pane>
   </div>

package/src/app/app.component.ts

@@ -158,7 +158,7 @@ export class AppComponent implements OnInit {
     if (/Android|iPhone/i.test(window.navigator.userAgent)) {
       this.IS_ON_MOBILE_DEVICE = true;
     }
-    console.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -161,5 +161,5 @@ ion-header {
 }
 
 .resolve-conv-margin-right {
-    margin-right: 56px;
+    margin-right: 52px;
 }

package/src/app/components/project-item/project-item.component.html

@@ -23,7 +23,7 @@
                   </g>
                 </svg>
               </div>
-              <div class="unassigned-notifications-badge">
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
                 <!-- || currentUserRequestCount > 0  -->
                 <!-- <span *ngIf="unservedRequestCount > 0 "> -->
                 <!-- + currentUserRequestCount -->

package/src/app/components/sidebar/sidebar.component.scss

@@ -8,4 +8,15 @@
   color: #feb92c;
   background-color: #2d323e;
   border-radius: 50%;
-}
+}
+
+// #sidebar_wrapper::-webkit-scrollbar {
+//   width: 6px;
+// }
+// #sidebar_wrapper::-webkit-scrollbar-track {
+//   background-color: #1c2b45;
+// }
+// #sidebar_wrapper::-webkit-scrollbar-thumb {
+//   background-color: #3c485b;
+//   border-radius: 3px;
+// }

package/src/app/components/sidebar/sidebar.component.ts

@@ -32,7 +32,7 @@ export class SidebarComponent implements OnInit {
   photo_profile_URL: string;
   project_id: string;
   DASHBOARD_URL: string;
-  HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
+  // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
   public translationMap: Map<string, string>;
   public_Key: any;
   conversations_lbl: string;
@@ -42,7 +42,7 @@ export class SidebarComponent implements OnInit {
   activities_lbl: string;
   history_lbl: string;
   settings_lbl: string;
-
+  countClickOnOpenUserDetailSidebar: number = 0
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -107,7 +107,7 @@ export class SidebarComponent implements OnInit {
   getConversationsTranslation() {
     this.translate.get('Conversations')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Conversations', text)
+        // console.log('[SIDEBAR] - translate Conversations', text)
         this.conversations_lbl = text
       });
   }
@@ -249,34 +249,49 @@ export class SidebarComponent implements OnInit {
   }
 
   openUserDetailSidePanel() {
-    this.logger.log('[SIDEBAR] OPEN UESER DTLS SIDE PANEL')
-    this.HAS_CLICKED_OPEN_USER_DETAIL = true
-    this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
+    this.countClickOnOpenUserDetailSidebar++
+    this.logger.log('[SIDEBAR-CHAT] countClickOnOpenUserDetailSidebar', this.countClickOnOpenUserDetailSidebar)
+    this.logger.log('[SIDEBAR-CHAT] OPEN UESER DTLS SIDE PANEL')
+    // this.HAS_CLICKED_OPEN_USER_DETAIL = true
+    // console.log('[SIDEBAR-CHAT] OPEN USER DTLS SIDE PANEL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
     const elSidebarUserDtls = <HTMLElement>document.querySelector('#user-details');
     this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
-    if (elSidebarUserDtls) {
-      elSidebarUserDtls.classList.add("active");
-      this.events.publish('userdetailsidebar:opened', true);
-    }
-
-  }
 
-  onCloseUserDetailsSidebar($event) {
-    this.logger.log('[SIDEBAR] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
-    this.HAS_CLICKED_OPEN_USER_DETAIL = $event
-    const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-    this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
-    if (elemNavbar) {
-      elemNavbar.classList.remove("navbar-absolute-custom-class")
+    // if (elSidebarUserDtls) {
+    //   elSidebarUserDtls.classList.add("active");
+    //   this.events.publish('userdetailsidebar:opened', true);
+    // }
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
+      elSidebarUserDtls.classList.add("active");
     }
-
-    const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-    this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-    if (elemNavbarBrand) {
-      elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar > 1) {
+      // console.log('[SIDEBAR] this.countClickOnOpenUserDetailSidebar HERE', this.countClickOnOpenUserDetailSidebar)
+      if (elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR-CHAT] elSidebarUserDtls contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.remove("active");
+      } else if (!elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR-CHAT] elSidebarUserDtls NOT contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.add("active");
+      }
     }
   }
 
+  // onCloseUserDetailsSidebar($event) {
+    // this.logger.log('[SIDEBAR-CHAT] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
+    // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
+    // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
+    // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
+    // if (elemNavbar) {
+    //   elemNavbar.classList.remove("navbar-absolute-custom-class")
+    // }
+
+    // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+    // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+    // if (elemNavbarBrand) {
+    //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+    // }
+  // }
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -68,10 +68,10 @@
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
         <span>
             <div> {{prjct_name}} </div>
-            <div> {{ profile_name_translated }} </div>
+            <div  style="display: inline-block;"> {{ profile_name_translated }} </div>
 
-            <span *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
-                style="color:#f44336; position:relative; top: -1px;">
+            <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
+                style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
                 <i *ngIf="plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
                     matTooltip="{{ SUBSCRIPTION_PAYMENT_PROBLEM_msg }}" #tooltip="matTooltip" matTooltipPosition='right'
@@ -83,7 +83,7 @@
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline
                 </i>
-            </span>
+            </div>
         </span>
     </section>
 

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -21,16 +21,16 @@
     // display: none;
 }
 
-#user-details::-webkit-scrollbar {
-    width: 6px;
-}
-#user-details::-webkit-scrollbar-track {
-    background-color: #1c2b45;
-}
-#user-details::-webkit-scrollbar-thumb {
-    background-color: #3c485b;
-    border-radius: 3px;
-}
+// #user-details::-webkit-scrollbar {
+//     width: 6px;
+// }
+// #user-details::-webkit-scrollbar-track {
+//     background-color: #1c2b45;
+// }
+// #user-details::-webkit-scrollbar-thumb {
+//     background-color: #3c485b;
+//     border-radius: 3px;
+// }
 
 #user-details.active {
     // transform: translate(0);

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -18,7 +18,7 @@ import { EventsService } from 'src/app/services/events-service';
   styleUrls: ['./sidebar-user-details.component.scss'],
 })
 export class SidebarUserDetailsComponent implements OnInit, OnChanges {
-  HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
+  // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
   // @Output() onCloseUserDetailsSidebar = new EventEmitter();
 
 
@@ -71,34 +71,41 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.listenTocurrentProjectUserUserAvailability$();
     this.getCurrentStoredProject();
     this.getOSCODE();
-    this.listenOpenUserSidebarEvent();
+    // this.listenOpenUserSidebarEvent();
   }
 
-  listenOpenUserSidebarEvent() {
-    this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
-      this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
-    this.HAS_CLICKED_OPEN_USER_DETAIL = true;
-    });
-  }
+  // listenOpenUserSidebarEvent() {
+  //   this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
+  //     this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL = true;
+  //   });
+  // }
 
   @HostListener('document:click', ['$event'])
   clickout(event) {
-    this.logger.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target)
-    this.logger.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target.id)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target.id)
     const clicked_element_id = event.target.id
     if (this.eRef.nativeElement.contains(event.target)) {
-      this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')
+      // this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')
     } else {
-      this.logger.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
-      if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
         if (!clicked_element_id.startsWith("sidebaravatar")) {
           this.closeUserDetailSidePanel();
         }
         // this.logger.log('[SIDEBAR-USER-DETAILS] clicked outside')
-      }
+     
     }
   }
 
+  closeUserDetailSidePanel() {
+    var element = document.getElementById('user-details');
+    element.classList.remove("active");
+    this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+    // this.HAS_CLICKED_OPEN_USER_DETAIL === true
+    // this.onCloseUserDetailsSidebar.emit(false);
+  }
+
+
   getCurrentChatLangAndTranslateLabels() {
     this.browserLang = this.translate.getBrowserLang();
     const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
@@ -348,11 +355,11 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   ngOnChanges() {
     // console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL', this.HAS_CLICKED_OPEN_USER_DETAIL)
-    var element = document.getElementById('user-details');
-    // console.log('[SIDEBAR-USER-DETAILS] element', element)
-    if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-      element.classList.add("active");
-    }
+    // var element = document.getElementById('user-details');
+    // // console.log('[SIDEBAR-USER-DETAILS] element', element)
+    // if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
+    //   element.classList.add("active");
+    // }
   }
 
   subcribeToAuthStateChanged() {
@@ -372,13 +379,13 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     })
   }
 
-  closeUserDetailSidePanel() {
-    var element = document.getElementById('user-details');
-    element.classList.remove("active");
-    this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
-    this.HAS_CLICKED_OPEN_USER_DETAIL === true
-    // this.onCloseUserDetailsSidebar.emit(false);
-  }
+  // closeUserDetailSidePanel() {
+  //   var element = document.getElementById('user-details');
+  //   element.classList.remove("active");
+  //   this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL === true
+  //   // this.onCloseUserDetailsSidebar.emit(false);
+  // }
 
 
 

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -34,7 +34,7 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 import { SharedModule } from 'src/app/shared/shared.module';
 // import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
-
+import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 @NgModule({
   imports: [
     CommonModule,
@@ -42,6 +42,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     IonicModule,
     TooltipModule,
     ConversationDetailPageRoutingModule,
+    ScrollbarThemeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -1,7 +1,7 @@
 <span *ngIf="conversationWith && loggedUser; then showConversation else showPlaceholder"></span>
 <ng-template #showPlaceholder>
   <!-- class="splash-page" -->
-  <ion-content padding>
+  <ion-content  padding >
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
@@ -37,7 +37,7 @@
     [isOpenInfoConversation]="isOpenInfoConversation">
   </app-header-conversation-detail>
 
-  <ion-content>
+  <ion-content id="conv-details">
     <ion-grid class="grid_content">
       <ion-row class="row_content">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation">
@@ -91,7 +91,7 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea class="ionContentChatArea" (drop)="drop($event)"
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
                 (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
                 (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
                 (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -972,8 +972,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           if (this.conversationWith.startsWith("support-group")) {
 
             const pos = message.lastIndexOf("/");
-            // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
+            this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
 
+            if (pos === -1) {
+              this.tagsCannedFilter = [];
+              this.HIDE_CANNED_RESPONSES = true;
+            }
             // test
             // var rest = message.substring(0, message.lastIndexOf("/") + 1);
             // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
@@ -1237,8 +1241,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
 
     this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea ", textArea);
-    this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea value", textArea.value)
-    this.insertAtCursor(textArea, '/');
+    // console.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea value", textArea.value)
+    var lastChar = textArea.value[textArea.value.length - 1]
+    // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses lastChar', lastChar)
+    if (lastChar !== '/' ) {
+      this.insertAtCursor(textArea, '/');
+    }
     // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses textArea.value', textArea.value)
     // setTimeout(() => {
     //   // if (textArea.value === '/') {

package/src/app/pages/conversations-list/conversations-list.module.ts

@@ -18,7 +18,7 @@ import { ContactsDirectoryPageModule } from '../contacts-directory/contacts-dire
 import { ProfileInfoPageModule } from '../profile-info/profile-info.module';
 // import { ConversationDetailPageModule } from '../conversation-detail/conversation-detail.module';
 import { SharedModule } from 'src/app/shared/shared.module';
-
+import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 @NgModule({
   imports: [
     CommonModule,
@@ -28,6 +28,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
     // ConversationDetailPageModule,
     ContactsDirectoryPageModule,
     ProfileInfoPageModule,
+    ScrollbarThemeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -15,7 +15,7 @@
 </ion-header>
 
 <ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" appScrollbarTheme>
-
+  <!-- class="ps" style="position: relative; max-width: 600px; max-height: 100%;" [perfectScrollbar]="config" -->
   <div id="scrollbar2">
     <ion-list>
 

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -1,3 +1,5 @@
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+
 ion-header {
   border-bottom-style: solid;
   border-color: var(--light-gray);
@@ -304,10 +306,16 @@ ion-list {
 }
 
 .pinned-project {
-
   color: #3880ff;
   position: absolute;
   right: 8px;
   top: 2px;
   // font-size: 12px !important;
 }
+
+// #convs-list {
+//   overflow: hidden;
+// }
+// #convs-list:hover {
+//   overflow-y: scroll;
+// }

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -120,13 +120,14 @@ export class ConversationListPage implements OnInit {
     this.listenSupportConvIdHasChanged();
     // this.listenDirectConvIdHasChanged();
     this.listenToCloseConvFromHeaderConversation();
+    
   }
 
 
 
   listenSupportConvIdHasChanged() {
     this.events.subscribe('supportconvid:haschanged', (IDConv) => {
-      console.log('[CONVS-LIST-PAGE] - listen To convid:haschanged - convId', IDConv);
+      // console.log('[CONVS-LIST-PAGE] - listen To convid:haschanged - convId', IDConv);
       if (IDConv) {
         // const conversationSelected = this.conversations.find(item => item.uid === convId);
         // this.onConversationSelected(conversationSelected)
@@ -206,6 +207,15 @@ export class ConversationListPage implements OnInit {
     // });
   }
 
+  ngOnChanges() {
+    this.getConversationListHeight()
+  }
+
+  getConversationListHeight() {
+    var scrollbar2element = document.getElementById('scrollbar2');
+    console.log('[CONVS-LIST-PAGE] getConversationListHeight scrollbar2element', scrollbar2element) 
+  }
+
 
   getAppConfigToHideDiplayBtns() {
     const appConfig = this.appConfigProvider.getConfig();
@@ -873,10 +883,10 @@ export class ConversationListPage implements OnInit {
 
   listenToCloseConvFromHeaderConversation() {
     this.events.subscribe('hasclosedconversation', (convId) => {
-      console.log('[CONVS-LIST-PAGE] hasclosedconversation  convId', convId)
+      this.logger.log('[CONVS-LIST-PAGE] hasclosedconversation  convId', convId)
 
       const conversation = this.conversations.find(conv => conv.uid === convId)
-      console.log('[CONVS-LIST-PAGE] hasclosedconversation  conversation', conversation)
+      this.logger.log('[CONVS-LIST-PAGE] hasclosedconversation  conversation', conversation)
       this.onCloseConversation(conversation)
     });
   }
@@ -898,10 +908,10 @@ export class ConversationListPage implements OnInit {
 
     const conversationId = conversation.uid;
 
-    console.log('[CONVS-LIST-PAGE] onCloseConversation conversationId: ', conversationId)
+    this.logger.log('[CONVS-LIST-PAGE] onCloseConversation conversationId: ', conversationId)
 
     const conversationWith_segments = conversationId.split('-');
-    console.log('[CONVS-LIST-PAGE] - conversationId_segments: ', conversationWith_segments);
+    this.logger.log('[CONVS-LIST-PAGE] - conversationId_segments: ', conversationWith_segments);
 
     // Removes the last element of the array if is = to the separator 
     if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
@@ -910,8 +920,8 @@ export class ConversationListPage implements OnInit {
 
     if (conversationWith_segments.length === 4) {
       const lastArrayElement = conversationWith_segments[conversationWith_segments.length - 1]
-      console.log('[CONVS-LIST-PAGE] - lastArrayElement ', lastArrayElement);
-      console.log('[CONVS-LIST-PAGE] - lastArrayElement length', lastArrayElement.length);
+      this.logger.log('[CONVS-LIST-PAGE] - lastArrayElement ', lastArrayElement);
+      this.logger.log('[CONVS-LIST-PAGE] - lastArrayElement length', lastArrayElement.length);
       if (lastArrayElement.length !== 32) {
         conversationWith_segments.pop();
       }
@@ -937,19 +947,19 @@ export class ConversationListPage implements OnInit {
     const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
 
     this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationId).subscribe(res => {
-      console.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT RES', res);
+      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT RES', res);
 
       if (res) {
         const project_id = res.id_project
-        console.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT  project_id', project_id);
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT  project_id', project_id);
         this.archiveSupportGroupConv(tiledeskToken, project_id, conversationId);
       }
 
     }, (error) => {
-      console.error('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error);
+      this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error);
 
     }, () => {
-      console.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *');
+      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *');
 
     });
   }

package/src/app/utils/scrollbar-theme.directive.ts

@@ -4,42 +4,76 @@ import { NgModule, Directive, ElementRef } from '@angular/core';
 })
 export class ScrollbarThemeDirective {
   constructor(el: ElementRef) {
+    // ::-webkit-scrollbar {
+    //   width: 6px;
+    //   height: 8px;
+    // }
+    // ::-webkit-scrollbar-track {
+    //   background-color: #f9f9f9;
+    // }
+    // ::-webkit-scrollbar-thumb {
+    //   background-color: #b9b9b9;
+    //   border-radius: 0px;
+    // }
+    
+    // ::-webkit-scrollbar-thumb:hover {
+    //   background-color: #727272;
+    // }
+
     const stylesheet = `
       ::-webkit-scrollbar {
-      width: 10px;
+          width: 6px;
+         height: 8px;
       }
       ::-webkit-scrollbar-track {
-      background: #0f0f0f;
+      background: #f9f9f9;
       }
       ::-webkit-scrollbar-thumb {
-      border-radius: 1rem;
-      background: linear-gradient(var(--ion-color-light-tint), var(--ion-color-light));
-      border: 4px solid #020202;
+         background-color: #b9b9b9;
+          border-radius: 0px;
       }
       ::-webkit-scrollbar-thumb:hover {
+        background-color: #727272;
       }
+    `;
 
-      ::-webkit-scrollbar {
-        width: 20px;
-      }
+
+    // const stylesheet = `
+    //   ::-webkit-scrollbar {
+    //   width: 10px;
+    //   }
+    //   ::-webkit-scrollbar-track {
+    //   background: #0f0f0f;
+    //   }
+    //   ::-webkit-scrollbar-thumb {
+    //   border-radius: 1rem;
+    //   background: linear-gradient(var(--ion-color-light-tint), var(--ion-color-light));
+    //   border: 4px solid #020202;
+    //   }
+    //   ::-webkit-scrollbar-thumb:hover {
+    //   }
+
+    //   ::-webkit-scrollbar {
+    //     width: 20px;
+    //   }
   
-      /* Track */
-      ::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 5px grey; 
-        border-radius: 10px;
-      }
+    //   /* Track */
+    //   ::-webkit-scrollbar-track {
+    //     box-shadow: inset 0 0 5px grey; 
+    //     border-radius: 10px;
+    //   }
   
-      /* Handle */
-      ::-webkit-scrollbar-thumb {
-        background: red; 
-        border-radius: 10px;
-      }
+    //   /* Handle */
+    //   ::-webkit-scrollbar-thumb {
+    //     background: red; 
+    //     border-radius: 10px;
+    //   }
   
-      /* Handle on hover */
-      ::-webkit-scrollbar-thumb:hover {
-        background: #b30000; 
-      }
-    `;
+    //   /* Handle on hover */
+    //   ::-webkit-scrollbar-thumb:hover {
+    //     background: #b30000; 
+    //   }
+    // `;
 
     setTimeout(() => {
       const styleElmt = el.nativeElement.shadowRoot.querySelector('style');
@@ -50,7 +84,7 @@ export class ScrollbarThemeDirective {
         barStyle.append(stylesheet);
         el.nativeElement.shadowRoot.appendChild(barStyle);
       }
-    }, 2500);
+    }, 0);
 
   }
 }

package/src/global.scss

@@ -58,7 +58,6 @@ body {
     // -webkit-font-smoothing: subpixel-antialiased !important;
     // text-shadow: 0px 0px 0px !important;
     // -webkit-text-stroke-width: 0.01px !important;
-  
 }
 
 // Ionic 'Split Pane' styles need to be tweaked to
@@ -871,26 +870,16 @@ select:-webkit-autofill:focus {
 /* // NK end NEW: AVATAR ON THE SIDEBAR  */
 
 /* NK start CUSTOM SCROLL BAR */
-/* width */
+
 ::-webkit-scrollbar {
-    width: 3px;
+    width: 6px;
 }
-
-/* Track */
 ::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background-color: #1c2b45;
 }
-
-/* Handle */
 ::-webkit-scrollbar-thumb {
-    background: #888;
-    /* border-radius: 6px; */
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-    background: #555;
-    /* width: 10px !important; */
+    background-color: #3c485b;
+    border-radius: 3px;
 }
 /* NK end CUSTOM SCROLL BAR */
 
@@ -959,30 +948,6 @@ select:-webkit-autofill:focus {
 }
 /* // NK end NEW: AVATAR ON THE SIDEBAR  */
 
-/* NK start CUSTOM SCROLL BAR */
-/* width */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-    background: #888;
-    /* border-radius: 6px; */
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-    background: #555;
-    /* width: 10px !important; */
-}
-/* NK end CUSTOM SCROLL BAR */
-
 /* SIDEBAR NAV ITEMS  */
 
 .item-active a {