thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: modals theming (#940)

Browse Source 
* style: existing issues list modal

* style: parent issues list modal

* style: issue modal

* style: cycle modal

* style: module modal

* style: view modal

* style: page modal

* style: delete modals
This commit is contained in:
Aaryan Khandelwal 2023-04-24 11:19:53 +05:30 committed by GitHub
parent 213dc3f8e8
commit 2ec8fbab34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 228 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/app/components/core/existing-issues-list-modal.tsx
View File

@ -117,7 +117,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20"> <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
<form> <form>
<Controller <Controller
control={control} control={control}
@ -151,12 +151,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
<Combobox.Options <Combobox.Options
static static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto" className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
> >
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {query === "" && (
<h2 className="mb-2 px-3 text-xs font-semibold text-brand-base"> <h2 className="mb-2 px-3 text-xs font-medium text-brand-base">
Select issues to add Select issues to add
</h2> </h2>
)} )}
@ -167,10 +167,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
as="label" as="label"
htmlFor={`issue-${issue.id}`} htmlFor={`issue-${issue.id}`}
value={issue.id} value={issue.id}
className={({ active }) => className={({ active, selected }) =>
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" active ? "bg-brand-surface-2 text-brand-base" : ""
}` } ${selected ? "text-brand-base" : ""}`
} }
> >
{({ selected }) => ( {({ selected }) => (
@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color, backgroundColor: issue.state_detail.color,
}} }}
/> />
<span className="flex-shrink-0 text-xs text-brand-secondary"> <span className="flex-shrink-0 text-xs">
{issue.project_detail.identifier}-{issue.sequence_id} {issue.project_detail.identifier}-{issue.sequence_id}
</span> </span>
{issue.name} {issue.name}
@ -194,10 +194,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
</li> </li>
) : ( ) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="52" width="52" />
<h3 className="text-brand-secondary"> <h3 className="text-sm text-brand-secondary">
No issues found. Create a new issue with{" "} No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>. <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>
.
</h3> </h3>
</div> </div>
)} )}

22
apps/app/components/cycles/delete-cycle-modal.tsx
View File

@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -153,30 +153,36 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <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"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base"> <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-brand-base"
>
Delete Cycle Delete Cycle
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete cycle-{" "} Are you sure you want to delete cycle-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related <span className="break-all font-medium text-brand-base">
to the cycle will be permanently removed. This action cannot be undone. {data?.name}
</span>
? All of the data related to the cycle will be permanently removed. This
action cannot be undone.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6"> <div className="flex justify-end gap-2 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}> <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"} {isDeleteLoading ? "Deleting..." : "Delete"}

11
apps/app/components/cycles/form.tsx
View File

@ -113,7 +113,6 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<Input <Input
mode="transparent"
autoComplete="off" autoComplete="off"
id="name" id="name"
name="name" name="name"
@ -137,7 +136,6 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
name="description" name="description"
placeholder="Description" placeholder="Description"
className="h-32 resize-none text-sm" className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description} error={errors.description}
register={register} register={register}
/> />
@ -166,7 +164,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.", message:
"The date you have entered is invalid. Please check and enter a valid date.",
}); });
} }
} }
@ -197,7 +196,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.", message:
"The date you have entered is invalid. Please check and enter a valid date.",
}); });
} }
} }
@ -220,7 +220,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
? "cursor-pointer" ? "cursor-pointer"
: "cursor-not-allowed" : "cursor-not-allowed"
} }
loading={isSubmitting || checkEmptyDate ? false : isDateValid ? false : true} disabled={checkEmptyDate ? false : isDateValid ? false : true}
loading={isSubmitting}
> >
{status {status
? isSubmitting ? isSubmitting

4
apps/app/components/cycles/modal.tsx
View File

@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<CycleForm <CycleForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

11
apps/app/components/issues/comment/comment-card.tsx
View File

@ -77,7 +77,9 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
{comment.actor_detail.first_name} {comment.actor_detail.first_name}
{comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name} {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
</div> </div>
<p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p> <p className="mt-0.5 text-xs text-brand-secondary">
Commented {timeAgo(comment.created_at)}
</p>
</div> </div>
<div className="issue-comments-section p-0"> <div className="issue-comments-section p-0">
{isEditing ? ( {isEditing ? (
@ -94,13 +96,13 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="group rounded border border-green-500 bg-green-100 p-2 shadow-md duration-300 hover:bg-green-500" className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
> >
<CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" /> <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
</button> </button>
<button <button
type="button" type="button"
className="group rounded border border-red-500 bg-red-100 p-2 shadow-md duration-300 hover:bg-red-500" className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
onClick={() => setIsEditing(false)} onClick={() => setIsEditing(false)}
> >
<XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" /> <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
@ -115,9 +117,8 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
<RemirrorRichTextEditor <RemirrorRichTextEditor
value={comment.comment_html} value={comment.comment_html}
editable={false} editable={false}
onBlur={() => ({})}
noBorder noBorder
customClassName="text-xs bg-brand-surface-1" customClassName="text-xs border border-brand-base bg-brand-base"
/> />
)} )}
</div> </div>

10
apps/app/components/issues/delete-issue-modal.tsx
View File

@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
@ -102,10 +102,10 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base 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 flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
@ -116,9 +116,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
</span> </span>
</div> </div>
<span> <span>
<p className="break-all text-sm leading-7 text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete issue{" "} Are you sure you want to delete issue{" "}
<span className="break-all font-semibold"> <span className="break-all font-medium text-brand-base">
{data?.project_detail.identifier}-{data?.sequence_id} {data?.project_detail.identifier}-{data?.sequence_id}
</span> </span>
{""}? All of the data related to the issue will be permanently removed. This {""}? All of the data related to the issue will be permanently removed. This

7
apps/app/components/issues/form.tsx
View File

@ -221,7 +221,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</h3> </h3>
</div> </div>
{watch("parent") && watch("parent") !== "" ? ( {watch("parent") && watch("parent") !== "" ? (
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs"> <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <span
className="block h-1.5 w-1.5 rounded-full" className="block h-1.5 w-1.5 rounded-full"
@ -230,7 +230,7 @@ export const IssueForm: FC<IssueFormProps> = ({
.color, .color,
}} }}
/> />
<span className="flex-shrink-0 text-gray-600"> <span className="flex-shrink-0 text-brand-secondary">
{/* {projects?.find((p) => p.id === projectId)?.identifier}- */} {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
{issues.find((i) => i.id === watch("parent"))?.sequence_id} {issues.find((i) => i.id === watch("parent"))?.sequence_id}
</span> </span>
@ -253,7 +253,6 @@ export const IssueForm: FC<IssueFormProps> = ({
onChange={handleTitleChange} onChange={handleTitleChange}
className="resize-none text-xl" className="resize-none text-xl"
placeholder="Title" placeholder="Title"
mode="transparent"
autoComplete="off" autoComplete="off"
error={errors.name} error={errors.name}
register={register} register={register}
@ -294,7 +293,7 @@ export const IssueForm: FC<IssueFormProps> = ({
)} )}
</div> </div>
<div className="relative"> <div className="relative">
<div className="flex justify-end -mb-2"> <div className="-mb-2 flex justify-end">
{issueName && issueName !== "" && ( {issueName && issueName !== "" && (
<button <button
type="button" type="button"

6
apps/app/components/issues/modal.tsx
View File

@ -219,11 +219,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20"> <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm <IssueForm
issues={issues ?? []} issues={issues ?? []}
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}

50
apps/app/components/issues/parent-issues-list-modal.tsx
View File

@ -58,7 +58,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20"> <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@ -71,7 +71,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
{multiple ? ( {multiple ? (
<> <>
<Combobox value={value} onChange={() => ({})} multiple> <Combobox value={value} onChange={() => ({})} multiple>
@ -95,19 +95,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 && ( {filteredIssues.length > 0 && (
<li className="p-2"> <li className="p-2">
{query === "" && ( {query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base"> <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
{title}
</h2>
)} )}
<ul className="text-sm text-gray-700"> <ul className="text-sm">
{filteredIssues.map((issue) => ( {filteredIssues.map((issue) => (
<Combobox.Option <Combobox.Option
key={issue.id} key={issue.id}
value={issue.id} value={issue.id}
className={({ active }) => className={({ active, selected }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" active ? "bg-brand-surface-2 text-brand-base" : ""
}` } ${selected ? "text-brand-base" : ""}`
} }
> >
{({ selected }) => ( {({ selected }) => (
@ -119,7 +117,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color, backgroundColor: issue.state_detail.color,
}} }}
/> />
<span className="flex-shrink-0 text-xs text-brand-secondary"> <span className="flex-shrink-0 text-xs">
{issue.project_detail?.identifier}-{issue.sequence_id} {issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "} </span>{" "}
{issue.id} {issue.id}
@ -164,28 +162,23 @@ export const ParentIssuesListModal: React.FC<Props> = ({
/> />
</div> </div>
{customDisplay && <div className="p-3">{customDisplay}</div>} {customDisplay && <div className="p-3">{customDisplay}</div>}
<Combobox.Options <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
>
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base"> <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
{title}
</h2>
)} )}
<ul className="text-sm text-gray-700"> <ul className="text-sm">
{filteredIssues.map((issue) => ( {filteredIssues.map((issue) => (
<Combobox.Option <Combobox.Option
key={issue.id} key={issue.id}
value={issue.id} value={issue.id}
className={({ active }) => className={({ active, selected }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" active ? "bg-brand-surface-2 text-brand-base" : ""
}` } ${selected ? "text-brand-base" : ""}`
} }
onClick={() => handleClose()} onClick={handleClose}
> >
<> <>
<span <span
@ -194,7 +187,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color, backgroundColor: issue.state_detail.color,
}} }}
/> />
<span className="flex-shrink-0 text-xs text-brand-secondary"> <span className="flex-shrink-0 text-xs">
{issue.project_detail?.identifier}-{issue.sequence_id} {issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "} </span>{" "}
{issue.name} {issue.name}
@ -205,10 +198,13 @@ export const ParentIssuesListModal: React.FC<Props> = ({
</li> </li>
) : ( ) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="52" width="52" />
<h3 className="text-brand-secondary"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>. <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
C
</pre>
.
</h3> </h3>
</div> </div>
)} )}

21
apps/app/components/issues/select/date.tsx
View File

@ -16,28 +16,19 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
<Popover className="relative flex items-center justify-center rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200">
className={({ open }) => <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
${
open
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-brand-accent/5 "
}`
}
>
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
{value ? ( {value ? (
<> <>
<span className="text-gray-600">{value}</span> <span className="text-brand-base">{value}</span>
<button onClick={() => onChange(null)}> <button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" /> <XMarkIcon className="h-3 w-3" />
</button> </button>
</> </>
) : ( ) : (
<> <>
<CalendarDaysIcon className="h-4 w-4 text-gray-500 flex-shrink-0 " /> <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
<span className="text-gray-500">Due Date</span> <span>Due Date</span>
</> </>
)} )}
</span> </span>

4
apps/app/components/issues/select/estimate.tsx
View File

@ -22,8 +22,8 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
value={value} value={value}
label={ label={
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<PlayIcon className="h-4 w-4 -rotate-90 text-gray-500" /> <PlayIcon className={`h-3.5 w-3.5 -rotate-90 ${value !== null ? "text-brand-base" : "text-brand-secondary"}`} />
<span className={`${value ? "text-gray-600" : "text-gray-500"}`}> <span className={value !== null ? "text-brand-base" : "text-brand-secondary"}>
{estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"} {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
</span> </span>
</div> </div>

44
apps/app/components/issues/select/label.tsx
View File

@ -58,16 +58,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Button <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 hover:bg-brand-surface-2">
className={({ open }) =>
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
${
open
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-brand-accent/5 "
}`
}
>
{value && value.length > 0 ? ( {value && value.length > 0 ? (
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs"> <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
<IssueLabelsList <IssueLabelsList
@ -77,8 +68,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
/> />
</span> </span>
) : ( ) : (
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs"> <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
<TagIcon className="h-3 w-3 text-brand-secondary" /> <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
<span className=" text-brand-secondary">Label</span> <span className=" text-brand-secondary">Label</span>
</span> </span>
)} )}
@ -96,12 +87,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`} bg-brand-surface-1 px-2 py-2 text-xs shadow-md focus:outline-none`}
> >
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2"> <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" /> <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search for label..." placeholder="Search for label..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
@ -121,7 +112,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className={({ active }) => className={({ active }) =>
`${ `${
active ? "bg-brand-surface-2" : "" active ? "bg-brand-surface-2" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600` } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
} }
value={label.id} value={label.id}
> >
@ -129,10 +120,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<div className="flex w-full justify-between gap-2 rounded"> <div className="flex w-full justify-between gap-2 rounded">
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<span <span
className="h-3 w-3 flex-shrink-0 rounded-full" className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: backgroundColor: label.color,
label.color && label.color !== "" ? label.color : "#000",
}} }}
/> />
<span>{label.name}</span> <span>{label.name}</span>
@ -150,8 +140,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
); );
} else } else
return ( return (
<div className="border-y border-brand-base bg-brand-surface-2"> <div className="border-y border-brand-base">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base"> <div className="flex select-none items-center gap-2 truncate p-2 text-brand-base">
<RectangleGroupIcon className="h-3 w-3" /> {label.name} <RectangleGroupIcon className="h-3 w-3" /> {label.name}
</div> </div>
<div> <div>
@ -161,7 +151,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className={({ active }) => className={({ active }) =>
`${ `${
active ? "bg-brand-surface-2" : "" active ? "bg-brand-surface-2" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600` } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
} }
value={child.id} value={child.id}
> >
@ -169,9 +159,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<div className="flex w-full justify-between gap-2 rounded"> <div className="flex w-full justify-between gap-2 rounded">
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<span <span
className="h-3 w-3 flex-shrink-0 rounded-full" className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: child?.color ?? "black", backgroundColor: child?.color,
}} }}
/> />
<span>{child.name}</span> <span>{child.name}</span>
@ -202,9 +192,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2" className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<span className="flex items-center justify-start gap-1"> <span className="flex items-center justify-start gap-1 text-brand-secondary">
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" /> <PlusIcon className="h-4 w-4" aria-hidden="true" />
<span className="text-gray-600">Create New Label</span> <span>Create New Label</span>
</span> </span>
</button> </button>
</div> </div>

2
apps/app/components/issues/select/priority.tsx
View File

@ -20,7 +20,7 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<span className="flex items-center"> <span className="flex items-center">
{getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)} {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
</span> </span>
<span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}> <span className={`${value ? "" : "text-brand-secondary"} capitalize`}>
{value ?? "Priority"} {value ?? "Priority"}
</span> </span>
</div> </div>

8
apps/app/components/issues/select/state.tsx
View File

@ -56,15 +56,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
onChange={onChange} onChange={onChange}
options={options} options={options}
label={ label={
<div className="flex items-center gap-2 text-brand-secondary"> <div className="flex items-center gap-2">
{selectedOption ? ( {selectedOption ? (
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
) : currentDefaultState ? ( ) : currentDefaultState ? (
getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color) getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
) : ( ) : (
<Squares2X2Icon className="h-4 w-4" /> <Squares2X2Icon className="h-3.5 w-3.5 text-brand-secondary" />
)} )}
{selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? "State"} {selectedOption?.name
? selectedOption.name
: currentDefaultState?.name ?? <span className="text-brand-secondary">State</span>}
</div> </div>
} }
footerOption={ footerOption={

2
apps/app/components/issues/sidebar.tsx
View File

@ -316,7 +316,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
issueDetail?.parent_detail ? ( issueDetail?.parent_detail ? (
<button <button
type="button" type="button"
className="flex items-center gap-2 rounded bg-brand-surface-1 px-3 py-2 text-xs" className="flex items-center gap-2 rounded bg-brand-surface-2 px-3 py-2 text-xs"
onClick={() => submitChanges({ parent: null })} onClick={() => submitChanges({ parent: null })}
> >
{issueDetail.parent_detail?.name} {issueDetail.parent_detail?.name}

22
apps/app/components/modules/delete-module-modal.tsx
View File

@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -91,30 +91,36 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <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"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base"> <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-brand-base"
>
Delete Module Delete Module
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete module-{" "} Are you sure you want to delete module-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related <span className="break-all font-medium text-brand-base">
to the module will be permanently removed. This action cannot be undone. {data?.name}
</span>
? All of the data related to the module will be permanently removed. This
action cannot be undone.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6"> <div className="flex justify-end gap-2 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}> <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"} {isDeleteLoading ? "Deleting..." : "Delete"}

16
apps/app/components/modules/form.tsx
View File

@ -7,13 +7,7 @@ import useToast from "hooks/use-toast";
// components // components
import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules"; import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
// ui // ui
import { import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
DateSelect,
Input,
PrimaryButton,
SecondaryButton,
TextArea,
} from "components/ui";
// helper // helper
import { isDateRangeValid } from "helpers/date-time.helper"; import { isDateRangeValid } from "helpers/date-time.helper";
// types // types
@ -77,7 +71,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
type="name" type="name"
placeholder="Title" placeholder="Title"
autoComplete="off" autoComplete="off"
mode="transparent"
className="resize-none text-xl" className="resize-none text-xl"
error={errors.name} error={errors.name}
register={register} register={register}
@ -96,7 +89,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
name="description" name="description"
placeholder="Description" placeholder="Description"
className="h-32 resize-none text-sm" className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description} error={errors.description}
register={register} register={register}
/> />
@ -119,7 +111,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.", message:
"The date you have entered is invalid. Please check and enter a valid date.",
}); });
} }
} }
@ -144,7 +137,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
message: "The date you have entered is invalid. Please check and enter a valid date.", message:
"The date you have entered is invalid. Please check and enter a valid date.",
}); });
} }
} }

