github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: create project modal (#957)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-28 17:49:29 +05:30 committed by GitHub
parent 0b9b4bb289
commit 3175ce9136
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/core/image-picker-popover.tsx
View File

@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
return (
<Popover className="relative z-[2]" ref={ref}>
<Popover.Button
className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-brand-secondary"
onClick={() => setIsOpen((prev) => !prev)}
>
{label}
@ -79,7 +79,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-brand-surface-2 shadow-lg">
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-brand-base bg-brand-surface-2 shadow-lg">
<div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
<Tab.Group>
<Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">

80
apps/app/components/project/create-project-modal.tsx
View File

@ -231,7 +231,6 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
error={errors.name}
register={register}
className="text-xl"
mode="transparent"
validations={{
required: "Name is required",
maxLength: {
@ -243,46 +242,32 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
</div>
</div>
<div>
<Input
id="identifier"
name="identifier"
type="text"
mode="transparent"
className="text-sm"
placeholder="Enter Project Identifier"
error={errors.identifier}
register={register}
onChange={() => setIsChangeIdentifierRequired(false)}
validations={{
required: "Identifier is required",
validate: (value) =>
/^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 5,
message: "Identifier must at most be of 5 characters",
},
}}
/>
</div>
<div>
<TextArea
id="description"
name="description"
mode="transparent"
className="text-sm"
placeholder="Enter description"
error={errors.description}
register={register}
/>
</div>
<div className="w-40">
<div className="grid grid-cols-4 gap-4">
<div className="col-span-3">
<Input
id="identifier"
name="identifier"
type="text"
className="text-sm"
placeholder="Enter Project Identifier"
error={errors.identifier}
register={register}
onChange={() => setIsChangeIdentifierRequired(false)}
validations={{
required: "Identifier is required",
validate: (value) =>
/^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 5,
message: "Identifier must at most be of 5 characters",
},
}}
/>
</div>
<Controller
name="network"
control={control}
@ -307,9 +292,20 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
)}
/>
</div>
<div>
<TextArea
id="description"
name="description"
className="text-sm"
placeholder="Enter description"
error={errors.description}
register={register}
/>
</div>
</div>
<div className="mt-5 flex justify-end gap-2 border-t-2 px-4 py-3">
<div className="mt-5 flex justify-end gap-2 border-t-2 border-brand-base px-4 py-3">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" size="sm" loading={isSubmitting}>
{isSubmitting ? "Adding project..." : "Add Project"}