More refactoring, cleaned up icons, nav buttons, add messages.

components/pages/settings/users/UserAddButton.js

@@ -1,44 +1,26 @@
-import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
+import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
 import UserAddForm from './UserAddForm';
-import { labels, messages } from 'components/messages';
-
-const { Plus } = Icons;
+import { labels } from 'components/messages';
 
 export default function UserAddButton({ onSave }) {
   const { formatMessage } = useIntl();
-  const [edit, setEdit] = useState(false);
-  const { toast, showToast } = useToast();
 
   const handleSave = () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    setEdit(false);
     onSave();
   };
 
-  const handleAdd = () => {
-    setEdit(true);
-  };
-
-  const handleClose = () => {
-    setEdit(false);
-  };
-
   return (
-    <>
-      {toast}
-      <Button variant="primary" onClick={handleAdd}>
+    <ModalTrigger>
+      <Button variant="primary">
         <Icon>
-          <Plus />
+          <Icons.Plus />
         </Icon>
         <Text>{formatMessage(labels.createUser)}</Text>
       </Button>
-      {edit && (
-        <Modal title={formatMessage(labels.createUser)} onClose={handleClose}>
-          <UserAddForm onSave={handleSave} onClose={handleClose} />
-        </Modal>
-      )}
-    </>
+      <Modal title={formatMessage(labels.createUser)}>
+        {close => <UserAddForm onSave={handleSave} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
   );
 }

components/pages/settings/users/UserAddForm.js

@@ -24,6 +24,7 @@ export default function UserAddForm({ onSave, onClose }) {
     mutate(data, {
       onSuccess: async () => {
         onSave(data);
+        onClose();
       },
     });
   };

components/pages/settings/users/UserDeleteForm.js

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useIntl } from 'react-intl';
+import { useIntl, FormattedMessage } from 'react-intl';
 import { labels, messages } from 'components/messages';
 
 export default function UserDeleteForm({ userId, username, onSave, onClose }) {
@@ -20,9 +20,14 @@ export default function UserDeleteForm({ userId, username, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <p>{formatMessage(messages.deleteUserWarning, { username })}</p>
+      <p>
+        <FormattedMessage
+          {...messages.deleteUserWarning}
+          values={{ username: <b>{username}</b> }}
+        />
+      </p>
       <FormButtons flex>
-        <SubmitButton variant="primary" disabled={isLoading}>
+        <SubmitButton variant="danger" disabled={isLoading}>
           {formatMessage(labels.delete)}
         </SubmitButton>
         <Button disabled={isLoading} onClick={onClose}>

components/pages/settings/users/UsersList.js

@@ -22,7 +22,7 @@ export default function UsersList() {
   const handleSave = () => refetch();
 
   const handleDelete = () =>
-    showToast({ message: formatMessage(messages.deleted), variant: 'success' });
+    showToast({ message: formatMessage(messages.userDeleted), variant: 'success' });
 
   return (
     <Page loading={isLoading} error={error}>

components/pages/settings/users/UsersTable.js

@@ -11,18 +11,16 @@ import {
   Flexbox,
   Icons,
   ModalTrigger,
+  Modal,
 } from 'react-basics';
 import { useIntl } from 'react-intl';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
-import { Edit } from 'components/icons';
 import useUser from 'hooks/useUser';
 import UserDeleteForm from './UserDeleteForm';
 import { labels } from 'components/messages';
 import { ROLES } from 'lib/constants';
 
-const { Trash } = Icons;
-
 export default function UsersTable({ data = [], onDelete }) {
   const { formatMessage } = useIntl();
   const { user } = useUser();
@@ -60,7 +58,7 @@ export default function UsersTable({ data = [], onDelete }) {
                 <Link href={`/settings/users/${row.id}`}>
                   <Button>
                     <Icon>
-                      <Edit />
+                      <Icons.Edit />
                     </Icon>
                     <Text>{formatMessage(labels.edit)}</Text>
                   </Button>
@@ -68,18 +66,20 @@ export default function UsersTable({ data = [], onDelete }) {
                 <ModalTrigger disabled={row.id === user.id}>
                   <Button disabled={row.id === user.id}>
                     <Icon>
-                      <Trash />
+                      <Icons.Trash />
                     </Icon>
                     <Text>{formatMessage(labels.delete)}</Text>
                   </Button>
-                  {close => (
-                    <UserDeleteForm
-                      userId={row.id}
-                      username={row.username}
-                      onSave={onDelete}
-                      onClose={close}
-                    />
-                  )}
+                  <Modal>
+                    {close => (
+                      <UserDeleteForm
+                        userId={row.id}
+                        username={row.username}
+                        onSave={onDelete}
+                        onClose={close}
+                      />
+                    )}
+                  </Modal>
                 </ModalTrigger>
               </>
             ),