From 7482fcd35251ccd5174abd9299f098cfc1cc2907 Mon Sep 17 00:00:00 2001
From: cosmo <cptncosmo@gmail.com>
Date: Sat, 18 Apr 2026 17:12:39 +0200
Subject: [PATCH] redesign user creation form with updated layout and improved
 checkbox styling

---
 static/index.html | 15 ++++++++++-----
 static/style.css  | 34 +++++++++++++++++++++++++++-------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/static/index.html b/static/index.html
index 7663ac1..601d658 100644
--- a/static/index.html
+++ b/static/index.html
@@ -69,15 +69,20 @@
             <div id="admin-section" class="tab-content">
                 <div class="card user-management-card">
                     <h2>User Management</h2>
-                    <form id="create-user-form" class="form-row">
+                    <form id="create-user-form" class="user-create-form">
                         <div class="form-group">
-                            <input type="text" id="new-username" placeholder="Username" required>
+                            <label for="new-username">Username</label>
+                            <input type="text" id="new-username" placeholder="Enter username" required>
                         </div>
                         <div class="form-group">
-                            <input type="password" id="new-password" placeholder="Password" required>
+                            <label for="new-password">Password</label>
+                            <input type="password" id="new-password" placeholder="Enter password" required>
                         </div>
-                        <div class="form-group checkbox-group">
-                            <label><input type="checkbox" id="new-is-admin"> Admin</label>
+                        <div class="form-group">
+                            <label class="checkbox-container">
+                                <input type="checkbox" id="new-is-admin">
+                                <span class="checkbox-label">Grant Administrator Privileges</span>
+                            </label>
                         </div>
                         <button type="submit" class="btn btn-primary">Create User</button>
                     </form>
diff --git a/static/style.css b/static/style.css
index 9e65440..723fd4b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -401,16 +401,36 @@ input:focus {
     gap: 0.5rem;
 }
 
-.checkbox-group {
+.user-create-form {
     display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text-muted);
-    font-size: 0.875rem;
+    flex-direction: column;
+    gap: 1.25rem;
+    max-width: 400px;
 }
 
-.checkbox-group input {
-    width: auto;
+.user-create-form .btn-primary {
+    align-self: flex-start;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    user-select: none;
+    padding: 0.5rem 0;
+}
+
+.checkbox-container input {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--primary);
+    cursor: pointer;
+}
+
+.checkbox-label {
+    font-size: 0.875rem;
+    color: var(--text-muted);
 }
 
 .success-msg {