Fix naming issues.

components/forms/UserDeleteForm.js

@@ -6,7 +6,7 @@ import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
-export default function WebsiteDeleteForm({ userId, onSave, onClose }) {
+export default function UserDeleteForm({ userId, onSave, onClose }) {
   const { del } = useApi(getAuthToken());
   const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
 

components/forms/UserEditForm.js

@@ -41,27 +41,25 @@ export default function UserEditForm({ data, onSave }) {
   };
 
   return (
-    <>
-      <Form
-        key={id}
-        className={styles.form}
-        ref={ref}
-        onSubmit={handleSubmit}
-        error={error}
-        values={data}
-      >
-        <FormInput name="username" label="Username">
-          <TextField />
-        </FormInput>
-        <FormInput name="role" label="Role">
-          <Dropdown items={items} style={{ width: 200 }}>
-            {({ value, label }) => <Item key={value}>{label}</Item>}
-          </Dropdown>
-        </FormInput>
-        <FormButtons>
-          <SubmitButton variant="primary">Save</SubmitButton>
-        </FormButtons>
-      </Form>
-    </>
+    <Form
+      key={id}
+      className={styles.form}
+      ref={ref}
+      onSubmit={handleSubmit}
+      error={error}
+      values={data}
+    >
+      <FormInput name="username" label="Username">
+        <TextField />
+      </FormInput>
+      <FormInput name="role" label="Role">
+        <Dropdown items={items} style={{ width: 200 }}>
+          {({ value, label }) => <Item key={value}>{label}</Item>}
+        </Dropdown>
+      </FormInput>
+      <FormButtons>
+        <SubmitButton variant="primary">Save</SubmitButton>
+      </FormButtons>
+    </Form>
   );
 }

components/forms/WebsiteEditForm.module.css

@@ -1,7 +0,0 @@
-.copy {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 20px;
-  flex: 1;
-}

components/pages/UserDelete.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Button, Form, FormRow, Modal } from 'react-basics';
 
-export default function WebsiteReset({ userId, onSave }) {
+export default function UserDelete({ userId, onSave }) {
   const [modal, setModal] = useState(null);
   const router = useRouter();
 

components/pages/UserSettings.js

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import UserDelete from 'components/forms/UserDelete';
+import UserDelete from 'components/pages/UserDelete';
 import UserEditForm from 'components/forms/UserEditForm';
 import UserPasswordForm from 'components/forms/UserPasswordForm';
 import Page from 'components/layout/Page';
@@ -11,7 +11,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 
-export default function UserDetails({ userId }) {
+export default function UserSettings({ userId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
   const { get } = useApi(getAuthToken());