@chat21/chat21-ionic 3.0.107-rc.9 → 3.0.108-rc.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-ionic ver 3.0
 
+### 3.0.108.rc.1
+- added: brandService to manage remote resources
+- added: brandSrc env property
+- bug-fixed: conversation-list header shows sidebar-user-detail button
+
+### 3.0.107 in PROD
+
 ### 3.0.107.rc.9
 - changed: whatsapp api url
 - changed: whatsapp template params removed if array is empty

package/package.json

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

package/src/app/app.module.ts

@@ -117,6 +117,7 @@ import { Deeplinks } from '@ionic-native/deeplinks/ngx';
 import { TriggerEvents } from './services/triggerEvents/triggerEvents';
 import { Globals } from './utils/globals';
 import { GlobalSettingsService } from './services/global-settings/global-settings.service';
+import { BrandService } from './services/brand/brand.service';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -254,13 +255,14 @@ export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21
   }
 }
 
-const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
-  return () => {
+const appInitializerFn = (appConfig: AppConfigProvider, brandService: BrandService, logger: NGXLogger) => {
+  return async() => {
     let customLogger = new CustomLogger(logger)
     LoggerInstance.setInstance(customLogger)
     if (environment.remoteConfig) {
-      return appConfig.loadAppConfig();
+      await appConfig.loadAppConfig();
     }
+    await brandService.loadBrand();
   };
 };
 
@@ -323,7 +325,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFn,
       multi: true,
-      deps: [AppConfigProvider, NGXLogger]
+      deps: [AppConfigProvider, BrandService, NGXLogger]
     },
     {
       provide: MessagingAuthService,

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

@@ -22,7 +22,6 @@ export class AvatarComponent implements OnInit {
         this.url =  this.baseLocation +'/assets/images/light_avatar_placeholder.svg'
       }
     }
-    
   }
 
   onBotImgError(event){

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -1,11 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --backgroundColor: #{var(--basic-blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--basic-blue)};
+    ---buttonFontSize: #{var(--button-in-msg-font-size)};
 }
 
 .button-in-msg {

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.scss

@@ -1,11 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --backgroundColor: #{var(--basic-blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--basic-blue)};
+    ---buttonFontSize: #{var(--button-in-msg-font-size)};
 }
 
 .button-in-msg {

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.scss

@@ -1,10 +1,10 @@
 // @import '../../../../../sass/variables';
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --backgroundColor: #{var(--basic-blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--basic-blue)};
+    ---buttonFontSize: #{var(--button-in-msg-font-size)};
 }
 
 

package/src/app/components/authentication/login/login.component.scss

@@ -57,7 +57,7 @@
     font-size: 16px;
     letter-spacing: 2px;
     color: #fff;
-    background-color: #f0806f !important;
+    background-color: var(--base-brand-color) !important;
     margin-top: 10px;
     &:active,
     &:focus,

package/src/app/components/authentication/login/login.component.ts

