@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

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

@@ -0,0 +1,189 @@
+import { AppConfigProvider } from 'src/app/services/app-config';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { EventsService } from 'src/app/services/events-service';
+import { ProjectsService } from './../../services/projects/projects.service';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Project } from 'src/chat21-core/models/projects';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+})
+export class NavbarComponent implements OnInit {
+
+  @Input() isSoundEnabled: boolean;
+  @Output() onSoundChange = new EventEmitter<string>();
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  private tiledeskToken: string;
+
+  public projects: Project[];
+  public project: any;
+  private USER_ROLE: string;
+
+  public translationsMap: Map<string, string> = new Map();
+
+  public openDropdownProjects: boolean = false
+  private public_Key: string;
+  public isVisible: boolean;
+  public MT: boolean;
+
+  constructor(
+    private projectsService: ProjectsService,
+    private tiledeskAuthService: TiledeskAuthService,
+    private appConfigProvider: AppConfigProvider,
+    private translateService: CustomTranslateService, 
+    private events: EventsService,  
+  ) { }
+
+  ngOnInit() {
+    this.listenToUserGoOnline();
+    this.getStoredProjectAndUserRole();
+    this.initTranslations();
+    this.getOSCODE();
+  }
+
+  initTranslations(){
+    let keys= [
+      "NAVBAR.SIMULATE_VISITOR",
+      "NAVBAR.PROJECT_SETTINGS",
+      "NAVBAR.VIEW_ALL_PROJECTS",
+      "NAVBAR.ADD_PROJECT",
+      "NAVBAR.RECENT_PROJECTS",
+      "NAVBAR.OTHER_PROJECTS"
+    ]
+
+    this.translationsMap = this.translateService.translateLanguage(keys)
+  }
+
+  listenToUserGoOnline(){
+    this.events.subscribe('go:online', (isOnline)=> {
+      this.logger.log('[NAVBAR] listen to go:online --> ', isOnline);
+      if(isOnline){
+        this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+        this.getProjects()
+      }
+    });
+  }
+
+  getProjects() {
+    this.logger.log('[NAVBAR] calling getProjects ... ');
+    this.projectsService.getProjects(this.tiledeskToken).subscribe((projects: any) => {
+      this.logger.log('[NAVBAR] getProjects PROJECTS ', projects);
+      if (projects) {
+          // this.projects = projects;
+          this.projects = projects.filter((project: any) => {
+              // this.logger.log('[NAVBAR] getProjects PROJECTS status ', project.id_project.status);
+              return project.id_project.status === 100;
+          });
+          this.logger.log('[NAVBAR] getProjects this.projects ', this.projects);
+      }
+    }, (error) => {
+        this.logger.error('[NAVBAR] getProjects - ERROR ', error)
+    }, () => {
+        this.logger.log('[NAVBAR] getProjects - COMPLETE')
+    });
+  }
+
+  getStoredProjectAndUserRole() {
+    this.events.subscribe('storage:last_project',project =>{
+      this.logger.log('[NAVBAR] stored_project ', project)
+      if (project && project !== 'undefined') {
+        this.project = project;
+        this.USER_ROLE = project.role;
+      }
+    })
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[NAVBAR] AppConfigService getAppConfig public_Key', this.public_Key)
+    this.logger.log('[NAVBAR] public_Key', this.public_Key)
+
+    let keys = this.public_Key.split("-");
+    // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
+
+    keys.forEach(key => {
+        // this.logger.log('NavbarComponent public_Key key', key)
+        if (key.includes("PAY")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let pay = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
+            if (pay[1] === "F") {
+                this.isVisible = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            } else {
+                this.isVisible = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            }
+        }
+
+        if (key.includes("MTT")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let mt = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - mt key&value', mt);
+            if (mt[1] === "F") {
+                this.MT = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            } else {
+                this.MT = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            }
+        }
+    });
+
+    if (!this.public_Key.includes("MTT")) {
+        this.MT = false;
+        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    }
+
+  }
+
+
+  onClickSound(event: string){
+    this.onSoundChange.emit(event)
+  }
+
+
+  testWidgetPage() {
+    const simulateVisitorBtnElem = <HTMLElement>document.querySelector('.simulate-visitor-btn');
+    simulateVisitorBtnElem.blur();
+    // + '&isOpen=true'
+    const url = this.appConfigProvider.getConfig().testsiteBaseUrl + '?tiledesk_projectid=' + this.project.id_project.id + '&project_name=' + this.project.id_project.name + '&role=' + this.USER_ROLE
+    window.open(url, '_blank');
+  }
+
+  onClickDropdownOption(event: string){
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    let url = baseUrl
+    if(event === 'projectSettings'){
+      url = baseUrl + 'project/' + this.project.id_project.id + '/project-settings/general'
+    }else if(event ==='allProjects'){
+      url = baseUrl + 'project/'
+    }else if('addProject'){
+      url = baseUrl + 'create-new-project/' 
+    }
+    window.open(url, '_blank');
+  }
+
+  goToHome(id_project: string, project_name: string,) {
+    // this.logger.log('!NAVBAR  goToHome prjct ', prjct)
+    this.logger.log('[NAVBAR] goToHome id_project ', id_project, 'project_name', project_name)
+    // RUNS ONLY IF THE THE USER CLICK OVER A PROJECT WITH THE ID DIFFERENT FROM THE CURRENT PROJECT ID
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    if (id_project !== this.project.id_project.id) {
+      // this.subscription.unsubscribe();
+      // this.unsubscribe$.next();
+      // this.unsubscribe$.complete();
+
+      const url = this.appConfigProvider.getConfig().dashboardUrl + `/project/${id_project}/home`
+      window.open(url, '_blank');
+
+    }
+}
+
+}

