github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Fixed layout of New Org page

Browse Source
This commit is contained in:
James Ritchie
2023-03-13 12:28:59 +00:00
parent c593132663
commit aedf7e7295
1 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/routes/__app/orgs/new.tsx
+54 -50
View File
@@ -3,6 +3,7 @@ import type { ActionFunction } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import * as React from "react";
import { Header } from "~/components/layout/Header";
import { PrimaryButton, SecondaryLink } from "~/components/primitives/Buttons";
import { Header1 } from "~/components/primitives/text/Headers";
import { createOrganization } from "~/models/organization.server";
@@ -49,59 +50,62 @@ export default function NewOrganizationPage() {
}, [actionData]);
return (
<main className="flex h-full w-full items-center justify-center">
<div className="flex min-w-[400px] flex-col gap-y-3.5 rounded-md border border-slate-800 bg-slate-800 p-10 shadow-md">
<Header1 size="large" className="">
Create a new Organization
</Header1>
<Form
method="post"
style={{
display: "flex",
flexDirection: "column",
gap: 8,
width: "100%",
}}
>
<div className="mb-3 flex flex-col gap-4">
<div className="flex w-full flex-col gap-1">
<label className="text-sm text-slate-500">
Name your Organization
</label>
<div className="group flex">
<div className="pointer-events-none z-10 -mr-8 flex w-8 items-center justify-end">
<BookmarkIcon className="h-5 w-5 text-slate-600" />
<div className="grid h-full grid-rows-[3rem_auto] bg-slate-850">
<Header context={"workflows"} />
<main className="flex h-full w-full items-center justify-center">
<div className="flex min-w-[400px] flex-col gap-y-3.5 rounded-md border border-slate-800 bg-slate-800 p-10 shadow-md">
<Header1 size="large" className="">
Create a new Organization
</Header1>
<Form
method="post"
style={{
display: "flex",
flexDirection: "column",
gap: 8,
width: "100%",
}}
>
<div className="mb-3 flex flex-col gap-4">
<div className="flex w-full flex-col gap-1">
<label className="text-sm text-slate-500">
Name your Organization
</label>
<div className="group flex">
<div className="pointer-events-none z-10 -mr-8 flex w-8 items-center justify-end">
<BookmarkIcon className="h-5 w-5 text-slate-600" />
</div>
<input
ref={titleRef}
name="title"
autoFocus
placeholder="e.g. Company name"
className="relative w-full rounded bg-slate-850 py-2 pl-10 pr-3 placeholder:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 group-focus:border-indigo-500"
aria-invalid={actionData?.errors?.title ? true : undefined}
aria-errormessage={
actionData?.errors?.title ? "title-error" : undefined
}
/>
</div>
<input
ref={titleRef}
name="title"
autoFocus
placeholder="e.g. Company name"
className="relative w-full rounded bg-slate-850 py-2 pl-10 pr-3 placeholder:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 group-focus:border-indigo-500"
aria-invalid={actionData?.errors?.title ? true : undefined}
aria-errormessage={
actionData?.errors?.title ? "title-error" : undefined
}
/>
</div>
{actionData?.errors?.title && (
<div className="pt-1 text-red-700" id="title-error">
{actionData.errors.title}
</div>
)}
</div>
{actionData?.errors?.title && (
<div className="pt-1 text-red-700" id="title-error">
{actionData.errors.title}
</div>
)}
</div>
<div className="flex justify-between">
<SecondaryLink to="/" className="rounded py-2 px-4">
Cancel
</SecondaryLink>
<PrimaryButton type="submit" className="rounded py-2 px-4">
Create Organization
</PrimaryButton>
</div>
</Form>
</div>
</main>
<div className="flex justify-between">
<SecondaryLink to="/" className="rounded py-2 px-4">
Cancel
</SecondaryLink>
<PrimaryButton type="submit" className="rounded py-2 px-4">
Create Organization
</PrimaryButton>
</div>
</Form>
</div>
</main>
</div>
);
}