From d981fa905cf0a3d434bf867120ce91021b0ed904 Mon Sep 17 00:00:00 2001
From: Aleksandar Ristic <aristic665@gmail.com>
Date: Fri, 5 Apr 2024 15:12:54 +0200
Subject: [PATCH] refactor: make inline indicators smaller

---
 src/core/Slider.tsx           | 19 +++++++++----------
 src/core/Slider/component.css |  8 ++++----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx
index c6ad63a2d..2a3d391f6 100644
--- a/src/core/Slider.tsx
+++ b/src/core/Slider.tsx
@@ -8,7 +8,6 @@ interface SliderProps {
     interval?: number;
     controlPosition?: "inline" | "floating";
     intervalIndicator?: boolean;
-    mqEnableThreshold?: () => boolean;
   };
 }
 
@@ -37,11 +36,11 @@ const SlideIndicator = ({
         intervalIndicator ? (
           <li
             key={i}
-            className={"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"}
+            className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
           >
             {i === activeIndex && (
               <li
-                className={`absolute inset-0 rounded-full bg-active-orange`}
+                className="absolute inset-0 rounded-full bg-active-orange"
                 style={{
                   animation: `fillAnimation ${interval}ms linear`,
                 }}
@@ -143,17 +142,17 @@ const Slider = ({ children, options }: SliderProps) => {
       <div
         className={`flex items-center pointer-events-none ${
           isInline
-            ? "ui-standard-container justify-center gap-16"
+            ? "ui-standard-container justify-center gap-24"
             : "sm:flex sm:absolute inset-0 justify-between"
         }`}
       >
         <button
           className={`${
-            !isInline && "hidden sm:flex"
-          } pointer-events-auto w-48 h-48 rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
           onClick={prev}
         >
-          <div className="ui-icon-cta-holder flex">
+          <div className="ui-icon-cta-holder flex gap-4">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-left" size="1.5rem" />
             </div>
@@ -173,11 +172,11 @@ const Slider = ({ children, options }: SliderProps) => {
 
         <button
           className={`${
-            !isInline && "hidden sm:flex"
-          } pointer-events-auto w-48 h-48 rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-right`}
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
           onClick={next}
         >
-          <div className="ui-icon-cta-holder flex">
+          <div className="ui-icon-cta-holder flex gap-4">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-right" size="1.5rem" />
             </div>
diff --git a/src/core/Slider/component.css b/src/core/Slider/component.css
index a2201db36..a43fbab41 100644
--- a/src/core/Slider/component.css
+++ b/src/core/Slider/component.css
@@ -15,17 +15,17 @@
 }
 
 .ui-icon-cta {
-  @apply w-48 h-48 cursor-pointer overflow-hidden;
+  @apply cursor-pointer overflow-hidden;
   @apply rounded border-2 border-mid-grey hover:border-active-orange;
   transition: all 0.4s;
 }
 
-@screen md {
+@screen sm {
   .ui-icon-cta-left:hover .ui-icon-cta-holder {
-    transform: translateX(-100%);
+    transform: translateX(-120%);
   }
   .ui-icon-cta-right .ui-icon-cta-holder {
-    transform: translateX(-100%);
+    transform: translateX(-120%);
   }
   .ui-icon-cta-right:hover .ui-icon-cta-holder {
     transform: translateX(0%);