From 7acfb498b4db58be9f78be096be113b068a12dd4 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 15:09:51 +0100
Subject: [PATCH] Improve admin page structure and styling for clarity

Updated the Admin Users Page by reorganizing sections, improving labels, and adding descriptions for better usability. Adjusted styles to enhance visual hierarchy and provide consistent spacing and formatting throughout.
---
 frontend/src/pages/AdminUsersPage.jsx | 61 ++++++++++++++++-----------
 frontend/src/styles.css               | 34 ++++++++++++++-
 2 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/AdminUsersPage.jsx b/frontend/src/pages/AdminUsersPage.jsx
index 6af0a0f..230c671 100644
--- a/frontend/src/pages/AdminUsersPage.jsx
+++ b/frontend/src/pages/AdminUsersPage.jsx
@@ -119,24 +119,37 @@ export function AdminUsersPage() {
 
   return (
     <div className="admin-settings-page">
-      <h2>Admin Settings - Users</h2>
+      <h2>Admin Settings</h2>
+      <p className="muted admin-page-subtitle">Manage users and outgoing notifications for this NexaPG instance.</p>
       {error && <div className="card error">{error}</div>}
 
       <div className="card">
-        <h3>User Management</h3>
+        <div className="admin-section-head">
+          <h3>User Management</h3>
+          <p className="muted">Create accounts and manage access roles.</p>
+        </div>
         <form className="grid three admin-user-form" onSubmit={create}>
-          <input value={form.email} placeholder="E-Mail" onChange={(e) => setForm({ ...form, email: e.target.value })} />
-          <input
-            type="password"
-            value={form.password}
-            placeholder="Password"
-            onChange={(e) => setForm({ ...form, password: e.target.value })}
-          />
-          <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
-            <option value="viewer">viewer</option>
-            <option value="operator">operator</option>
-            <option value="admin">admin</option>
-          </select>
+          <div className="admin-field">
+            <label>Email</label>
+            <input value={form.email} placeholder="user@example.com" onChange={(e) => setForm({ ...form, email: e.target.value })} />
+          </div>
+          <div className="admin-field">
+            <label>Password</label>
+            <input
+              type="password"
+              value={form.password}
+              placeholder="Set initial password"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            />
+          </div>
+          <div className="admin-field">
+            <label>Role</label>
+            <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
+              <option value="viewer">viewer</option>
+              <option value="operator">operator</option>
+              <option value="admin">admin</option>
+            </select>
+          </div>
           <div className="form-actions field-full">
             <button className="primary-btn" type="submit">Create User</button>
           </div>
@@ -183,10 +196,10 @@ export function AdminUsersPage() {
       </div>
 
       <div className="card">
-        <h3>Alert Email Notifications (SMTP)</h3>
-        <p className="muted">
-          Configure outgoing SMTP for alert emails. This is send-only; no inbound mailbox is used.
-        </p>
+        <div className="admin-section-head">
+          <h3>Alert Email Notifications (SMTP)</h3>
+          <p className="muted">Configure send-only SMTP for warning and alert notifications.</p>
+        </div>
         {smtpInfo && <div className="test-connection-result ok">{smtpInfo}</div>}
         <form className="grid two admin-smtp-form" onSubmit={saveSmtp}>
           <label className="toggle-check field-full">
@@ -201,7 +214,7 @@ export function AdminUsersPage() {
             </span>
           </label>
 
-          <div>
+          <div className="admin-field">
             <label>SMTP host</label>
             <input
               value={emailSettings.smtp_host}
@@ -209,7 +222,7 @@ export function AdminUsersPage() {
               onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
             />
           </div>
-          <div>
+          <div className="admin-field">
             <label>SMTP port</label>
             <input
               type="number"
@@ -218,7 +231,7 @@ export function AdminUsersPage() {
             />
           </div>
 
-          <div>
+          <div className="admin-field">
             <label>SMTP username</label>
             <input
               value={emailSettings.smtp_username}
@@ -226,7 +239,7 @@ export function AdminUsersPage() {
               onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
             />
           </div>
-          <div>
+          <div className="admin-field">
             <label>SMTP password</label>
             <input
               type="password"
@@ -236,7 +249,7 @@ export function AdminUsersPage() {
             />
           </div>
 
-          <div>
+          <div className="admin-field">
             <label>From email</label>
             <input
               value={emailSettings.from_email}
@@ -244,7 +257,7 @@ export function AdminUsersPage() {
               onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
             />
           </div>
-          <div>
+          <div className="admin-field">
             <label>Alert recipients (comma-separated)</label>
             <input
               value={emailSettings.alert_recipients}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 24e2cf9..24749b8 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -981,18 +981,47 @@ td {
 
 .admin-settings-page h2 {
   margin-top: 4px;
-  margin-bottom: 14px;
+  margin-bottom: 4px;
 }
 
 .admin-settings-page h3 {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
+}
+
+.admin-page-subtitle {
+  margin: 0 0 14px;
+}
+
+.admin-section-head {
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #264671;
+}
+
+.admin-section-head p {
+  margin: 4px 0 0;
+  font-size: 13px;
 }
 
 .admin-user-form {
   gap: 10px;
 }
 
+.admin-field label {
+  display: block;
+  margin-bottom: 6px;
+  color: #c6d7f1;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.admin-field input,
+.admin-field select {
+  width: 100%;
+  min-height: 38px;
+}
+
 .admin-users-table-wrap table tbody .admin-user-row td {
   padding-top: 11px;
   padding-bottom: 11px;
@@ -1045,6 +1074,7 @@ td {
 
 .admin-test-recipient {
   min-width: 260px;
+  max-width: 320px;
 }
 
 .muted {