Add Hover Effects to Confirmation Modal Buttons (sugarlabs#4473)

* Add hover effects to Confirm and Cancel buttons in confirmation modal

* Add blueButtonHover and cancelButtonHover to light/dark themes for consistent styling

* Refactor renderClearConfirmation to use platformColor for button hover effects

Author: AliyanA1

js/activity.js

@@ -1385,6 +1385,13 @@ class Activity {
             confirmBtn.style.fontWeight = "bold";
             confirmBtn.style.cursor = "pointer";
             confirmBtn.style.marginRight = "16px";
+            confirmBtn.style.transition = "background-color 0.2s ease"; 
+            confirmBtn.addEventListener("mouseover", () => {
+                confirmBtn.style.backgroundColor = platformColor.blueButtonHover;
+            });
+            confirmBtn.addEventListener("mouseout", () => {
+                confirmBtn.style.backgroundColor = platformColor.blueButton;
+            });
             confirmBtn.addEventListener("click", () => {
                 document.body.removeChild(modal);
                 clearCanvasAction();
@@ -1399,6 +1406,13 @@ class Activity {
             cancelBtn.style.padding = "8px 16px";
             cancelBtn.style.fontWeight = "bold";
             cancelBtn.style.cursor = "pointer";
+            cancelBtn.style.transition = "background-color 0.2s ease"; 
+            cancelBtn.addEventListener("mouseover", () => {
+                cancelBtn.style.backgroundColor = platformColor.cancelButtonHover;
+            });
+            cancelBtn.addEventListener("mouseout", () => {
+                cancelBtn.style.backgroundColor = platformColor.cancelButton;
+            });
             cancelBtn.addEventListener("click", () => {
                 document.body.removeChild(modal);
             });

js/utils/platformstyle.js

@@ -40,6 +40,9 @@ let platformThemes = {
         strokeColor: "#E2E2E2",
         fillColor: "#F9F9F9",
         blueButton: "#0066FF",
+        blueButtonHover: "#023a76", 
+        cancelButton: "#f1f1f1",     
+        cancelButtonHover: "#afafaf", 
         hoverColor: "#808080",
         paletteColors: {
             widgets: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"],
@@ -191,6 +194,9 @@ let platformThemes = {
         strokeColor: "#E2E2E2",
         fillColor: "#F9F9F9",
         blueButton: "#0066FF",
+        blueButtonHover: "#023a76", 
+        cancelButton: "#f1f1f1",     
+        cancelButtonHover: "#afafaf",
         hoverColor: "#E0E0E0",
         paletteColors: {
             widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"],