4
apps/app/components/modules/modal.tsx
View File

@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -139,7 +139,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<ModuleForm <ModuleForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

6
apps/app/components/modules/select/index.ts
View File

@ -1,3 +1,3 @@
export * from "./select-lead"; export * from "./lead";
export * from "./select-members"; export * from "./members";
export * from "./select-status"; export * from "./status";

16
apps/app/components/modules/select/select-lead.tsx → apps/app/components/modules/select/lead.tsx
View File

@ -56,7 +56,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
options={options} options={options}
value={value} value={value}
label={ label={
<div className="flex items-center gap-2 text-brand-secondary"> <div className="flex items-center gap-2">
{selectedOption ? ( {selectedOption ? (
<Avatar user={selectedOption} /> <Avatar user={selectedOption} />
) : ( ) : (
@ -64,11 +64,15 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" /> <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
</div> </div>
)} )}
{selectedOption {selectedOption ? (
? selectedOption?.first_name && selectedOption.first_name !== "" selectedOption?.first_name && selectedOption.first_name !== "" ? (
? selectedOption?.first_name selectedOption?.first_name
: selectedOption?.email ) : (
: "N/A"} selectedOption?.email
)
) : (
<span className="text-brand-secondary">Lead</span>
)}
</div> </div>
} }
onChange={onChange} onChange={onChange}

