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"
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>
<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"
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>
<Controller
control={control}
@ -151,12 +151,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
<Combobox.Options
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 ? (
<li className="p-2">
{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
</h2>
)}
@ -167,10 +167,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
as="label"
htmlFor={`issue-${issue.id}`}
value={issue.id}
className={({ active }) =>
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
className={({ active, selected }) =>
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-brand-surface-2 text-brand-base" : ""
} ${selected ? "text-brand-base" : ""}`
}
>
{({ selected }) => (
@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
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}
</span>
{issue.name}
@ -194,10 +194,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
</li>
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-brand-secondary">
<LayerDiagonalIcon height="52" width="52" />
<h3 className="text-sm text-brand-secondary">
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>
</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"
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>
<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"
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]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<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="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">
<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
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<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
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete cycle-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related
to the cycle will be permanently removed. This action cannot be undone.
<span className="break-all font-medium text-brand-base">
{data?.name}
</span>
? All of the data related to the cycle will be permanently removed. This
action cannot be undone.
</p>
</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>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{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>
<Input
mode="transparent"
autoComplete="off"
id="name"
name="name"
@ -137,7 +136,6 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
name="description"
placeholder="Description"
className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description}
register={register}
/>
@ -166,7 +164,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
setToastAlert({
type: "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({
type: "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-not-allowed"
}
loading={isSubmitting || checkEmptyDate ? false : isDateValid ? false : true}
disabled={checkEmptyDate ? false : isDateValid ? false : true}
loading={isSubmitting}
>
{status
? isSubmitting

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

@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100"
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>
<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">
@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
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 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
handleFormSubmit={handleFormSubmit}
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.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
</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 className="issue-comments-section p-0">
{isEditing ? (
@ -94,13 +96,13 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
<button
type="submit"
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" />
</button>
<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)}
>
<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
value={comment.comment_html}
editable={false}
onBlur={() => ({})}
noBorder
customClassName="text-xs bg-brand-surface-1"
customClassName="text-xs border border-brand-base bg-brand-base"
/>
)}
</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"
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>
<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"
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 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
className="h-6 w-6 text-red-600"
aria-hidden="true"
@ -116,9 +116,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
</span>
</div>
<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{" "}
<span className="break-all font-semibold">
<span className="break-all font-medium text-brand-base">
{data?.project_detail.identifier}-{data?.sequence_id}
</span>
{""}? 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>
</div>
{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">
<span
className="block h-1.5 w-1.5 rounded-full"
@ -230,7 +230,7 @@ export const IssueForm: FC<IssueFormProps> = ({
.color,
}}
/>
<span className="flex-shrink-0 text-gray-600">
<span className="flex-shrink-0 text-brand-secondary">
{/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
{issues.find((i) => i.id === watch("parent"))?.sequence_id}
</span>
@ -253,7 +253,6 @@ export const IssueForm: FC<IssueFormProps> = ({
onChange={handleTitleChange}
className="resize-none text-xl"
placeholder="Title"
mode="transparent"
autoComplete="off"
error={errors.name}
register={register}
@ -294,7 +293,7 @@ export const IssueForm: FC<IssueFormProps> = ({
)}
</div>
<div className="relative">
<div className="flex justify-end -mb-2">
<div className="-mb-2 flex justify-end">
{issueName && issueName !== "" && (
<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"
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>
<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
as={React.Fragment}
enter="ease-out duration-300"
@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
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 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
issues={issues ?? []}
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"
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>
<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"
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 ? (
<>
<Combobox value={value} onChange={() => ({})} multiple>
@ -95,19 +95,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 && (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
{title}
</h2>
<h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
)}
<ul className="text-sm text-gray-700">
<ul className="text-sm">
{filteredIssues.map((issue) => (
<Combobox.Option
key={issue.id}
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
className={({ active, selected }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-brand-surface-2 text-brand-base" : ""
} ${selected ? "text-brand-base" : ""}`
}
>
{({ selected }) => (
@ -119,7 +117,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
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}
</span>{" "}
{issue.id}
@ -164,28 +162,23 @@ export const ParentIssuesListModal: React.FC<Props> = ({
/>
</div>
{customDisplay && <div className="p-3">{customDisplay}</div>}
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
>
<Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
{title}
</h2>
<h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
)}
<ul className="text-sm text-gray-700">
<ul className="text-sm">
{filteredIssues.map((issue) => (
<Combobox.Option
key={issue.id}
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
className={({ active, selected }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
active ? "bg-brand-surface-2 text-brand-base" : ""
} ${selected ? "text-brand-base" : ""}`
}
onClick={() => handleClose()}
onClick={handleClose}
>
<>
<span
@ -194,7 +187,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
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}
</span>{" "}
{issue.name}
@ -205,10 +198,13 @@ export const ParentIssuesListModal: React.FC<Props> = ({
</li>
) : (
<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">
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>
</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">
{({ open }) => (
<>
<Popover.Button
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 "
}`
}
>
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
{value ? (
<>
<span className="text-gray-600">{value}</span>
<span className="text-brand-base">{value}</span>
<button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" />
<XMarkIcon className="h-3 w-3" />
</button>
</>
) : (
<>
<CalendarDaysIcon className="h-4 w-4 text-gray-500 flex-shrink-0 " />
<span className="text-gray-500">Due Date</span>
<CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
<span>Due Date</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}
label={
<div className="flex items-center gap-2 text-xs">
<PlayIcon className="h-4 w-4 -rotate-90 text-gray-500" />
<span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
<PlayIcon className={`h-3.5 w-3.5 -rotate-90 ${value !== null ? "text-brand-base" : "text-brand-secondary"}`} />
<span className={value !== null ? "text-brand-base" : "text-brand-secondary"}>
{estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
</span>
</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) => (
<>
<Combobox.Button
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 "
}`
}
>
<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">
{value && value.length > 0 ? (
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
<IssueLabelsList
@ -77,8 +68,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
/>
</span>
) : (
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
<TagIcon className="h-3 w-3 text-brand-secondary" />
<span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
<TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
<span className=" text-brand-secondary">Label</span>
</span>
)}
@ -96,12 +87,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
>
<Combobox.Options
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" />
<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)}
placeholder="Search for label..."
displayValue={(assigned: any) => assigned?.name}
@ -121,7 +112,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className={({ active }) =>
`${
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}
>
@ -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 items-center justify-start gap-2">
<span
className="h-3 w-3 flex-shrink-0 rounded-full"
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor:
label.color && label.color !== "" ? label.color : "#000",
backgroundColor: label.color,
}}
/>
<span>{label.name}</span>
@ -150,8 +140,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
);
} else
return (
<div className="border-y border-brand-base bg-brand-surface-2">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
<div className="border-y border-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}
</div>
<div>
@ -161,7 +151,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className={({ active }) =>
`${
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}
>
@ -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 items-center justify-start gap-2">
<span
className="h-3 w-3 flex-shrink-0 rounded-full"
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: child?.color ?? "black",
backgroundColor: child?.color,
}}
/>
<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"
onClick={() => setIsOpen(true)}
>
<span className="flex items-center justify-start gap-1">
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
<span className="text-gray-600">Create New Label</span>
<span className="flex items-center justify-start gap-1 text-brand-secondary">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
</button>
</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">
{getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
</span>
<span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
<span className={`${value ? "" : "text-brand-secondary"} capitalize`}>
{value ?? "Priority"}
</span>
</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}
options={options}
label={
<div className="flex items-center gap-2 text-brand-secondary">
<div className="flex items-center gap-2">
{selectedOption ? (
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
) : currentDefaultState ? (
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>
}
footerOption={

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

@ -316,7 +316,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
issueDetail?.parent_detail ? (
<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 })}
>
{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"
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>
<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"
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]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<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="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">
<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
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<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
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete module-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related
to the module will be permanently removed. This action cannot be undone.
<span className="break-all font-medium text-brand-base">
{data?.name}
</span>
? All of the data related to the module will be permanently removed. This
action cannot be undone.
</p>
</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>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"}

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

@ -7,13 +7,7 @@ import useToast from "hooks/use-toast";
// components
import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
// ui
import {
DateSelect,
Input,
PrimaryButton,
SecondaryButton,
TextArea,
} from "components/ui";
import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// helper
import { isDateRangeValid } from "helpers/date-time.helper";
// types
@ -77,7 +71,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
type="name"
placeholder="Title"
autoComplete="off"
mode="transparent"
className="resize-none text-xl"
error={errors.name}
register={register}
@ -96,7 +89,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
name="description"
placeholder="Description"
className="h-32 resize-none text-sm"
mode="transparent"
error={errors.description}
register={register}
/>
@ -119,7 +111,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
setToastAlert({
type: "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({
type: "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"
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>
<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"
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
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

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

@ -1,3 +1,3 @@
export * from "./select-lead";
export * from "./select-members";
export * from "./select-status";
export * from "./lead";
export * from "./members";
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}
value={value}
label={
<div className="flex items-center gap-2 text-brand-secondary">
<div className="flex items-center gap-2">
{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" />
</div>
)}
{selectedOption
? selectedOption?.first_name && selectedOption.first_name !== ""
? selectedOption?.first_name
: selectedOption?.email
: "N/A"}
{selectedOption ? (
selectedOption?.first_name && selectedOption.first_name !== "" ? (
selectedOption?.first_name
) : (
selectedOption?.email
)
) : (
<span className="text-brand-secondary">Lead</span>
)}
</div>
}
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}
label={
<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" : ""
}`}
>
<Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
{value && (
{value ? (
<span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
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>
}
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"
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>
<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"
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
handleFormSubmit={handleFormSubmit}
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"
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>
<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"
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]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<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="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">
<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
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<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
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete Page- {" "}
<span className="font-bold">{data?.name}</span>
? All of the data related to the page will be permanently removed.
This action cannot be undone.
Are you sure you want to delete Page-{" "}
<span className="break-all font-medium text-brand-base">
{data?.name}
</span>
? All of the data related to the page will be permanently removed. This
action cannot be undone.
</p>
</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>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{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";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
// ui
import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
// types
@ -37,8 +37,6 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
formState: { errors, isSubmitting },
handleSubmit,
reset,
control,
setValue,
} = useForm<IPage>({
defaultValues,
});
@ -68,36 +66,22 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
<div>
<Input
id="name"
label="Name"
name="name"
type="name"
placeholder="Enter name"
placeholder="Title"
className="resize-none text-xl"
autoComplete="off"
error={errors.name}
register={register}
validations={{
required: "Name is required",
required: "Title is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
message: "Title should be less than 255 characters",
},
}}
/>
</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 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"
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>
<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"
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 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
className="h-6 w-6 text-red-600"
aria-hidden="true"
@ -131,10 +131,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
cannot be undone
</p>
</span>
<div className="text-gray-600">
<div className="text-brand-secondary">
<p className="break-all text-sm ">
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>
<Input
type="text"
@ -147,9 +148,10 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
name="projectName"
/>
</div>
<div className="text-gray-600">
<div className="text-brand-secondary">
<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>
<Input
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(
workspaceSlug ? WORKSPACE_MEMBERS(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);
},
}
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
);
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) &&
!(typeof value === "string" && value.includes("<")) &&
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 />

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`}
>
<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
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)}
placeholder="Type to search..."
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">
{({ open }) => (
<>
<Popover.Button
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 "
}`
}
>
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
<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">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
{value ? (
<>
<span className="text-gray-600">{value}</span>
<span className="text-brand-base">{value}</span>
<button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" />
<XMarkIcon className="h-3 w-3" />
</button>
</>
) : (
<>
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" />
<span className="text-brand-secondary">{label}</span>
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
<span>{label}</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"
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>
<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"
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]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<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="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">
<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
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<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
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete view- {" "}
<span className="font-bold">{data?.name}</span>
? All of the data related to the view will be permanently removed.
This action cannot be undone.
Are you sure you want to delete view-{" "}
<span className="break-all font-medium text-brand-base">
{data?.name}
</span>
? All of the data related to the view will be permanently removed. This
action cannot be undone.
</p>
</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>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"}

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

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

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

@ -21,10 +21,15 @@ type Props = {
isOpen: boolean;
handleClose: () => void;
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 { workspaceSlug, projectId } = router.query;
@ -114,7 +119,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100"
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>
<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"
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
handleFormSubmit={handleFormSubmit}
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"
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>
<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"
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 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
className="h-6 w-6 text-red-600"
aria-hidden="true"
@ -125,10 +125,11 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
</p>
</span>
<div className="text-gray-600">
<div className="text-brand-secondary">
<p className="break-all text-sm ">
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>
<Input
type="text"
@ -142,9 +143,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
/>
</div>
<div className="text-gray-600">
<div className="text-brand-secondary">
<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:
</p>
<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
? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null,
{
onErrorRetry(err, _, __, ___, revalidateOpts) {
if (err.status === 401 || err.status === 403) return;
revalidateOpts.retryCount = 5;
},
}
: null
);
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-2": withOpacity("--color-bg-surface-2"),
sidebar: withOpacity("--color-bg-sidebar"),
backdrop: "#131313",
},
},
textColor: {