Merge pull request #93 from adaptui/refactoring-components

Author: Karthik-B-06

src/components/slider/SliderTooltip.tsx

@@ -20,7 +20,7 @@ const TooltipArrow: React.FC = () => {
     <Svg width="100%" height="100%" viewBox="0 0 12 5" fill="none">
       <Path
         d="M11.1466 0C16.3801 0 -4.3808 0 0.853735 0C2.7834 0 4.5931 5 6.00014 5C7.40719 5 9.23748 0 11.1466 0Z"
-        fill="#27272A"
+        fill="#171717"
       />
     </Svg>
   );
@@ -83,6 +83,7 @@ const RNSliderTooltip: React.FC<Partial<SliderTooltipProps>> = props => {
   const animatedArrowStyle = useAnimatedStyle(() => {
     return {
       top: undefined,
+      bottom: 0.5,
       left: tooltipWidth.value / 2 - defaultArrowWidth / 2,
     };
   }, [tooltipWidth.value]);
@@ -96,7 +97,7 @@ const RNSliderTooltip: React.FC<Partial<SliderTooltipProps>> = props => {
       ],
       display: isDragging.value ? "flex" : "none",
       left: knobRadius - tooltipWidth.value / 2,
-      bottom: sliderTheme.size[size]?.tooltip.position * 2 + 6,
+      bottom: sliderTheme.size[size]?.tooltip.position * 2,
     };
   }, [tooltipWidth.value]);
 

src/theme/defaultTheme/slider.ts

@@ -14,7 +14,7 @@ export const slider = {
         knobRadius: 9,
       },
       tooltip: {
-        position: (18 - 2) / 2,
+        position: 6,
       },
       knobIcon: {
         default: "w-2.5 h-2.5",
@@ -29,7 +29,7 @@ export const slider = {
         knobRadius: 10,
       },
       tooltip: {
-        position: (20 - 4) / 2,
+        position: 8,
       },
       knobIcon: {
         default: "w-2.5 h-2.5",
@@ -44,7 +44,7 @@ export const slider = {
         knobRadius: 12,
       },
       tooltip: {
-        position: (24 - 8) / 2,
+        position: 8,
       },
       knobIcon: {
         default: "w-3 h-3",
@@ -59,7 +59,7 @@ export const slider = {
         knobRadius: 14,
       },
       tooltip: {
-        position: (28 - 10) / 2,
+        position: 8,
       },
       knobIcon: {
         default: "w-4 h-4",
@@ -87,7 +87,7 @@ export const slider = {
   tooltip: {
     default: "absolute",
     wrapper:
-      "px-2 py-1.5 min-w-8 justify-center items-center bg-gray-800 rounded-lg",
+      "px-2 py-1.5 min-w-8 justify-center items-center bg-gray-900 rounded-lg",
     arrowWrapper: "w-3 h-3 z-10",
     common: "text-cxs text-white-900 text-center font-normal leading-4",
   },