fix tooltip style

dashboard/src/main/home/project-settings/Bars copy.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Rectangle,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import styled from "styled-components";
+
+import Text from "components/porter/Text";
+
+type Props = {
+  data: any;
+  yKey: string;
+  xKey: string;
+  fill?: string;
+  title?: string;
+};
+
+const Bars: React.FC<Props> = ({ data, yKey, xKey, fill, title }) => {
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart
+        width={500}
+        height={300}
+        data={data}
+        margin={{
+          top: 5,
+          right: 0,
+          left: -20,
+          bottom: 5,
+        }}
+      >
+        <CartesianGrid vertical={false} stroke="#ffffff22" />
+        <XAxis dataKey={xKey} tick={{ fontSize: 13 }} />
+        <YAxis tick={{ fontSize: 13 }} />
+        <Tooltip wrapperStyle={{ background: "red" }} />
+        <Bar dataKey={yKey} fill={fill || "#6A7FC4"} />
+      </BarChart>
+      <Center>
+        <Text color="helper">{title}</Text>
+      </Center>
+    </ResponsiveContainer>
+  );
+};
+
+export default Bars;
+
+const Center = styled.div`
+  text-align: center;
+`;

dashboard/src/main/home/project-settings/Bars.tsx

@@ -3,12 +3,11 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  Legend,
-  Rectangle,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis,
+  type TooltipProps,
 } from "recharts";
 import styled from "styled-components";
 
@@ -22,6 +21,33 @@ type Props = {
   title?: string;
 };
 
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+}: TooltipProps<string, string>) => {
+  if (active && payload?.length) {
+    return (
+      <div
+        className="custom-tooltip"
+        style={{
+          backgroundColor: "#42444933",
+          backdropFilter: "saturate(150%) blur(8px)",
+          border: "1px solid #494b4f",
+          fontSize: "13px",
+          padding: "10px",
+          borderRadius: "5px",
+          color: "white",
+        }}
+      >
+        <p className="intro">{`Value: ${payload[0].value}`}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
 const Bars: React.FC<Props> = ({ data, yKey, xKey, fill, title }) => {
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -39,7 +65,7 @@ const Bars: React.FC<Props> = ({ data, yKey, xKey, fill, title }) => {
         <CartesianGrid vertical={false} stroke="#ffffff22" />
         <XAxis dataKey={xKey} tick={{ fontSize: 13 }} />
         <YAxis tick={{ fontSize: 13 }} />
-        <Tooltip />
+        <Tooltip content={<CustomTooltip />} cursor={{ fill: "#ffffff11" }} />
         <Bar dataKey={yKey} fill={fill || "#6A7FC4"} />
       </BarChart>
       <Center>