From ffbe5444847171e14690608138280890414a8342 Mon Sep 17 00:00:00 2001
From: Nicola Lanzilotto <nicola@tiledesk.com>
Date: Thu, 26 Sep 2024 17:29:15 +0200
Subject: [PATCH] Improves the quotas current usage panel and home page section

---
 .../home-cds/home-cds.component.html          |  6 ++--
 .../home-cds/home-cds.component.scss          |  3 +-
 src/app/home/home.component.html              | 36 ++++++++++++++-----
 src/app/home/home.component.scss              | 20 +++++------
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/app/home-components/home-cds/home-cds.component.html b/src/app/home-components/home-cds/home-cds.component.html
index 739e923b3a37..932a706c1f89 100644
--- a/src/app/home-components/home-cds/home-cds.component.html
+++ b/src/app/home-components/home-cds/home-cds.component.html
@@ -33,14 +33,14 @@
         
         <div *ngIf="!showSpinner" class="title-container" >
             <div *ngIf="chatbots?.length > 0" class="home-cds-section-title">
-                YOUR CURRENT CHATBOT DESIGN
+                YOUR CURRENT CHATBOT
             </div>
             <div *ngIf="chatbots?.length === 0" class="home-cds-section-title">
                 You don't have any chatbot yet
             </div>
-            <div *ngIf="chatbots?.length > 0" class="home-cds-section-subtitle">
+            <!-- <div *ngIf="chatbots?.length > 0" class="home-cds-section-subtitle">
                 Open the Studio to start editing your chatbot
-            </div>
+            </div> -->
         </div>
 
     </div>
diff --git a/src/app/home-components/home-cds/home-cds.component.scss b/src/app/home-components/home-cds/home-cds.component.scss
index 0ec8df44e500..425d87003285 100644
--- a/src/app/home-components/home-cds/home-cds.component.scss
+++ b/src/app/home-components/home-cds/home-cds.component.scss
@@ -70,7 +70,8 @@
 .button-container {
     display: flex;
     justify-content: center;
-    margin-top: 35px;
+    // margin-top: 35px;
+    margin-top: 15px;
     // margin-bottom: 70px;
     height: 85px;
 }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index be5213ef4531..4b16c19d9e04 100755
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -71,8 +71,10 @@
                       {{ prjct_name }}
                     </span>
                     <span class="material-icons home-edit-project-name-icon" (click)="goToProjectSettingsGeneral()"
-                      matTooltipClass="custom-mat-tooltip" matTooltip="{{'EditProjectName' | translate }}"
-                      #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
+                      matTooltipClass="custom-mat-tooltip" 
+                      matTooltip="{{'EditProjectName' | translate }}"
+                      #tooltip="matTooltip" matTooltipPosition='below' 
+                      matTooltipHideDelay="100">
                       mode_edit
                     </span>
                   </div>
@@ -249,12 +251,12 @@
         <div *ngIf="!displayQuotaSkeleton" class="home-quota-banner"
           [ngClass]="{'home-quota-banner-alert': conversationsRunnedOut || emailsRunnedOut || tokensRunnedOut}">
        
-          <div class="home-quota-banner-title-wpr">
+          <!-- <div class="home-quota-banner-title-wpr">
 
             <div class="home-quota-banner-title-no-alert" [ngClass]="{'home-quota-banner-title-alert': conversationsRunnedOut || emailsRunnedOut || tokensRunnedOut}">
               Current usage
             </div>
-          </div>
+          </div> -->
 
           <div class="home-quota-wpr">
             <!-- -------------------------- -->
@@ -264,7 +266,13 @@
               [ngClass]="{'home-quote-container-conversations-runned-out': conversationsRunnedOut}">
 
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title link" (click)="goToHistoryAllConvs()"> Conversations</p>
+                <p class="quote-title link" (click)="goToHistoryAllConvs()"
+                      matTooltipClass="custom-mat-tooltip" 
+                      matTooltip="Current usage"
+                      #tooltip="matTooltip" matTooltipPosition='above' 
+                      matTooltipHideDelay="100">
+                       Conversations
+                      </p>
                 <div class="quote-count">{{requests_count | number:'1.0-0'}} / {{requests_limit | number:'1.0-0'}}</div>
                 <div class="quota-runned-out-msg" *ngIf="conversationsRunnedOut">
                   You run out of converations
