8000 feat: improve design of create organization page · coder/coder@616b00a · GitHub
[go: up one dir, main page]
Skip to content

Commit 616b00a

Browse files
jaaydenhjaaydenh
committed
feat: improve design of create organization page
1 parent d247e5c commit 616b00a

File tree

3 files changed

+52
-54
lines changed

3 files changed

+52
-54
lines changed

‎site/src/modules/management/OrganizationSettingsLayout.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@ const OrganizationSettingsLayout: FC = () => {
8181
</BreadcrumbItem>
8282
<BreadcrumbSeparator />
8383
<BreadcrumbItem>
84-
<BreadcrumbPage
85-
className="flex items-center gap-2"
86-
>
84+
<BreadcrumbPage className="flex items-center gap-2">
8785
Organizations
8886
<FeatureStageBadge contentType="beta" size="sm" />
8987
</BreadcrumbPage>

‎site/src/modules/management/OrganizationSidebarView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const OrganizationsSettingsNavigation: FC<
120120
<Link
121121
key={organization.id}
122122
to={urlForSubpage(organization.name)}
123-
className="no-underline visited:text-content-secondary"
123+
className="no-underline visited:text-content-secondary text-content-secondary"
124124
>
125125
<CommandItem
126126
value={organization.name}

‎site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ import { isApiValidationError } from "api/errors";
33
import type { CreateOrganizationRequest } from "api/typesGenerated";
44
import { ErrorAlert } from "components/Alert/ErrorAlert";
55
import { Badges, PremiumBadge } from "components/Badges/Badges";
6+
import { Button } from "components/Button/Button";
67
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
7-
import {
8-
Form,
9-
FormFields,
10-
FormFooter,
11-
FormSection,
12-
} from "components/Form/Form";
138
import { IconField } fr 10000 om "components/IconField/IconField";
149
import { Paywall } from "components/Paywall/Paywall";
1510
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
@@ -21,6 +16,7 @@ import {
2116
import { useFormik } from "formik";
2217
import { ArrowLeft } from "lucide-react";
2318
import type { FC } from "react";
19+
import { useNavigate } from "react-router-dom";
2420
import { Link } from "react-router-dom";
2521
import { docs } from "utils/docs";
2622
import {
@@ -62,6 +58,7 @@ export const CreateOrganizationPageView: FC<
6258
validationSchema,
6359
onSubmit,
6460
});
61+
const navigate = useNavigate();
6562
const getFieldHelpers = getFormHelpers(form, error);
6663

6764
return (
@@ -75,7 +72,7 @@ export const CreateOrganizationPageView: FC<
7572
Go Back
7673
</Link>
7774
</div>
78-
<div className="flex flex-col gap-4 max-w-2xl mx-auto">
75+
<div className="flex flex-col gap-4 w-4/5 max-w-xl min-w-72 mx-auto">
7976
<div className="flex flex-col items-center">
8077
{Boolean(error) && !isApiValidationError(error) && (
8178
<div css={{ marginBottom: 32 }}>
@@ -104,7 +101,7 @@ export const CreateOrganizationPageView: FC<
104101
</Badges>
105102

106103
<header className="flex flex-col gap-2 items-center">
107-
<h1 className="text-3xl font-bold m-0">New Organization</h1>
104+
<h1 className="text-3xl font-semibold m-0">New Organization</h1>
108105
<p className="max-w-md text-sm text-content-secondary text-center">
109106
Organize your deployment into multiple platform teams with unique
110107
provisioners, templates, groups, and members.
@@ -121,52 +118,55 @@ export const CreateOrganizationPageView: FC<
121118
/>
122119
</Cond>
123120
<Cond>
124-
<Form
125-
direction="vertical"
121+
<form
126122
onSubmit={form.handleSubmit}
127123
aria-label="Organization settings form"
124+
className="flex flex-col gap-6 w-full"
128125
>
129-
<FormSection title="" description="">
130-
<fieldset
131-
disabled={form.isSubmitting}
132-
css={{
133-
border: "unset",
134-
padding: 0,
135-
margin: 0,
136-
width: "100%",
137-
}}
126+
<fieldset
127+
disabled={form.isSubmitting}
128+
className="flex flex-col gap-6 w-full border-none"
129+
>
130+
<TextField
131+
{...getFieldHelpers("name")}
132+
onChange={onChangeTrimmed(form)}
133+
fullWidth
134+
label="Slug"
135+
/>
136+
<TextField
137+
{...getFieldHelpers("display_name")}
138+
fullWidth
139+
label="Display name"
140+
/>
141+
<TextField
142+
{...getFieldHelpers("description")}
143+
multiline
144+
label="Description"
145+
rows={2}
146+
/>
147+
<IconField
148+
{...getFieldHelpers("icon")}
149+
onChange={onChangeTrimmed(form)}
150+
onPickEmoji={(value) => form.setFieldValue("icon", value)}
151+
/>
152+
</fieldset>
153+
<div className="flex flex-row gap-2">
154+
<Button
155+
className="w-20"
156+
10000 type="submit"
157+
data-testid="form-submit"
158+
>
159+
Save
160+
</Button>
161+
<Button
162+
variant="outline"
163+
type="button"
164+
onClick={() => navigate("/organizations")}
138165
>
139-
<FormFields>
140-
<TextField
141-
{...getFieldHelpers("name")}
142-
onChange={onChangeTrimmed(form)}
143-
autoFocus
144-
fullWidth
145-
label="Slug"
146-
/>
147-
<TextField
148-
{...getFieldHelpers("display_name")}
149-
fullWidth
150-
label="Display name"
151-
/>
152-
<TextField
153-
{...getFieldHelpers("description")}
154-
multiline
155-
fullWidth
156-
label="Description"
157-
rows={2}
158-
/>
159-
<IconField
160-
{...getFieldHelpers("icon")}
161-
onChange={onChangeTrimmed(form)}
162-
fullWidth
163-
onPickEmoji={(value) => form.setFieldValue("icon", value)}
164-
/>
165-
</FormFields>
166-
</fieldset>
167-
</FormSection>
168-
<FormFooter isLoading={form.isSubmitting} />
169-
</Form>
166+
Cancel
167+
</Button>
168+
</div>
169+
</form>
170170
</Cond>
171171
</ChooseOne>
172172
</div>

0 commit comments

Comments
 (0)
0