Skip to content

Commit 1b53c87

Browse files
samejrsamejr
committed
Adds the background to the create org page
1 parent 6714502 commit 1b53c87

File tree

1 file changed

+86
-78
lines changed
  • apps/webapp/app/routes/_app.orgs.new

1 file changed

+86
-78
lines changed

‎apps/webapp/app/routes/_app.orgs.new/route.tsx‎

Lines changed: 86 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { json, redirect } from "@remix-run/node";
77
import { Form, useActionData, useNavigation } from "@remix-run/react";
88
import { typedjson, useTypedLoaderData } from "remix-typedjson";
99
import { z } from "zod";
10-
import { MainCenteredContainer } from "~/components/layout/AppLayout";
10+
import { BackgroundWrapper } from "~/components/BackgroundWrapper";
11+
import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
1112
import { Button, LinkButton } from "~/components/primitives/Buttons";
1213
import { Fieldset } from "~/components/primitives/Fieldset";
1314
import { FormButtons } from "~/components/primitives/FormButtons";
@@ -94,85 +95,92 @@ export default function NewOrganizationPage() {
9495
const isLoading = navigation.state === "submitting" || navigation.state === "loading";
9596

9697
return (
97-
<MainCenteredContainer className="max-w-[22rem]">
98-
<FormTitle
99-
LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
100-
title="Create an Organization"
101-
/>
102-
<Form method="post" {...form.props}>
103-
<Fieldset>
104-
<InputGroup>
105-
<Label htmlFor={orgName.id}>Organization name</Label>
106-
<Input
107-
{...conform.input(orgName, { type: "text" })}
108-
placeholder="Your Organization name"
109-
icon={BuildingOffice2Icon}
110-
autoFocus
111-
/>
112-
<Hint>E.g. your company name or your workspace name.</Hint>
113-
<FormError id={orgName.errorId}>{orgName.error}</FormError>
114-
</InputGroup>
115-
{isManagedCloud && (
116-
<>
117-
<InputGroup>
118-
<Label htmlFor={"companySize"}>Number of employees</Label>
119-
<RadioGroup name="companySize" className="flex items-center justify-between gap-2">
120-
<RadioGroupItem
121-
id="employees-1-5"
122-
label="1-5"
123-
value={"1-5"}
124-
variant="button/small"
125-
className="grow"
126-
/>
127-
<RadioGroupItem
128-
id="employees-6-49"
129-
label="6-49"
130-
value={"6-49"}
131-
variant="button/small"
132-
className="grow"
133-
/>
134-
<RadioGroupItem
135-
id="employees-50-99"
136-
label="50-99"
137-
value={"50-99"}
138-
variant="button/small"
139-
className="grow"
140-
/>
141-
<RadioGroupItem
142-
id="employees-100+"
143-
label="100+"
144-
value={"100+"}
145-
variant="button/small"
146-
className="grow"
147-
/>
148-
</RadioGroup>
149-
</InputGroup>
98+
<AppContainer className="bg-charcoal-900">
99+
<BackgroundWrapper>
100+
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
101+
<FormTitle
102+
LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
103+
title="Create an Organization"
104+
/>
105+
<Form method="post" {...form.props}>
106+
<Fieldset>
150107
<InputGroup>
151-
<Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
152-
<TextArea name="whyUseUs" rows={4} spellCheck={false} />
153-
<Hint>
154-
Your answer will help us understand your use case and provide better support.
155-
</Hint>
108+
<Label htmlFor={orgName.id}>Organization name</Label>
109+
<Input
110+
{...conform.input(orgName, { type: "text" })}
111+
placeholder="Your Organization name"
112+
icon={BuildingOffice2Icon}
113+
autoFocus
114+
/>
115+
<Hint>E.g. your company name or your workspace name.</Hint>
116+
<FormError id={orgName.errorId}>{orgName.error}</FormError>
156117
</InputGroup>
157-
</>
158-
)}
118+
{isManagedCloud && (
119+
<>
120+
<InputGroup>
121+
<Label htmlFor={"companySize"}>Number of employees</Label>
122+
<RadioGroup
123+
name="companySize"
124+
className="flex items-center justify-between gap-2"
125+
>
126+
<RadioGroupItem
127+
id="employees-1-5"
128+
label="1-5"
129+
value={"1-5"}
130+
variant="button/small"
131+
className="grow"
132+
/>
133+
<RadioGroupItem
134+
id="employees-6-49"
135+
label="6-49"
136+
value={"6-49"}
137+
variant="button/small"
138+
className="grow"
139+
/>
140+
<RadioGroupItem
141+
id="employees-50-99"
142+
label="50-99"
143+
value={"50-99"}
144+
variant="button/small"
145+
className="grow"
146+
/>
147+
<RadioGroupItem
148+
id="employees-100+"
149+
label="100+"
150+
value={"100+"}
151+
variant="button/small"
152+
className="grow"
153+
/>
154+
</RadioGroup>
155+
</InputGroup>
156+
<InputGroup>
157+
<Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
158+
<TextArea name="whyUseUs" rows={4} spellCheck={false} />
159+
<Hint>
160+
Your answer will help us understand your use case and provide better support.
161+
</Hint>
162+
</InputGroup>
163+
</>
164+
)}
159165

160-
<FormButtons
161-
confirmButton={
162-
<Button type="submit" variant={"primary/small"} disabled={isLoading}>
163-
Create
164-
</Button>
165-
}
166-
cancelButton={
167-
hasOrganizations ? (
168-
<LinkButton to={rootPath()} variant={"tertiary/small"}>
169-
Cancel
170-
</LinkButton>
171-
) : null
172-
}
173-
/>
174-
</Fieldset>
175-
</Form>
176-
</MainCenteredContainer>
166+
<FormButtons
167+
confirmButton={
168+
<Button type="submit" variant={"primary/small"} disabled={isLoading}>
169+
Create
170+
</Button>
171+
}
172+
cancelButton={
173+
hasOrganizations ? (
174+
<LinkButton to={rootPath()} variant={"tertiary/small"}>
175+
Cancel
176+
</LinkButton>
177+
) : null
178+
}
179+
/>
180+
</Fieldset>
181+
</Form>
182+
</MainCenteredContainer>
183+
</BackgroundWrapper>
184+
</AppContainer>
177185
);
178186
}

0 commit comments

Comments
 (0)