package/src/app/components/project-item/project-item.component.html

@@ -1,158 +1,107 @@
 <div class="main-content main-content-project-for-panel">
-  <div class="container-fluid container-project-for-panel">
-
-    <div class="left-sidebar">
-
-      <!-- <loading-spinner *ngIf="showSpinner"></loading-spinner> -->
-      <!-- *ngIf="!showSpinner" -->
-      <div class="left-sidebar-project" style="margin-right: -10px;">
-
-        <div class="small-projects-sidebar">
-          <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
-          <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
-            <div class="flex-child-left" [tooltip]="conversationsInQueue" [options]="tooltipOptions" placement="top"
-              content-type="template" (click)="openUnservedConvs()">
-              <div class="unassigned-notifications-icon-wpr">
-                <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
-                  class="style-scope yt-icon"
-                  style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-top: 9px;">
-                  <g class="style-scope yt-icon">
-                    <path
-                      d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
-                      class="style-scope yt-icon"></path>
-                  </g>
-                </svg>
-              </div>
-              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
-                <!-- || currentUserRequestCount > 0  -->
-                <!-- <span *ngIf="unservedRequestCount > 0 "> -->
-                <!-- + currentUserRequestCount -->
-                <span class="notification-count">{{ unservedRequestCount }}</span>
-              </div>
-            </div>
 