0
apps/app/components/modules/select/select-members.tsx → apps/app/components/modules/select/members.tsx
View File

13
apps/app/components/modules/select/select-status.tsx → apps/app/components/modules/select/status.tsx
View File

@ -26,20 +26,25 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
value={value} value={value}
label={ label={
<div <div
className={`flex items-center justify-center h-6 gap-2 text-xs ${ className={`flex items-center justify-center gap-2 text-xs ${
error ? "text-red-500" : "" error ? "text-red-500" : ""
}`} }`}
> >
<Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} /> {value ? (
{value && (
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color, backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
}} }}
/> />
) : (
<Squares2X2Icon
className={`h-3 w-3 ${error ? "text-red-500" : "text-brand-secondary"}`}
/>
)}
{MODULE_STATUS.find((s) => s.value === value)?.label ?? (
<span className="text-brand-secondary">Status</span>
)} )}
{MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
</div> </div>
} }
onChange={onChange} onChange={onChange}

4
apps/app/components/pages/create-update-page-modal.tsx
View File

@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -165,7 +165,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<PageForm <PageForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

25
apps/app/components/pages/delete-page-modal.tsx
View File

@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -115,31 +115,36 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <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"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base"> <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-brand-base"
>
Delete Page Delete Page
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete Page- {" "} Are you sure you want to delete Page-{" "}
<span className="font-bold">{data?.name}</span> <span className="break-all font-medium text-brand-base">
? All of the data related to the page will be permanently removed. {data?.name}
This action cannot be undone. </span>
? All of the data related to the page will be permanently removed. This
action cannot be undone.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6"> <div className="flex justify-end gap-2 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}> <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"} {isDeleteLoading ? "Deleting..." : "Delete"}

