fix: Funnel hover color (#1018)

* fix: padding, background (#1017)

Author: severinlandolt

src/components/chart-elements/FunnelChart/FunnelChart.tsx

@@ -359,16 +359,14 @@ const FunnelChartPrimitive = React.forwardRef<HTMLDivElement, FunnelChartProps>(
                 <g key={`bar-${index}`}>
                   {/* Hover gray rect */}
                   <rect
-                    x={item.startX - 0.5 * gap + HALF_PADDING + yAxisPadding}
+                    x={item.startX - gap * 0.5 + HALF_PADDING + yAxisPadding}
                     y={HALF_PADDING}
                     width={barWidth + gap}
                     height={realHeight}
                     fill="currentColor"
                     className={tremorTwMerge(
-                      "z-0 opacity-5",
-                      tooltip.index === index
-                        ? "text-tremor-background-emphasis"
-                        : "text-transparent",
+                      "z-0",
+                      tooltip.index === index ? "text-[#d1d5db]/15" : "text-transparent",
                     )}
                   />
 

src/stories/chart-elements/FunnelChart.stories.tsx

@@ -8,12 +8,12 @@ import { currencyValueFormatter } from "lib";
 
 const data = [
   { name: "opens", value: 351 },
-  { name: "visitors and a longer label to test the truncate class", value: 200 },
+  { name: "visitors", value: 200 },
   {
     name: `added to cart`,
     value: 191,
   },
-  { name: "orders", value: 10 },
+  { name: "orders and a longer label to test the truncate class", value: 10 },
 ];
 
 const meta: Meta<typeof FunnelChart> = {