@@ -23,6 +23,7 @@ export class LoginComponent implements OnInit {
   @Input() showSpinnerInLoginBtn: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() companyLogoBlackUrl: string;
+  @Input() companySiteUrl: string;
   @Input() companyName: string;
   @Output() onSignInWithEmailAndPassword = new EventEmitter<{ email: string, password: string }>();
   @Output() onSignInWithGoogle = new EventEmitter()
@@ -30,7 +31,6 @@ export class LoginComponent implements OnInit {
 
   // @ViewChild('email', {  static: false })  emailInputEl: IonInput;
   userForm: FormGroup;
-  companySiteUrl: string;
   emailMustBeAValidEmail: string;
   DASHBOARD_URL: string;
 

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

@@ -33,7 +33,7 @@ export class InfoSupportGroupComponent implements OnInit {
 
   onLoad(iframe){
     let styleData = this.appStorageService.getItem('style')
-    console.log('[InfoSupportGroupComponent] styleeeeee', styleData)
+    this.logger.log('[InfoSupportGroupComponent] styleeeeee', styleData)
     if(styleData && styleData !== 'undefined'){
       this.loadStyle(JSON.parse(styleData))
     }

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.html

@@ -1,14 +1,13 @@
 <ion-toolbar [class.mobile]="isMobile">
 
-  <!-- *ngIf="isMobile || !supportMode" -->
-  <ion-buttons  slot="start" style="height:60px">
+
+  <ion-buttons  *ngIf="isMobile || !supportMode" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <ion-title>
-    <!-- <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo"> -->
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 

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

@@ -2,7 +2,7 @@
 <div class="logo">
   <!-- <a class="logo-img-wpr" [ngClass]="{'small-sidebar-logo-img-wpr' : SIDEBAR_IS_SMALL === true }">
     <div class="logo-img" (click)="goToHome()" style="cursor: pointer;">
-      <img class="small-sidebar__logo" src="assets/tiledesk-solo-logo.png" />
+      <img class="small-sidebar__logo" src="assets/logos/tiledesk-solo-logo.svg" />
     </div>
   </a> -->
 
@@ -222,16 +222,13 @@
 
     </ul>
 
-    <div matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" class="logoBrand"
+    <div matTooltipClass="custom-mat-tooltip" [matTooltip]="LOGOS_ITEMS['COMPANY_LOGO_NO_TEXT'].label" class="logoBrand"
       #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
       <!-- ------------------------------------------- -->
-      <!-- LOGO TILEDESK  (click)="goToOfficialSite()" -->
+      <!-- LOGO BRAND  (click)="goToOfficialSite()" -->
       <!-- ------------------------------------------- -->
       <a target="_blank" href="{{ tiledesk_url }}" class="customAncor">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="30px" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">
-          <path d="M51.8,28.2h-19c-1.7,0-3-1.3-3-3V6.4c0-1.7-1.3-3-3-3H8c-1.7,0-3,1.3-3,3v22v22c0,1.7,1.3,3,3,3H6.7h3.4  c0.8,0,1.3,0.2,1.9,0.8l2.3,2.3l2.1,2.1c0.8,0.8,1.7,0.8,2.4,0l2.1-2.1l2.3-2.3c0.6-0.6,1.1-0.8,1.9-0.8H52c1.7,0,3-1.3,3-3V31.2  C54.8,29.5,53.5,28.2,51.8,28.2"/>
-          <path d="M52,24.2H36.8c-1.5,0-2.8-1.3-2.8-2.8V6.2c0-1.5,1.3-2.8,2.8-2.8H52c1.5,0,2.8,1.3,2.8,2.8v15.2  C54.8,22.9,53.5,24.2,52,24.2"/>
-        </svg>
+        <img [src]="LOGOS_ITEMS['COMPANY_LOGO_NO_TEXT'].icon">
       </a>
     </div>
 </div>

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

@@ -24,6 +24,8 @@
   position: absolute;
   bottom: 0;
   display: flex;
+  justify-content: center;
+  width: 100%;
   height: 60px;
 
   svg path:first-child {
@@ -32,6 +34,10 @@
   svg path:nth-child(2){
     fill: #E5BBAD
   }
+
+  img{
+    width: 30px;
+  }
 }
 
 

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

@@ -14,6 +14,7 @@ import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 
 // utils
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
+import { BRAND_BASE_INFO, LOGOS_ITEMS } from 'src/app/utils/utils-resources';
 
 @Component({
   selector: 'app-sidebar',
@@ -58,6 +59,7 @@ export class SidebarComponent implements OnInit {
   dashboard_history_url: string;
   dashboard_settings_url: string;
   tiledesk_url: string;
+  LOGOS_ITEMS = LOGOS_ITEMS;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -72,6 +74,8 @@ export class SidebarComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.tiledesk_url = BRAND_BASE_INFO['COMPANY_SITE_URL']
+    
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
     // console.log('[SIDEBAR] DASHBOARD_URL ', this.DASHBOARD_URL)
     this.getStoredProjectAndUserRole()

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

@@ -34,7 +34,7 @@
         </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">
+          <img [src]="LOGOS_ITEMS['BASE_LOGO'].icon">
         </div>
       </div>
 

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

@@ -161,6 +161,8 @@ ion-label.message-placeholder{
 
     img{
         max-width: 35%;
+        max-height: 50px;
+        filter: brightness(0) saturate(100%) invert(64%) sepia(1%) saturate(46%) hue-rotate(314deg) brightness(103%) contrast(99%);
     }
 }
 

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

@@ -7,6 +7,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { UserModel } from 'src/chat21-core/models/user';
 import { checkPlatformIsMobile } from 'src/chat21-core/utils/utils';
+import { LOGOS_ITEMS } from 'src/app/utils/utils-resources';
 
 @Component({
   selector: 'send-email-modal',
@@ -27,6 +28,7 @@ export class SendEmailModal implements OnInit {
   emailFormGroup: FormGroup;
   private logger: LoggerService = LoggerInstance.getInstance()
   public isMobile: boolean = false;
+  LOGOS_ITEMS = LOGOS_ITEMS;
   
   constructor(
     public viewCtrl: ModalController,

package/src/app/pages/authentication/login/login.page.html

@@ -3,5 +3,6 @@
   [translationMap] = translationMap
   [companyLogoBlackUrl]= companyLogoBlackUrl
   [companyName]= companyName
+  [companySiteUrl]="companySiteUrl"
   (onSignInWithEmailAndPassword)="onSignInWithEmailAndPassword($event)">
 </component-login>

package/src/app/pages/authentication/login/login.page.ts

@@ -17,6 +17,7 @@ import { isInArray } from 'src/chat21-core/utils/utils';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { BRAND_BASE_INFO, LOGOS_ITEMS } from 'src/app/utils/utils-resources';
 
 @Component({
   selector: 'app-login',
@@ -29,6 +30,7 @@ export class LoginPage implements OnInit {
   showErrorSignIn = false;
   companyLogoBlackUrl: string;
   companyName: string;
+  companySiteUrl: string;
 
   public translationMap: Map<string, string>;
   private subscriptions = [];
@@ -60,8 +62,9 @@ export class LoginPage implements OnInit {
 
   /** */
   initialize() {
-    this.companyLogoBlackUrl = 'assets/chat21-logo.png';
-    this.companyName = 'Tiledesk'; // this.chatManager.getTenant();
+    this.companyLogoBlackUrl = LOGOS_ITEMS['BASE_LOGO'].icon;
+    this.companyName = BRAND_BASE_INFO['COMPANY_NAME']; // this.chatManager.getTenant();
+    this.companySiteUrl = BRAND_BASE_INFO['COMPANY_SITE_URL']
     this.translations();
     this.events.subscribe('sign-in', this.signIn);
     this.setSubscriptions();

package/src/app/services/brand/brand.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BrandService } from './brand.service';
+
+describe('BrandService', () => {
+  let service: BrandService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BrandService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/services/brand/brand.service.ts

@@ -0,0 +1,210 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { AppConfigProvider } from '../app-config';
+import { BrandResources } from 'src/app/utils/BrandResources';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BrandService {
+
+  // "brandSrc":"https://tiledeskbrand.nicolan74.repl.co/mybrand",
+
+  public brand: any;
+
+  _brand = {
+    DASHBOARD: {
+      META_TITLE: "Tiledesk Support Dashboard",
+      FAVICON_URL: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+      "company_name": "Tiledesk",
+      "company_site_name": "tiledesk.com",
+      "company_site_url": "https://www.tiledesk.com",
+      "company_logo_white__url": "assets/img/logos/tiledesk-logo_white_orange.svg",
+      "company_logo_black__url": "assets/img/logos/tiledesk_3.0_logo_black_v2_no_version.svg",
+      "company_logo_allwhite__url": "assets/img/logos/tiledesk_3.0_logo_all_white_v2_no_version.svg",
+      "company_logo_no_text__url": "assets/img/logos/tiledesk-solo-logo.png",
+      "privacy_policy_link_text": "Privacy Policy",
+      "privacy_policy_url": "https://www.tiledesk.com/privacy.html",
+      "display_terms_and_conditions_link": true,
+      "terms_and_conditions_url": "https://www.tiledesk.com/termsofservice.html",
+      "contact_us_email": "support@tiledesk.com",
+      "footer": {
+          "display_terms_and_conditions_link": true,
+          "display_contact_us_email": true
+      },
+      "recent_project_page": {
+          "company_logo_black__width": "130px"
+      },
+      "signup_page": {
+          "display_terms_and_conditions_link": true
+      },
+      "handle_invitation_page": {
+          "company_logo_45x45": "assets/img/logos/tiledesk-solo-logo.png"
+      },
+      "wizard_create_project_page": {
+          "logo_x_rocket": "assets/img/logos/logo_x_rocket4x4.svg"
+      },
+      "wizard_install_widget_page": {
+          "logo_on_rocket": "assets/img/logos/tiledesk-solo-logo.png"
+      },
+    },
+    CHAT: {
+
+    },
+    CDS: {
+      META_TITLE:"Design Studio",
+      FAVICON_URL: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+      INFO_MENU_ITEMS: [
+        { key: 'HELP_CENTER', icon: "", src:"", status: "inactive"},
+        { key: 'ROAD_MAP', icon: "", src:"", status: "inactive"},
+        { key: 'FEEDBACK', icon: "", src:"", status: "inactive"},
+        { key: 'SUPPORT', icon: "", src:"", status: "inactive"},
+        { key: 'CHANGELOG', icon: "", src:"", status: "inactive"},
+        { key: 'GITHUB', icon: "", src:"", status: "inactive"},
+      ]
+    },
+    COMMON: {
+      COMPANY_LOGO:"assets/logos/tiledesk_logo.svg",
+      COMPANY_LOGO_NO_TEXT:"assets/logos/tiledesk_logo.svg",
+      BASE_LOGO: "assets/logos/tiledesk_logo.svg",
+      BASE_LOGO_NO_TEXT: "assets/logos/tiledesk_logo.svg",
+      BASE_LOGO_WHITE: "assets/logos/tiledesk-logo_new_white.svg",
+      BASE_LOGO_WHITE_NO_TEXT:"",
+      COMPANY_NAME: "Tiledesk",
+      COMPANY_SITE_NAME:"tiledesk.com",
+      COMANY_SITE_URL:"https://www.tiledesk.com",
+      CONTACT_US_EMAIL: "support@tiledesk.com",
+      COMPANY_PRIMARY_COLOR:""
+    }
+  }
+
+  public assetBrand: any;
+  // public brand = brand
+  // local_url = '/assets/brand/brand.json';
+  warning: string;
+  loadBrandError: string;
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    private httpClient: HttpClient,
+    private translate: TranslateService,
+    private appConfigProvider: AppConfigProvider
+  ) {
+    this.getTranslations()
+    this.brand = this._brand
+  }
+
+  getTranslations() {
+    this.translate.get('Warning')
+      .subscribe((text: string) => {
+        this.warning = text;
+      });
+
+    this.translate.get('RelatedKnowledgeBase')
+      .subscribe((text: string) => {
+        this.loadBrandError = text;
+      });
+  }
+
+  isEmpty(url: string) {
+    return (url === undefined || url == null || url.length <= 0) ? true : false;
+  }
+
+  // getData() {
+  //   return this.httpClient.get('/assets/brand/brand.json');
+  // }
+
+
+
+  async loadBrand() {
+    // this.getData()
+    //   .subscribe(data => {
+    //     this.assetBrand = data
+    //     console.log('[BRAND-SERV] BRAND RETIEVED FROM ASSET assetBrand ', this.assetBrand);
+    //   });
+
+    // let url = ''
+    // if (environment.remoteConfig === false) {
+
+    //   if (environment.hasOwnProperty("brandSrc")) {
+
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env has Property brandSrc');
+    //     const remoteBrandUrl = this.isEmpty(environment['brandSrc']);
+
+    //     if (!remoteBrandUrl) {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env brandSrc is empty ? ', remoteBrandUrl);
+    //       url = environment['brandSrc']
+    //     } else {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env brandSrc is empty ? ', remoteBrandUrl, ' -> load from assets')
+    //       this.brand =  this._brand;
+    //     }
+    //   } else {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env NOT has Property brandSrc -> load from assets');
+    //     this.brand = this._brand;
+    //   }
+    // } else {
+    //   const res = await this.httpClient.get(environment['remoteConfigUrl']).toPromise();
+    //   this.logger.log('[BRAND-SERV] loadBrand - remoteConfig -> true get remoteConfig response ', res);
+
+    //   // const remoteConfigData = JSON.parse(res['_body'])
+    //   const remoteConfigData = res
+    //   // this.logger.log('BrandService loadBrand - remoteConfig is true - get remoteConfigData  res ', remoteConfigData);
+
+    //   if (remoteConfigData.hasOwnProperty("brandSrc")) {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData has Property brandSrc');
+
+    //     const remoteBrandUrl = this.isEmpty(remoteConfigData['brandSrc']);
+    //     if (!remoteBrandUrl) {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData brandSrc is empty ?', remoteBrandUrl);
+
+    //       url = remoteConfigData['brandSrc']
+
+
+    //     } else {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData brandSrc is empty ?', remoteBrandUrl, ' -> load from assets');
+
+    //       this.brand = this._brand;
+    //     }
+
+    //   } else {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData NOT has Property brandSrc -> load from assets');
+    //     // this.setBrand(this.local_url)
+    //     // url = this.local_url
+    //     this.brand = this._brand;
+    //   }
+    // }
+
+    try {
+      let url = this.appConfigProvider.getConfig().brandSrc
+      if (url && url !== 'CHANGEIT') {
+        const data = await this.httpClient.get(url).toPromise();
+
+        console.log('[BRAND-SERV] **** GET BRAND FROM URL ****', url);
+
+        this.brand =data
+
+        console.log('[BRAND-SERV] loadBrand - brand: ', this.brand);
+
+        const resources = new BrandResources(this);
+        resources.loadResources()
+      }
+    } catch (err) {
+      console.error('[BRAND-SERV] loadBrand error : ', err);
+
+      this.brand = this._brand;
+    }
+    
+    
+  }
+
+  getBrand() {
+    console.log('BrandService getBrand has been called - brand: ', this.brand);
+    return { ...this.brand['CHAT'], ...this.brand['COMMON'] }
+  }
+
+
+}

package/src/app/utils/BrandResources.ts

@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core";
+import { BrandService } from "../services/brand/brand.service";
+import { BRAND_BASE_INFO, LOGOS_ITEMS } from "./utils-resources";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BrandResources {
+    
+    brand: {}
+    
+    constructor(
+        brandService: BrandService
+    ) {
+        this.brand = brandService.getBrand()
+    }
+
+    loadResources(){
+        if(!this.brand){
+            return;
+        }
+
+        /** META TITLE and FAVICON */
+        document.title = this.brand['COMPANY_NAME'] + ' ' + this.brand['META_TITLE']
+        var icon = document.querySelector("link[rel~='icon']") as HTMLElement;
+        icon.setAttribute('href', this.brand['FAVICON_URL'])
+
+        /** CSS */
+        document.body.style.setProperty('--base-brand-color', this.brand['BRAND_COLOR']);
+
+        /** LOGOS_ITEMS */
+        Object.keys(LOGOS_ITEMS).forEach(key => { LOGOS_ITEMS[key].icon = this.brand[key]; LOGOS_ITEMS[key].label = this.brand['COMPANY_NAME']}) 
+        
+        /** BRAND_BASE_INFO */
+        Object.keys(BRAND_BASE_INFO).forEach(key => BRAND_BASE_INFO[key] = this.brand[key])
+
+        // /** INFO_MENU_ITEMS */
+        // let result: Array<{ key: string, label: string, icon: string, type: TYPE_URL, status: "active" | "inactive", src?: string}> = Array.from([...INFO_MENU_ITEMS, ...this.brand['INFO_MENU_ITEMS']].reduce((m, o) => m.set(o.key, o), new Map).values());
+        // result.forEach(el => {
+        //     INFO_MENU_ITEMS.find(a => a.key === el.key).icon = el.icon
+        //     INFO_MENU_ITEMS.find(a => a.key === el.key).src = el.src
+        //     INFO_MENU_ITEMS.find(a => a.key === el.key).status = el.status
+        //     INFO_MENU_ITEMS.find(a => a.key === el.key).icon = el.icon
+        // })
+
+        // /** MEDIA */
+        // Object.keys(MEDIA).forEach(key => { 
+        //     if(this.brand['MEDIA'][key].src) MEDIA[key].src = this.brand['MEDIA'][key].src
+        //     if(this.brand['MEDIA'][key].text) MEDIA[key].text = this.brand['MEDIA'][key].text
+        //     if(this.brand['MEDIA'][key].description) MEDIA[key].description = this.brand['MEDIA'][key].description
+        // })
+
+        
+
+
+        // console.log('infooooo', INFO_MENU_ITEMS)
+    }
+}
+

package/src/app/utils/utils-resources.ts

@@ -0,0 +1,22 @@
+export const LOGOS_ITEMS: { [key: string] : { label: string, icon: string }} ={
+    COMPANY_LOGO: {label: 'Tiledesk',  icon: 'assets/logos/tiledesk_logo.svg'},
+    COMPANY_LOGO_NO_TEXT: {label: 'Tiledesk', icon: 'assets/logos/tiledesk_logo_no_text.svg'},
+    BASE_LOGO: {label: 'Tiledesk',  icon: 'assets/logos/tiledesk_logo.svg'},
+    BASE_LOGO_NO_TEXT: {label: 'Tiledesk', icon: 'assets/logos/tiledesk_logo_no_text.svg'},
+    BASE_LOGO_WHITE: { label: 'Tiledesk', icon: '"assets/logos/tiledesk-logo_new_white.svg'},
+    BASE_LOGO_WHITE_NO_TEXT: { label: 'Tiledesk', icon: '"assets/logos/tiledesk-logo_new_white.svg'}
+}
+
+export const BRAND_BASE_INFO: { [key: string] : any} ={
+    COMPANY_NAME: "Tiledesk",
+    COMPANY_SITE_NAME:"tiledesk.com",
+    COMPANY_SITE_URL:"https://www.tiledesk.com",
+    CONTACT_US_EMAIL: "support@tiledesk.com",
+    FAVICON: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+    META_TITLE:"Design Studio"
+}
+
+export const MEDIA: { [key: string]: { src: string, text: string, description: string}}= {
+    RULES: { src: "https://www.youtube.com/embed/p0ux-86Y4_I", text: "CDSSplashScreen.YouHaveNoRules", description: "CDSSplashScreen.LearnAboutAI"},
+    GLOBALS: { src: "", text: "CDSGlobals.NoGlobalVariables", description: ""},
+}

package/src/assets/logos/tiledesk-logo_new_white.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 412 132" style="enable-background:new 0 0 412 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M84,53.1H54.7c-2.6,0-4.6-2.1-4.6-4.6V19.2c0-2.6-2.1-4.6-4.6-4.6H16.1c-2.6,0-4.6,2.1-4.6,4.6v33.9V87
+		c0,2.6,2.1,4.6,4.6,4.6h-2h5.3c1.1,0,2.1,0.4,2.8,1.2l3.4,3.4l3.2,3.2c1,1,2.7,1,3.7,0l3.2-3.2l3.4-3.4c0.8-0.8,1.8-1.2,2.8-1.2h42
+		c2.6,0,4.6-2.1,4.6-4.6V57.8C88.6,55.2,86.6,53.1,84,53.1"/>
+	<path class="st0" d="M85.8,46.9H59.1c-1.5,0-2.8-1.3-2.8-2.8V17.4c0-1.5,1.3-2.8,2.8-2.8h26.8c1.5,0,2.8,1.3,2.8,2.8v26.8
+		C88.6,45.7,87.4,46.9,85.8,46.9"/>
+	<path class="st0" d="M262.4,26.5h-0.2c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,9,0,15.5c-3.7-2.7-8.3-4.2-13.4-3.7c-9,0.9-16.3,8.1-17.3,17.1
+		c-1.2,11.6,7.8,21.5,19.2,21.5c4.5,0,8.7-1.6,12-4.2c0.1,2.4,2.1,4.3,4.5,4.3c2.5,0,4.5-2,4.5-4.5V33.6
+		C269.5,29.7,266.3,26.5,262.4,26.5 M251.8,71.2c-8.3,1.8-15.5-5.4-13.7-13.7c0.9-4.2,4.3-7.6,8.5-8.5c8.3-1.8,15.5,5.4,13.7,13.7
+		C259.4,66.9,256,70.3,251.8,71.2"/>
+	<path class="st0" d="M147.4,75l-1.4-3.7c-0.4-1.1-1.7-1.7-2.8-1.3c-4,1.3-7.5-0.5-7.2-5.4V52.2c0-0.8,0.7-1.5,1.5-1.5h5.7
+		c1.3,0,2.3-1,2.3-2.3v-5.5c0-1.3-1-2.3-2.3-2.3h-5.7c-0.8,0-1.5-0.7-1.5-1.5V28.8c0-1.3-1-2.3-2.3-2.3c-4.9,0-8.9,4-8.9,8.9v3.7
+		c0,0.8-0.7,1.5-1.5,1.5h-2.1c-1.3,0-2.3,1-2.3,2.3v5.5c0,1.3,1,2.3,2.3,2.3h2.1c0.8,0,1.5,0.7,1.5,1.5v12.7
+		c-0.1,9.9,5,14.3,14.3,14.4C141.7,79.1,148.5,79,147.4,75"/>
+	<path class="st0" d="M168.5,76.5V29.3c0-1.6,1.3-2.8,2.8-2.8h5.4c1.6,0,2.8,1.3,2.8,2.8v47.2c0,1.6-1.3,2.8-2.8,2.8h-5.4
+		C169.7,79.3,168.5,78.1,168.5,76.5"/>
+	<path class="st0" d="M222.2,49.7c-7.1-12.5-28.2-12.2-35.1,0.3c-5.4,9.2-2.3,22.6,7.7,27.3c7.4,3.8,21.4,3.1,25.6-2
+		c0.9-1.1,1.2-3.8-0.6-5.4c-2-1.8-6-0.4-7.8,0.2c-5,1.9-12.4,1.1-15.2-3.9c-0.5-0.9-1-2.8-0.3-2.8c0.9,0,24,0,24,0
+		C224.3,63.3,225.7,56.3,222.2,49.7 M213.2,56.8c-2,0-17.3,0-17.4,0c-0.7,0,0-2,0.7-3.3c1.4-2.9,4.6-4.5,7.8-4.7
+		c2-0.1,4.4,0.1,6.2,1.3C214.3,52.7,214.1,56.8,213.2,56.8"/>
+	<path class="st0" d="M312.1,49.7C305,37.2,283.9,37.5,277,50c-5.4,9.2-2.3,22.6,7.7,27.3c7.4,3.8,21.4,3.1,25.6-2
+		c0.9-1.1,1.2-3.8-0.6-5.4c-2-1.8-6-0.4-7.8,0.2c-5,1.9-12.4,1.1-15.2-3.9c-0.5-0.9-1-2.8-0.3-2.8c0.9,0,24,0,24,0
+		C314.3,63.3,315.6,56.3,312.1,49.7 M303.1,56.8c-2,0-17.3,0-17.4,0c-0.7,0,0-2,0.7-3.3c1.4-2.9,4.6-4.5,7.8-4.7
+		c2-0.1,4.4,0.1,6.2,1.3C304.2,52.7,304,56.8,303.1,56.8"/>
+	<path class="st0" d="M334.7,79.8c-5-0.2-10.3-1.6-14.5-3.8c-1.1-0.6-1.4-2-0.9-3.1l1.9-3.7c0.6-1.1,2-1.6,3.1-1
+		c3.7,2.2,17.5,6.2,18.4,0.1c0-0.9-0.3-1.6-1.1-2.1c-2.1-1.2-5-1.5-7.7-2.2c-3.2-0.7-6.6-1.5-9.3-3.3c-5.1-2.9-5.4-10.8-1.7-15.1
+		c3.8-4.3,9.6-5.4,15.8-5.1c2.6,0.1,5.4,0.6,8.1,1.4c3.6,1,5.2,5.1,3.5,8.4c-1.6,2.7-4.4-0.1-6.5-0.4c-3.2-1-8.5-1.5-10.9-0.2
+		c-2.1,0.9-2.6,3.5-0.7,4.7c0.8,0.5,1.9,1,3.3,1.3c4.5,1,9.8,1.7,13.8,4.3c4.7,2.7,5.3,9.6,2.4,14C348,78.9,341.4,80.2,334.7,79.8"
+		/>
+	<path class="st0" d="M396.4,75.6l-13.6-17.2c-0.5-0.6-0.5-1.5,0.1-2.1L394,45c1.4-1.5,0.4-3.9-1.6-3.9h-6.8c-0.6,0-1.2,0.2-1.6,0.6
+		l-13.1,12.4c-0.9,0.9-2.5,0.2-2.5-1.1V34.1c0-4.2-3.4-7.6-7.6-7.6h-0.9c-0.9,0-1.6,0.7-1.6,1.6v49.6c0,0.9,0.7,1.6,1.6,1.6h6.2
+		c1.3,0,2.3-1,2.3-2.3v-6.3c0-0.7,0.3-1.3,0.8-1.8l3.6-3.5c0.6-0.6,1.6-0.5,2.1,0.1c2.7,3.4,10.3,12.9,10.3,12.9
+		c0.4,0.5,1.1,0.9,1.8,0.9h7.6C396.5,79.3,397.6,77.1,396.4,75.6"/>
+	<path class="st0" d="M152.4,76.5V43.3c0-1.6,1.3-2.8,2.8-2.8h5.4c1.6,0,2.8,1.3,2.8,2.8v33.2c0,1.6-1.3,2.8-2.8,2.8h-5.4
+		C153.7,79.3,152.4,78.1,152.4,76.5"/>
+	<path class="st0" d="M163.4,32.1c-0.2,7.3-10.8,7.3-11,0C152.6,24.8,163.3,24.8,163.4,32.1"/>
+</g>
+</svg>

package/src/assets/logos/tiledesk_logo.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 311.8 73.7" style="enable-background:new 0 0 311.8 73.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F28779;}
+	.st1{fill:#F6B0A1;}
+	.st2{fill:#454848;}
+</style>
+<g>
+	<path class="st0" d="M61.1,33.5H37.9c-2,0-3.7-1.6-3.7-3.7V6.7c0-2-1.6-3.7-3.7-3.7h-23c-2,0-3.7,1.6-3.7,3.7v26.8v26.8
+		c0,2,1.6,3.7,3.7,3.7H5.9h4.2c0.8,0,1.6,0.3,2.2,0.9l2.7,2.7l2.5,2.5c0.8,0.8,2.1,0.8,3,0l2.5-2.5l2.7-2.7c0.6-0.6,1.4-0.9,2.2-0.9
+		h33.2c2,0,3.7-1.6,3.7-3.7V37.1C64.7,35.1,63.1,33.5,61.1,33.5"/>
+	<path class="st1" d="M62.5,28.6H41.4c-1.2,0-2.2-1-2.2-2.2V5.3c0-1.2,1-2.2,2.2-2.2h21.1c1.2,0,2.2,1,2.2,2.2v21.1
+		C64.7,27.6,63.7,28.6,62.5,28.6"/>
+</g>
+<g>
+	<g>
+		<path class="st2" d="M196,14.7h-0.1c-1,0-1.9,0.8-1.9,1.9c0,0.1,0,7.5,0,12.8c-3-2.2-6.9-3.5-11-3c-7.5,0.7-13.5,6.7-14.4,14.2
+			c-1.1,9.7,6.5,17.8,16,17.8c3.8,0,7.1-1.3,9.9-3.5c0.1,2,1.7,3.6,3.8,3.6c2.1,0,3.8-1.7,3.8-3.8V20.6
+			C201.9,17.5,199.2,14.7,196,14.7 M187.3,51.8c-6.9,1.6-12.9-4.5-11.3-11.3c0.7-3.5,3.6-6.3,7-7c6.9-1.6,12.9,4.5,11.3,11.3
+			C193.5,48.2,190.7,51.1,187.3,51.8"/>
+		<path class="st2" d="M100.7,55l-1.2-3c-0.3-0.9-1.4-1.4-2.3-1.1c-3.4,1.1-6.2-0.4-6-4.5V36.1c0-0.6,0.5-1.3,1.3-1.3h4.7
+			c1,0,1.9-0.8,1.9-1.9v-4.6c0-1-0.8-1.9-1.9-1.9h-4.7c-0.6,0-1.3-0.5-1.3-1.3v-8.5c0-1.1-0.8-1.9-1.9-1.9c-4.1,0-7.4,3.3-7.4,7.3v3
+			c0,0.6-0.5,1.3-1.3,1.3H79c-1.1,0-1.9,0.8-1.9,1.9V33c0,1,0.8,1.9,1.9,1.9h1.8c0.6,0,1.3,0.5,1.3,1.3v10.5
+			c-0.1,8.2,4.1,11.9,11.9,12C96,58.4,101.7,58.3,100.7,55"/>
+		<path class="st2" d="M118.2,56.2V17.1c0-1.3,1.1-2.3,2.3-2.3h4.5c1.3,0,2.3,1.1,2.3,2.3v39.1c0,1.3-1.1,2.3-2.3,2.3h-4.5
+			C119.2,58.6,118.2,57.5,118.2,56.2"/>
+		<path class="st2" d="M162.7,34c-5.9-10.4-23.3-10.1-29.1,0.2c-4.5,7.6-1.9,18.8,6.4,22.7c6.1,3.2,17.7,2.6,21.2-1.7
+			c0.7-0.8,1.1-3.2-0.5-4.5c-1.7-1.5-4.9-0.3-6.5,0.1c-4.2,1.6-10.3,0.8-12.6-3.3c-0.4-0.7-0.8-2.3-0.2-2.3c0.7,0,19.8,0,19.8,0
+			C164.5,45.3,165.6,39.4,162.7,34 M155.2,39.9c-1.7,0-14.3,0-14.4,0c-0.5,0,0-1.7,0.5-2.7c1.2-2.4,3.8-3.8,6.4-3.9
+			c1.7-0.1,3.7,0.1,5.1,1.2C156.2,36.6,156,39.9,155.2,39.9"/>
+		<path class="st2" d="M237.2,34c-5.9-10.4-23.3-10.1-29.1,0.2c-4.5,7.6-1.9,18.8,6.4,22.7c6.1,3.2,17.7,2.6,21.2-1.7
+			c0.7-0.8,1.1-3.2-0.5-4.5c-1.7-1.5-4.9-0.3-6.5,0.1c-4.2,1.6-10.3,0.8-12.6-3.3c-0.4-0.7-0.8-2.3-0.2-2.3c0.7,0,19.8,0,19.8,0
+			C239,45.3,240.1,39.4,237.2,34 M229.8,39.9c-1.7,0-14.3,0-14.4,0c-0.5,0,0-1.7,0.5-2.7c1.2-2.4,3.8-3.8,6.4-3.9
+			c1.7-0.1,3.7,0.1,5.1,1.2C230.6,36.6,230.5,39.9,229.8,39.9"/>
+		<path class="st2" d="M255.9,58.9c-4.2-0.2-8.5-1.3-12-3.1c-0.9-0.5-1.2-1.7-0.7-2.5l1.6-3c0.5-0.9,1.6-1.3,2.5-0.8
+			c3,1.8,14.5,5.1,15.2,0.1c0-0.7-0.3-1.4-0.9-1.8c-1.8-1-4.1-1.3-6.4-1.8c-2.6-0.5-5.5-1.3-7.8-2.7c-4.2-2.4-4.5-9-1.4-12.5
+			c3.2-3.6,8-4.5,13.1-4.2c2.1,0.1,4.5,0.5,6.7,1.2c2.9,0.8,4.3,4.3,2.8,6.9c-1.4,2.2-3.7-0.1-5.4-0.3c-2.7-0.8-7-1.3-9-0.2
+			c-1.7,0.7-2.1,2.9-0.5,3.9c0.7,0.4,1.6,0.8,2.7,1c3.7,0.8,8.1,1.4,11.4,3.6c3.9,2.3,4.4,8,2,11.5C267,58.2,261.5,59.2,255.9,58.9"
+			/>
+		<path class="st2" d="M307.1,55.5l-11.2-14.3c-0.4-0.5-0.4-1.3,0.1-1.8l9.2-9.3c1.2-1.2,0.3-3.3-1.4-3.3h-5.7
+			c-0.5,0-0.9,0.2-1.3,0.5l-10.8,10.3c-0.7,0.7-2.1,0.2-2.1-0.8V21c0-3.5-2.8-6.3-6.3-6.3h-0.7c-0.7,0-1.4,0.6-1.4,1.4v41.2
+			c0,0.7,0.6,1.4,1.4,1.4h5.1c1,0,1.9-0.8,1.9-1.9v-5.2c0-0.5,0.2-1.2,0.6-1.5l2.9-2.9c0.5-0.5,1.3-0.4,1.8,0.1
+			c2.3,2.8,8.6,10.7,8.6,10.7c0.3,0.4,0.9,0.7,1.5,0.7h6.3C307.2,58.6,308,56.7,307.1,55.5"/>
+		<path class="st2" d="M104.9,56.2V28.7c0-1.3,1-2.3,2.3-2.3h4.5c1.3,0,2.3,1.1,2.3,2.3v27.5c0,1.3-1,2.3-2.3,2.3h-4.5
+			C106,58.6,104.9,57.5,104.9,56.2"/>
+	</g>
+	<path class="st2" d="M114,19.3c-0.1,6-8.9,6-9.1,0C105,13.4,113.9,13.4,114,19.3"/>
+</g>
+</svg>

package/src/assets/logos/tiledesk_logo_no_text.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F18876;}
+	.st1{fill:#E5BBAD;}
+</style>
+<path class="st0" d="M51.8,28.2h-19c-1.7,0-3-1.3-3-3V6.4c0-1.7-1.3-3-3-3H8c-1.7,0-3,1.3-3,3v22v22c0,1.7,1.3,3,3,3H6.7h3.4
+	c0.8,0,1.3,0.2,1.9,0.8l2.3,2.3l2.1,2.1c0.8,0.8,1.7,0.8,2.4,0l2.1-2.1l2.3-2.3c0.6-0.6,1.1-0.8,1.9-0.8H52c1.7,0,3-1.3,3-3V31.2
+	C54.8,29.5,53.5,28.2,51.8,28.2"/>
+<path class="st1" d="M52,24.2H36.8c-1.5,0-2.8-1.3-2.8-2.8V6.2c0-1.5,1.3-2.8,2.8-2.8H52c1.5,0,2.8,1.3,2.8,2.8v15.2
+	C54.8,22.9,53.5,24.2,52,24.2"/>
+</svg>

package/src/assets/logos/tiledesk_logo_white_small.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 62.4 62.4" style="enable-background:new 0 0 62.4 62.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M53.5,28.4H34.2c-1.7,0-3-1.4-3-3V6.1c0-1.7-1.4-3-3-3H8.9c-1.7,0-3,1.4-3,3v22.3v22.3c0,1.7,1.4,3,3,3H7.5H11
+		c0.7,0,1.4,0.3,1.9,0.8l2.2,2.2l2.1,2.1c0.7,0.7,1.8,0.7,2.5,0l2.1-2.1l2.2-2.2c0.5-0.5,1.2-0.8,1.9-0.8h27.6c1.7,0,3-1.4,3-3V31.4
+		C56.5,29.7,55.2,28.4,53.5,28.4"/>
+	<path class="st0" d="M54.7,24.3H37.1c-1,0-1.8-0.8-1.8-1.8V4.9c0-1,0.8-1.8,1.8-1.8h17.6c1,0,1.8,0.8,1.8,1.8v17.6
+		C56.5,23.5,55.7,24.3,54.7,24.3"/>
+</g>
+</svg>

package/src/chat-config-template.json

@@ -28,6 +28,7 @@
         "APIendpoint": "${MQTT_APIENDPOINT}"
     },
     "apiUrl": "${API_URL}",
+    "brandSrc": "${BRAND_SRC}",
     "whatsappTemplatesBaseUrl":"${WHATSAPP_TEMPLATES_BASE_URL}",
     "baseImageUrl": "${API_BASEIMAGE_URL}",
     "dashboardUrl": "${DASHBOARD_URL}",

package/src/chat-config.json

@@ -25,6 +25,7 @@
         "APIendpoint": "http://localhost:8004/api"
     },
     "apiUrl": "http://localhost:3000/",
+    "brandSrc": "${BRAND_SRC}",
     "whatsappTemplatesBaseUrl":"http://localhost:3000/",
     "baseImageUrl": "https://firebasestorage.googleapis.com/v0/b/",
     "dashboardUrl": "https://support-pre.tiledesk.com/dashboard/",

package/src/variables.scss

@@ -2,6 +2,8 @@ body {
     /* Color palette */
     --black: #000000;
 
+    --base-brand-color: rgb(224, 106, 88);
+
     --basic-green: #0A7D41;
     --dark-green: #005f3b;
     --light-green: #8cc841;