do the thing here too

aslilac · aslilac · commit b252a50ba84f · 2024-07-17T23:07:20.000Z
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
@@ -6,12 +6,14 @@ import * as Yup from "yup";
 import { isApiValidationError } from "api/errors";
 import type { CreateGroupRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { FormFooter } from "components/FormFooter/FormFooter";
-import { FullPageForm } from "components/FullPageForm/FullPageForm";
 import { IconField } from "components/IconField/IconField";
-import { Margins } from "components/Margins/Margins";
-import { Stack } from "components/Stack/Stack";
 import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
+import {
+  FormFields,
+  FormFooter,
+  FormSection,
+  HorizontalForm,
+} from "components/Form/Form";
 
 const validationSchema = Yup.object({
   name: Yup.string().required().label("Name"),
@@ -47,39 +49,40 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
   const onCancel = () => navigate(-1);
 
   return (
-    <Margins>
-      <FullPageForm title="Create group">
-        <form onSubmit={form.handleSubmit}>
-          <Stack spacing={2.5}>
-            {Boolean(error) && !isApiValidationError(error) && (
-              <ErrorAlert error={error} />
-            )}
+    <HorizontalForm onSubmit={form.handleSubmit}>
+      <FormSection
+        title="Group settings"
+        description="Set a name and avatar for this group."
+      >
+        <FormFields>
+          {Boolean(error) && !isApiValidationError(error) && (
+            <ErrorAlert error={error} />
+          )}
 
-            <TextField
-              {...getFieldHelpers("name")}
-              autoFocus
-              fullWidth
-              label="Name"
-            />
-            <TextField
-              {...getFieldHelpers("display_name", {
-                helperText: "Optional: keep empty to default to the name.",
-              })}
-              fullWidth
-              label="Display Name"
-            />
-            <IconField
-              {...getFieldHelpers("avatar_url")}
-              onChange={onChangeTrimmed(form)}
-              fullWidth
-              label="Avatar URL"
-              onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
-            />
-          </Stack>
-          <FormFooter onCancel={onCancel} isLoading={isLoading} />
-        </form>
-      </FullPageForm>
-    </Margins>
+          <TextField
+            {...getFieldHelpers("name")}
+            autoFocus
+            fullWidth
+            label="Name"
+          />
+          <TextField
+            {...getFieldHelpers("display_name", {
+              helperText: "Optional: keep empty to default to the name.",
+            })}
+            fullWidth
+            label="Display Name"
+          />
+          <IconField
+            {...getFieldHelpers("avatar_url")}
+            onChange={onChangeTrimmed(form)}
+            fullWidth
+            label="Avatar URL"
+            onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
+          />
+        </FormFields>
+      </FormSection>
+      <FormFooter onCancel={onCancel} isLoading={isLoading} />
+    </HorizontalForm>
   );
 };
 export default CreateGroupPageView;
