Skip to content
Snippets Groups Projects
Verified Commit 25bdd180 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: better button color

parent ccc0cbfb
No related branches found
No related tags found
No related merge requests found
Pipeline #722 passed
...@@ -83,10 +83,8 @@ p { ...@@ -83,10 +83,8 @@ p {
.main > .side-left .canvas-container.fullscreen > .canvas { .main > .side-left .canvas-container.fullscreen > .canvas {
border: none; border: none;
height: 100%;
margin: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
width: 100%;
} }
.main > .side-right { .main > .side-right {
...@@ -286,10 +284,18 @@ p { ...@@ -286,10 +284,18 @@ p {
background-color: #50cb93; background-color: #50cb93;
} }
.tiny-button.red:hover {
background-color: #e63946;
}
.tiny-button:active { .tiny-button:active {
background-color: #2a9d8f; background-color: #2a9d8f;
} }
.tiny-button.red:active {
background-color: #bf2a37;
}
.tiny-button > img { .tiny-button > img {
margin-right: 6px; margin-right: 6px;
margin-top: 2px; margin-top: 2px;
...@@ -454,6 +460,7 @@ p { ...@@ -454,6 +460,7 @@ p {
.modal-container > .modal .modal-text { .modal-container > .modal .modal-text {
font-size: 20px; font-size: 20px;
line-height: 26px;
} }
.modal-container > .modal .modal-buttons { .modal-container > .modal .modal-buttons {
...@@ -464,6 +471,7 @@ p { ...@@ -464,6 +471,7 @@ p {
.modal-container > .modal .modal-buttons > .tiny-button { .modal-container > .modal .modal-buttons > .tiny-button {
margin-right: 12px; margin-right: 12px;
min-width: 120px;
} }
.modal-container > .modal .modal-buttons > .tiny-button:last-child { .modal-container > .modal .modal-buttons > .tiny-button:last-child {
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<h2 id="modal-title" class="modal-title">Alert</h2> <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> <p id="modal-text" class="modal-text">Are you sure you want to cancel the operation?</p>
<div class="modal-buttons"> <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> <span id="modal-confirm" class="tiny-button border padded-large">Confirm</span>
</div> </div>
</div> </div>
......
...@@ -395,7 +395,7 @@ const registerButtons = () => { ...@@ -395,7 +395,7 @@ const registerButtons = () => {
const buttonBenchmark = document.getElementById("button-benchmark"); const buttonBenchmark = document.getElementById("button-benchmark");
buttonBenchmark.addEventListener("click", async () => { buttonBenchmark.addEventListener("click", async () => {
const result = await showModal( 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" "Confirm"
); );
if (!result) return; if (!result) return;
...@@ -475,6 +475,12 @@ const registerModal = () => { ...@@ -475,6 +475,12 @@ const registerModal = () => {
modalConfirm.addEventListener("click", () => { modalConfirm.addEventListener("click", () => {
hideModal(true); hideModal(true);
}); });
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
hideModal(false);
}
});
}; };
const initBase = async () => { const initBase = async () => {
...@@ -542,7 +548,7 @@ const showModal = async ( ...@@ -542,7 +548,7 @@ const showModal = async (
const modalText = document.getElementById("modal-text"); const modalText = document.getElementById("modal-text");
modalContainer.classList.add("visible"); modalContainer.classList.add("visible");
modalTitle.textContent = title; modalTitle.textContent = title;
modalText.textContent = message; modalText.innerHTML = message.replace(/\n/g, "<br/>");
const result = (await new Promise((resolve) => { const result = (await new Promise((resolve) => {
global.modalCallback = resolve; global.modalCallback = resolve;
})) as boolean; })) as boolean;
...@@ -553,6 +559,7 @@ const hideModal = async (result = true) => { ...@@ -553,6 +559,7 @@ const hideModal = async (result = true) => {
const modalContainer = document.getElementById("modal-container"); const modalContainer = document.getElementById("modal-container");
modalContainer.classList.remove("visible"); modalContainer.classList.remove("visible");
if (global.modalCallback) global.modalCallback(result); if (global.modalCallback) global.modalCallback(result);
global.modalCallback = null;
}; };
const setVersion = (value: string) => { const setVersion = (value: string) => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment