refactor(FE-316): Replace tooltip with custom uniformity design

src/components/pages/uniformity/UniformityChart.tsx

@@ -22,7 +22,7 @@ interface CustomTooltipProps {
 }
 
 const UniformityChart = () => {
-  // #region Sample data
+  // #start Uniformity Sample data
   const data = [
     {
       name: '48-52',
@@ -76,39 +76,20 @@ const UniformityChart = () => {
     left: 20,
     bottom: 5,
   };
-  // #endregion
-
-  function getIntroOfPage(label: string): string {
-    if (label === 'Page A') {
-      return "Page A is about men's clothing";
-    }
-    if (label === 'Page B') {
-      return "Page B is about women's dress";
-    }
-    if (label === 'Page C') {
-      return "Page C is about women's bag";
-    }
-    if (label === 'Page D') {
-      return 'Page D is about household goods';
-    }
-    if (label === 'Page E') {
-      return 'Page E is about food';
-    }
-    if (label === 'Page F') {
-      return 'Page F is about baby food';
-    }
-    return '';
-  }
+  // #end Uniformity Sample data
 
   function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
     if (active && payload && payload.length && label !== undefined) {
       const labelStr = String(label);
       return (
-        <div className='border border-[#d88488] bg-white p-2.5 rounded shadow-sm'>
-          <p className='m-0 font-bold'>{`${labelStr} : ${payload[0].value}`}</p>
-          <p className='m-0'>{getIntroOfPage(labelStr)}</p>
-          <p className='m-0 border-t border-dashed border-[#f5f5f5]'>
-            Anything you want can be displayed here.
+        <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+          <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+          <p className='m-0 flex items-center gap-2 mt-2 justify-between'>
+            <div className='flex items-center gap-2'>
+              <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
+              {payload[0].value} of Birds
+            </div>
+            <span>{labelStr}</span>
           </p>
         </div>
       );
@@ -129,7 +110,12 @@ const UniformityChart = () => {
             <BarChart data={data} margin={margin} barGap={20}>
               <XAxis dataKey='name' />
               <YAxis />
-              <Tooltip content={CustomTooltip} />
+              <Tooltip
+                content={CustomTooltip}
+                wrapperStyle={{
+                  width: '200px',
+                }}
+              />
               <Bar
                 dataKey='uv'
                 fill='#FFFFFF'