refactor: make inline indicators smaller

ably · Apr 5, 2024 · d981fa9 · d981fa9
1 parent 33608b7
commit d981fa9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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%);