@chat21/chat21-ionic 3.0.107-rc.3 → 3.0.107-rc.7

package/src/app/modals/send-email/send-email.page.scss

@@ -1,3 +1,20 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
 
 .content-container{
     padding-top: 40px;
@@ -61,6 +78,11 @@ ion-input{
     width: 100%;
 }
 
+.field-wrapper input:focus-visible,
+.field-wrapper textarea:focus-visible{
+    outline: var(--border-focus-color) auto 1px;
+}
+
 .field-wrapper .field-placeholder{
     font-size: 16px;
     position: absolute;
@@ -80,17 +102,18 @@ ion-input{
 }        
 
 .field-wrapper .field-placeholder span{
-    background: #ffffff;
-    padding: 0px 8px;
+    // background: #ffffff;
+    // padding: 0px 8px;
 }
 
 .field-wrapper input:not([disabled]):focus~.field-placeholder,
 .field-placeholder:target,
 .field-wrapper.hasValue input:not([disabled])~.field-placeholder{
-    -webkit-transform: scale(.75) translateY(-35px) translateX(-18px);
-    transform: scale(.75) translateY(-35px) translateX(-18px);
-    color:rgb(0,86,192);
+    -webkit-transform: scale(.75) translateY(-50px) translateX(-30px);
+    transform: scale(.75) translateY(-50px) translateX(-30px);
+    color:var(--title-focus-color);
     font-weight: bold; 
+    font-size: 18px;
 }
 
 .field-wrapper-email{
@@ -147,8 +170,8 @@ ion-label.message-placeholder{
     justify-content: center;
 
     ion-button{
-        background-color:rgb(0,86,192);
-        color:#f1f4f7;
+        background-color:var(--button-background-color);
+        color:var(--button-text-color);
         border-radius: 4px;
         font-size: 18px;
         height: 46px;

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.html

@@ -13,7 +13,7 @@
 <ion-content *ngIf="selectionView && !displayError" class="content-container">
 
 
-  <ion-list lines="full">
+  <ion-list lines="full" color="none">
     <ion-item *ngFor="let template of templates" button detail="true" (click)="selectTemplate(template.id)">
       <ion-label>
         <div class="label-container">

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.scss

@@ -1,3 +1,21 @@
+ion-toolbar{
+    --background: var(--modal-header-background);
+    &:not(.mobile){
+        // --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    ion-button,
+    ion-title{
+        --color: var(--modal-icon-color);
+    }
+}
+ion-content{
+    --background: var(--modal-content-background);
+}
+
 .error-container {
     margin-top: 70px;
     display: flex;

package/src/app/pages/contacts-directory/contacts-directory.page.html

@@ -1,15 +1,14 @@
-<ion-header>
-  <ion-toolbar [class.mobile]="isMobile">
-    <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</ion-title>
+<ion-toolbar [class.mobile]="isMobile">
+  <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</ion-title>
 
-    <ion-buttons slot="end">
-      <ion-button ion-button fill="clear" (click)="onClose()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
+  <ion-buttons slot="end">
+    <ion-button ion-button fill="clear" (click)="onClose()">
+      <ion-icon slot="icon-only" name="close"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+</ion-toolbar>
 
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
   <component-contacts-directory 

package/src/app/pages/contacts-directory/contacts-directory.page.scss

@@ -1,15 +1,17 @@
 ion-toolbar {
     height: var(--header-height);   
+    --background: transparent;
     &:not(.mobile){
-        --background: var(--list-bkg-color);
+        // --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-button,
+    ion-title{
+        --color: var(--icon-color);
     }
 }
 

package/src/app/pages/contacts-directory/contacts-directory.page.ts

@@ -83,21 +83,6 @@ export class ContactsDirectoryPage implements OnInit {
     });
   }
 
-  /** */
-  getTokenFromLocalStorage() {
-    let token = localStorage.getItem('tiledeskToken'); // ??? NN CREDO SIA USATO
-    this.logger.log('[CONTACT-DIRECTORY-PAGE] getTokenFromLocalStorage token ', token);
-    const user = JSON.parse(localStorage.getItem('user'));
-    if (user) {
-      this.logger.log('[CONTACT-DIRECTORY-PAGE] DSHBRD STORED USER: ', user);
-      if (user.token) {
-        token = user.token;
-        this.logger.log('[CONTACTS-DIRECTORY] DSHBRD STORED USER > TOKEN: ', user.token);
-      }
-    }
-    return token;
-  }
-
   /** */
   async onClose() {
     this.logger.log('[CONTACT-DIRECTORY-PAGE] - onClose MODAL')

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

@@ -60,7 +60,7 @@ ion-content {
     &#conv-details:not(.mobile){
         --background: var(--list-bkg-color);
     }
-    --background: white;
+    --background: transparent;;
 
     ion-item {
         --padding-end: 0px;
@@ -86,7 +86,7 @@ ion-content {
         position: absolute;
         top: 0;
         overflow: hidden;
-        background-color: white;
+        background-color: var(--conversation-detail-background);
 
         &:not(.mobile){
             border-radius: var(--border-radius-content);;
@@ -105,7 +105,6 @@ ion-content {
     }
     .row_message_text_area {
         min-height: 50px;
-        background-color: white;
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
@@ -119,6 +118,7 @@ ion-content {
         height: 100%;
         margin: 0;
         padding: 0;
+        background: transparent;
         &.open {
             max-width: auto;
             min-width: calc(100% - 320px);
@@ -136,7 +136,7 @@ ion-content {
         padding: 0;
         margin: 0;
         border-left-style: solid;
-        border-color: var(--light-gray);
+        border-color: var(--border-color-base);
         border-left-width: thin;
         display: block;
         overflow: hidden;
@@ -229,7 +229,7 @@ ion-content {
 
 .ionContentChatArea {
     opacity: 0;
-    --background: white;
+    --background: var(--conversation-detail-background);
     &.active {
         opacity: 1;
     }

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

@@ -531,7 +531,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.addEventsKeyboard()
     this.updateConversationBadge() // AGGIORNO STATO DELLA CONVERSAZIONE A 'LETTA' (is_new = false)
 
-
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {
@@ -742,16 +741,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     //               .set('buttonTextColor', 'var(--buttonTextColor)')
     //               .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
     //               .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
-    this.styleMap.set('themeColor', '#2a69c1')
-                  .set('bubbleReceivedBackground', '#f0f2f7')
-                  .set('bubbleReceivedTextColor', '#06132b')
-                  .set('bubbleSentBackground', '#2a6ac1')
-                  .set('bubbleSentTextColor', '#ffffff')
-                  .set('buttonFontSize', '15px')
-                  .set('buttonBackgroundColor', '#ffffff')
-                  .set('buttonTextColor', '#2a6ac1')
-                  .set('buttonHoverBackgroundColor', '#2a6ac1')
-                  .set('buttonHoverTextColor', ' #ffffff')
+    this.styleMap.set('themeColor', 'var(--basic-blue)')
+                  .set('bubbleReceivedBackground', 'var(--bck-msg-received)')
+                  .set('bubbleReceivedTextColor', 'var(--col-msg-received)')
+                  .set('bubbleSentBackground', 'var(--bck-msg-sent)')
+                  .set('bubbleSentTextColor', 'var(--col-msg-sent)')
+                  .set('buttonFontSize', 'var(--button-in-msg-font-size)')
+                  .set('buttonBackgroundColor', 'var(--buttonBackgroundColor)')
+                  .set('buttonTextColor', 'var(--buttonTextColor)')
+                  .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
+                  .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
 
   }
   // -------------------------------------------------------------------------------------

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

@@ -39,7 +39,6 @@
           </ion-note> -->
      
           <app-project-item
-            style="width: 100%; margin: 0px 8px; border-bottom: 1px dashed #d3dbe5;" 
             (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"
             (projectIdEvent)="getLastProjectId($event)">
           </app-project-item>

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

@@ -43,6 +43,12 @@ ion-content {
   }
 }
 
+app-project-item{
+  width: 100%; 
+  margin: 0px 8px; 
+  border-bottom: 1px dashed var(--border-color-base);
+}
+
 ion-list {
   display: block;
   margin-block-start: 1em;
@@ -119,23 +125,6 @@ ion-list {
       font-family: Helvetica, Helvetica, Arial, sans-serif;
       line-height: 1.28;
       text-rendering: optimizeLegibility;
-      .conversation_with {
-        color: rgba(0, 0, 0, 1);
-        font-size: 15px;
-        font-weight: 400;
-        line-height: 1.4;
-      }
-      .conversation_message {
-        p {
-          color: rgba(153, 153, 153, 1);
-          font-size: 13px;
-          font-weight: 400;
-          height: 18px;
-          &.not-read {
-            font-weight: bold;
-          }
-        }
-      }
     }
     ion-note {
       position: absolute;

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

@@ -52,6 +52,7 @@ import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Globals } from 'src/app/utils/globals';
 import { TriggerEvents } from 'src/app/services/triggerEvents/triggerEvents';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { Project } from 'src/chat21-core/models/projects';
 
 @Component({
   selector: 'app-conversations-list',
@@ -102,7 +103,7 @@ export class ConversationListPage implements OnInit {
   public isInitialized: boolean = false;
 
   // PROJECT AVAILABILITY INFO: start
-  project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  project: Project
   profile_name_translated: string;
   selectedStatus: any;
   teammateStatus = [
@@ -475,35 +476,25 @@ export class ConversationListPage implements OnInit {
         this.project = {
           _id: projectObjct['id_project']['_id'],
           name: projectObjct['id_project']['name'],
-          type: projectObjct['id_project']['profile']['type'],
+          profile: projectObjct['id_project']['profile'],
           isActiveSubscription: projectObjct['id_project']['isActiveSubscription'],
-          plan_name: projectObjct['id_project']['profile']['name']
+          trialExpired: projectObjct['id_project']['trialExpired']
         }
 
-        const trial_expired = projectObjct['id_project']['trialExpired']    
-        const profile_name = projectObjct['id_project']['profile']['name'];
-      
-        if (this.project.type === 'free') {
+        if (this.project.profile.type === 'free') {
 
-          if (trial_expired === false) {
+          if (this.project.trialExpired === false) {
             this.profile_name_translated = this.translationMapHeader.get('ProPlanTrial');
-          } else if (trial_expired === true) {
+          } else if (this.project.trialExpired === true) {
              this.profile_name_translated = this.translationMapHeader.get('FreePlan');
           }
-        } else if (this.project.type === 'payment' && profile_name === 'pro') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'pro') {
           this.profile_name_translated = this.translationMapHeader.get('PaydPlanNamePro');
-        } else if (this.project.type === 'payment' && profile_name === 'enterprise') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'enterprise') {
           this.profile_name_translated = this.translationMapHeader.get('PaydPlanNameEnterprise');
         }
       }
     })
-
-    try {
-      // this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
-      // console.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
-    } catch (err) {
-      this.logger.error('[CONVS-LIST-PAGE] - GET STORED TOKEN ', err)
-    }
   }
 
   listenTocurrentProjectUserUserAvailability$() {

package/src/app/pages/profile-info/profile-info.page.html

@@ -108,17 +108,17 @@
         <span class="material-icons user-details-plan-icon">apps</span>
         <span>
             <div> {{project?.name}} </div>
-            <div style="display: inline-block;    margin-left: 26px;"> {{ profile_name_translated }} </div>
+            <div style="margin-left: 26px;"> {{ profile_name_translated }} </div>
 
-            <div *ngIf="project?.type === 'payment' && project?.isActiveSubscription === false"
+            <div *ngIf="project?.profile?.type === 'payment' && project?.isActiveSubscription === false"
                 style="color:#f44336; position:relative; top: -1px;display: inline-block;">
-                <i *ngIf="project?.plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+                <i *ngIf="project?.profile?.name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
                     matTooltip="{{ translationsMap.get('SubscriptionPaymentProblem') }}" #tooltip="matTooltip" matTooltipPosition='right'
                     matTooltipHideDelay="100">
                     error_outline
                 </i>
-                <i *ngIf="project?.plan_name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+                <i *ngIf="project?.profile?.name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip" matTooltip="{{ translationsMap.get('ThePlanHasExpired') }}"
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline

package/src/app/pages/profile-info/profile-info.page.scss

@@ -71,13 +71,20 @@
 ion-toolbar{
     position: absolute;
     z-index: 2;
-    --ion-toolbar-background: transparent;
+    --background: transparent;
+
+    ion-icon{
+        color: var(--sidebar-icon-color);
+        &:hover {
+            opacity: 0.8 !important;
+        }
+    }
 }
 
 .availability-section {
     // top: 320px;
     text-align: center;
-    background-color: #2d323e;
+    background-color: var(--user-detail-select-background);
     padding: 4px 0px;
     width: 192px;
     border-radius: 4px;
@@ -91,14 +98,14 @@ ion-toolbar{
 .first-divider {
     // margin-top: 365px;
     border: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-top: 1px solid var(--border-color-base);
     margin-bottom: 20px;
 }
 
 .user-details-plan-info {
     font-size: 13px;
     text-transform: capitalize;
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     font-weight: 500;
     line-height: 21px;
 }
@@ -125,12 +132,15 @@ ion-toolbar{
     z-index: 1;
     // bottom: 50px;
     // bottom: 55px;
+    :hover .user-details-logout-icon,
+    :hover  .user-details-logout-text{
+        color: var(--sidebar-hover-icon-color);
+    }
     
 }
 
 .logout-btn-wpr {
     cursor: pointer;
-    color: #fff;
 }
 
 .footer-margin-top-pricing-no-visible {
@@ -138,13 +148,16 @@ ion-toolbar{
 }
 
 .user-details-logout-icon {
-    color: #a9afbb;
+    color: var(--sidebar-icon-color);
     font-size: 30px;
     // margin-top: 30px;
 }
 
 .user-details-logout-icon:hover {
-    color: #fff;
+    color: var(--sidebar-icon-color);
+}
+.user-details-logout-text{
+    color: var(--sidebar-icon-color);
 }
 
 
@@ -152,7 +165,7 @@ ion-toolbar{
     width: 100%;
     height: 100%;
     font-family: "Poppins";
-    --ion-background-color:#2d323e;
+    --ion-background-color:var(--sidebar-background-color);
     
     .buttons-header{
         position: absolute;
@@ -161,7 +174,6 @@ ion-toolbar{
     }
 
     .content-user-profile {
-        background-color: #2d323e;
         width: 100%;
         height: 230px;
         .user {
@@ -173,23 +185,31 @@ ion-toolbar{
             min-height: 160px;
             max-height: 160px;
             display: block;
-            background-color: #1e2129;
-            color: #fff;
+            background-color: var(--sidebar-header-background);
+            color: var(--sidebar-color);
             padding-top: 40px;
         }
         .email {
-            color: rgba(255,255,255,.5); 
-            font-size: 13px; 
+            font-size: 14px; 
             margin-top: 5px; 
-            font-weight: bold;
-            line-height: 1.4em;
-            margin-bottom: 15px;
+            font-family: "Poppins";
+            font-weight: 400;
+            line-height: 19px;
+            white-space: nowrap;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         .username {
             font-size: 16px;
-            font-weight: bold;
+            font-family: "Poppins";
+            font-weight: 500;
+            line-height: 24px;
+            white-space: nowrap;
             margin-top: 15px;
             margin-bottom: 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         // ion-toolbar {
@@ -203,8 +223,8 @@ ion-toolbar{
     }
 
     .avatar-container {
-        background-color: #2d323e;
-        color: #fff;
+        background-color:  var(--sidebar-header-background);
+        color: var(--sidebar-color);
         text-align: center;
         position: absolute;
         top: 110px;
@@ -215,9 +235,7 @@ ion-toolbar{
         left: 50%;
         min-width: 100px;
         min-height: 100px;
-        border-color: #2d323e;
-        border-style: solid;
-        border-width: 2px;
+        border: 2px solid  var(--sidebar-header-background);
         line-height: 100px;
         font-size: 32px;
     }
@@ -333,11 +351,11 @@ ion-toolbar{
 
 }
 ion-footer{
-    --ion-background-color: #1e2129;
+    background-color: var(--sidebar-background-color);
     .content-chat-version {
-        color: white;
+        color: var(--sidebar-color);;
         padding: 20px;
-        background-color: #1e2129;
+        text-align: center;
     }
     .chat-title{
         font-size: 14px;

package/src/app/pages/profile-info/profile-info.page.ts

@@ -22,6 +22,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { checkPlatformIsMobile, setLastDateWithLabels } from 'src/chat21-core/utils/utils';
+import { Project } from 'src/chat21-core/models/projects';
 
 @Component({
   selector: 'app-profile-info',
@@ -45,7 +46,7 @@ export class ProfileInfoPage implements OnInit {
   @Input() selectedStatus: number;
   @Input() profile_name_translated: string;
   @Input() token: string;
-  @Input() project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  @Input() project: Project;
 
   isVisiblePAY: boolean;
   teammateStatus = [

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

@@ -1,16 +1,16 @@
 <ion-header>
   <ion-toolbar [class.mobile]="isMobile">
+    <ion-buttons slot="start">
+      <ion-button ion-button fill="clear" (click)="onClose()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
       {{translationMap?.get('UnassignedConversations') }}
     </ion-title>
     <ion-title *ngIf="callerBtn === 'pinbtn'" style="font-size: 16px;">
       {{translationMap?.get('PIN_A_PROJECT') }}
     </ion-title>
-    <ion-buttons slot="end">
-      <ion-button ion-button fill="clear" (click)="onClose()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

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

@@ -9,7 +9,7 @@ ion-toolbar {
   }
 
   ion-button{
-      --color: var(--basic-blue);
+      --color: var(--icon-color);
   }
 }
 
@@ -18,7 +18,7 @@ ion-content {
   --overflow: hidden;
   overflow: scroll;
   &:not(.mobile){
-    background: var(--list-bkg-color);
+    --background: var(--list-bkg-color);
   }
 
   &::-webkit-scrollbar {