update cards and padding app

src/components/MultiRingCircularProgress.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { PieChart, Pie, Cell } from "recharts";
+import { PieChart, Pie, Cell } from "recharts";
 
 interface Ring {
   color: string;
@@ -15,17 +14,16 @@ interface MultiRingCircularProgressProps {
   card: Card;
   hoveredIndex: number | null;
   onHover: (index: number | null) => void;
-  cardId: string;
 }
 
-export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) {
+export default function MultiRingCircularProgress({ card, hoveredIndex, onHover }: MultiRingCircularProgressProps) {
   const { percent, rings } = card;
 
   // Create ring data with proper outer and inner radius calculations
   const ringData = rings.map((ring, index) => ({
     ...ring,
-    outerRadius: 125 - (index * 20), // Decrease by 20px for each ring
-    innerRadius: 110 - (index * 20), // Decrease by 20px for each ring
+    outerRadius: 110 - (index * 18), // Decrease by 18px for each ring
+    innerRadius: 95 - (index * 18), // Decrease by 18px for each ring
   }));
 
   // When a ring is hovered, other rings become gray
@@ -45,7 +43,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
       style={{ outline: "none", border: "none" }}
       tabIndex={-1}
     >
-      <PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
+      <PieChart width={300} height={300} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
         {ringData.map((ring, index) => (
           <Pie
             key={index}
@@ -74,8 +72,8 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
           </Pie>
         ))}
         <text
-          x={200}
-          y={204}
+          x={150}
+          y={154}
           textAnchor="middle"
           dominantBaseline="middle"
           style={{ fontSize: "1.3rem", fontWeight: "bold" }}