From 3457411c6acfafa57d82cdfc9c7af0923ca9dd0a Mon Sep 17 00:00:00 2001 From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com> Date: Thu, 13 Apr 2023 15:39:05 +0530 Subject: [PATCH] style: issue list (#798) * style: issue list * chore: changed the empty state images --- .../auth-screens/not-authorized-view.tsx | 4 +- apps/app/components/core/issues-view.tsx | 80 +++--- .../components/core/list-view/all-lists.tsx | 2 +- .../core/list-view/single-issue.tsx | 2 +- .../components/core/list-view/single-list.tsx | 4 +- .../project-authorization-wrapper.tsx | 9 +- .../projects/[projectId]/issues/[issueId].tsx | 2 +- .../projects/[projectId]/issues/index.tsx | 1 + apps/app/public/empty-state/empty-issue.svg | 84 +++---- apps/app/public/empty-state/empty-page.svg | 42 ++-- apps/app/public/empty-state/empty-project.svg | 74 +++--- apps/app/public/empty-state/empty-view.svg | 232 +++++++++--------- 12 files changed, 257 insertions(+), 279 deletions(-) diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx index aaa59d6c61c..37c07e8def9 100644 --- a/apps/app/components/auth-screens/not-authorized-view.tsx +++ b/apps/app/components/auth-screens/not-authorized-view.tsx @@ -42,7 +42,7 @@ export const NotAuthorizedView: React.FC = ({ actionButton, type }) => {
{user ? ( -

+

You have signed in as {user.email}.
Sign in @@ -50,7 +50,7 @@ export const NotAuthorizedView: React.FC = ({ actionButton, type }) => { with different account that has access to this page.

) : ( -

+

You need to{" "} Sign in diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx index d55731c1e4f..1171371a955 100644 --- a/apps/app/components/core/issues-view.tsx +++ b/apps/app/components/core/issues-view.tsx @@ -23,7 +23,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import { CreateUpdateViewModal } from "components/views"; import { TransferIssues, TransferIssuesModal } from "components/cycles"; // ui -import { EmptySpace, EmptySpaceItem, PrimaryButton, Spinner } from "components/ui"; +import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui"; import { CalendarView } from "./calendar-view"; // icons import { @@ -46,6 +46,8 @@ import { PROJECT_ISSUES_LIST_WITH_PARAMS, STATE_LIST, } from "constants/fetch-keys"; +// image +import emptyCycle from "public/empty-state/empty-cycle.svg"; type Props = { type?: "issue" | "cycle" | "module"; @@ -425,7 +427,7 @@ export const IssuesView: React.FC = ({ handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} /> -

+
{Object.keys(filters).length > 0 && @@ -480,24 +482,24 @@ export const IssuesView: React.FC = ({ <> {isCompleted && setTransferIssuesModal(true)} />} {issueView === "list" ? ( - + ) : issueView === "kanban" ? ( = ({ )} ) : ( -
- - - Use 
C
shortcut to - create a new issue - - } - Icon={PlusIcon} - action={() => { - const e = new KeyboardEvent("keydown", { - key: "c", - }); - document.dispatchEvent(e); - }} - /> - {openIssuesListModal && ( - - )} - -
+ ) ) : (
diff --git a/apps/app/components/core/list-view/all-lists.tsx b/apps/app/components/core/list-view/all-lists.tsx index 9d8608fa262..bdd0c4f2c85 100644 --- a/apps/app/components/core/list-view/all-lists.tsx +++ b/apps/app/components/core/list-view/all-lists.tsx @@ -36,7 +36,7 @@ export const AllLists: React.FC = ({ return ( <> {groupedByIssues && ( -
+
{Object.keys(groupedByIssues).map((singleGroup) => { const currentState = selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null; diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 287b4c90581..2bac2fcc78f 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -191,7 +191,7 @@ export const SingleListIssue: React.FC = ({ -
+
{ diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx index e73fee5cfd4..adf8a6a5f22 100644 --- a/apps/app/components/core/list-view/single-list.tsx +++ b/apps/app/components/core/list-view/single-list.tsx @@ -132,10 +132,10 @@ export const SingleList: React.FC = ({ return ( {({ open }) => ( -
+
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx index 2b12133c71e..9caaa3e2690 100644 --- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx +++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx @@ -5,6 +5,8 @@ import { useRouter } from "next/router"; // contexts import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context"; +// hooks +import useIssuesView from "hooks/use-issues-view"; // layouts import Container from "layouts/container"; import AppHeader from "layouts/app-layout/app-header"; @@ -19,6 +21,7 @@ import { PrimaryButton, Spinner } from "components/ui"; // icons import { LayerDiagonalIcon } from "components/icons"; + type Meta = { title?: string | null; description?: string | null; @@ -58,6 +61,10 @@ const ProjectAuthorizationWrapped: React.FC = ({ const router = useRouter(); const { workspaceSlug, projectId } = router.query; + const { + issueView, + } = useIssuesView(); + const { loading, error, memberRole: memberType } = useProjectMyMembership(); const settingsLayout = router.pathname.includes("/settings"); @@ -131,7 +138,7 @@ const ProjectAuthorizationWrapped: React.FC = ({ )}
{ return ( diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx index 8533f2c5c44..9a763cfc35f 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx @@ -21,6 +21,7 @@ import type { NextPage } from "next"; import { PROJECT_DETAILS } from "constants/fetch-keys"; const ProjectIssues: NextPage = () => { + const router = useRouter(); const { workspaceSlug, projectId } = router.query; diff --git a/apps/app/public/empty-state/empty-issue.svg b/apps/app/public/empty-state/empty-issue.svg index 4ff8888c3e6..2b917e3a9f9 100644 --- a/apps/app/public/empty-state/empty-issue.svg +++ b/apps/app/public/empty-state/empty-issue.svg @@ -1,62 +1,56 @@ - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - + + + + + + + + + + + - + - + - - + + - + - + - - + + diff --git a/apps/app/public/empty-state/empty-page.svg b/apps/app/public/empty-state/empty-page.svg index 365aafd04e5..8246b68c148 100644 --- a/apps/app/public/empty-state/empty-page.svg +++ b/apps/app/public/empty-state/empty-page.svg @@ -1,40 +1,40 @@ - - - - - - - - + + + + + + + + - - - - - - - + + + + + + + - + - - + + - + - - + + diff --git a/apps/app/public/empty-state/empty-project.svg b/apps/app/public/empty-state/empty-project.svg index 256b9665fbb..2b917e3a9f9 100644 --- a/apps/app/public/empty-state/empty-project.svg +++ b/apps/app/public/empty-state/empty-project.svg @@ -1,56 +1,56 @@ - - - - - + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + - + - - + + - + - - + + diff --git a/apps/app/public/empty-state/empty-view.svg b/apps/app/public/empty-state/empty-view.svg index 5bb312094c6..afa1c4f8ed6 100644 --- a/apps/app/public/empty-state/empty-view.svg +++ b/apps/app/public/empty-state/empty-view.svg @@ -1,147 +1,147 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - + - + - + - + - - + + - + - + - + - +