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

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

@@ -2,13 +2,13 @@
     padding-top: 5px;
     z-index: 1;
     padding-bottom: 5px;
-    border-bottom: 1px solid #e7e7e7;
+    border-bottom: 1px solid var(--border-color-base);
     -webkit-font-smoothing: auto;
 }
 
 .navbar{
-    background-color: #fff;
-    color: #555;
+    background-color: var(--navbar-background);
+    color: var(--text-base-color);
     min-height: var(--nav-bar-heigth);
     transition: all 150ms ease 0s;
 }
@@ -62,10 +62,10 @@ ion-navbar{
     border-radius: 30px;
     font-family: 'Poppins';
 
-    box-shadow: unset!important;
-    text-transform: none!important;
-    background: #3ecf8e!important;
-    color: #fff;
+    box-shadow: unset;
+    text-transform: none;
+    background: var(--simulate-btn-background);
+    color: var(--simulate-btn-color);
 
 }
 
@@ -83,7 +83,7 @@ ion-navbar{
 
 .dropdown-toggle, .volume{
     background-color: transparent;
-    color: inherit;
+    color: var(--icon-color);
 
     padding: 0px 15px;
     font-weight: 400;
@@ -119,7 +119,7 @@ li{
     font-size: 14px;
     text-align: left;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--dropdown-menu-background);
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
 }
@@ -146,13 +146,30 @@ li{
     position: relative;
 
     .li-selected{
-        color: #4285f4;
-        background-color: #eee;
+        color: var(--dropdown-menu-selected-color);
+        background-color: var(--dropdown-menu-selected-background);
+    }
+
+    &.all-projects,
+    &.add-project{
+        color: var(--dropdown-menu-item-color);
+        i{
+            padding-right: 5px; 
+            margin-bottom: 2px; 
+            font-size: 20px
+        }
+    }
+
+    &.section-title{
+        padding-left: 24px;
+        font-size: 12px; 
+        color: var(--dropdown-section-title);
+        font-weight: 400
     }
 }
 
 .dropdown-menu .divider{
-    background-color: rgba(0,0,0,.12);
+    background-color: var(--dropdown-divider-color);
     margin: 5px 0;
 
     height: 1px;
@@ -170,10 +187,9 @@ li{
     clear: both;
     font-weight: 400;
     line-height: 1.42857143;
-    color: #333;
+    color: var(--dropdown-menu-color);
     white-space: nowrap;
     text-decoration: none;
-
     cursor: pointer;
 
     .material-icons {
@@ -181,9 +197,9 @@ li{
     }
 
     &:hover{
-        background-color: #3ea9f5;
-        color: #fff;
-        box-shadow: 0 12px 20px -10px rgba(62, 169, 245, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(62, 169, 245, 0.2);
+        background-color: var(--dropdown-menu-hover-background);
+        color: var(--dropdown-menu-hover-color);
+        box-shadow: 0 12px 20px -10px rgba(var(--dropdown-menu-hover-color), 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(var(--dropdown-menu-hover-color), 0.2);
     }
 }
 

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

@@ -8,7 +8,7 @@
 
 
 
-  <div id="sidebaravatar-img-wpr" class="sidebar-avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
+  <div id="sidebaravatar-img-wpr" class="sidebar-avatar-container" (click)="openUserDetailSidePanel()"
     style="cursor: pointer;" [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true,  'small-sidebar-avatar-with-avatar': SIDEBAR_IS_SMALL === true && !USER_PHOTO_PROFILE_EXIST}">
 
     <img *ngIf="USER_PHOTO_PROFILE_EXIST" id="sidebaravatar-img" class="sidebar-avatar" [src]="photo_profile_URL"
@@ -41,34 +41,23 @@
 
 <div class="sidebar-wrapper">
 
-  <div class="nav-container">
     <!-- [ngClass]="{'is-desktop-menu' : IS_MOBILE_MENU === false, 'is-mobile-menu' : IS_MOBILE_MENU === true  }" -->
     <!-- padding-bottom: 65px; -->
-    <ul style="margin-top: 0px;" class="nav">
+    <ul class="nav">
 
       <!-- ------------------------------------------- -->
       <!-- CHAT  -->
       <!-- ------------------------------------------- -->
-      <li class="item-active" style="cursor: unset;" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
-        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center; ">
-        <a class="customAncor" style="margin-right: 0px !important">
+      <li class="item-active" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
           <!-- <i class="material-icons sidebar-icons">chat</i> -->
-          <span id="openchat-span" style="position: relative;top: 9px;vertical-align: middle;">
-            <svg id="openchat-svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21"
-              style="enable-background:new 0 0 23 21;" xml:space="preserve"
-              style="width:20px;height:20px; vertical-align: middle;">
-              <style type="text/css">
-                .chat21-icon {
-                  fill: #fff;
-                }
-              </style>
-              <path id="openchat-path" class="chat21-icon" d="M11.5,0.5C5.8,0.5,1.3,5,1.3,10.5c0,1.8,0.5,3.5,1.4,5l-0.8,4.3l4.4-0.8c1.5,0.9,3.3,1.4,5.3,1.4
+          <span id="openchat-span">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21"  xml:space="preserve" width="20" height="20">
+              <path d="M11.5,0.5C5.8,0.5,1.3,5,1.3,10.5c0,1.8,0.5,3.5,1.4,5l-0.8,4.3l4.4-0.8c1.5,0.9,3.3,1.4,5.3,1.4
               c5.7,0,10.2-4.5,10.2-10S17.2,0.5,11.5,0.5z M11.5,17.2c-2.5,0-4.6-1.3-5.7-2.6c0.6-0.2,0.8-0.8,1.4-1c0.7,0.9,2.5,2.1,4.4,2.1
               c1.9,0,3.6-1.2,4.2-2.1c0.5,0.2,0.9,0.6,1.4,0.9C16.1,15.8,14,17.2,11.5,17.2z" />
             </svg>
           </span>
-        </a>
       </li>
 
       <!-- ------------------------------------------- -->
@@ -90,25 +79,23 @@
       <!-- ---------------------------------- -->
       <ng-container *ngIf="USER_ROLE !== 'agent'">
         <li  id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor" style="height: 40px;margin-right: 0px !important;">
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor">
             <span class="bot-icon-wpr">
-              <svg version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30"
-                style="enable-background:new 0 0 30 30;" xml:space="preserve" style="width: 25px;height: 25px;margin-top: 7px;">
+              <svg xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" width="25" height="25"
+                style="enable-background:new 0 0 30 30;" xml:space="preserve">
                 <g>
-                  <g>
-                    <path class="chat-bot-icon-st0" d="M24.6,12.6c-0.1,0-0.2,0-0.3,0c-1.6-2.9-4.5-5.8-9.2-5.8c-4.7,0-7.6,2.9-9.2,5.8c-0.2,0-0.4-0.1-0.6-0.1
-                      c-2,0-3.5,2.3-3.5,5c0,2.8,1.6,5,3.5,5c0.1,0,0.3,0,0.4,0c2.3,3.6,7,3.9,9.4,3.9c2.3,0,6.9-0.5,9.2-3.9c0.1,0,0.1,0,0.2,0
-                      c2,0,3.5-2.3,3.5-5C28.1,14.8,26.6,12.6,24.6,12.6z M22,21.1c0,0-7.8,2.3-14.3-0.1c0,0-0.8-4.1-0.5-7.2c0,0,8.1-3.2,15.6,0.3
-                      C22.8,14.1,23.3,19.1,22,21.1z" />
-                    <ellipse class="chat-bot-icon-st0" cx="11.9" cy="17.4" rx="0.7" ry="1.4" />
-                    <ellipse class="chat-bot-icon-st0" cx="18.1" cy="17.4" rx="0.7" ry="1.4" />
-                    <path class="chat-bot-icon-st0" d="M14.5,5.3v1.1h1V5.3c0.3-0.2,0.5-0.5,0.5-0.8c0-0.5-0.4-0.9-1-0.9c-0.5,0-0.9,0.4-0.9,0.9
-                      C14.1,4.8,14.2,5.1,14.5,5.3z" />
-                  </g>
-                  <rect class="chat-bot-icon-st1" width="30" height="30" />
+                  <path d="M24.6,12.6c-0.1,0-0.2,0-0.3,0c-1.6-2.9-4.5-5.8-9.2-5.8c-4.7,0-7.6,2.9-9.2,5.8c-0.2,0-0.4-0.1-0.6-0.1
+                    c-2,0-3.5,2.3-3.5,5c0,2.8,1.6,5,3.5,5c0.1,0,0.3,0,0.4,0c2.3,3.6,7,3.9,9.4,3.9c2.3,0,6.9-0.5,9.2-3.9c0.1,0,0.1,0,0.2,0
+                    c2,0,3.5-2.3,3.5-5C28.1,14.8,26.6,12.6,24.6,12.6z M22,21.1c0,0-7.8,2.3-14.3-0.1c0,0-0.8-4.1-0.5-7.2c0,0,8.1-3.2,15.6,0.3
+                    C22.8,14.1,23.3,19.1,22,21.1z" />
+                  <ellipse cx="11.9" cy="17.4" rx="0.7" ry="1.4" />
+                  <ellipse cx="18.1" cy="17.4" rx="0.7" ry="1.4" />
+                  <path d="M14.5,5.3v1.1h1V5.3c0.3-0.2,0.5-0.5,0.5-0.8c0-0.5-0.4-0.9-1-0.9c-0.5,0-0.9,0.4-0.9,0.9
+                    C14.1,4.8,14.2,5.1,14.5,5.3z" />
                 </g>
+
               </svg>
             </span>
           </a>
@@ -120,15 +107,13 @@
       <!-- ------------------------------------------- -->
       <!-- <ng-container *ngIf="USER_ROLE !== 'agent'"> -->
         <li  matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"  style="text-align: center;">
-          <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor" style="height: 40px;margin-right: 0px !important;">
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor">
             <!-- <i class="material-icons sidebar-icons">forum</i> -->
             <span  class="realtime-icon-wpr" >
-
               <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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 5px;">
-            
-              <path class="realtime-icon-st3" d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
+              <path d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
                 l0.9,0c0.5-0.7,1-1.4,1.4-2L17.9,11.6z"/>
               </svg>
             </span>
@@ -141,7 +126,7 @@
       <!-- CONTACTS (LEADS)  (click)="goToContacts()" -->
       <!-- ------------------------------------------- -->
       <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
-        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">contacts</i>
         </a>
@@ -152,15 +137,14 @@
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
         <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a target="_self" href="{{ dashboard_app_url }}" class="customAncor" style="margin-right: 0px !important;">
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{ dashboard_app_url }}" class="customAncor">
             <!-- <i class="material-icons sidebar-icons">apps</i> -->
             <!-- <i class="material-icons sidebar-icons">dashboard_customize</i> -->
             <span class="dashboard-customize-icon-wpr"> 
               <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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 10px;">
-                <path class="dashboard_customize-st0" d="M0,0h24v24H0V0z"/>
-                <path class="dashboard_customize-st1" d="M3,3h8v8H3V3z M13,3h8v8h-8V3z M3,13h8v8H3V13z M18,13h-2v3h-3v2h3v3h2v-3h3v-2h-3V13z"/>
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;">
+                <path d="M3,3h8v8H3V3z M13,3h8v8h-8V3z M3,13h8v8H3V13z M18,13h-2v3h-3v2h3v3h2v-3h3v-2h-3V13z"/>
               </svg>
             </span>
           </a>
@@ -172,16 +156,15 @@
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
         <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;" >
-          <a target="_self" href="{{ dashboard_analytics_url }}" class="customAncor" style="margin-right: 0px !important;">
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" >
+          <a target="_self" href="{{ dashboard_analytics_url }}" class="customAncor">
             <!-- <i class="material-icons sidebar-icons">trending_up</i> -->
             <!-- <i class="material-icons sidebar-icons"> analytics </i> -->
             <!-- <i class="material-icons sidebar-icons">  bar_chart </i> -->
             <span class="bar-chart-icon-wpr"> 
               <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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 10px;">
-                <path class="bar-chart-icon-st0" d="M0,0h24v24H0V0z"/>
-                <path class="bar-chart-icon-st1" d="M5,9.2h3V19H5V9.2z M10.6,5h2.8v14h-2.8V5z M16.2,13H19v6h-2.8V13z"/>
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px">
+                <path d="M5,9.2h3V19H5V9.2z M10.6,5h2.8v14h-2.8V5z M16.2,13H19v6h-2.8V13z"/>
               </svg>
            </span>
           </a>
@@ -193,7 +176,7 @@
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleACT">
         <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
-          matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
           <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
             <i class="material-icons sidebar-icons">assignment</i>
           </a>
@@ -205,7 +188,7 @@
       <!-- REQUESTS HISTORY (click)="goToHistory()" -->
       <!-- ------------------------------------------- -->
       <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
-        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a target="_self" href="{{ dashboard_history_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">history</i>
         </a>
@@ -215,26 +198,13 @@
       <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" (click)="goToWidgetSetUpOrToCannedResponses()" -->
       <!-- ----------------------------------------------------------------------------------- -->
       <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
-        matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>
         </a>
       </li>
 
 
-      <!-- ------------------------------------------- -->
-      <!-- LOGO TILEDESK  (click)="goToOfficialSite()" -->
-      <!-- ------------------------------------------- -->
-      <li  matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" class="logo"
-        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;min-height:43px">
-          <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 fill="#F18876" 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 fill="#E5BBAD" 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>
-          </a>
-      </li>
-
 
       <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
   [plan_name]="plan_name"
@@ -251,5 +221,17 @@
 </app-sidebar-user-details> -->
 
     </ul>
-  </div>
+
+    <div matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" class="logoBrand"
+      #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+      <!-- ------------------------------------------- -->
+      <!-- LOGO TILEDESK  (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>
+      </a>
+    </div>
 </div>

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

@@ -1,5 +1,7 @@
+
 ::ng-deep .custom-mat-tooltip {
-  background-color: #2d323e  !important;
+  background-color: var(--tooltip-bckground);
+  color: var(--tooltip-color) !important;
   font-size: 12px  !important;
   border-radius: 2px !important;
   font-family: 'Poppins' !important;
@@ -12,47 +14,60 @@
   border-radius: 50%;
 }
 
-.chat-bot-icon-st0 {
-  // fill: #a9afbb;
-  fill: #647491
-}
-.chat-bot-icon-st1 {
-  fill: none;
-}
 
-.realtime-icon-st3 {
-  fill: #647491
+.logo {
+  min-height: 60px;
+  width: 60px; // for SMALL SIDEBAR
 }
 
-.dashboard_customize-st0{
-  fill:none;
-}
-.dashboard_customize-st1{
-  fill:#647491;
-}
+.logoBrand{
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  height: 60px;
 
-.bar-chart-icon-st0{
-  fill:none;
+  svg path:first-child {
+    fill: #F18876
+  }
+  svg path:nth-child(2){
+    fill: #E5BBAD
+  }
 }
 
-.bar-chart-icon-st1{
-  fill:#647491;
-}
 
-#bot-anchor-wpr:hover > #bot-anchor > .bot-icon-wpr > svg > g > g > .chat-bot-icon-st0 {
-  fill: #a9afbb ;
+svg path,
+svg ellipse {
+  fill: var(--sidebar-icon-color);
 }
 
-li:hover > a > .realtime-icon-wpr > svg  > path {
-  fill: #a9afbb;
+li > a >i {
+  // font-size: 20px;
+  // float: left;
+  // margin-right: 15px;
+  // line-height: 30px;
+  width: 60px;
+  text-align: center;
+  // color: #a9afbb;
+  color: var(--sidebar-icon-color);
 }
 
-li:hover > a > .dashboard-customize-icon-wpr > svg  > .dashboard_customize-st1 {
-  fill: #a9afbb;
+
+
+svg:hover path,
+svg:hover ellipse {
+  fill: var(--sidebar-hover-icon-color);
+}
+li:hover > a > i {
+  // background-color: #eee;
+  color: var(--sidebar-hover-icon-color);
 }
 
-li:hover > a > .bar-chart-icon-wpr > svg  > .bar-chart-icon-st1{
-  fill: #a9afbb;
+.item-active svg path,
+.item-active svg ellipse{
+  height: 40px;
+  // background-color: #3ea9f5;
+  fill: var(--sidebar-active-icon) !important;
+  pointer-events: none;
 }
 
 #sidebaravatar-altenative-user-avatar {

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

@@ -2,7 +2,7 @@
 
     <div class="user-details-dshbrd-lang">
 
-        <span class="user-details-dshbrd-lang-code" style="text-transform: uppercase;color: #647491;">
+        <span class="user-details-dshbrd-lang-code">
             {{chat_lang}}
         </span>
         <img *ngIf="flag_url" [src]="flag_url" width="19px" height="19px" style=" position: relative;top: 1px;">
@@ -96,17 +96,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