feat: better button color

examples/web/index.css

@@ -83,10 +83,8 @@ p {
 
 .main > .side-left .canvas-container.fullscreen > .canvas {
     border: none;
-    height: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
-    width: 100%;
 }
 
 .main > .side-right {
@@ -286,10 +284,18 @@ p {
     background-color: #50cb93;
 }
 
+.tiny-button.red:hover {
+    background-color: #e63946;
+}
+
 .tiny-button:active {
     background-color: #2a9d8f;
 }
 
+.tiny-button.red:active {
+    background-color: #bf2a37;
+}
+
 .tiny-button > img {
     margin-right: 6px;
     margin-top: 2px;
@@ -454,6 +460,7 @@ p {
 
 .modal-container > .modal .modal-text {
     font-size: 20px;
+    line-height: 26px;
 }
 
 .modal-container > .modal .modal-buttons {
@@ -464,6 +471,7 @@ p {
 
 .modal-container > .modal .modal-buttons > .tiny-button {
     margin-right: 12px;
+    min-width: 120px;
 }
 
 .modal-container > .modal .modal-buttons > .tiny-button:last-child {

examples/web/index.html

@@ -81,7 +81,7 @@
                 <h2 id="modal-title" class="modal-title">Alert</h2>
                 <p id="modal-text" class="modal-text">Are you sure you want to cancel the operation?</p>
                 <div class="modal-buttons">
-                    <span id="modal-cancel" class="tiny-button border padded-large">Cancel</span>
+                    <span id="modal-cancel" class="tiny-button red border padded-large">Cancel</span>
                     <span id="modal-confirm" class="tiny-button border padded-large">Confirm</span>
                 </div>
             </div>

examples/web/index.ts

@@ -395,7 +395,7 @@ const registerButtons = () => {
     const buttonBenchmark = document.getElementById("button-benchmark");
     buttonBenchmark.addEventListener("click", async () => {
         const result = await showModal(
-            "Are you sure you want to start a benchmark?",
+            "Are you sure you want to start a benchmark?\nThe benchmark is considered an expensive operation!",
             "Confirm"
         );
         if (!result) return;
@@ -475,6 +475,12 @@ const registerModal = () => {
     modalConfirm.addEventListener("click", () => {
         hideModal(true);
     });
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+            hideModal(false);
+        }
+    });
 };
 
 const initBase = async () => {
@@ -542,7 +548,7 @@ const showModal = async (
     const modalText = document.getElementById("modal-text");
     modalContainer.classList.add("visible");
     modalTitle.textContent = title;
-    modalText.textContent = message;
+    modalText.innerHTML = message.replace(/\n/g, "<br/>");
     const result = (await new Promise((resolve) => {
         global.modalCallback = resolve;
     })) as boolean;
@@ -553,6 +559,7 @@ const hideModal = async (result = true) => {
     const modalContainer = document.getElementById("modal-container");
     modalContainer.classList.remove("visible");
     if (global.modalCallback) global.modalCallback(result);
+    global.modalCallback = null;
 };
 
 const setVersion = (value: string) => {