redesign user creation form with updated layout and improved checkbox styling

This commit is contained in:
CPTN Cosmo 2026-04-18 17:12:39 +02:00
parent 77c1c3114f
commit 7482fcd352
2 changed files with 37 additions and 12 deletions

View file

@ -69,15 +69,20 @@
<div id="admin-section" class="tab-content"> <div id="admin-section" class="tab-content">
<div class="card user-management-card"> <div class="card user-management-card">
<h2>User Management</h2> <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"> <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>
<div class="form-group"> <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>
<div class="form-group checkbox-group"> <div class="form-group">
<label><input type="checkbox" id="new-is-admin"> Admin</label> <label class="checkbox-container">
<input type="checkbox" id="new-is-admin">
<span class="checkbox-label">Grant Administrator Privileges</span>
</label>
</div> </div>
<button type="submit" class="btn btn-primary">Create User</button> <button type="submit" class="btn btn-primary">Create User</button>
</form> </form>

View file

@ -401,16 +401,36 @@ input:focus {
gap: 0.5rem; gap: 0.5rem;
} }
.checkbox-group { .user-create-form {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 0.5rem; gap: 1.25rem;
color: var(--text-muted); max-width: 400px;
font-size: 0.875rem;
} }
.checkbox-group input { .user-create-form .btn-primary {
width: auto; 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 { .success-msg {