forked from github/plane
style: design (#430)
* style: shortcut modal * style: feature setting module icon * style: delete issue modal * style: delete project modal * style: sidebar prompt for chart and other info * fix: create issue modal state icon * fix: workspace dropdown
This commit is contained in:
Anmol Singh Bhatia
committed by
GitHub
GitHub
parent
7d7683ae6f
commit
d5d64e09d4
@@ -113,86 +113,81 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-100 p-4">
|
||||
<ExclamationTriangleIcon
|
||||
className="h-6 w-6 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 w-full text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Delete Project
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="break-all text-sm text-gray-500">
|
||||
Are you sure you want to delete project - {`"`}
|
||||
<span className="italic">{selectedProject?.name}</span>
|
||||
{`"`} ? All of the data related to the project will be permanently
|
||||
removed. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-3 h-0.5 bg-gray-200" />
|
||||
<div className="mt-3">
|
||||
<p className="break-all text-sm">
|
||||
Enter the project name{" "}
|
||||
<span className="font-semibold">{selectedProject?.name}</span> to
|
||||
continue:
|
||||
</p>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Project name"
|
||||
className="mt-2"
|
||||
value={confirmProjectName}
|
||||
onChange={(e) => {
|
||||
setConfirmProjectName(e.target.value);
|
||||
}}
|
||||
name="projectName"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="text-sm">
|
||||
To confirm, type <span className="font-semibold">delete my project</span>{" "}
|
||||
below:
|
||||
</p>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter 'delete my project'"
|
||||
className="mt-2"
|
||||
onChange={(e) => {
|
||||
if (e.target.value === "delete my project") {
|
||||
setConfirmDeleteMyProject(true);
|
||||
} else {
|
||||
setConfirmDeleteMyProject(false);
|
||||
}
|
||||
}}
|
||||
name="typeDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<p className="text-sm leading-7 text-gray-500">
|
||||
Are you sure you want to delete project{" "}
|
||||
<span className="break-all font-semibold">{selectedProject?.name}</span>? All
|
||||
of the data related to the project will be permanently removed. This action
|
||||
cannot be undone
|
||||
</p>
|
||||
</span>
|
||||
<div className="text-gray-600">
|
||||
<p className="break-all text-sm ">
|
||||
Enter the project name{" "}
|
||||
<span className="font-medium">{selectedProject?.name}</span> to continue:
|
||||
</p>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Project name"
|
||||
className="mt-2"
|
||||
value={confirmProjectName}
|
||||
onChange={(e) => {
|
||||
setConfirmProjectName(e.target.value);
|
||||
}}
|
||||
name="projectName"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-gray-600">
|
||||
<p className="text-sm">
|
||||
To confirm, type <span className="font-medium">delete my project</span> below:
|
||||
</p>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter 'delete my project'"
|
||||
className="mt-2"
|
||||
onChange={(e) => {
|
||||
if (e.target.value === "delete my project") {
|
||||
setConfirmDeleteMyProject(true);
|
||||
} else {
|
||||
setConfirmDeleteMyProject(false);
|
||||
}
|
||||
}}
|
||||
name="typeDelete"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row-reverse items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleDeletion}
|
||||
theme="danger"
|
||||
disabled={isDeleteLoading || !canDelete}
|
||||
className="rounded-lg border-none px-5 py-2"
|
||||
>
|
||||
{isDeleteLoading ? "Deleting..." : "Delete Project"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
theme="secondary"
|
||||
className="rounded-lg border-none px-5 py-2"
|
||||
onClick={handleClose}
|
||||
ref={cancelButtonRef}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleDeletion}
|
||||
theme="danger"
|
||||
disabled={isDeleteLoading || !canDelete}
|
||||
className="inline-flex sm:ml-3"
|
||||
>
|
||||
{isDeleteLoading ? "Deleting..." : "Delete"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
theme="secondary"
|
||||
className="inline-flex sm:ml-3"
|
||||
onClick={handleClose}
|
||||
ref={cancelButtonRef}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
|
||||
Reference in New Issue
Block a user