Feature/optimize testimonial carousel style on mobile (#2634)

* Optimize style on mobile

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Optimized the style of the carousel component on mobile for the testimonial section on the landing page
 - Harmonized the name column in the historical market data table of the admin control panel
 
 ## 2.21.0 - 2023-11-09

apps/client/src/app/pages/landing/landing-page.html

@@ -327,7 +327,7 @@
     <div class="col-md-8 offset-md-2">
       <gf-carousel [aria-label]="'Testimonials'">
         <div *ngFor="let testimonial of testimonials" gf-carousel-item>
-          <div class="d-flex px-3">
+          <div class="d-flex px-4">
             <gf-logo
               class="mr-3 mt-2 pt-1"
               size="medium"

libs/ui/src/lib/carousel/carousel.component.html

@@ -2,8 +2,8 @@
   *ngIf="this.showPrevArrow"
   aria-hidden="true"
   aria-label="previous"
-  class="carousel-nav carousel-nav-prev no-min-width position-absolute"
-  mat-stroked-button
+  class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1"
+  mat-button
   tabindex="-1"
   (click)="previous()"
 >
@@ -25,8 +25,8 @@
   *ngIf="this.showNextArrow"
   aria-hidden="true"
   aria-label="next"
-  class="carousel-nav carousel-nav-next no-min-width position-absolute"
-  mat-stroked-button
+  class="carousel-nav carousel-nav-next no-min-width position-absolute px-1"
+  mat-button
   tabindex="-1"
   (click)="next()"
 >

libs/ui/src/lib/carousel/carousel.component.scss

@@ -12,13 +12,14 @@
   button {
     top: 50%;
     transform: translateY(-50%);
+    z-index: 1;
 
     &.carousel-nav-prev {
-      left: -50px;
+      left: -0.5rem;
     }
 
     &.carousel-nav-next {
-      right: -50px;
+      right: -0.5rem;
     }
   }