Fix UserManagement.jsx page

webui/src/pages/UserManagement/UserManagement.jsx

@@ -14,7 +14,6 @@ import EmptyState from '@/common/components/EmptyState';
 import PageHeader from '@/common/components/PageHeader';
 import Avatar from '@/common/components/Avatar';
 import DetailItem, {DetailList} from '@/common/components/DetailItem';
-import FormError from '@/common/components/FormError';
 import {
     PlusIcon,
     PencilIcon,
@@ -312,9 +311,9 @@ const UserManagement = () => {
                 size="md"
             >
                 <form onSubmit={handleSubmit} className="modal-form">
-                    <FormError>{formErrors.general}</FormError>
-
-                    <Input
+                    {formErrors.general && (
+                        <div className="form-error">{formErrors.general}</div>
+                    )} <Input
                     label="Username"
                     name="username"
                     value={formData.username}

webui/src/pages/UserManagement/styles.sass

@@ -30,6 +30,15 @@
   flex-direction: column
   gap: 1.25rem
 
+.form-error
+  background: #fdeaea
+  border: 1px solid #f5c6cb
+  color: #721c24
+  padding: 0.75rem 1rem
+  border-radius: var(--radius)
+  font-size: 0.9rem
+  font-weight: 500
+
 @media (max-width: 768px)
   .user-card-header
     flex-direction: column