From 5dc538bafbc331b35c4ae6f122b0a7c796230563 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Nov 2023 17:29:59 +0100
Subject: [PATCH] Feature/optimize testimonial carousel style on mobile (#2634)

* Optimize style on mobile

* Update changelog
---
 CHANGELOG.md                                        | 1 +
 apps/client/src/app/pages/landing/landing-page.html | 2 +-
 libs/ui/src/lib/carousel/carousel.component.html    | 8 ++++----
 libs/ui/src/lib/carousel/carousel.component.scss    | 5 +++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ac4272fa..49825ad3c 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 96d5c4f7a..d3ec85f5f 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/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"
diff --git a/libs/ui/src/lib/carousel/carousel.component.html b/libs/ui/src/lib/carousel/carousel.component.html
index 59966b8a6..97f2e1b6e 100644
--- a/libs/ui/src/lib/carousel/carousel.component.html
+++ b/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()"
 >
diff --git a/libs/ui/src/lib/carousel/carousel.component.scss b/libs/ui/src/lib/carousel/carousel.component.scss
index 38da7c100..546c92194 100644
--- a/libs/ui/src/lib/carousel/carousel.component.scss
+++ b/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;
     }
   }