dynamic pomodoro circle radius on FontSizeChange

Author: dmarakom6

src/components/PomodoroTimer.tsx

@@ -23,7 +23,15 @@ export const PomodoroTimer = () => {
   const playCompletionSound = () => {
     try {
       // Create a simple success sound using Web Audio API
-      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      // Extend the Window type to include webkitAudioContext for older browsers
+      type WindowWithWebkitAudioContext = Window & {
+        webkitAudioContext?: typeof AudioContext;
+      };
+      
+            const audioContext = new (
+              window.AudioContext ||
+              (window as WindowWithWebkitAudioContext).webkitAudioContext
+            )();
       const oscillator = audioContext.createOscillator();
       const gainNode = audioContext.createGain();
 
@@ -46,7 +54,7 @@ export const PomodoroTimer = () => {
 
   const showCelebration = () => {
     toast({
-      title: "🎉 Good Job! You're doing numbers!",
+      title: "🎉 Good Job! You're doing numbers.",
       description: mode === 'work' 
         ? "Time for a well-deserved break!" 
         : "Ready to get back to work?",
@@ -81,7 +89,8 @@ export const PomodoroTimer = () => {
         clearInterval(intervalRef.current);
       }
     };
-  }, [isActive, minutes, seconds]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive, seconds, minutes, mode]);
 
   const handleModeSwitch = () => {
     if (mode === 'work') {
@@ -110,7 +119,7 @@ export const PomodoroTimer = () => {
     setSeconds(0);
   };
 
-  const radius = 60;
+  const radius: number = 60; // Radius of the circle in pixels
   const circumference = 2 * Math.PI * radius;
   const strokeDasharray = circumference;
   const strokeDashoffset = circumference - (progress / 100) * circumference;
@@ -139,6 +148,7 @@ export const PomodoroTimer = () => {
               cx="64"
               cy="64"
               r={radius}
+              id="circle"
               stroke="rgba(255, 255, 255, 0.1)"
               strokeWidth="4"
               fill="transparent"

src/components/Settings.tsx

@@ -32,6 +32,7 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
   const [reducedMotion, setReducedMotion] = useState(false);
   const [dataCleared, setDataCleared] = useState(false);
   const [isImportingData, setIsImportingData] = useState(false);
+  const [radius, setRadius] = useState<30 | 60 | 90>(60); // Default radius for the settings sheet
 
   useEffect(() => {
     const storedTheme = localStorage.getItem("current-theme");
@@ -58,10 +59,10 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
 
 
   useEffect(() => {
-  const handleDataCleared = () => setDataCleared(true);
-  window.addEventListener("data-cleared", handleDataCleared);
-  return () => window.removeEventListener("data-cleared", handleDataCleared);
-}, []);
+    const handleDataCleared = () => setDataCleared(true);
+    window.addEventListener("data-cleared", handleDataCleared);
+    return () => window.removeEventListener("data-cleared", handleDataCleared);
+  }, []);
 
   const handleImportData = () => {
     // Open file browser and look for json files
@@ -117,16 +118,16 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
     input.click();
   };
 
-const clearData = () => {
-  indexedDBStorage.clearAllData().then(() => {
-    setDataCleared(true);
-    // Optionally, dispatch event if other components need to know
-    window.dispatchEvent(new Event("data-cleared"));
-  }).catch((error) => {
-    console.error("Error clearing data:", error);
-    alert("Failed to clear data. Please try again.");
-  });
-};
+  const clearData = () => {
+    indexedDBStorage.clearAllData().then(() => {
+      setDataCleared(true);
+      // Optionally, dispatch event if other components need to know
+      window.dispatchEvent(new Event("data-cleared"));
+    }).catch((error) => {
+      console.error("Error clearing data:", error);
+      alert("Failed to clear data. Please try again.");
+    });
+  };
 
   const handleThemeChange = (newTheme: string) => {
     setTheme(newTheme);
@@ -142,6 +143,26 @@ const clearData = () => {
       large: '18px'
     };
     document.documentElement.style.fontSize = sizeMap[newSize as keyof typeof sizeMap];
+
+    const radiusMap = {
+      small: 40,
+      medium: 60,
+      large: 65
+    };
+    const cxcyMap = {
+      small: 55,
+      medium: 72,
+      large: 73
+    };
+    const timerCircle = document.getElementById("circle");
+    if (timerCircle) {
+      const r = radiusMap[newSize as keyof typeof radiusMap];
+      const cxcy = cxcyMap[newSize as keyof typeof cxcyMap];
+      timerCircle.setAttribute("r", r.toString());
+      timerCircle.setAttribute("cx", cxcy.toString());
+      timerCircle.setAttribute("cy", cxcy.toString());
+    }
+
   };
 
   const toggleHighContrast = () => {