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

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

@@ -1,7 +1,7 @@
 // @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
 #user-details {
-    background-color: #1e2129;
-    color: #fff;
+    background-color: var(--sidebar-background-color);
+    color: var(--sidebar-color);
     // height: calc(100% - 60px);
     height: 100%;
     overflow-y: auto;
@@ -39,42 +39,26 @@
     left: 0px;
 }
 
-#user-details .user-details-btn-close svg {
-    fill: #647491;
-}
-
-#user-details .user-details-btn-close {
-    opacity: 1;
+.user-details-btn-close {
     position: absolute;
     right: 16px;
     top: 20px;
-}
-
-button.user-details-btn-close {
     -webkit-appearance: none;
+    appearance: none;
     background: 0 0;
     border: 0;
     cursor: pointer;
-    outline: none;
     padding: 0;
-}
 
-.user-details-btn-close {
-    color: #000;
-    float: right;
-    font-size: 21px;
-    font-weight: 700;
-    line-height: 1;
-    opacity: 0.2;
-}
+    svg {
+        fill: var(--sidebar-icon-color);
+    }
 
-.user-details-btn-close:hover {
-    color: #000;
-    cursor: pointer;
-    opacity: 0.5 !important;
-    text-decoration: none;
-}
+    &:hover {
+        opacity: 0.8 !important;
+    }
 