-            <ng-template #conversationsInQueue>
-              <span *ngIf="unservedRequestCount > 1">
-                {{ unservedRequestCount }}
-                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
-              </span>
-              <span *ngIf="unservedRequestCount === 1">
-                {{ unservedRequestCount }}
-                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
-              </span>
-              <span *ngIf="unservedRequestCount === 0">
-                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
-
-              </span>
-            </ng-template>
-
-
-            <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
-                [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
-                <div class="project---name"> {{ project?.id_project?.name }} </div>
-              </div>
-              <ng-template #conversationsInQueueOnProjectName>
-                <span *ngIf="unservedRequestCount > 1">
-                  {{ unservedRequestCount }}
-                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
-                </span>
-                <span *ngIf="unservedRequestCount === 1">
-                  {{ unservedRequestCount }}
-                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
-                </span>
-                <span *ngIf="unservedRequestCount === 0">
-                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
-                </span>
-              </ng-template>
-
-              <!-- <div class="availabily-and-busy-wpr">
-                <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
-                  <div class="onoffswitch"
-                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
-                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
-                    <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
-                  </div>
-                </div>
-
-
-                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-                <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
-                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('LABEL_AVAILABLE') }}
-                </span>
-                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-                <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
-                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
-                </span>
-
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
-                [options]="tooltipOptions" placement="top" >
-                  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
-                    viewBox="0 0 24 24" width="16px" fill="#FEB92C">
-                    <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
-                    <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
-                  </svg>
-                </div>
-              </div>
-            </div> -->
-
-            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
-              <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
-                [options]="tooltipOptions" placement="top" content-type="template">
-
-                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
-                  (click)="openUnservedConvsAndGoToProjectList()">
-
-                  <span class="push-icon-and-list-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;">
-                      <style type="text/css">
-                        .st0 {
-                          fill: #3880ff;
-                        }
-                      </style>
-                      <path class="st0"
-                        d="M22.8,15v-2c-1.7,0-3-1.3-3-3V5h1c0.5,0,1-0.5,1-1s-0.5-1-1-1h-10c-0.5,0-1,0.5-1,1s0.5,1,1,1h1v5
-                 c0,1.7-1.3,3-3,3v2h6v5c0.6,0,1.4,0,2,0v-5H22.8z M12.8,13c0.7-0.9,1-1.9,1-3V5h4v5c0,1.1,0.4,2.2,1,3H12.8z" />
-                      <rect x="1.2" y="13" class="st0" width="6.3" height="2" />
-                      <rect x="1.2" y="18" class="st0" width="12.1" height="2" />
-                      <rect x="1.2" y="7.6" class="st0" width="9.2" height="2" />
-                    </svg> -->
-
-                    <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: 16px;">
-                      <style type="text/css">
-                        .st0 {
-                          fill: #165CEE;
-                        }
-                      </style>
-                      <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
-	c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
-	c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
-                    </svg>
-                  </span>
-
-
-
-                </ion-button>
-              </div>
-              <ng-template #viewAllConvs>
-                <span>
-                  {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
-              </ng-template>
+    <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
+    <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
+      <div class="flex-child-left" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions" placement="top"
+        content-type="template" (click)="openUnservedConvs()">
+        <div class="unassigned-notifications-icon-wpr">
+          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon">
+            <g class="style-scope yt-icon">
+              <path
+                d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
+                class="style-scope yt-icon"></path>
+            </g>
+          </svg>
+        </div>
+        <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
+          <!-- || currentUserRequestCount > 0  -->
+          <!-- <span *ngIf="unservedRequestCount > 0 "> -->
+          <!-- + currentUserRequestCount -->
+          <span class="notification-count">{{ unservedRequestCount }}</span>
+        </div>
+      </div>
+
+
+      <div class="flex-child-right">
+        <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+          [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
+          <div class="unassigned_label"> <a>{{ translationMap?.get('UnassignedConversations') }}</a> </div>
+        </div>
+        
+        <!-- <div class="availabily-and-busy-wpr">
+          <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
+            <div class="onoffswitch"
+              (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
+              <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
             </div>
+          </div>
 
+
+          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+          <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
+            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+            {{translationMap?.get('LABEL_AVAILABLE') }}
+          </span>
+          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+          <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
+            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+            {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
+          </span>
+
+          <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
+          [options]="tooltipOptions" placement="top" >
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
+              viewBox="0 0 24 24" width="16px" fill="#FEB92C">
+              <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
+              <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
+            </svg>
           </div>
         </div>
+      </div> -->
 
-        <!-- </div> -->
+      <!-- <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
+        <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
+          [options]="tooltipOptions" placement="top" content-type="template">
+
+          <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+            (click)="openUnservedConvsAndGoToProjectList()">
+
+            <span class="push-icon-and-list-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: 16px;">
+                <style type="text/css">
+                  .st0 {
+                    fill: #165CEE;
+                  }
+                </style>
+                <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
+c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
+c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
+              </svg>
+            </span>
+
+
+
+          </ion-button>
+        </div>
+        <ng-template #viewAllConvs>
+          <span>
+            {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
+        </ng-template>
+      </div> -->
 
-      </div>
     </div>
-  </div>
-</div>
+
+
+</div>
+
+
+<ng-template #conversationsInQueueOnProjectName>
+  <span>
+    ({{ unservedRequestCount }})
+    {{translationMap?.get('UnassignedConversations') }}
+  </span>
+</ng-template>

package/src/app/components/project-item/project-item.component.scss

@@ -4,13 +4,10 @@
     padding-top: 0px;
     margin-top: 0px !important;
     padding-bottom: 0px !important;
-    // background: #fff;
     padding-left: 0px;
     width: 100%;
-    // min-height: 70px;
-    // height: 70px;
-    min-height: 64px;
-    height: 64px;
+    // min-height: 64px;
+    // height: 64px;
     position: relative;
     // top: -5px; //nk x AS
 }
@@ -215,14 +212,10 @@
     }
 }
 
-.container-project-for-panel {
-    padding: 0px !important;
-    width: 296px;
-}
-
 .flex-container-project-for-panel {
     display: flex;
-    width: 100%;
+    // width: 100%;
+    // height: 64px;
     justify-content: center;
     align-items: center;
     // position: relative;
@@ -231,17 +224,18 @@
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    height: 64px;
+    margin: 6px;
+    // background-color: rgba(24, 119, 242, 0.1);
+    border-radius: 5px;
 }
 
-.flex-container:hover {
-    background-color: rgba(200, 200, 200, 0.2);
+.flex-container-project-for-panel:hover {
+    background-color:  rgba(24, 119, 242, 0.2);
 }
 
 .flex-child-right {
     flex: 1;
-    padding: 18px 0px;
-    // height: 100%;
+    // padding: 18px 0px;
 }
 
 
@@ -249,7 +243,7 @@
     // flex: 0 0 20%;
     width: 60px;
     text-align: center;
-    padding: 18px 0px;
+    // padding: 18px 0px;
     height: 100%;
 }
 // border: 2px solid yellow;
@@ -309,22 +303,21 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px ;
+    width: 250px;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 14px;
+    font-size: 16px; //14px;
     position: relative;
-    top: -1px;
     cursor: pointer;
+    a {
+        color: #779bbb
+    }
 }
 
 
-.project-name-project-for-panel-on-desktop {
-    width: 217px
-}
 
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
@@ -332,12 +325,13 @@
 //     width: fit-content;
 //     display: block;
 // }
-.project---name {
+.unassigned_label {
     width: fit-content;
     
 }
-.project---name:hover {
-    color: rgba(0, 0, 0, 0.35);
+.unassigned_label:hover {
+    color: rgb(100, 131, 158);
+    // font-weight: 600;
 }
 
 .view-all-convs-icon:hover {
@@ -452,13 +446,21 @@
     // top: 3px;
 
     position: relative;
-    top: -8px;
+    // top: -8px;
     background: transparent;
     border-radius: 50%;
-    width: 50px;
+    width: 40px; //50px;
     left: 10px;
-    height: 50px;
+    height: 40px; //50px;
     cursor: pointer;
+
+    svg {
+        pointer-events: none;
+        width: 30px;
+        height: auto;
+        fill: #779bbb; //rgb(107,107,107);
+        margin-top: 7px;
+    }
 }
 .unassigned-notifications-icon-wpr:hover {
     background-color: rgba(0, 0, 0, 0.05);
@@ -467,23 +469,28 @@
 .unassigned-notifications-badge {
     position: absolute;
     // top: 12px;
-    top: 14px;
+    top: 6px;//14px;
     border-radius: 50%;
     background: #e41e3f;
     // width: 24px;
     // height: 24px;
-    width: 22px;
-    height: 22px;
+    width: 20px; //22px;
+    height: 20px; //22px;
     color: #fff;
    
-    left: 34px;
+    left: 40px; //33px;
     border: 1px solid #fff;
+
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
 }
 .notification-count {
-    font-size: 12px;
+    font-size: 10px; //12px;
     font-weight: 500;
     position: relative;
-    top: -1px;
+    // top: -1px;
     text-align: center;
 }