Fix dark theme hover on navigation buttons on Testimonial component

Author: webstackdev

src/components/Testimonials/index.astro

@@ -112,46 +112,40 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
               <>
                 <button
                   type="button"
-                  class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-                  aria-label="Previous testimonial"
+                  class:list={[
+                    "embla__button embla__button--prev",
+                    "absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4",
+                    "bg-content-inverse",
+                    "rounded-full border-2 border-trim shadow-lg",
+                    "hover:bg-content-inverse-active hover:border-gray-200",
+                    "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+                    "disabled:opacity-30 disabled:cursor-not-allowed",
+                    "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+                    "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+                  ]}
+                  aria-label="Previous slide"
+                  data-carousel-prev
                 >
-                  <svg
-                    class="w-6 h-6"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 19l-7-7 7-7"
-                    />
-                  </svg>
+                  <Icon icon="arrow-left" size={6} color="currentColor" />
                 </button>
 
                 <button
                   type="button"
-                  class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-                  aria-label="Next testimonial"
+                  class:list={[
+                    "embla__button embla__button--next",
+                    "absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4",
+                    "bg-content-inverse",
+                    "rounded-full border-2 border-trim shadow-lg",
+                    "hover:bg-content-inverse-active hover:border-gray-200",
+                    "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+                    "disabled:opacity-30 disabled:cursor-not-allowed",
+                    "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+                    "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+                  ]}
+                  aria-label="Next slide"
+                  data-carousel-next
                 >
-                  <svg
-                    class="w-6 h-6"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
+                  <Icon icon="arrow-right" size={6} color="currentColor" />
                 </button>
 
                 {showControls && (