26
apps/app/components/pages/page-form.tsx
View File

@ -3,7 +3,7 @@ import { useEffect } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
// react-hook-form // react-hook-form
import { Controller, useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// ui // ui
import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui"; import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
// types // types
@ -37,8 +37,6 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
handleSubmit, handleSubmit,
reset, reset,
control,
setValue,
} = useForm<IPage>({ } = useForm<IPage>({
defaultValues, defaultValues,
}); });
@ -68,36 +66,22 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
<div> <div>
<Input <Input
id="name" id="name"
label="Name"
name="name" name="name"
type="name" type="name"
placeholder="Enter name" placeholder="Title"
className="resize-none text-xl"
autoComplete="off" autoComplete="off"
error={errors.name} error={errors.name}
register={register} register={register}
validations={{ validations={{
required: "Name is required", required: "Title is required",
maxLength: { maxLength: {
value: 255, value: 255,
message: "Name should be less than 255 characters", message: "Title should be less than 255 characters",
}, },
}} }}
/> />
</div> </div>
{/* <div>
<Controller
name="description"
control={control}
render={({ field: { value } }) => (
<RemirrorRichTextEditor
value={value}
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
placeholder="Description"
/>
)}
/>
</div> */}
</div> </div>
</div> </div>
<div className="mt-5 flex justify-end gap-2"> <div className="mt-5 flex justify-end gap-2">

