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 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>

View file

@ -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 {