From da7cb9145654af006210c5740563965c856ca06c Mon Sep 17 00:00:00 2001
From: RainyXeon <xeondev@xeondex.onmicrosoft.com>
Date: Wed, 17 Jul 2024 17:47:45 +0700
Subject: [PATCH] improve: WebUI by sync card between tab

---
 webroot/css/index.css | 14 ++++----------
 webroot/index.html    | 12 ++++++------
 webroot/js/main.js    | 10 +++++-----
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/webroot/css/index.css b/webroot/css/index.css
index f018d89..41c52b1 100644
--- a/webroot/css/index.css
+++ b/webroot/css/index.css
@@ -142,9 +142,7 @@ a {
 }
 
 .card {
-  margin-left: 15px;
-  margin-right: 15px;
-  margin-bottom: 10px;
+  margin: 0 15px 10px 15px;
   padding: 15px 15px;
   border-radius: 15px;
   color: var(--lock);
@@ -196,8 +194,7 @@ a {
 }
 
 .button {
-  padding-top: 1em;
-  padding-bottom: 1em;
+  padding: 1em 0 1em 0;
   border-radius: 30px;
   transition: transform 0.05s ease-in-out;
   background-color: var(--button);
@@ -211,11 +208,8 @@ a {
   margin-top: 10px;
   background: var(--small-card);
   border-radius: 15px;
-  padding-top: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
+  padding: 5px 10px 0 10px;
+  margin: 0 10px 0 10px;
   padding-bottom: 5px;
 }
 
diff --git a/webroot/index.html b/webroot/index.html
index 14966c0..a96ad87 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -117,18 +117,18 @@
       <div id="panel_actions_header" class="header">Actions</div>
       <div style="padding: 40px 0px;"></div>
       <!-- INFO: Settings card body (Daemon32) -->
-      <div id="daemon32" class="small_card" style="margin-left: 10px; margin-right: 10px;">
-        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
-        <div class="small_card_bg content button_list">
+      <div id="daemon32" class="dim card" style="margin: 0 15px 0 15px;">
+        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
+        <div class="dimc content button_list">
           <div id="daemon32_stop_button" class="center button">Stop</div>
           <div id="daemon32_start_button" class="center button">Start</div>
           <div id="daemon32_exit_button" class="center button">Exit</div>
         </div>
       </div>
       <!-- INFO: Settings card body (Daemon64) -->
-      <div id="daemon64" class="small_card" style="margin-top: 15px; margin-left: 10px; margin-right: 10px;">
-        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (64 bit)</div>
-        <div class="small_card_bg content button_list">
+      <div id="daemon64" class="dim card" style="margin: 15px 15px 0 15px;">
+        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 22px;">Daemon (64 bit)</div>
+        <div class="dimc content button_list">
           <div id="daemon64_stop_button" class="center button">Stop</div>
           <div id="daemon64_start_button" class="center button">Start</div>
           <div id="daemon64_exit_button" class="center button">Exit</div>
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 3d08cc3..07222c8 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -153,11 +153,11 @@ function setErrorData(errorLog) {
         const name = lines.find(line => line.includes('name=')).split('=')[1]
 
         modules_list.innerHTML += 
-        `<div class="small_card" style="padding: 25px 15px;">
-          <div class="small_card_bg" style="font-size: 1.1em;">${name}</div>
-          <div class="small_card_bg desc" style="font-size: 0.9em; margin-top: 3px; white-space: nowrap; align-items: center; display: flex;">
-            <div class="small_card_bg arch_desc">${translations.page.modules.arch}</div>
-            <div class="small_card_bg" style="margin-left: 5px;">${bitsUsed.join(' / ')}</div>
+        `<div class="dim card" style="padding: 25px 15px;">
+          <div class="dimc" style="font-size: 1.1em;">${name}</div>
+          <div class="dimc desc" style="font-size: 0.9em; margin-top: 3px; white-space: nowrap; align-items: center; display: flex;">
+            <div class="dimc arch_desc">${translations.page.modules.arch}</div>
+            <div class="dimc" style="margin-left: 5px;">${bitsUsed.join(' / ')}</div>
           </div>
         </div>`
       } else {