16
apps/app/components/project/delete-project-modal.tsx
View File

@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -110,10 +110,10 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base 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 flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
@ -131,10 +131,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
cannot be undone cannot be undone
</p> </p>
</span> </span>
<div className="text-gray-600"> <div className="text-brand-secondary">
<p className="break-all text-sm "> <p className="break-all text-sm ">
Enter the project name{" "} Enter the project name{" "}
<span className="font-medium">{selectedProject?.name}</span> to continue: <span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
to continue:
</p> </p>
<Input <Input
type="text" type="text"
@ -147,9 +148,10 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
name="projectName" name="projectName"
/> />
</div> </div>
<div className="text-gray-600"> <div className="text-brand-secondary">
<p className="text-sm"> <p className="text-sm">
To confirm, type <span className="font-medium">delete my project</span> below: To confirm, type{" "}
<span className="font-medium text-brand-base">delete my project</span> below:
</p> </p>
<Input <Input
type="text" type="text"

8
apps/app/components/project/send-project-invitation-modal.tsx
View File

@ -48,13 +48,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
const { data: people } = useSWR( const { data: people } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
{
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
if (err?.status === 403 || err?.status === 401) return;
setTimeout(() => revalidate(revalidateOpts), 5000);
},
}
); );
const { const {

4
apps/app/components/rich-text-editor/index.tsx
View File

@ -209,7 +209,9 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
{(!value || value === "" || value?.content?.[0]?.content === undefined) && {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
!(typeof value === "string" && value.includes("<")) && !(typeof value === "string" && value.includes("<")) &&
placeholder && ( placeholder && (
<p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p> <p className="pointer-events-none absolute top-4 left-4 text-sm text-brand-secondary">
{placeholder}
</p>
)} )}
<EditorComponent /> <EditorComponent />

4
apps/app/components/ui/custom-search-select.tsx
View File

@ -102,9 +102,9 @@ export const CustomSearchSelect = ({
} z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`} } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
> >
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2"> <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
<MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" /> <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
<Combobox.Input <Combobox.Input
className="text-brand-muted-1 w-full bg-transparent py-1 px-2 text-xs focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..." placeholder="Type to search..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}

21
apps/app/components/ui/date.tsx
View File

@ -17,28 +17,19 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
<Popover className="relative flex items-center justify-center rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-300 hover:bg-brand-surface-2">
className={({ open }) => <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
${
open
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-brand-accent/5 "
}`
}
>
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
{value ? ( {value ? (
<> <>
<span className="text-gray-600">{value}</span> <span className="text-brand-base">{value}</span>
<button onClick={() => onChange(null)}> <button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" /> <XMarkIcon className="h-3 w-3" />
</button> </button>
</> </>
) : ( ) : (
<> <>
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" /> <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
<span className="text-brand-secondary">{label}</span> <span>{label}</span>
</> </>
)} )}
</span> </span>

25
apps/app/components/views/delete-view-modal.tsx
View File

@ -81,7 +81,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -95,31 +95,36 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <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"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base"> <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-brand-base"
>
Delete View Delete View
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete view- {" "} Are you sure you want to delete view-{" "}
<span className="font-bold">{data?.name}</span> <span className="break-all font-medium text-brand-base">
? All of the data related to the view will be permanently removed. {data?.name}
This action cannot be undone. </span>
? All of the data related to the view will be permanently removed. This
action cannot be undone.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6"> <div className="flex justify-end gap-2 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}> <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"} {isDeleteLoading ? "Deleting..." : "Delete"}

2
apps/app/components/views/form.tsx
View File

@ -78,7 +78,6 @@ export const ViewForm: React.FC<Props> = ({
type="name" type="name"
placeholder="Title" placeholder="Title"
autoComplete="off" autoComplete="off"
mode="transparent"
className="resize-none text-xl" className="resize-none text-xl"
error={errors.name} error={errors.name}
register={register} register={register}
@ -97,7 +96,6 @@ export const ViewForm: React.FC<Props> = ({
name="description" name="description"
placeholder="Description" placeholder="Description"
className="h-32 resize-none text-sm" className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description} error={errors.description}
register={register} register={register}
/> />

13
apps/app/components/views/modal.tsx
View File

@ -21,10 +21,15 @@ type Props = {
isOpen: boolean; isOpen: boolean;
handleClose: () => void; handleClose: () => void;
data?: IView | null; data?: IView | null;
preLoadedData?: Partial<IView> | null ; preLoadedData?: Partial<IView> | null;
}; };
export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, data, preLoadedData }) => { export const CreateUpdateViewModal: React.FC<Props> = ({
isOpen,
handleClose,
data,
preLoadedData,
}) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -114,7 +119,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -128,7 +133,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<ViewForm <ViewForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

16
apps/app/components/workspace/delete-workspace-modal.tsx
View File

@ -88,7 +88,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -102,10 +102,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base 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 flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
@ -125,10 +125,11 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
</p> </p>
</span> </span>
<div className="text-gray-600"> <div className="text-brand-secondary">
<p className="break-all text-sm "> <p className="break-all text-sm ">
Enter the workspace name{" "} Enter the workspace name{" "}
<span className="font-medium">{selectedWorkspace?.name}</span> to continue: <span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
to continue:
</p> </p>
<Input <Input
type="text" type="text"
@ -142,9 +143,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
/> />
</div> </div>
<div className="text-gray-600"> <div className="text-brand-secondary">
<p className="text-sm"> <p className="text-sm">
To confirm, type <span className="font-medium">delete my workspace</span>{" "} To confirm, type{" "}
<span className="font-medium text-brand-base">delete my workspace</span>{" "}
below: below:
</p> </p>
<Input <Input

8
apps/app/contexts/project-member.context.tsx
View File

@ -37,13 +37,7 @@ export const ProjectMemberProvider: React.FC<Props> = (props) => {
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null, workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
workspaceSlug && projectId workspaceSlug && projectId
? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString()) ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null, : null
{
onErrorRetry(err, _, __, ___, revalidateOpts) {
if (err.status === 401 || err.status === 403) return;
revalidateOpts.retryCount = 5;
},
}
); );
const loading = !memberDetails && !error; const loading = !memberDetails && !error;

1
apps/app/tailwind.config.js
View File

@ -34,6 +34,7 @@ module.exports = {
"surface-1": withOpacity("--color-bg-surface-1"), "surface-1": withOpacity("--color-bg-surface-1"),
"surface-2": withOpacity("--color-bg-surface-2"), "surface-2": withOpacity("--color-bg-surface-2"),
sidebar: withOpacity("--color-bg-sidebar"), sidebar: withOpacity("--color-bg-sidebar"),
backdrop: "#131313",
}, },
}, },
textColor: { textColor: {