From 2ec8fbab34216272f3cc1dba82f7ac2df29c000f Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 24 Apr 2023 11:19:53 +0530 Subject: [PATCH] style: modals theming (#940) * 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 --- .../core/existing-issues-list-modal.tsx | 25 +++++----- .../components/cycles/delete-cycle-modal.tsx | 22 +++++--- apps/app/components/cycles/form.tsx | 11 ++-- apps/app/components/cycles/modal.tsx | 4 +- .../issues/comment/comment-card.tsx | 11 ++-- .../components/issues/delete-issue-modal.tsx | 10 ++-- apps/app/components/issues/form.tsx | 7 ++- apps/app/components/issues/modal.tsx | 6 +-- .../issues/parent-issues-list-modal.tsx | 50 +++++++++---------- apps/app/components/issues/select/date.tsx | 21 +++----- .../app/components/issues/select/estimate.tsx | 4 +- apps/app/components/issues/select/label.tsx | 44 +++++++--------- .../app/components/issues/select/priority.tsx | 2 +- apps/app/components/issues/select/state.tsx | 8 +-- apps/app/components/issues/sidebar.tsx | 2 +- .../modules/delete-module-modal.tsx | 22 +++++--- apps/app/components/modules/form.tsx | 16 ++---- apps/app/components/modules/modal.tsx | 4 +- apps/app/components/modules/select/index.ts | 6 +-- .../select/{select-lead.tsx => lead.tsx} | 16 +++--- .../{select-members.tsx => members.tsx} | 0 .../select/{select-status.tsx => status.tsx} | 13 +++-- .../pages/create-update-page-modal.tsx | 4 +- .../components/pages/delete-page-modal.tsx | 25 ++++++---- apps/app/components/pages/page-form.tsx | 26 ++-------- .../project/delete-project-modal.tsx | 16 +++--- .../project/send-project-invitation-modal.tsx | 8 +-- .../app/components/rich-text-editor/index.tsx | 4 +- .../components/ui/custom-search-select.tsx | 4 +- apps/app/components/ui/date.tsx | 21 +++----- .../components/views/delete-view-modal.tsx | 25 ++++++---- apps/app/components/views/form.tsx | 2 - apps/app/components/views/modal.tsx | 13 +++-- .../workspace/delete-workspace-modal.tsx | 16 +++--- apps/app/contexts/project-member.context.tsx | 8 +-- apps/app/tailwind.config.js | 1 + 36 files changed, 228 insertions(+), 249 deletions(-) rename apps/app/components/modules/select/{select-lead.tsx => lead.tsx} (84%) rename apps/app/components/modules/select/{select-members.tsx => members.tsx} (100%) rename apps/app/components/modules/select/{select-status.tsx => status.tsx} (83%) diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx index 2d5ac37dc..3a906b356 100644 --- a/apps/app/components/core/existing-issues-list-modal.tsx +++ b/apps/app/components/core/existing-issues-list-modal.tsx @@ -117,7 +117,7 @@ export const ExistingIssuesListModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - +
= ({ {filteredIssues.length > 0 ? (
  • {query === "" && ( -

    +

    Select issues to add

    )} @@ -167,10 +167,10 @@ export const ExistingIssuesListModal: React.FC = ({ 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 = ({ backgroundColor: issue.state_detail.color, }} /> - + {issue.project_detail.identifier}-{issue.sequence_id} {issue.name} @@ -194,10 +194,11 @@ export const ExistingIssuesListModal: React.FC = ({
    • ) : (
    - -

    + +

    No issues found. Create a new issue with{" "} - 
    C
    . + 
    C
    + .

    )} diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx index b69537cdc..58b670f3a 100644 --- a/apps/app/components/cycles/delete-cycle-modal.tsx +++ b/apps/app/components/cycles/delete-cycle-modal.tsx @@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -153,30 +153,36 @@ export const DeleteCycleModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - -
    + +
    -
    +
    - + Delete Cycle

    Are you sure you want to delete cycle-{" "} - {data?.name}? All of the data related - to the cycle will be permanently removed. This action cannot be undone. + + {data?.name} + + ? All of the data related to the cycle will be permanently removed. This + action cannot be undone.

    -
    +
    Cancel {isDeleteLoading ? "Deleting..." : "Delete"} diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx index a15547ddc..f977bc74b 100644 --- a/apps/app/components/cycles/form.tsx +++ b/apps/app/components/cycles/form.tsx @@ -113,7 +113,6 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat
    = ({ 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 = ({ 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 = ({ 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 = ({ 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 diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx index aba22b0ec..cd439c372 100644 --- a/apps/app/components/cycles/modal.tsx +++ b/apps/app/components/cycles/modal.tsx @@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - + = ({ comment, onSubmit, handleCommentD {comment.actor_detail.first_name} {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
    -

    Commented {timeAgo(comment.created_at)}

    +

    + Commented {timeAgo(comment.created_at)} +

    {isEditing ? ( @@ -94,13 +96,13 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD
    diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx index 4fb5f92ea..903022584 100644 --- a/apps/app/components/issues/delete-issue-modal.tsx +++ b/apps/app/components/issues/delete-issue-modal.tsx @@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC = ({ isOpen, handleClose, data }) leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -102,10 +102,10 @@ export const DeleteIssueModal: React.FC = ({ 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" > - +
    - +
    -

    +

    Are you sure you want to delete issue{" "} - + {data?.project_detail.identifier}-{data?.sequence_id} {""}? All of the data related to the issue will be permanently removed. This diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index 8556c2551..ca085f103 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -221,7 +221,7 @@ export const IssueForm: FC = ({

    {watch("parent") && watch("parent") !== "" ? ( -
    +
    = ({ .color, }} /> - + {/* {projects?.find((p) => p.id === projectId)?.identifier}- */} {issues.find((i) => i.id === watch("parent"))?.sequence_id} @@ -253,7 +253,6 @@ export const IssueForm: FC = ({ 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 = ({ )}
    -
    +
    {issueName && issueName !== "" && ( ) : ( <> - - Due Date + + Due Date )} diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx index 142a0369b..18204295b 100644 --- a/apps/app/components/issues/select/estimate.tsx +++ b/apps/app/components/issues/select/estimate.tsx @@ -22,8 +22,8 @@ export const IssueEstimateSelect: React.FC = ({ value, onChange }) => { value={value} label={
    - - + + {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
    diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx index f5b023280..a7ada1133 100644 --- a/apps/app/components/issues/select/label.tsx +++ b/apps/app/components/issues/select/label.tsx @@ -58,16 +58,7 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, > {({ open }: any) => ( <> - - `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 ? ( = ({ setIsOpen, value, onChange, /> ) : ( - - + + Label )} @@ -96,12 +87,12 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, > -
    +
    setQuery(event.target.value)} placeholder="Search for label..." displayValue={(assigned: any) => assigned?.name} @@ -121,7 +112,7 @@ export const IssueLabelSelect: React.FC = ({ 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 = ({ setIsOpen, value, onChange,
    {label.name} @@ -150,8 +140,8 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, ); } else return ( -
    -
    +
    +
    {label.name}
    @@ -161,7 +151,7 @@ export const IssueLabelSelect: React.FC = ({ 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 = ({ setIsOpen, value, onChange,
    {child.name} @@ -202,9 +192,9 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2" onClick={() => setIsOpen(true)} > - -
    diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx index 89e07b4e6..7404ac5a0 100644 --- a/apps/app/components/issues/select/priority.tsx +++ b/apps/app/components/issues/select/priority.tsx @@ -20,7 +20,7 @@ export const IssuePrioritySelect: React.FC = ({ value, onChange }) => ( {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)} - + {value ?? "Priority"}
    diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx index 5a9204d39..fa4807815 100644 --- a/apps/app/components/issues/select/state.tsx +++ b/apps/app/components/issues/select/state.tsx @@ -56,15 +56,17 @@ export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, onChange={onChange} options={options} label={ -
    +
    {selectedOption ? ( getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) ) : currentDefaultState ? ( getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color) ) : ( - + )} - {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? "State"} + {selectedOption?.name + ? selectedOption.name + : currentDefaultState?.name ?? State}
    } footerOption={ diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx index 963581b48..fbdcd7714 100644 --- a/apps/app/components/issues/sidebar.tsx +++ b/apps/app/components/issues/sidebar.tsx @@ -316,7 +316,7 @@ export const IssueDetailsSidebar: React.FC = ({ issueDetail?.parent_detail ? ( ) : ( <> - - {label} + + {label} )} diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx index 1ae6865c5..31cfc33e9 100644 --- a/apps/app/components/views/delete-view-modal.tsx +++ b/apps/app/components/views/delete-view-modal.tsx @@ -81,7 +81,7 @@ export const DeleteViewModal: React.FC = ({ isOpen, data, setIsOpen }) => leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -95,31 +95,36 @@ export const DeleteViewModal: React.FC = ({ 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" > - -
    + +
    -
    +
    - + Delete View

    - Are you sure you want to delete view- {" "} - {data?.name} - ? 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-{" "} + + {data?.name} + + ? All of the data related to the view will be permanently removed. This + action cannot be undone.

    -
    +
    Cancel {isDeleteLoading ? "Deleting..." : "Delete"} diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx index d75a66430..1b8875138 100644 --- a/apps/app/components/views/form.tsx +++ b/apps/app/components/views/form.tsx @@ -78,7 +78,6 @@ export const ViewForm: React.FC = ({ 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 = ({ name="description" placeholder="Description" className="h-32 resize-none text-sm" - mode="transparent" error={errors.description} register={register} /> diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx index aafda3499..a04c19b64 100644 --- a/apps/app/components/views/modal.tsx +++ b/apps/app/components/views/modal.tsx @@ -21,10 +21,15 @@ type Props = { isOpen: boolean; handleClose: () => void; data?: IView | null; - preLoadedData?: Partial | null ; + preLoadedData?: Partial | null; }; -export const CreateUpdateViewModal: React.FC = ({ isOpen, handleClose, data, preLoadedData }) => { +export const CreateUpdateViewModal: React.FC = ({ + isOpen, + handleClose, + data, + preLoadedData, +}) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -114,7 +119,7 @@ export const CreateUpdateViewModal: React.FC = ({ isOpen, handleClose, da leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -128,7 +133,7 @@ export const CreateUpdateViewModal: React.FC = ({ 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" > - + = ({ isOpen, data, onClose }) leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -102,10 +102,10 @@ export const DeleteWorkspaceModal: React.FC = ({ 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" > - +
    - + -
    +

    Enter the workspace name{" "} - {selectedWorkspace?.name} to continue: + {selectedWorkspace?.name}{" "} + to continue:

    = ({ isOpen, data, onClose }) />
    -
    +

    - To confirm, type delete my workspace{" "} + To confirm, type{" "} + delete my workspace{" "} below:

    = (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; diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index 732e4be00..9dde3bb74 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -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: {