Updated the files for the padding change and styles

Author: SambhuPega

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

@@ -1,18 +1,19 @@
-:host {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  max-width: 100vw;
-  overflow: hidden;
-  contain: content;
-}
+// :host {
+//   display: block;
+//   width: 100%;
+//   min-width: 0;
+//   max-width: 100vw;
+//   overflow: hidden;
+//   contain: content;
+// }
 
 .carousel-host-container {
   width: 100%;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  // padding: 20px 25px;
 }
 
 .header {
@@ -34,13 +35,13 @@
   align-items: center;
   width: 100%;
   max-width: 100%;
-  height: 400px;
   padding: 0;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: auto;
   box-sizing: border-box;
   box-sizing: border-box;
+  border-radius: 12px;
 
   &::-webkit-scrollbar {
     display: none;

src/app/_samples/mediaco/components/list-view/list-view.component.html

@@ -32,18 +32,12 @@ <h3>{{ title }}</h3>
       </div>
     </div>
   </div>
-
-  <div class="text-right">
-    <button mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList' && template === 'Table'" (click)="openShowAll()">
-      Show All
-    </button>
-  </div>
 </div>
 <div *ngIf="template === 'Gallery'">
   <div class="carousel-constraint-wrapper">
     <app-carousel *ngIf="sourceList" [data]="sourceList"></app-carousel>
   </div>
-  <div class="carousel-footer">
-    <button mat-button color="primary" (click)="openShowAll()">Show All</button>
-  </div>
+</div>
+<div class="carousel-footer">
+  <a mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList'" (click)="openShowAll()">Show All</a>
 </div>

src/app/_samples/mediaco/components/list-view/list-view.component.scss

@@ -203,6 +203,14 @@ $primary-purple: #9c27b0;
   display: flex;
   width: 100%;
   justify-content: flex-end;
-  padding: 0 16px 10px 16px;
+  padding: 10px 0 10px 16px; /* Right padding removed */
   box-sizing: border-box;
+  text-decoration: none;
+  color: rgb(103, 80, 164); /* Color updated */
+}
+
+/* This applies when you hover your mouse over the link */
+.carousel-footer:hover {
+  cursor: pointer;
+  text-decoration: underline;
 }

src/app/_samples/mediaco/components/list-view/list-view.component.ts

@@ -5,7 +5,6 @@ import { Utils } from '@pega/angular-sdk-components';
 import { CarouselComponent } from '../carousel/carousel.component';
 import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component';
 import { MatDialog } from '@angular/material/dialog';
-import { MatButton } from '@angular/material/button';
 
 interface ListViewProps {
   inheritedProps: any;
@@ -31,7 +30,7 @@ interface ListViewProps {
 
 @Component({
   selector: 'app-list-view',
-  imports: [CommonModule, CarouselComponent, MatButton],
+  imports: [CommonModule, CarouselComponent],
   templateUrl: './list-view.component.html',
   styleUrl: './list-view.component.scss',
   providers: [Utils]