From 79927416e5b581696d62ce34a1885e43c8b17e8f Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Thu, 4 Jul 2024 23:13:03 +0200
Subject: [PATCH] standardize the layout (#1525)

---
 src/main/resources/templates/account.html  | 11 ++--
 src/main/resources/templates/addUsers.html | 69 ++++++++++++----------
 src/main/resources/templates/licenses.html | 13 ++--
 3 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index ddb48a30..a0e54397 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -13,9 +13,12 @@
         <div class="container">
           <div class="row justify-content-center">
             <div class="col-md-9 bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">settings_account_box</span>
+                <span class="tool-header-text" th:text="#{account.accountSettings}">User Settings</span>
+              </div>
 
               <!-- User Settings Title -->
-              <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
               <th:block th:if="${messageType}">
               <div class="alert alert-danger">
                 <span th:text="#{${messageType}}">Default message if not found</span>
@@ -247,9 +250,9 @@
                 <table id="settingsTable" class="table table-bordered table-sm table-striped">
                   <thead>
                     <tr>
-                      <th th:text="#{account.property}">Property</th>
-                      <th th:text="#{account.accountSettings}">Account Setting</th>
-                      <th th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
+                      <th scope="col" th:text="#{account.property}">Property</th>
+                      <th scope="col" th:text="#{account.accountSettings}">Account Setting</th>
+                      <th scope="col" th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
                     </tr>
                   </thead>
                   <tbody>
diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html
index b9790888..025f758f 100644
--- a/src/main/resources/templates/addUsers.html
+++ b/src/main/resources/templates/addUsers.html
@@ -12,10 +12,13 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-8 bg-card">
+            <div class="col-md-9 bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">manage_accounts</span>
+                <span class="tool-header-text" th:text="#{adminUserSettings.header}">Admin User Control Settings</span>
+              </div>
 
               <!-- User Settings Title -->
-              <h2 class="text-center" th:text="#{adminUserSettings.header}">Admin User Control Settings</h2>
               <div style="background: var(--md-sys-color-outline-variant);padding: .8rem; margin: 10px 0; border-radius: 2rem; text-align: center;">
                 <a href="#" data-bs-toggle="modal" data-bs-target="#addUserModal" class="btn btn-outline-info" th:title="#{adminUserSettings.addUser}">
                   <span class="material-symbols-rounded">person_add</span>
@@ -29,35 +32,39 @@
               <div th:if="${deleteMessage}" class="alert alert-danger">
                 <span th:text="#{${deleteMessage}}">Message</span>
               </div>
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th th:text="#{username}">Username</th>
-                    <th th:text="#{adminUserSettings.roles}">Roles</th>
-                    <th th:text="#{adminUserSettings.actions}">Actions</th>
-                    <th th:text="#{adminUserSettings.authenticated}">Authenticated</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr th:each="user : ${users}">
-                    <td style="align-content: center;" th:text="${user.username}"></td>
-                    <td style="align-content: center;" th:text="#{${user.roleName}}"></td>
-                    <td style="align-content: center;">
-                      <form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post" onsubmit="return confirmDelete()">
-                        <button type="submit" th:title="#{adminUserSettings.deleteUser}" class="btn btn-info"><span class="material-symbols-rounded">person_remove</span></button>
-                      </form>
-                      <script th:inline="javascript">
-                        const confirm_text = /*[[#{adminUserSettings.confirmDeleteUser}]]*/ 'Should the user be deleted?';
-                        function confirmDelete() {
-                          return confirm(confirm_text);
-                        }
-                      </script>
-                      <a th:if="${user.username == currentUsername}" th:href="@{'/account'}" class="btn btn-outline-info"><span class="material-symbols-rounded">edit</span></a>
-                    </td>
-                    <td style="align-content: center;" th:text="${user.authenticationType}"></td>
-                  </tr>
-                </tbody>
-              </table>
+              <div class="bg-card mt-3 mb-3">
+                <table class="table table-striped table-hover">
+                  <thead>
+                    <tr>
+                      <th scope="col">UID</th>
+                      <th scope="col" th:text="#{username}">Username</th>
+                      <th scope="col" th:text="#{adminUserSettings.roles}">Roles</th>
+                      <th scope="col" th:text="#{adminUserSettings.actions}">Actions</th>
+                      <th scope="col" th:text="#{adminUserSettings.authenticated}">Authenticated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr th:each="user : ${users}">
+                      <th scope="row" style="align-content: center;" th:text="${user.id}"></th>
+                      <td style="align-content: center;" th:text="${user.username}"></td>
+                      <td style="align-content: center;" th:text="#{${user.roleName}}"></td>
+                      <td style="align-content: center;">
+                        <form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post" onsubmit="return confirmDelete()">
+                          <button type="submit" th:title="#{adminUserSettings.deleteUser}" class="btn btn-info"><span class="material-symbols-rounded">person_remove</span></button>
+                        </form>
+                        <a th:if="${user.username == currentUsername}" th:href="@{'/account'}" class="btn btn-outline-info"><span class="material-symbols-rounded">edit</span></a>
+                      </td>
+                      <td style="align-content: center;" th:text="${user.authenticationType}"></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <script th:inline="javascript">
+                const confirm_text = /*[[#{adminUserSettings.confirmDeleteUser}]]*/ 'Should the user be deleted?';
+                function confirmDelete() {
+                  return confirm(confirm_text);
+                }
+              </script>
             </div>
           </div>
         </div>
diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html
index 7754fe8c..5aec42a4 100644
--- a/src/main/resources/templates/licenses.html
+++ b/src/main/resources/templates/licenses.html
@@ -11,14 +11,17 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6 bg-card">
-              <h2 th:text="#{licenses.header}">3rd Party licenses</h2>
+            <div class="col-md-8 bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon organize">license</span>
+                <span class="tool-header-text" th:text="#{licenses.header}">3rd Party licenses</span>
+              </div>
               <table class="table table-striped">
                 <thead>
                   <tr>
-                    <th th:text="#{licenses.module}">Module</th>
-                    <th th:text="#{licenses.version}">Version</th>
-                    <th th:text="#{licenses.license}">License</th>
+                    <th scope="col" th:text="#{licenses.module}">Module</th>
+                    <th scope="col" th:text="#{licenses.version}">Version</th>
+                    <th scope="col" th:text="#{licenses.license}">License</th>
                   </tr>
                 </thead>
                 <tbody>