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

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

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;
+}