Skip to content

Commit 6776fbb

Browse files
myftijamyftija
committed
Apply a couple of touch-ups to the project settings page
1 parent bae39b2 commit 6776fbb

File tree

1 file changed

+77
-77
lines changed
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings

1 file changed

+77
-77
lines changed

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx‎

Lines changed: 77 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -213,90 +213,90 @@ export default function Page() {
213213

214214
<PageBody>
215215
<MainHorizontallyCenteredContainer>
216-
<div className="mb-3 border-b border-grid-dimmed pb-3">
217-
<Header2>Project settings</Header2>
218-
</div>
219216
<div className="flex flex-col gap-6">
220-
<Fieldset>
221-
<InputGroup fullWidth>
222-
<Label>Project ref</Label>
223-
<ClipboardField value={project.externalRef} variant={"secondary/medium"} />
224-
<Hint>
225-
This goes in your{" "}
226-
<InlineCode variant="extra-extra-small">trigger.config</InlineCode> file.
227-
</Hint>
228-
</InputGroup>
229-
</Fieldset>
230-
231-
<Form method="post" {...renameForm.props}>
232-
<input type="hidden" name="action" value="rename" />
233-
<Fieldset className="gap-y-0">
234-
<InputGroup fullWidth>
235-
<Label htmlFor={projectName.id}>Rename your project</Label>
236-
<Input
237-
{...conform.input(projectName, { type: "text" })}
238-
defaultValue={project.name}
239-
placeholder="Your project name"
240-
icon={FolderIcon}
241-
autoFocus
242-
/>
243-
<FormError id={projectName.errorId}>{projectName.error}</FormError>
244-
</InputGroup>
245-
<FormButtons
246-
confirmButton={
247-
<Button
248-
type="submit"
249-
variant={"secondary/small"}
250-
disabled={isRenameLoading}
251-
LeadingIcon={isRenameLoading ? SpinnerWhite : undefined}
252-
>
253-
Rename project
254-
</Button>
255-
}
256-
className="border-t-0"
257-
/>
258-
</Fieldset>
259-
</Form>
260-
261217
<div>
262-
<Header2 spacing>Danger zone</Header2>
263-
<Form
264-
method="post"
265-
{...deleteForm.props}
266-
className="w-full rounded-sm border border-rose-500/40"
267-
>
268-
<input type="hidden" name="action" value="delete" />
269-
<Fieldset className="p-4">
218+
<Header2 spacing>General</Header2>
219+
<div className="w-full rounded-sm border border-grid-dimmed p-4">
220+
<Fieldset className="mb-5">
270221
<InputGroup fullWidth>
271-
<Label htmlFor={projectSlug.id}>Delete project</Label>
272-
<Input
273-
{...conform.input(projectSlug, { type: "text" })}
274-
placeholder="Your project slug"
275-
icon={ExclamationTriangleIcon}
276-
/>
277-
<FormError id={projectSlug.errorId}>{projectSlug.error}</FormError>
278-
<FormError>{deleteForm.error}</FormError>
222+
<Label>Project ref</Label>
223+
<ClipboardField value={project.externalRef} variant={"secondary/medium"} />
279224
<Hint>
280-
This change is irreversible, so please be certain. Type in the Project slug
281-
<InlineCode variant="extra-small">{project.slug}</InlineCode> and then press
282-
Delete.
225+
This goes in your{" "}
226+
<InlineCode variant="extra-extra-small">trigger.config</InlineCode> file.
283227
</Hint>
284228
</InputGroup>
285-
<FormButtons
286-
confirmButton={
287-
<Button
288-
type="submit"
289-
variant={"danger/small"}
290-
LeadingIcon={isDeleteLoading ? SpinnerWhite : TrashIcon}
291-
leadingIconClassName="text-white"
292-
disabled={isDeleteLoading}
293-
>
294-
Delete project
295-
</Button>
296-
}
297-
/>
298229
</Fieldset>
299-
</Form>
230+
<Form method="post" {...renameForm.props}>
231+
<Fieldset>
232+
<InputGroup fullWidth>
233+
<Label htmlFor={projectName.id}>Project name</Label>
234+
<Input
235+
{...conform.input(projectName, { type: "text" })}
236+
defaultValue={project.name}
237+
placeholder="Project name"
238+
icon={FolderIcon}
239+
autoFocus
240+
/>
241+
<FormError id={projectName.errorId}>{projectName.error}</FormError>
242+
</InputGroup>
243+
<FormButtons
244+
confirmButton={
245+
<Button
246+
type="submit"
247+
name="action"
248+
value="rename"
249+
variant={"secondary/small"}
250+
disabled={isRenameLoading}
251+
LeadingIcon={isRenameLoading ? SpinnerWhite : undefined}
252+
>
253+
Save
254+
</Button>
255+
}
256+
/>
257+
</Fieldset>
258+
</Form>
259+
</div>
260+
</div>
261+
262+
<div>
263+
<Header2 spacing>Danger zone</Header2>
264+
<div className="w-full rounded-sm border border-rose-500/40 p-4">
265+
<Form method="post" {...deleteForm.props}>
266+
<Fieldset>
267+
<InputGroup fullWidth>
268+
<Label htmlFor={projectSlug.id}>Delete project</Label>
269+
<Input
270+
{...conform.input(projectSlug, { type: "text" })}
271+
placeholder="Your project slug"
272+
icon={ExclamationTriangleIcon}
273+
/>
274+
<FormError id={projectSlug.errorId}>{projectSlug.error}</FormError>
275+
<FormError>{deleteForm.error}</FormError>
276+
<Hint>
277+
This change is irreversible, so please be certain. Type in the Project slug
278+
<InlineCode variant="extra-small">{project.slug}</InlineCode> and then press
279+
Delete.
280+
</Hint>
281+
</InputGroup>
282+
<FormButtons
283+
confirmButton={
284+
<Button
285+
type="submit"
286+
name="action"
287+
value="delete"
288+
variant={"danger/small"}
289+
LeadingIcon={isDeleteLoading ? SpinnerWhite : TrashIcon}
290+
leadingIconClassName="text-white"
291+
disabled={isDeleteLoading}
292+
>
293+
Delete
294+
</Button>
295+
}
296+
/>
297+
</Fieldset>
298+
</Form>
299+
</div>
300300
</div>
301301
</div>
302302
</MainHorizontallyCenteredContainer>

0 commit comments

Comments
 (0)