From 8aaf22e0ff311afbff02994275dbafb27d272cde Mon Sep 17 00:00:00 2001
From: Clemente Raposo <clemente.raposo@salesagility.com>
Date: Tue, 21 Jan 2025 12:41:09 +0000
Subject: [PATCH] Adjust top widget styling

---
 .../statistics-top-widget.component.html      | 98 ++++++++++---------
 .../suite8/css/components/_widget-bar.scss    | 23 ++++-
 2 files changed, 69 insertions(+), 52 deletions(-)

diff --git a/core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html b/core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html
index ab90b66c7..24ccb7241 100644
--- a/core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html
+++ b/core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html
@@ -31,62 +31,64 @@
         {{vm.appStrings[this.messageLabelKey] || '' | uppercase}}
     </div>
     <ng-container *ngIf="!loading()">
-        <ng-container *ngFor="let item of statistics | keyvalue">
+        <div class="d-flex justify-content-center align-items-center w-100 mt-3 mb-3">
+            <ng-container *ngFor="let item of statistics | keyvalue; index as i; last as isLast; count as total">
+                <div class="d-flex col h-100 flex-column justify-content-start align-items-center widget-bar-entry"
+                    [class.border-right]="total > 1 && i%2 === 0 && !isLast">
 
-            <div class="d-flex flex-column justify-content-center align-items-baseline widget-bar-entry p-2">
+                    <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
 
-                <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
-
-                    <div *ngIf="item.value.labelKey && getLabel(item.value.labelKey)" class="pr-1 widget-bar-entry-label">
-                        <ng-container *ngIf="!isValueEmpty(vm.statistics[item.key])">
-                            {{getLabel(item.value.labelKey) | uppercase}}:
-                        </ng-container>
-                        <ng-container *ngIf="isValueEmpty(vm.statistics[item.key])">
-                            {{getLabel(item.value.labelKey) | uppercase}}
-                        </ng-container>
-                    </div>
-
-                </ng-container>
-
-                <ng-container
-                        *ngIf="item.key && vm.statistics[item.key] && !shouldHide(vm.statistics[item.key], item.value)">
-
-                    <div class="pl-1 pr-1 widget-bar-entry-value"
-                         *ngIf="!vm.statistics[item.key].loading && vm.statistics[item.key].field">
-                        <ng-container
-                                *ngIf="!isValueEmpty(vm.statistics[item.key]) || item.value.hideValueIfEmpty !== true">
-                            <scrm-field [type]="vm.statistics[item.key].field.type" [field]="vm.statistics[item.key].field"
-                                        mode="list"></scrm-field>
-
-                        </ng-container>
-                    </div>
-
-                </ng-container>
-
-                <div class="pl-1 pr-1 widget-bar-entry-loading" *ngIf="(item.value.store.loading$ | async) as loading">
-                    <div class="pb-2">
-                        <div class="large-size-text-skeleton small-length-text-skeleton rounded box-loading skeleton-field-content">
-                            .
+                        <div *ngIf="item.value.labelKey && getLabel(item.value.labelKey)" class="pr-1 widget-bar-entry-label">
+                            <ng-container *ngIf="!isValueEmpty(vm.statistics[item.key])">
+                                {{getLabel(item.value.labelKey) | uppercase}}:
+                            </ng-container>
+                            <ng-container *ngIf="isValueEmpty(vm.statistics[item.key])">
+                                {{getLabel(item.value.labelKey) | uppercase}}
+                            </ng-container>
                         </div>
+
+                    </ng-container>
+
+                    <ng-container
+                            *ngIf="item.key && vm.statistics[item.key] && !shouldHide(vm.statistics[item.key], item.value)">
+
+                        <div class="pl-1 pr-1 widget-bar-entry-value"
+                             *ngIf="!vm.statistics[item.key].loading && vm.statistics[item.key].field">
+                            <ng-container
+                                    *ngIf="!isValueEmpty(vm.statistics[item.key]) || item.value.hideValueIfEmpty !== true">
+                                <scrm-field [type]="vm.statistics[item.key].field.type" [field]="vm.statistics[item.key].field"
+                                            mode="list"></scrm-field>
+
+                            </ng-container>
+                        </div>
+
+                    </ng-container>
+
+                    <div class="pl-1 pr-1 widget-bar-entry-loading" *ngIf="(item.value.store.loading$ | async) as loading">
+                        <div class="pb-2">
+                            <div class="large-size-text-skeleton small-length-text-skeleton rounded box-loading skeleton-field-content">
+                                .
+                            </div>
+                        </div>
+
+                        <ng-container *ngIf="!loading && (!item.key || !vm.statistics[item.key])">
+                            -
+                        </ng-container>
                     </div>
 
-                    <ng-container *ngIf="!loading && (!item.key || !vm.statistics[item.key])">
-                        -
+                    <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
+
+                        <div *ngIf="item.value.endLabelKey && getLabel(item.value.endLabelKey)"
+                             class="pl-1 widget-bar-entry-end-label">
+                            {{getLabel(item.value.endLabelKey) | uppercase}}
+                        </div>
+
                     </ng-container>
+
                 </div>
 
-                <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
-
-                    <div *ngIf="item.value.endLabelKey && getLabel(item.value.endLabelKey)"
-                         class="pl-1 widget-bar-entry-end-label">
-                        {{getLabel(item.value.endLabelKey) | uppercase}}
-                    </div>
-
-                </ng-container>
-
-            </div>
-
-        </ng-container>
+            </ng-container>
+        </div>
     </ng-container>
 
     <ng-container *ngIf="loading()">
diff --git a/core/app/shell/src/themes/suite8/css/components/_widget-bar.scss b/core/app/shell/src/themes/suite8/css/components/_widget-bar.scss
index 063a17fb5..7f6b18583 100644
--- a/core/app/shell/src/themes/suite8/css/components/_widget-bar.scss
+++ b/core/app/shell/src/themes/suite8/css/components/_widget-bar.scss
@@ -29,12 +29,19 @@
   color: $dark-midnight-grey;
   box-shadow: 0 .125rem .25rem #00000013;
   border: 1px solid $extra-light-grey;
-  min-height: 70px;
+  min-height: 60px;
+
+    .widget-bar-entry:not(:first-child):not(:last-child) {
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
+
+
 }
 
 .widget-bar .widget-bar-entry-value {
-  font-weight: 900;
-  font-size: 1.7em;
+  font-weight: 700;
+  font-size: 1.3em;
 
   .skeleton-field-content {
     background-color: $dark-midnight-grey;
@@ -45,9 +52,17 @@
 .widget-bar .widget-bar-entry-label,
 .widget-bar .widget-bar-entry-end-label {
   font-weight: 400;
-  font-size: 0.7em;
+  font-size: 0.8em;
+  text-align: center;
 }
 
+.widget-bar .widget-bar-entry-label:first-child {
+  padding-top: 0.2rem;
+}
+
+
+
+
 .widget-bar .inline-spinner > div {
   width: 0.45em;
   height: 0.45em;