Skip to content

Commit 57bbf3c

Browse files
vamsikrishnamathalavamsikrishnamathala
authored
[WEB-5746]fix: workspace member modal z-index #8410 
1 parent 4645356 commit 57bbf3c

File tree

1 file changed

+41
-75
lines changed

1 file changed

+41
-75
lines changed

‎apps/web/core/components/workspace/confirm-workspace-member-remove.tsx‎

Lines changed: 41 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { useState } from "react";
2-
import { observer } from "mobx-react";
1+
import { useState } from "react"; import { observer } from "mobx-react";
32
import { AlertTriangle } from "lucide-react";
4-
import { Dialog, Transition } from "@headlessui/react";
53
// ui
64
import { useTranslation } from "@plane/i18n";
75
import { Button } from "@plane/propel/button";
6+
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
87
// hooks
98
import { useUser } from "@/hooks/store/user";
109

@@ -40,79 +39,46 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
4039
};
4140

4241
return (
43-
<Transition.Root show={isOpen} as={React.Fragment}>
44-
<Dialog as="div" className="relative z-20" onClose={handleClose}>
45-
<Transition.Child
46-
as={React.Fragment}
47-
enter="ease-out duration-300"
48-
enterFrom="opacity-0"
49-
enterTo="opacity-100"
50-
leave="ease-in duration-200"
51-
leaveFrom="opacity-100"
52-
leaveTo="opacity-0"
53-
>
54-
<div className="fixed inset-0 bg-backdrop transition-opacity" />
55-
</Transition.Child>
56-
57-
<div className="fixed inset-0 z-20 overflow-y-auto">
58-
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
59-
<Transition.Child
60-
as={React.Fragment}
61-
enter="ease-out duration-300"
62-
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
63-
enterTo="opacity-100 translate-y-0 sm:scale-100"
64-
leave="ease-in duration-200"
65-
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
66-
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
67-
>
68-
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
69-
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
70-
<div className="sm:flex sm:items-start">
71-
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
72-
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
73-
</div>
74-
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
75-
<Dialog.Title as="h3" className="text-h5-medium leading-6 text-primary">
76-
{currentUser?.id === userDetails.id
77-
? "Leave workspace?"
78-
: `Remove ${userDetails?.display_name}?`}
79-
</Dialog.Title>
80-
<div className="mt-2">
81-
{currentUser?.id === userDetails.id ? (
82-
<p className="text-body-xs-regular text-secondary">
83-
{t("workspace_settings.settings.members.leave_confirmation")}
84-
</p>
85-
) : (
86-
<p className="text-body-xs-regular text-secondary">
87-
{/* TODO: Add translation here */}
88-
Are you sure you want to remove member-{" "}
89-
<span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
90-
access to this workspace. This action cannot be undone.
91-
</p>
92-
)}
93-
</div>
94-
</div>
95-
</div>
96-
</div>
97-
<div className="flex justify-end gap-2 p-4 sm:px-6">
98-
<Button variant="secondary" size="lg" onClick={handleClose}>
99-
{t("cancel")}
100-
</Button>
101-
<Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
102-
{currentUser?.id === userDetails.id
103-
? isRemoving
104-
? t("leaving")
105-
: t("leave")
106-
: isRemoving
107-
? t("removing")
108-
: t("remove")}
109-
</Button>
110-
</div>
111-
</Dialog.Panel>
112-
</Transition.Child>
42+
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
43+
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
44+
<div className="sm:flex sm:items-start">
45+
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
46+
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
47+
</div>
48+
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
49+
<h3 className="text-h5-medium leading-6 text-primary">
50+
{currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
51+
</h3>
52+
<div className="mt-2">
53+
{currentUser?.id === userDetails.id ? (
54+
<p className="text-body-xs-regular text-secondary">
55+
{t("workspace_settings.settings.members.leave_confirmation")}
56+
</p>
57+
) : (
58+
<p className="text-body-xs-regular text-secondary">
59+
{/* TODO: Add translation here */}
60+
Are you sure you want to remove member- <span className="font-bold">{userDetails?.display_name}</span>
61+
? They will no longer have access to this workspace. This action cannot be undone.
62+
</p>
63+
)}
64+
</div>
11365
</div>
11466
</div>
115-
</Dialog>
116-
</Transition.Root>
67+
</div>
68+
<div className="flex justify-end gap-2 p-4 sm:px-6">
69+
<Button variant="secondary" size="lg" onClick={handleClose}>
70+
{t("cancel")}
71+
</Button>
72+
<Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
73+
{currentUser?.id === userDetails.id
74+
? isRemoving
75+
? t("leaving")
76+
: t("leave")
77+
: isRemoving
78+
? t("removing")
79+
: t("remove")}
80+
</Button>
81+
</div>
82+
</ModalCore>
11783
);
11884
});

0 commit comments

Comments
 (0)