Merge branch 'main' into undo-redo-bugs

src/index.ts

@@ -191,15 +191,14 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   const triggerPause = () => {
     paused = !paused;
 
+    pauseButton.classList.toggle("paused");
+    pauseButton.title = paused ? "Resume" : "Pause";
+
+    pauseIcon.src = paused ? PlaySvg : PauseSvg;
+
     if (paused) {
-      pauseIcon.src = PlaySvg;
-      pauseButton.style.backgroundColor = "#f44336";
-      pauseButton.title = "Resume";
       Packet.pauseAnimation();
     } else {
-      pauseIcon.src = PauseSvg;
-      pauseButton.style.backgroundColor = "#228b22";
-      pauseButton.title = "Pause";
       Packet.unpauseAnimation();
     }
   };

src/styles/canvas.css

@@ -60,61 +60,3 @@
   background-color: #444444; /* Fondo más claro en hover */
   color: #ffffff; /* Mantiene el texto blanco */
 }
-
-/* Pause button styles */
-.pause-button {
-  background-color: #228b22; /* Forest green background */
-  color: #ffffff; /* White text */
-  border: 2px solid #000000; /* Borde verde oscuro */
-  padding: 0; /* No internal padding */
-  cursor: pointer; /* Changes cursor to pointer on hover */
-  width: 45px; /* Fixed width for the circular button */
-  height: 45px; /* Fixed height for the circular button */
-  border-radius: 50%; /* Makes the button circular */
-  display: flex; /* Uses flexbox for centering */
-  align-items: center; /* Vertically centers content */
-  justify-content: center; /* Horizontally centers content */
-  transition: background-color 0.3s ease; /* Smooth color transition */
-  position: absolute; /* Permite colocarlo sobre el canvas */
-}
-
-.pause-button {
-  top: 10px; /* Separación desde el borde superior */
-  left: 15px; /* Separación desde el borde derecho */
-}
-
-/* Hover effect for pause button */
-.pause-button:hover {
-  background-color: #006400; /* Darker forest green on hover */
-}
-
-.undo-button,
-.redo-button {
-  cursor: pointer; /* Changes cursor to pointer on hover */
-  width: 45px; /* Fixed width for the circular button */
-  height: 45px; /* Fixed height for the circular button */
-  border-radius: 50%; /* Makes the button circular */
-  display: flex; /* Uses flexbox for centering */
-  align-items: center; /* Vertically centers content */
-  justify-content: center; /* Horizontally centers content */
-  transition: background-color 0.3s ease; /* Smooth color transition */
-  position: absolute; /* Permite colocarlo sobre el canvas */
-}
-
-.undo-button {
-  top: 10px;
-  left: 70px;
-}
-
-.redo-button {
-  top: 10px;
-  left: 110px;
-}
-
-/* Icon inside the pause button */
-.undo-button img,
-.redo-button img,
-.pause-button img {
-  width: 60%; /* Scales the icon to fit the button */
-  height: 60%; /* Scales the icon to fit the button */
-}

src/styles/index.ts

@@ -8,4 +8,5 @@ import "./right-bar-buttons.css";
 import "./table.css";
 import "./info.css";
 import "./buttons.css";
-import "./modal.css";
+import "./pause.css";
+import "./undo-redo.css";

src/styles/pause.css

@@ -0,0 +1,48 @@
+/* pause-button.css */
+
+/* Redesigned Pause button styles */
+.pause-button {
+  background-color: #228b22; /* Default green background */
+  color: #ffffff; /* White text */
+  border: 2px solid #000000; /* Black border */
+  padding: 0; /* No internal padding */
+  cursor: pointer; /* Pointer on hover */
+  width: 40px; /* Slightly larger button */
+  height: 40px; /* Slightly larger button */
+  border-radius: 12px; /* Rounded but not circular */
+  display: flex; /* Uses flexbox for centering */
+  align-items: center; /* Vertically centers content */
+  justify-content: center; /* Horizontally centers content */
+  transition: background-color 0.3s ease; /* Smooth transitions */
+  position: absolute; /* Position over the canvas */
+  top: 15px; /* Adjusted distance from the top */
+  left: 20px; /* Adjusted distance from the left */
+  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); /* Adds a subtle shadow */
+  outline: none; /* Removes focus outline */
+}
+
+/* Hover effect for pause button */
+.pause-button:hover {
+  background-color: #006400; /* Darker green on hover */
+}
+
+/* Active effect for pause button */
+.pause-button:active {
+  background-color: #004d00; /* Even darker green when clicked */
+}
+
+/* Styles for paused state */
+.pause-button.paused {
+  background-color: #f44336; /* Red background when paused */
+}
+
+/* Prevent focus outline when using keyboard */
+.pause-button:focus {
+  outline: none;
+}
+
+/* Icon inside the pause button */
+.pause-button img {
+  width: 60%; /* Original icon size */
+  height: 60%; /* Original icon size */
+}

src/styles/undo-redo.css

@@ -0,0 +1,29 @@
+.undo-button,
+.redo-button {
+  cursor: pointer; /* Changes cursor to pointer on hover */
+  width: 45px; /* Fixed width for the circular button */
+  height: 45px; /* Fixed height for the circular button */
+  border-radius: 50%; /* Makes the button circular */
+  display: flex; /* Uses flexbox for centering */
+  align-items: center; /* Vertically centers content */
+  justify-content: center; /* Horizontally centers content */
+  transition: background-color 0.3s ease; /* Smooth color transition */
+  position: absolute; /* Permite colocarlo sobre el canvas */
+}
+
+.undo-button {
+  top: 10px;
+  left: 70px;
+}
+
+.redo-button {
+  top: 10px;
+  left: 110px;
+}
+
+/* Icon inside the pause button */
+.undo-button img,
+.redo-button img {
+  width: 60%; /* Scales the icon to fit the button */
+  height: 60%; /* Scales the icon to fit the button */
+}