Fixed the alignment issues in banner component and Todo Widget

Author: manasa

src/app/_samples/mediaco/components/banner/banner.component.html

@@ -1,8 +1,8 @@
 <div style="margin-bottom: '2rem'">
-  <div class="background-image-style" [ngStyle]="{ 'background-image': getUrl() }">
+  <div class="background-image-style">
     <div class="background-style content">
       <div>
-        <h1 class="title">{{ title }}</h1>
+        <h1 class="title" [innerHTML]="title"></h1>
         <p class="message">{{ message }}</p>
       </div>
     </div>

src/app/_samples/mediaco/components/banner/banner.component.scss

@@ -34,7 +34,7 @@
 }
 
 .background-image-style {
-  height: calc(19rem);
+  height: calc(20rem);
   background-size: cover;
   background-position: center center;
 }
@@ -50,21 +50,21 @@
 .content {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  padding-top: 5rem;
   gap: calc(0.5rem);
 }
 
 .title {
   margin: 0rem;
-  font-size: 1.728rem;
-  font-weight: 600;
+  font-size: 36px;
+  color: #46185a;
+  font-weight: 700;
 }
 
 .message {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 400;
+  font-size: 14px;
+  margin-top: 16px;
+  color: #49454f;
 }
 
 .banner-layout {

src/app/_samples/mediaco/components/todo/todo.component.scss

@@ -23,7 +23,7 @@ $btn-text-color: #5c4498;
 
   position: absolute;
   z-index: 10;
-  left: 29%;
+  left: 30%;
   top: 15rem;
 }
 

src/app/_samples/mediaco/components/todo/todo.component.ts

@@ -149,6 +149,7 @@ export class TodoComponent implements OnInit, OnDestroy {
 
   deferLoadWorklistItems(responseData) {
     this.arAssignments$ = responseData.data;
+    this.surveyCase = this.surveyAssignment(this.arAssignments$);
   }
 
   surveyAssignment(assignmentsSource: any[]) {

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html

@@ -34,7 +34,7 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <!-- Top Toolbar -->
-    <mat-toolbar *ngIf="activePage === 'Self-service Main page'" style="position: relative; background: transparent">
+    <mat-toolbar style="position: relative; background: transparent">
       <mat-toolbar-row mat-icon-button style="justify-content: space-between">
         <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
           <div>

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.scss

@@ -65,7 +65,6 @@ mat-nav-list {
 
 /* 2. Scale the icon up when hovering the list item */
 .horizontal-list mat-list-item:hover .circle-icon {
-  transform: scale(1.2); /* Zooms in by 20% - adjust this number as needed */
   cursor: pointer; /* Changes cursor to pointer to indicate interactivity */
 }