From 2e5ade05fe4e6439cedf010062fb58ed227ca84f Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:43:47 +0530 Subject: [PATCH] chore: update module status icons and colors (#2011) * chore: update module status icons and colors * refactor: import statements * fix: add default alue to module status --- apps/app/components/icons/index.ts | 1 + apps/app/components/icons/module/backlog.tsx | 57 +++++++++++++++ .../app/components/icons/module/cancelled.tsx | 35 +++++++++ .../app/components/icons/module/completed.tsx | 28 ++++++++ .../components/icons/module/in-progress.tsx | 71 +++++++++++++++++++ apps/app/components/icons/module/index.ts | 7 ++ .../icons/module/module-status-icon.tsx | 37 ++++++++++ apps/app/components/icons/module/paused.tsx | 31 ++++++++ apps/app/components/icons/module/planned.tsx | 24 +++++++ .../components/modules/gantt-chart/blocks.tsx | 3 + apps/app/components/modules/select/status.tsx | 15 +--- apps/app/components/modules/sidebar.tsx | 2 +- apps/app/constants/module.ts | 21 ++++-- apps/app/types/modules.d.ts | 10 ++- 14 files changed, 321 insertions(+), 21 deletions(-) create mode 100644 apps/app/components/icons/module/backlog.tsx create mode 100644 apps/app/components/icons/module/cancelled.tsx create mode 100644 apps/app/components/icons/module/completed.tsx create mode 100644 apps/app/components/icons/module/in-progress.tsx create mode 100644 apps/app/components/icons/module/index.ts create mode 100644 apps/app/components/icons/module/module-status-icon.tsx create mode 100644 apps/app/components/icons/module/paused.tsx create mode 100644 apps/app/components/icons/module/planned.tsx diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts index 183b20c97..d3b311e40 100644 --- a/apps/app/components/icons/index.ts +++ b/apps/app/components/icons/index.ts @@ -27,6 +27,7 @@ export * from "./started-state-icon"; export * from "./layer-diagonal-icon"; export * from "./lock-icon"; export * from "./menu-icon"; +export * from "./module"; export * from "./pencil-scribble-icon"; export * from "./plus-icon"; export * from "./person-running-icon"; diff --git a/apps/app/components/icons/module/backlog.tsx b/apps/app/components/icons/module/backlog.tsx new file mode 100644 index 000000000..5685c7498 --- /dev/null +++ b/apps/app/components/icons/module/backlog.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModuleBacklogIcon: React.FC = ({ width = "20", height = "20", className }) => ( + + + + + + + + + + + + + + + + +); diff --git a/apps/app/components/icons/module/cancelled.tsx b/apps/app/components/icons/module/cancelled.tsx new file mode 100644 index 000000000..9bfc02943 --- /dev/null +++ b/apps/app/components/icons/module/cancelled.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModuleCancelledIcon: React.FC = ({ + width = "20", + height = "20", + className, +}) => ( + + + + + + + + + + +); diff --git a/apps/app/components/icons/module/completed.tsx b/apps/app/components/icons/module/completed.tsx new file mode 100644 index 000000000..4c50ed3ad --- /dev/null +++ b/apps/app/components/icons/module/completed.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModuleCompletedIcon: React.FC = ({ + width = "20", + height = "20", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/module/in-progress.tsx b/apps/app/components/icons/module/in-progress.tsx new file mode 100644 index 000000000..5892a94d6 --- /dev/null +++ b/apps/app/components/icons/module/in-progress.tsx @@ -0,0 +1,71 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModuleInProgressIcon: React.FC = ({ + width = "20", + height = "20", + className, +}) => ( + + + + + + + + + + + + + + + + + + + + +); diff --git a/apps/app/components/icons/module/index.ts b/apps/app/components/icons/module/index.ts new file mode 100644 index 000000000..e82014b2f --- /dev/null +++ b/apps/app/components/icons/module/index.ts @@ -0,0 +1,7 @@ +export * from "./backlog"; +export * from "./cancelled"; +export * from "./completed"; +export * from "./in-progress"; +export * from "./module-status-icon"; +export * from "./paused"; +export * from "./planned"; diff --git a/apps/app/components/icons/module/module-status-icon.tsx b/apps/app/components/icons/module/module-status-icon.tsx new file mode 100644 index 000000000..e80497773 --- /dev/null +++ b/apps/app/components/icons/module/module-status-icon.tsx @@ -0,0 +1,37 @@ +// icons +import { + ModuleBacklogIcon, + ModuleCancelledIcon, + ModuleCompletedIcon, + ModuleInProgressIcon, + ModulePausedIcon, + ModulePlannedIcon, +} from "components/icons"; +// types +import { TModuleStatus } from "types"; + +type Props = { + status: TModuleStatus; + className?: string; + height?: string; + width?: string; +}; + +export const ModuleStatusIcon: React.FC = ({ + status, + className, + height = "12px", + width = "12px", +}) => { + if (status === "backlog") + return ; + else if (status === "cancelled") + return ; + else if (status === "completed") + return ; + else if (status === "in-progress") + return ; + else if (status === "paused") + return ; + else return ; +}; diff --git a/apps/app/components/icons/module/paused.tsx b/apps/app/components/icons/module/paused.tsx new file mode 100644 index 000000000..56ebcfd98 --- /dev/null +++ b/apps/app/components/icons/module/paused.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModulePausedIcon: React.FC = ({ width = "20", height = "20", className }) => ( + + + + + + + + + + +); diff --git a/apps/app/components/icons/module/planned.tsx b/apps/app/components/icons/module/planned.tsx new file mode 100644 index 000000000..97592057c --- /dev/null +++ b/apps/app/components/icons/module/planned.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const ModulePlannedIcon: React.FC = ({ width = "20", height = "20", className }) => ( + + + +); diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx index bcf307098..c6400ad82 100644 --- a/apps/app/components/modules/gantt-chart/blocks.tsx +++ b/apps/app/components/modules/gantt-chart/blocks.tsx @@ -2,6 +2,8 @@ import { useRouter } from "next/router"; // ui import { Tooltip } from "components/ui"; +// icons +import { ModuleStatusIcon } from "components/icons"; // helpers import { renderShortDate } from "helpers/date-time.helper"; // types @@ -49,6 +51,7 @@ export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => { className="relative w-full flex items-center gap-2 h-full" onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)} > +
{data.name}
); diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx index 08192cd5d..8c16ca14c 100644 --- a/apps/app/components/modules/select/status.tsx +++ b/apps/app/components/modules/select/status.tsx @@ -6,6 +6,7 @@ import { Controller, FieldError, Control } from "react-hook-form"; import { CustomSelect } from "components/ui"; // icons import { Squares2X2Icon } from "@heroicons/react/24/outline"; +import { ModuleStatusIcon } from "components/icons"; // types import type { IModule } from "types"; // constants @@ -31,12 +32,7 @@ export const ModuleStatusSelect: React.FC = ({ control, error }) => ( }`} > {value ? ( - s.value === value)?.color, - }} - /> + ) : ( = ({ control, error }) => ( {MODULE_STATUS.map((status) => (
- + {status.label}
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx index 0407b95aa..e815d1950 100644 --- a/apps/app/components/modules/sidebar.tsx +++ b/apps/app/components/modules/sidebar.tsx @@ -48,7 +48,7 @@ const defaultValues: Partial = { members_list: [], start_date: null, target_date: null, - status: null, + status: "backlog", }; type Props = { diff --git a/apps/app/constants/module.ts b/apps/app/constants/module.ts index ffacdfa3c..058171328 100644 --- a/apps/app/constants/module.ts +++ b/apps/app/constants/module.ts @@ -1,8 +1,15 @@ -export const MODULE_STATUS = [ - { label: "Backlog", value: "backlog", color: "#5e6ad2" }, - { label: "Planned", value: "planned", color: "#26b5ce" }, - { label: "In Progress", value: "in-progress", color: "#f2c94c" }, - { label: "Paused", value: "paused", color: "#ff6900" }, - { label: "Completed", value: "completed", color: "#4cb782" }, - { label: "Cancelled", value: "cancelled", color: "#cc1d10" }, +// types +import { TModuleStatus } from "types"; + +export const MODULE_STATUS: { + label: string; + value: TModuleStatus; + color: string; +}[] = [ + { label: "Backlog", value: "backlog", color: "#a3a3a2" }, + { label: "Planned", value: "planned", color: "#3f76ff" }, + { label: "In Progress", value: "in-progress", color: "#f39e1f" }, + { label: "Paused", value: "paused", color: "#525252" }, + { label: "Completed", value: "completed", color: "#16a34a" }, + { label: "Cancelled", value: "cancelled", color: "#ef4444" }, ]; diff --git a/apps/app/types/modules.d.ts b/apps/app/types/modules.d.ts index e395f6f16..709d1d300 100644 --- a/apps/app/types/modules.d.ts +++ b/apps/app/types/modules.d.ts @@ -10,6 +10,14 @@ import type { linkDetails, } from "types"; +export type TModuleStatus = + | "backlog" + | "planned" + | "in-progress" + | "paused" + | "completed" + | "cancelled"; + export interface IModule { backlog_issues: number; cancelled_issues: number; @@ -39,7 +47,7 @@ export interface IModule { sort_order: number; start_date: string | null; started_issues: number; - status: "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled" | null; + status: TModuleStatus; target_date: string | null; total_issues: number; unstarted_issues: number;