@@ -288,7 +296,13 @@
             <!-- -------------------------- -->
             <div class="home-quote-container" [ngClass]="{'home-quote-container-tokens-runned-out': tokensRunnedOut}">
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title">AI Tokens</p>
+                <p class="quote-title"
+                  matTooltipClass="custom-mat-tooltip" 
+                  matTooltip="Current usage"
+                  #tooltip="matTooltip" matTooltipPosition='above' 
+                  matTooltipHideDelay="100">
+                  AI Tokens
+                </p>
                 <div class="quote-count">{{tokens_count | number:'1.0-0'}} / {{tokens_limit | number:'1.0-0'}}</div>
                 <div class="quota-runned-out-msg" *ngIf="tokensRunnedOut">
                   You run out of AI Tokens
@@ -315,7 +329,13 @@
             <div class="home-quote-container" [ngClass]="{'home-quote-container-email-runned-out': emailsRunnedOut}">
 
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title">Email</p>
+                <p class="quote-title"
+                  matTooltipClass="custom-mat-tooltip" 
+                  matTooltip="Current usage"
+                  #tooltip="matTooltip" matTooltipPosition='above' 
+                  matTooltipHideDelay="100">
+                  Email
+                </p>
                 <div class="quote-count">{{email_count | number:'1.0-0'}} / {{email_limit | number:'1.0-0'}}</div>
                 <div class="quota-runned-out-msg" *ngIf="emailsRunnedOut">
                   You run out of Email
@@ -354,7 +374,7 @@
           </div>
         </div>
         <!--  *ngIf="displayQuotaSkeleton" -->
-        <div *ngIf="displayQuotaSkeleton" class="first-card is-loading" style="height: 111px;">
+        <div *ngIf="displayQuotaSkeleton" class="first-card is-loading" style="height: 68px;">
 
           <!-- <div class="quota-skeleton-title">
               <div class="quota--fake--box"></div>
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index f44fa9b9aa84..7ad814b7ed26 100755
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -2888,12 +2888,10 @@ img {
 }
 
 .home-blocks-wpr {
-  // border-top: 1px solid rgb(226, 232, 240);
   margin-top: -1px;
-  // background-color: rgb(241, 245, 249);
-  padding: 45px 80px 18px;
+  // padding: 45px 80px 18px;
+  padding: 6px 80px 18px;
   max-width: 994px;
-  // margin: 0px auto;
   display: flex;
   align-self: center;
 }
@@ -3008,7 +3006,7 @@ img {
   .quota-skeleton-container {
     display: flex;
     gap: 52px;
-    margin-top: 50px;
+    // margin-top: 50px;
   }
 
   .quota-skeleton-wpr {
@@ -3217,6 +3215,7 @@ img {
 /* *********************************** */
 .home-quota-banner {
   width: 100%;
+  padding-top: 18px;
   // margin-top: 34px;
   // margin-top: 24px;
   // height: 152px;
@@ -3224,8 +3223,9 @@ img {
 
 .home-quota-banner-alert {
   background: #fefae6;
+  padding-top: 0px !important;
   // border: 6px solid #f55a4e;
-  padding-bottom: 12px;
+  // padding-bottom: 12px;
 }
 
 .home-quota-banner-title-wpr {
@@ -3239,10 +3239,10 @@ img {
 .home-quota-banner-icon {
   // width: 30px;
   // min-width: 30px;
-  width: 21px;
-  min-width: 21px;
+  width: 16px;
+  // min-width: 21px;
   vertical-align: middle;
-  height: 21px;
+  height: 18px;
 }
 
 .home-quota-banner-icon svg {
@@ -3342,7 +3342,7 @@ img {
 
 .home-quotas-banner-footer {
   text-align: center;
-  margin-top: 12px;
+  // margin-top: 6px;
   font-family: var(--header-font-family);
   font-weight: 400;
   font-size: 14px;