[US TRTL-688] Improve side panel header generic display

ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html

@@ -6,10 +6,10 @@
       </button>
     </div>
 
-    <!-- if we have a one line title (25 chars), then apply a top margin -->
-    <div *ngIf="!loading; else spinner" class="title" [class.mt-3]="title?.length < 26">
+    <div *ngIf="!loading; else spinner" class="title">
       <i class="vitamui-icon {{icon}}"
          [ngClass]="{
+          'status-badge-red': badge === 'red',
           'status-badge-green': badge === 'green',
           'status-badge-grey': badge === 'grey',
           'status-badge-red': badge === 'red',
@@ -24,8 +24,8 @@
         <p class="text large light m-0">{{subtitle}}</p>
       </div>
       <div *ngIf="!hasToolTipOnTitle || !toolTipTitleText || !toolTipTitleDuration">
-        <h5 class="m-0 primary">{{title}}</h5>
-        <p class="text large light m-0">{{subtitle}}</p>
+        <h5 class="m-0">{{title}}</h5>
+        <p class="text medium m-0">{{subtitle}}</p>
       </div>
       <div class="d-flex align-items-end justify-content-end actions">
         <ng-content></ng-content>

ui/ui-frontend-common/src/sass/_sidepanel.scss

@@ -7,7 +7,7 @@
 .vitamui-sidepanel-header {
     background-color: white;
     padding: 2px 20px 10px 10px;
-    height: 174px;
+    height: 100%;
 
     .cancel {
         > i {
@@ -21,7 +21,7 @@
         padding: 0 30px;
 
         > i {
-            color: var(--vitamui-grey-900);
+            color: var(--vitamui-grey-600);
             font-size: 35px;
         }
 
@@ -35,8 +35,9 @@
         }
 
         > div:first-of-type {
-            width: 76%;
+            width: 100%;
             padding-left: 2rem;
+            padding-right: 1rem;
 
             > h5 {
                 display: -webkit-box;
@@ -56,7 +57,7 @@
         }
 
         > .actions {
-            width: 15%;
+            width: auto;
         }
     }
 }
@@ -75,16 +76,8 @@
     .mat-tab-body-wrapper {
       height: 100%;
     }
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: none;
 }
 
-
-
 .mat-drawer-content {
     background-color: var(--vitamui-background);
 }