From 7c400816b499b88d3df1df80e1ffa4e15772e97e Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Wed, 20 Dec 2023 19:28:53 +0100
Subject: [PATCH] Fixed bug in the modal class

---
 css/style.css                  | 26 +++++++++++++++++++++++++-
 html/templates/test_modal.html |  8 +++++---
 js/ui/modal.js                 |  2 ++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 67e9b55..0541d5f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -92,13 +92,37 @@ footer {
 }
 
 /* Modal */
-.my-modal {
+.ext-modal {
     background-color: rgba(255, 255, 255, 0.767);
     border-radius: 10px;
     padding: 50px;
 }
 
+.my-modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .modal-title {
     font-size: 15px;
     margin-bottom: 40px;
+}
+
+.my-modal #timer {
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 10%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+
+.my-modal button {
+    background-color: rgba(0, 0, 0, 0.308);
+    justify-self: center;
+    border: none;
+    border-radius: 5px;
+    width: fit-content;
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/html/templates/test_modal.html b/html/templates/test_modal.html
index be548c5..8b50e35 100644
--- a/html/templates/test_modal.html
+++ b/html/templates/test_modal.html
@@ -1,3 +1,5 @@
-<p class="modal-title">Bienvenue dans cet modal</p>
-<div id="timer"></div>
-<button id="ok">OK</button>
\ No newline at end of file
+<div class="my-modal">
+    <p class="modal-title">Bienvenue dans cet modal</p>
+    <div id="timer"></div>
+    <button id="ok">OK</button>
+</div>
diff --git a/js/ui/modal.js b/js/ui/modal.js
index 0943f87..17258b6 100644
--- a/js/ui/modal.js
+++ b/js/ui/modal.js
@@ -21,6 +21,8 @@ export class Modal {
     }
 
     add_class(modal_class) {
+        let modal;
+        if(modal = $(`#${this.name}`)) modal.addClass(modal_class);
         this.modal_class = `${this.modal_class} ${modal_class}`;
     }