feat: add-user modal dialog — compact, centered, backdrop

src/components/admin/UserManagementPanel.jsx

@@ -206,33 +206,47 @@ export default function UserManagementPanel() {
         </button>
       </div>
 
-      {/* Add form */}
+      {/* Add user modal */}
       {showAddForm && (
-        <form onSubmit={handleAddUser} className="mb-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
-          <Input
-            placeholder="Имя"
-            value={addForm.name}
-            onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}
-          />
-          <Input
-            placeholder="Email"
-            type="email"
-            value={addForm.email}
-            onChange={(e) => setAddForm((f) => ({ ...f, email: e.target.value }))}
-          />
-          <RoleDropdown
-            value={addForm.role || 'manager'}
-            onChange={(r) => setAddForm((f) => ({ ...f, role: r }))}
-          />
-          {addError && <div className="text-sm text-[var(--color-danger)]">{addError}</div>}
-          <button
-            type="submit"
-            disabled={addSubmitting}
-            className="rounded-full bg-[var(--color-accent)] px-5 py-2 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
-          >
-            {addSubmitting ? 'Добавление…' : 'Добавить'}
-          </button>
-        </form>
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={() => { setShowAddForm(false); setAddError(null); }}>
+          <div className="w-[340px] rounded-[28px] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-soft" onClick={(e) => e.stopPropagation()}>
+            <h3 className="mb-4 text-base font-semibold">Новый пользователь</h3>
+            <form onSubmit={handleAddUser} className="space-y-3">
+              <Input
+                placeholder="Имя"
+                value={addForm.name}
+                onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}
+              />
+              <Input
+                placeholder="Email"
+                type="email"
+                value={addForm.email}
+                onChange={(e) => setAddForm((f) => ({ ...f, email: e.target.value }))}
+              />
+              <RoleDropdown
+                value={addForm.role || 'manager'}
+                onChange={(r) => setAddForm((f) => ({ ...f, role: r }))}
+              />
+              {addError && <div className="text-sm text-[var(--color-danger)]">{addError}</div>}
+              <div className="flex justify-end gap-2 pt-1">
+                <button
+                  type="button"
+                  onClick={() => { setShowAddForm(false); setAddError(null); }}
+                  className="rounded-full border border-[var(--color-border)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] transition"
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  disabled={addSubmitting}
+                  className="rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
+                >
+                  {addSubmitting ? 'Добавление…' : 'Добавить'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
       )}
 
       {/* Error */}