+}
 .user-details-dshbrd-lang {
     position: absolute;
     top: 20px;
@@ -84,14 +68,9 @@ button.user-details-btn-close {
 
 .user-details-dshbrd-lang-code {
     text-transform: uppercase;
-    color: #647491;
+    color: var(--sidebar-icon-color);
     position: relative;
     top: -3px;
-}
-
-.user-details-dshbrd-lang-code {
-    text-transform: uppercase;
-    color: #647491;
     font-family: "Roboto", sans-serif !important;
     font-size: 14px;
 }
@@ -101,23 +80,14 @@ button.user-details-btn-close {
     // cursor: pointer;
     position: absolute;
     top: 82px;
+    left: 0px;
+    right: 0px;
     border-radius: 50%;
     padding: 4px 4px 1px 4px;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    left: 50%;
-    background: #2d323e;
+    display: flex;
+    justify-content: center;
 }
 
-// width: 109px;
-// height: 109px;
-// margin: 0;
-// border-radius: 50%;
-// -o-object-fit: cover;
-// object-fit: cover;
-// position: relative;
-// top: 2px;
-
 .user-img-in-sidebar-user-details {
     width: 103px;
     height: 103px;
@@ -185,7 +155,7 @@ button.user-details-btn-close {
     text-align: center;
     margin-top: 5px;
     text-transform: uppercase;
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     font-weight: 500;
     font-family: "Roboto", sans-serif !important;
     margin-bottom: 8px !important;
@@ -193,18 +163,18 @@ button.user-details-btn-close {
 
 .user-details-view-profile {
     font-size: 14px;
-    color: #00d5ff;
+    color: var(--sidebar-user-detail-profile-color);
     cursor: pointer;
+    &:hover {
+        text-decoration: underline;
+     }
 }
 
-.user-details-view-profile:hover {
-   text-decoration: underline;
-}
 
 .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;
@@ -218,28 +188,10 @@ button.user-details-btn-close {
 .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;
 }
 
-.camera-on-hover {
-    cursor: pointer;
-    position: absolute;
-    top: 80px;
-    border-radius: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    left: 50%;
-    width: 90px;
-    height: 90px;
-    padding: 33px;
-    background: rgba(45, 50, 62, 0.7);
-    opacity: 0;
-}
-
-.camera-on-hover:hover {
-    opacity: 1;
-}
 .user-details-user-isbusy {
     color: #feb92c;
     background-color: #2d323e;
@@ -261,7 +213,7 @@ button.user-details-btn-close {
 .user-details-plan-info {
     font-size: 13px;
     text-transform: capitalize;
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     font-weight: 500;
     line-height: 21px;
 }
@@ -273,15 +225,13 @@ button.user-details-btn-close {
     margin-right: 6px;
 }
 
-
-
 .user-details-help-center-icon {
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     font-size: 20px;
     vertical-align: middle;
     margin-right: 3px;
     svg{
-        fill: #a9afbb
+        fill: var(--sidebar-user-detail-color);
     }
 }
 
@@ -289,15 +239,14 @@ button.user-details-btn-close {
     margin-top: 6px;
     font-size: 13px;
     font-weight: 500;
-    color: #a9afbb;
+    color: var(--sidebar-user-detail-color);
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
     cursor: pointer;
-}
 
-.user-details-help-center:hover { 
-    color: #fff;
-    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 .user-details-footer-section {
@@ -315,7 +264,10 @@ button.user-details-btn-close {
     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 {
@@ -326,15 +278,15 @@ button.user-details-btn-close {
     padding-top: 240px;
 }
 .user-details-logout-icon {
-    color: #a9afbb;
+    color: var(--sidebar-icon-color);
     font-size: 30px;
     // margin-top: 30px;
+    
 }
 
-.user-details-logout-icon:hover {
-    color: #fff;
+.user-details-logout-text{
+    color: var(--sidebar-icon-color);
 }
-
 .user-details-footer-chat-version {
     position: absolute;
     // bottom: 11px;
@@ -377,16 +329,18 @@ button.user-details-btn-close {
     color: #eee;
 }
 
-::ng-deep .custom-mat-tooltip {
-    background-color: #2d323e !important;
-    font-size: 12px !important;
-    border-radius: 2px !important;
-    font-family: "Poppins" !important;
-}
-
 .sidebar-user-details-altenative-user-avatar {
     line-height: 3.2;
     font-weight: 400;
     font-family: "Poppins";
     font-size: 32px;
 }
+
+
+::ng-deep .custom-mat-tooltip {
+    background-color: var(--tooltip-bckground);
+    color: var(--tooltip-color) !important;
+    font-size: 12px  !important;
+    border-radius: 2px !important;
+    font-family: 'Poppins' !important;
+}

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

@@ -13,6 +13,7 @@ import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { environment } from 'src/environments/environment';
+import { Project } from 'src/chat21-core/models/projects';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -36,7 +37,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   SubscriptionPaymentProblem: string;
   user: any
   tiledeskToken: string;
-  project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  // project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  project: Project;
   _prjct_profile_name: string;
 
   isVisiblePAY: boolean;
@@ -281,24 +283,21 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         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.getProPlanTrialTranslation();
-          } else if (trial_expired === true) {
+          } else if (this.project.trialExpired === true) {
             this.getFreePlanTranslation();
           }
-        } else if (this.project.type === 'payment' && profile_name === 'pro') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'pro') {
           this.getProPlanTranslation();
-        } else if (this.project.type === 'payment' && profile_name === 'enterprise') {
+        } else if (this.project.profile.type === 'payment' && this.project.profile.name === 'enterprise') {
           this.getEnterprisePlanTranslation();
         }
       }
@@ -388,8 +387,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       profilestatus = 'inactive'
     }
 
-    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, IS_AVAILABLE, profilestatus)
-      .subscribe((projectUser: any) => {
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, IS_AVAILABLE, profilestatus).subscribe((projectUser: any) => {
 
         this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)
 

package/src/app/modals/create-canned-response/create-canned-response.page.html

@@ -18,14 +18,14 @@
   </ion-header> -->
   <ion-content>
     <ion-list>
-      <ion-item button (click)="addPlaceholdertoMsg('$recipient_name')"
+      <ion-item button color="none" (click)="addPlaceholdertoMsg('$recipient_name')"
         (mouseover)="mouseOverBtnAddRecipientNamePlaceholder = true"
         (mouseout)="mouseOverBtnAddRecipientNamePlaceholder = false">
         <ion-label>
           {{translationsMap?.get('First_name_of_recipient')}}
         </ion-label>
       </ion-item>
-      <ion-item button (click)="addPlaceholdertoMsg('$agent_name')"
+      <ion-item button color="none" (click)="addPlaceholdertoMsg('$agent_name')"
         (mouseover)="mouseOverBtnAddAgentNamePlaceholder = true"
         (mouseout)="mouseOverBtnAddAgentNamePlaceholder = false">
         <ion-label>
@@ -99,24 +99,6 @@
       
       </div>
 
-      <!-- <div class="field-wrapper-email">
-        <ion-textarea
-          id="message"
-          formControlName="message"
-          autosize="false" 
-          autoGrow="true" 
-          autofocus="true" 
-          (ngModelChange)="cannedResponseMessageChanged($event)"
-          placeholder="{{translationsMap?.get('WriteMsgToSendToYourVisitors')}}">
-        </ion-textarea>
-
-        
-
-        <div class="info-wrapper">
-          <ion-label>Powered by</ion-label>
-          <img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg">
-        </div>
-      </div> -->
 
       <div class="field-wrapper-submit">
         <ion-button [disabled]="cannedFormGroup.invalid" ion-button fill="clear" type="submit">{{translationsMap?.get('Add')}}</ion-button>

package/src/app/modals/create-canned-response/create-canned-response.page.scss

@@ -1,11 +1,35 @@
+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);
+
+    ion-list{
+        background: transparent;
+    }
+
+}
+
 #create-canned-response-content {
+
     .content-container{
         padding-top: 40px;
         padding-left: 64px;
         padding-right: 64px;
     }
 
-    on-label + ion-input:focus {
+    ion-label + ion-input:focus {
         color: rgb(5, 102, 255);
         font-weight: bold;
     }
@@ -38,7 +62,7 @@
             justify-content: flex-end;
 
             ion-button{
-                color: rgb(98, 112, 139);
+                color: var(--button-no-background-text-color)
             }
         }
         
@@ -55,9 +79,16 @@
         border-radius: 4px;
         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;
+        font-size: 15px;
         position: absolute;
         /* background: #fff; */
         bottom: 17px;
@@ -75,17 +106,18 @@
     }        
     
     .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{
@@ -120,23 +152,7 @@
         font-weight: 400;
         max-width: 100%
     }
-    
-    .info-wrapper{
-        display: flex;
-        flex-direction: column;
-        -webkit-box-align: center;
-        align-items: center;
-        margin-top: 20px;
-        // padding-bottom: 30px;
-        position: relative;
-        text-align: center;
-        color: rgb(98, 112, 139);
-        font-size: 13px;
-    
-        img{
-            max-width: 35%;
-        }
-    }
+
     
     .field-wrapper-submit{
         margin-top: 20px;
@@ -144,8 +160,8 @@
         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;
@@ -204,6 +220,7 @@
 
 .my-custom-menu {
     --width: 300px;
+    --background: var(--modal-content-background);
     margin-top: 57px;
 
     ion-item{

package/src/app/modals/create-ticket/create-ticket.page.html

@@ -9,7 +9,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content >
+<ion-content>
 
   <ion-grid class="ion-grid-custom-padding" [ngClass]="{'center-content': ticketCreationCompleted === true }">
     <ion-row *ngIf="ticketCreationCompleted === false">
@@ -141,9 +141,9 @@
       <ion-col size="12" style="text-align: center;">
         
         <!-- <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="checkmark-outline"></ion-icon> -->
-        <ion-button style="min-width: 153px;" color="primary" class="submit-btn" type="submit" (click)="createTicket()" [disabled]="ticket_subject === undefined || ticket_message  === undefined || ticket_subject?.length === 0 || ticket_message?.length === 0">
-          <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="add-circle-outline"></ion-icon>
-          <ion-spinner *ngIf="showSpinnerCreateTicket === true" style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2" ></ion-spinner>
+        <ion-button color="primary" class="submit-btn" type="submit" (click)="createTicket()" [disabled]="ticket_subject === undefined || ticket_message  === undefined || ticket_subject?.length === 0 || ticket_message?.length === 0">
+          <ion-icon *ngIf="showSpinnerCreateTicket === false" slot="start" name="add-circle-outline"></ion-icon>
+          <ion-spinner *ngIf="showSpinnerCreateTicket === true" name="bubbles" duration="2" ></ion-spinner>
           {{'CreateTicket' | translate}}
         </ion-button>
       </ion-col>

package/src/app/modals/create-ticket/create-ticket.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);
+}
+
 .requester-role-or-type {
     font-size: 12px;
     font-weight: 400;
@@ -23,7 +41,7 @@
 
 .custom-create-ticket-label {
     font-size: 14px;
-    color: #7695a5;
+    color: var(--label-color);
     font-weight: 500;
 }
 
@@ -50,3 +68,18 @@
     align-items: center;
     justify-content: center;
 }
+
+.submit-btn{
+    min-width: 153px;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+
+    ion-icon{
+        color: var(--button-text-color);
+        font-size: 1.9em;
+    }
+    ion-spinner{
+        color: var(--button-text-color);
+        margin: 0px 0.3em 0px -0.3em;
+    }
+}

package/src/app/modals/json-message/json-message.page.scss

@@ -1,5 +1,19 @@
+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);
     .json{
         background: #354552;
         color: #d6e5db;

package/src/app/modals/loader-preview/loader-preview.page.html

@@ -24,7 +24,7 @@
 
   <div class="messageTextArea" #messageTextArea>
 
-    <ion-item>
+    <ion-item color="none">
       <ion-label color="primary" position="floating" floating> {{'AddACaption' | translate}}...</ion-label>
       <!-- <ion-input clearInput></ion-input> -->
       <ion-textarea #messageTextArea #imageCaptionTexarea 

package/src/app/modals/loader-preview/loader-preview.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);
+}
+
 .center-cropped {
     width: 50px;
     height: 50px;
@@ -59,7 +77,7 @@ ion-fab-button{
 }
 
 .thumbnailsPreview {
-    background-color: #efefef;
+    background-color: var(--preview-background);
     padding: 20px;
     width: 100%;
     height: 100px;

package/src/app/modals/maps/maps.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);
+}
+
 .container {
     width: 100%;
     height: 100%;