From 280e9eda581502e89df3b0e1ed0ce004b2f442bc Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 8 Sep 2023 13:42:50 +0530 Subject: [PATCH 1/2] chore: update state icons and colors --- .../issues/peek-overview/issue-properties.tsx | 1 - .../analytics/scope-and-demand/demand.tsx | 6 +- .../automation/auto-close-automation.tsx | 23 +++--- .../issue/change-issue-state.tsx | 21 +++-- web/components/core/filters/filters-list.tsx | 16 ++-- .../core/sidebar/sidebar-progress-stats.tsx | 3 +- .../core/views/board-view/all-boards.tsx | 12 ++- .../core/views/board-view/board-header.tsx | 25 ++++-- .../core/views/list-view/single-list.tsx | 24 +++++- .../cycles/active-cycle-details.tsx | 6 +- web/components/icons/backlog-state-icon.tsx | 21 ----- web/components/icons/cancelled-state-icon.tsx | 78 ------------------- web/components/icons/completed-state-icon.tsx | 69 ---------------- web/components/icons/index.ts | 10 +-- web/components/icons/started-state-icon.tsx | 77 ------------------ web/components/icons/state-group-icon.tsx | 66 ---------------- web/components/icons/state/backlog.tsx | 60 ++++++++++++++ web/components/icons/state/cancelled.tsx | 34 ++++++++ web/components/icons/state/completed.tsx | 27 +++++++ web/components/icons/state/index.ts | 6 ++ web/components/icons/state/started.tsx | 67 ++++++++++++++++ .../icons/state/state-group-icon.tsx | 74 ++++++++++++++++++ web/components/icons/state/unstarted.tsx | 24 ++++++ web/components/icons/unstarted-state-icon.tsx | 59 -------------- web/components/issues/gantt-chart/blocks.tsx | 4 +- .../my-issues/my-issues-select-filters.tsx | 6 +- .../issues/peek-overview/issue-properties.tsx | 7 +- web/components/issues/select/state.tsx | 11 ++- .../issues/sidebar-select/state.tsx | 13 +--- web/components/issues/view-select/state.tsx | 9 ++- web/components/states/single-state.tsx | 4 +- web/components/views/select-filters.tsx | 5 +- web/components/web-view/select-state.tsx | 4 +- web/components/workspace/issues-pie-chart.tsx | 6 +- web/constants/state.ts | 4 +- web/helpers/analytics.helper.ts | 5 +- 36 files changed, 428 insertions(+), 459 deletions(-) delete mode 100644 web/components/icons/backlog-state-icon.tsx delete mode 100644 web/components/icons/cancelled-state-icon.tsx delete mode 100644 web/components/icons/completed-state-icon.tsx delete mode 100644 web/components/icons/started-state-icon.tsx delete mode 100644 web/components/icons/state-group-icon.tsx create mode 100644 web/components/icons/state/backlog.tsx create mode 100644 web/components/icons/state/cancelled.tsx create mode 100644 web/components/icons/state/completed.tsx create mode 100644 web/components/icons/state/index.ts create mode 100644 web/components/icons/state/started.tsx create mode 100644 web/components/icons/state/state-group-icon.tsx create mode 100644 web/components/icons/state/unstarted.tsx delete mode 100644 web/components/icons/unstarted-state-icon.tsx diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx index c7a08faedeb..f7ccab18f08 100644 --- a/space/components/issues/peek-overview/issue-properties.tsx +++ b/space/components/issues/peek-overview/issue-properties.tsx @@ -44,7 +44,6 @@ export const PeekOverviewIssueProperties: React.FC = ({ issueDetails, mod {mode === "full" && (
- {/* {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} */} {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx index ad37812472f..23af2b38464 100644 --- a/web/components/analytics/scope-and-demand/demand.tsx +++ b/web/components/analytics/scope-and-demand/demand.tsx @@ -1,7 +1,7 @@ // icons import { PlayIcon } from "@heroicons/react/24/outline"; // types -import { IDefaultAnalyticsResponse } from "types"; +import { IDefaultAnalyticsResponse, TStateGroups } from "types"; // constants import { STATE_GROUP_COLORS } from "constants/state"; @@ -27,7 +27,7 @@ export const AnalyticsDemand: React.FC = ({ defaultAnalytics }) => (
{group.state_group}
@@ -42,7 +42,7 @@ export const AnalyticsDemand: React.FC = ({ defaultAnalytics }) => ( className="absolute top-0 left-0 h-1 rounded duration-300" style={{ width: `${percentage}%`, - backgroundColor: STATE_GROUP_COLORS[group.state_group], + backgroundColor: STATE_GROUP_COLORS[group.state_group as TStateGroups], }} />
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx index 3e71b83299b..ad65714aa80 100644 --- a/web/components/automation/auto-close-automation.tsx +++ b/web/components/automation/auto-close-automation.tsx @@ -9,7 +9,7 @@ import { CustomSearchSelect, CustomSelect, ToggleSwitch } from "components/ui"; import { SelectMonthModal } from "components/automation"; // icons import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // services import stateService from "services/state.service"; // constants @@ -46,7 +46,7 @@ export const AutoCloseAutomation: React.FC = ({ projectDetails, handleCha query: state.name, content: (
- {getStateGroupIcon(state.group, "16", "16", state.color)} + {state.name}
), @@ -140,14 +140,19 @@ export const AutoCloseAutomation: React.FC = ({ projectDetails, handleCha label={
{selectedOption ? ( - getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) + ) : currentDefaultState ? ( - getStateGroupIcon( - currentDefaultState.group, - "16", - "16", - currentDefaultState.color - ) + ) : ( )} diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx index 30e2cdb772a..6bfc2874c43 100644 --- a/web/components/command-palette/issue/change-issue-state.tsx +++ b/web/components/command-palette/issue/change-issue-state.tsx @@ -1,22 +1,24 @@ -import { useRouter } from "next/router"; import React, { Dispatch, SetStateAction, useCallback } from "react"; + +import { useRouter } from "next/router"; + import useSWR, { mutate } from "swr"; // cmdk import { Command } from "cmdk"; +// services +import issuesService from "services/issues.service"; +import stateService from "services/state.service"; // ui import { Spinner } from "components/ui"; +// icons +import { CheckIcon, StateGroupIcon } from "components/icons"; // helpers import { getStatesList } from "helpers/state.helper"; -// services -import issuesService from "services/issues.service"; -import stateService from "services/state.service"; // types import { ICurrentUserResponse, IIssue } from "types"; // fetch keys import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys"; -// icons -import { CheckIcon, getStateGroupIcon } from "components/icons"; type Props = { setIsPaletteOpen: Dispatch>; @@ -82,7 +84,12 @@ export const ChangeIssueState: React.FC = ({ setIsPaletteOpen, issue, use className="focus:outline-none" >
- {getStateGroupIcon(state.group, "16", "16", state.color)} +

{state.name}

{state.id === issue.state && }
diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx index 8192bdf7def..10cd623f829 100644 --- a/web/components/core/filters/filters-list.tsx +++ b/web/components/core/filters/filters-list.tsx @@ -2,7 +2,7 @@ import React from "react"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; -import { getPriorityIcon, getStateGroupIcon } from "components/icons"; +import { getPriorityIcon, StateGroupIcon } from "components/icons"; // ui import { Avatar } from "components/ui"; // helpers @@ -71,12 +71,10 @@ export const FiltersList: React.FC = ({ }} > - {getStateGroupIcon( - state?.group ?? "backlog", - "12", - "12", - state?.color - )} + {state?.name ?? ""} = ({ backgroundColor: `${STATE_GROUP_COLORS[group]}20`, }} > - {getStateGroupIcon(group, "16", "16")} + + + {group} = ({ {group} diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx index 2637e7c334d..ea0f64ace0b 100644 --- a/web/components/core/views/board-view/all-boards.tsx +++ b/web/components/core/views/board-view/all-boards.tsx @@ -1,7 +1,7 @@ // components import { SingleBoard } from "components/core/views/board-view/single-board"; // icons -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types @@ -82,8 +82,14 @@ export const AllBoards: React.FC = ({ className="flex items-center justify-between gap-2 rounded bg-custom-background-90 p-2 shadow" >
- {currentState && - getStateGroupIcon(currentState.group, "16", "16", currentState.color)} + {currentState && ( + + )}

{selectedGroup === "state" ? addSpaceIfCamelCase(currentState?.name ?? "") diff --git a/web/components/core/views/board-view/board-header.tsx b/web/components/core/views/board-view/board-header.tsx index 5392774d946..a1c2804b648 100644 --- a/web/components/core/views/board-view/board-header.tsx +++ b/web/components/core/views/board-view/board-header.tsx @@ -13,14 +13,16 @@ import useProjects from "hooks/use-projects"; import { Avatar, Icon } from "components/ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; -import { getPriorityIcon, getStateGroupIcon } from "components/icons"; +import { StateGroupIcon, getPriorityIcon } from "components/icons"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types -import { IIssueViewProps, IState } from "types"; +import { IIssueViewProps, IState, TStateGroups } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; +// constants +import { STATE_GROUP_COLORS } from "constants/state"; type Props = { currentState?: IState | null; @@ -97,11 +99,24 @@ export const BoardHeader: React.FC = ({ switch (selectedGroup) { case "state": - icon = - currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color); + icon = currentState && ( + + ); break; case "state_detail.group": - icon = getStateGroupIcon(groupTitle as any, "16", "16"); + icon = ( + + ); break; case "priority": icon = getPriorityIcon(groupTitle, "text-lg"); diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx index bd1c3c6ab30..a005feef526 100644 --- a/web/components/core/views/list-view/single-list.tsx +++ b/web/components/core/views/list-view/single-list.tsx @@ -15,7 +15,7 @@ import { SingleListIssue } from "components/core"; import { Avatar, CustomMenu } from "components/ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; -import { getPriorityIcon, getStateGroupIcon } from "components/icons"; +import { StateGroupIcon, getPriorityIcon } from "components/icons"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; @@ -26,10 +26,13 @@ import { IIssueLabels, IIssueViewProps, IState, + TStateGroups, UserAuth, } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; +// constants +import { STATE_GROUP_COLORS } from "constants/state"; type Props = { currentState?: IState | null; @@ -111,11 +114,24 @@ export const SingleList: React.FC = ({ switch (selectedGroup) { case "state": - icon = - currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color); + icon = currentState && ( + + ); break; case "state_detail.group": - icon = getStateGroupIcon(groupTitle as any, "16", "16"); + icon = ( + + ); break; case "priority": icon = getPriorityIcon(groupTitle, "text-lg"); diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx index 23fd68e750c..a2af4b289f6 100644 --- a/web/components/cycles/active-cycle-details.tsx +++ b/web/components/cycles/active-cycle-details.tsx @@ -28,7 +28,7 @@ import { TriangleExclamationIcon, AlarmClockIcon, LayerDiagonalIcon, - CompletedStateIcon, + StateGroupIcon, } from "components/icons"; import { StarIcon } from "@heroicons/react/24/outline"; // components @@ -385,8 +385,8 @@ export const ActiveCycleDetails: React.FC = () => { {cycle.total_issues} issues

-
- +
+ {cycle.completed_issues} issues
diff --git a/web/components/icons/backlog-state-icon.tsx b/web/components/icons/backlog-state-icon.tsx deleted file mode 100644 index 2c140a1122f..00000000000 --- a/web/components/icons/backlog-state-icon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; - -import type { Props } from "./types"; - -export const BacklogStateIcon: React.FC = ({ - width = "20", - height = "20", - className, - color = "rgb(var(--color-text-200))", -}) => ( - - - -); diff --git a/web/components/icons/cancelled-state-icon.tsx b/web/components/icons/cancelled-state-icon.tsx deleted file mode 100644 index 5829146ff8d..00000000000 --- a/web/components/icons/cancelled-state-icon.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; - -import type { Props } from "./types"; - -export const CancelledStateIcon: React.FC = ({ - width = "20", - height = "20", - className, - color = "#f2655a", -}) => ( - - - - - - - - - - - - - -); diff --git a/web/components/icons/completed-state-icon.tsx b/web/components/icons/completed-state-icon.tsx deleted file mode 100644 index 584245d58a2..00000000000 --- a/web/components/icons/completed-state-icon.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; - -import type { Props } from "./types"; - -export const CompletedStateIcon: React.FC = ({ - width = "20", - height = "20", - className, - color = "#438af3", -}) => ( - - - - - - - - - - - - -); diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts index d3b311e404a..d3be7f2a8a0 100644 --- a/web/components/icons/index.ts +++ b/web/components/icons/index.ts @@ -1,6 +1,7 @@ +export * from "./module"; +export * from "./state"; export * from "./alarm-clock-icon"; export * from "./attachment-icon"; -export * from "./backlog-state-icon"; export * from "./blocked-icon"; export * from "./blocker-icon"; export * from "./bolt-icon"; @@ -8,12 +9,10 @@ export * from "./calendar-before-icon"; export * from "./calendar-after-icon"; export * from "./calendar-month-icon"; export * from "./cancel-icon"; -export * from "./cancelled-state-icon"; export * from "./clipboard-icon"; export * from "./color-pallette-icon"; export * from "./comment-icon"; export * from "./completed-cycle-icon"; -export * from "./completed-state-icon"; export * from "./current-cycle-icon"; export * from "./cycle-icon"; export * from "./discord-icon"; @@ -23,11 +22,9 @@ export * from "./ellipsis-horizontal-icon"; export * from "./external-link-icon"; export * from "./github-icon"; export * from "./heartbeat-icon"; -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"; @@ -36,11 +33,8 @@ export * from "./question-mark-circle-icon"; export * from "./setting-icon"; export * from "./signal-cellular-icon"; export * from "./stacked-layers-icon"; -export * from "./started-state-icon"; -export * from "./state-group-icon"; export * from "./tag-icon"; export * from "./tune-icon"; -export * from "./unstarted-state-icon"; export * from "./upcoming-cycle-icon"; export * from "./user-group-icon"; export * from "./user-icon-circle"; diff --git a/web/components/icons/started-state-icon.tsx b/web/components/icons/started-state-icon.tsx deleted file mode 100644 index 20de015379d..00000000000 --- a/web/components/icons/started-state-icon.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; - -import type { Props } from "./types"; - -export const StartedStateIcon: React.FC = ({ - width = "20", - height = "20", - className, - color = "#fbb040", -}) => ( - - - - - - - - - - - - -); diff --git a/web/components/icons/state-group-icon.tsx b/web/components/icons/state-group-icon.tsx deleted file mode 100644 index 522e0b9dc40..00000000000 --- a/web/components/icons/state-group-icon.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { - BacklogStateIcon, - CancelledStateIcon, - CompletedStateIcon, - StartedStateIcon, - UnstartedStateIcon, -} from "components/icons"; -// constants -import { STATE_GROUP_COLORS } from "constants/state"; - -export const getStateGroupIcon = ( - stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled", - width = "20", - height = "20", - color?: string -) => { - switch (stateGroup) { - case "backlog": - return ( - - ); - case "unstarted": - return ( - - ); - case "started": - return ( - - ); - case "completed": - return ( - - ); - case "cancelled": - return ( - - ); - default: - return <>; - } -}; diff --git a/web/components/icons/state/backlog.tsx b/web/components/icons/state/backlog.tsx new file mode 100644 index 00000000000..8175a5ee5c1 --- /dev/null +++ b/web/components/icons/state/backlog.tsx @@ -0,0 +1,60 @@ +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const StateGroupBacklogIcon: React.FC = ({ + width = "20", + height = "20", + className, + color = "#a3a3a3", +}) => ( + + + + + + + + + + + + + + + + +); diff --git a/web/components/icons/state/cancelled.tsx b/web/components/icons/state/cancelled.tsx new file mode 100644 index 00000000000..1c3c4e3d244 --- /dev/null +++ b/web/components/icons/state/cancelled.tsx @@ -0,0 +1,34 @@ +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const StateGroupCancelledIcon: React.FC = ({ + width = "20", + height = "20", + className, + color = "#ef4444", +}) => ( + + + + + + + + + + +); diff --git a/web/components/icons/state/completed.tsx b/web/components/icons/state/completed.tsx new file mode 100644 index 00000000000..b22cc8c81c5 --- /dev/null +++ b/web/components/icons/state/completed.tsx @@ -0,0 +1,27 @@ +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const StateGroupCompletedIcon: React.FC = ({ + width = "20", + height = "20", + className, + color = "#16a34a", +}) => ( + + + +); diff --git a/web/components/icons/state/index.ts b/web/components/icons/state/index.ts new file mode 100644 index 00000000000..7fee13d8b60 --- /dev/null +++ b/web/components/icons/state/index.ts @@ -0,0 +1,6 @@ +export * from "./backlog"; +export * from "./cancelled"; +export * from "./completed"; +export * from "./started"; +export * from "./state-group-icon"; +export * from "./unstarted"; diff --git a/web/components/icons/state/started.tsx b/web/components/icons/state/started.tsx new file mode 100644 index 00000000000..dda22bbf491 --- /dev/null +++ b/web/components/icons/state/started.tsx @@ -0,0 +1,67 @@ +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const StateGroupStartedIcon: React.FC = ({ + width = "20", + height = "20", + className, + color = "#f59e0b", +}) => ( + + + + + + + + + + + + + + + + + + + + +); diff --git a/web/components/icons/state/state-group-icon.tsx b/web/components/icons/state/state-group-icon.tsx new file mode 100644 index 00000000000..df3b57dd8a8 --- /dev/null +++ b/web/components/icons/state/state-group-icon.tsx @@ -0,0 +1,74 @@ +// icons +import { + StateGroupBacklogIcon, + StateGroupCancelledIcon, + StateGroupCompletedIcon, + StateGroupStartedIcon, + StateGroupUnstartedIcon, +} from "components/icons"; +// types +import { TStateGroups } from "types"; +// constants +import { STATE_GROUP_COLORS } from "constants/state"; + +type Props = { + className?: string; + color?: string; + height?: string; + stateGroup: TStateGroups; + width?: string; +}; + +export const StateGroupIcon: React.FC = ({ + className = "", + color, + height = "12px", + width = "12px", + stateGroup, +}) => { + if (stateGroup === "backlog") + return ( + + ); + else if (stateGroup === "cancelled") + return ( + + ); + else if (stateGroup === "completed") + return ( + + ); + else if (stateGroup === "started") + return ( + + ); + else + return ( + + ); +}; diff --git a/web/components/icons/state/unstarted.tsx b/web/components/icons/state/unstarted.tsx new file mode 100644 index 00000000000..61a782b1f75 --- /dev/null +++ b/web/components/icons/state/unstarted.tsx @@ -0,0 +1,24 @@ +type Props = { + width?: string; + height?: string; + className?: string; + color?: string; +}; + +export const StateGroupUnstartedIcon: React.FC = ({ + width = "20", + height = "20", + className, + color = "#3a3a3a", +}) => ( + + + +); diff --git a/web/components/icons/unstarted-state-icon.tsx b/web/components/icons/unstarted-state-icon.tsx deleted file mode 100644 index 161a0ab2ae0..00000000000 --- a/web/components/icons/unstarted-state-icon.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react"; - -import type { Props } from "./types"; - -export const UnstartedStateIcon: React.FC = ({ - width = "20", - height = "20", - className, - color = "rgb(var(--color-text-200))", -}) => ( - - - - - - - - - - -); diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/gantt-chart/blocks.tsx index 3ab7ea90bb6..0834e3e79b4 100644 --- a/web/components/issues/gantt-chart/blocks.tsx +++ b/web/components/issues/gantt-chart/blocks.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/router"; // ui import { Tooltip } from "components/ui"; // icons -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // helpers import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper"; // types @@ -52,7 +52,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => { className="relative w-full flex items-center gap-2 h-full cursor-pointer" onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)} > - {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)} +
{data?.project_detail?.identifier} {data?.sequence_id}
diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx index 58cc6367983..460879fd219 100644 --- a/web/components/issues/my-issues/my-issues-select-filters.tsx +++ b/web/components/issues/my-issues/my-issues-select-filters.tsx @@ -11,11 +11,11 @@ import { DateFilterModal } from "components/core"; // ui import { MultiLevelDropdown } from "components/ui"; // icons -import { getPriorityIcon, getStateGroupIcon } from "components/icons"; +import { StateGroupIcon, getPriorityIcon } from "components/icons"; // helpers import { checkIfArraysHaveSameElements } from "helpers/array.helper"; // types -import { IIssueFilterOptions, IQuery } from "types"; +import { IIssueFilterOptions, IQuery, TStateGroups } from "types"; // fetch-keys import { WORKSPACE_LABELS } from "constants/fetch-keys"; // constants @@ -102,7 +102,7 @@ export const MyIssuesSelectFilters: React.FC = ({ id: key, label: (
- {getStateGroupIcon(key as any, "16", "16")}{" "} + {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
), diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx index 16728b148be..98aa98316d6 100644 --- a/web/components/issues/peek-overview/issue-properties.tsx +++ b/web/components/issues/peek-overview/issue-properties.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite"; // headless ui import { Disclosure } from "@headlessui/react"; -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // hooks import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; @@ -66,7 +66,10 @@ export const PeekOverviewIssueProperties: React.FC = ({ {mode === "full" && (
- {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} + {issue.project_detail.identifier}-{issue.sequence_id}
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx index d62daba7694..22a4e65324a 100644 --- a/web/components/issues/select/state.tsx +++ b/web/components/issues/select/state.tsx @@ -10,7 +10,7 @@ import stateService from "services/state.service"; import { CustomSearchSelect } from "components/ui"; // icons import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // helpers import { getStatesList } from "helpers/state.helper"; // fetch keys @@ -41,7 +41,7 @@ export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, query: state.name, content: (
- {getStateGroupIcon(state.group, "16", "16", state.color)} + {state.name}
), @@ -58,9 +58,12 @@ export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, label={
{selectedOption ? ( - getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) + ) : currentDefaultState ? ( - getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color) + ) : ( )} diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx index 5084c61bde7..cf2cfe3b2db 100644 --- a/web/components/issues/sidebar-select/state.tsx +++ b/web/components/issues/sidebar-select/state.tsx @@ -9,7 +9,7 @@ import stateService from "services/state.service"; // ui import { Spinner, CustomSelect } from "components/ui"; // icons -import { getStateGroupIcon } from "components/icons"; +import { StateGroupIcon } from "components/icons"; // helpers import { getStatesList } from "helpers/state.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper"; @@ -42,17 +42,12 @@ export const SidebarStateSelect: React.FC = ({ value, onChange, disabled