From c72ff782ac7376103983b3c975fe197d9f9b7d06 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 20 Jul 2023 14:17:21 +0530 Subject: [PATCH] feat: add new icons package (#1586) * feat: add material icons package * chore: replace issue view icons --- .../core/filters/issues-view-filter.tsx | 36 ++-- .../notifications/notification-popover.tsx | 4 +- .../components/onboarding/tour/sidebar.tsx | 31 +-- .../project/single-sidebar-project.tsx | 38 ++-- apps/app/components/ui/custom-menu.tsx | 187 ------------------ .../components/ui/dropdowns/custom-menu.tsx | 18 +- .../app/components/workspace/help-section.tsx | 42 ++-- .../app/components/workspace/sidebar-menu.tsx | 25 ++- apps/app/package.json | 2 + apps/app/pages/[workspaceSlug]/index.tsx | 8 +- .../pages/[workspaceSlug]/settings/index.tsx | 5 +- yarn.lock | 157 +++++++++++++++ 12 files changed, 282 insertions(+), 271 deletions(-) delete mode 100644 apps/app/components/ui/custom-menu.tsx diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx index 722dfc1a2..d1a6281b1 100644 --- a/apps/app/components/core/filters/issues-view-filter.tsx +++ b/apps/app/components/core/filters/issues-view-filter.tsx @@ -11,14 +11,16 @@ import useEstimateOption from "hooks/use-estimate-option"; // components import { SelectFilters } from "components/views"; // ui -import { CustomMenu, Icon, ToggleSwitch, Tooltip } from "components/ui"; +import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui"; // icons +import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { - ChevronDownIcon, - ListBulletIcon, - Squares2X2Icon, - CalendarDaysIcon, -} from "@heroicons/react/24/outline"; + CalendarMonthOutlined, + FormatListBulletedOutlined, + GridViewOutlined, + TableChartOutlined, + WaterfallChartOutlined, +} from "@mui/icons-material"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { checkIfArraysHaveSameElements } from "helpers/array.helper"; @@ -27,26 +29,26 @@ import { Properties, TIssueViewOptions } from "types"; // constants import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue"; -const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [ +const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [ { type: "list", - icon: , + Icon: FormatListBulletedOutlined, }, { type: "kanban", - icon: , + Icon: GridViewOutlined, }, { type: "calendar", - icon: , + Icon: CalendarMonthOutlined, }, { type: "spreadsheet", - icon: , + Icon: TableChartOutlined, }, { type: "gantt_chart", - icon: , + Icon: WaterfallChartOutlined, }, ]; @@ -98,7 +100,12 @@ export const IssuesFilterView: React.FC = () => { }`} onClick={() => setIssueView(option.type)} > - {option.icon} + ))} @@ -177,7 +184,6 @@ export const IssuesFilterView: React.FC = () => { GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty) ?.name ?? "Select" } - width="lg" > {GROUP_BY_OPTIONS.map((option) => issueView === "kanban" && option.key === null ? null : ( @@ -198,7 +204,6 @@ export const IssuesFilterView: React.FC = () => { ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ?? "Select" } - width="lg" > {ORDER_BY_OPTIONS.map((option) => groupByProperty === "priority" && option.key === "priority" ? null : ( @@ -223,7 +228,6 @@ export const IssuesFilterView: React.FC = () => { FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type) ?.name ?? "Select" } - width="lg" > {FILTER_ISSUE_OPTIONS.map((option) => ( { : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80" } ${sidebarCollapse ? "justify-center" : ""}`} > - + {sidebarCollapse ? null : Notifications} {totalNotificationCount && totalNotificationCount > 0 ? ( diff --git a/apps/app/components/onboarding/tour/sidebar.tsx b/apps/app/components/onboarding/tour/sidebar.tsx index 99832c166..dce49f098 100644 --- a/apps/app/components/onboarding/tour/sidebar.tsx +++ b/apps/app/components/onboarding/tour/sidebar.tsx @@ -1,31 +1,37 @@ -// ui -import { Icon } from "components/ui"; +// icons +import { + ArticleOutlined, + ContrastOutlined, + DatasetOutlined, + FilterNoneOutlined, + PhotoFilterOutlined, +} from "@mui/icons-material"; // types import { TTourSteps } from "./root"; const sidebarOptions: { key: TTourSteps; - icon: string; + Icon: any; }[] = [ { key: "issues", - icon: "stack", + Icon: FilterNoneOutlined, }, { key: "cycles", - icon: "contrast", + Icon: ContrastOutlined, }, { key: "modules", - icon: "dataset", + Icon: DatasetOutlined, }, { key: "views", - icon: "photo_filter", + Icon: PhotoFilterOutlined, }, { key: "pages", - icon: "article", + Icon: ArticleOutlined, }, ]; @@ -52,11 +58,10 @@ export const TourSidebar: React.FC = ({ step, setStep }) => ( }`} onClick={() => setStep(option.key)} > - @@ -248,13 +258,17 @@ export const SingleSidebarProject: React.FC = ({ disabled={!sidebarCollapse} >
- + {!sidebarCollapse && item.name}
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx deleted file mode 100644 index ab11ca16f..000000000 --- a/apps/app/components/ui/custom-menu.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import React from "react"; -// next -import Link from "next/link"; -// headless ui -import { Menu, Transition } from "@headlessui/react"; -// icons -import { ChevronDownIcon } from "@heroicons/react/24/outline"; -import { Icon } from "./icon"; - -type Props = { - children: React.ReactNode; - label?: string | JSX.Element; - className?: string; - ellipsis?: boolean; - verticalEllipsis?: boolean; - height?: "sm" | "md" | "rg" | "lg"; - width?: "sm" | "md" | "lg" | "xl" | "auto"; - textAlignment?: "left" | "center" | "right"; - noBorder?: boolean; - noChevron?: boolean; - position?: "left" | "right"; - verticalPosition?: "top" | "bottom"; - menuItemsClassName?: string; - customButton?: JSX.Element; - menuItemsWhiteBg?: boolean; -}; - -type MenuItemProps = { - children: JSX.Element | string; - renderAs?: "button" | "a"; - href?: string; - onClick?: (args?: any) => void; - className?: string; -}; - -const CustomMenu = ({ - children, - label, - className = "", - ellipsis = false, - verticalEllipsis = false, - height = "md", - width = "auto", - textAlignment, - noBorder = false, - noChevron = false, - position = "right", - verticalPosition = "bottom", - menuItemsClassName = "", - customButton, - menuItemsWhiteBg = false, -}: Props) => ( - - {({ open }) => ( - <> - {customButton ? ( - {customButton} - ) : ( -
- {ellipsis || verticalEllipsis ? ( - - - - ) : ( - - {label} - {!noChevron && - )} -
- )} - - - -
{children}
- - - - )} - -); - -const MenuItem: React.FC = ({ - children, - renderAs, - href, - onClick, - className = "", -}) => ( - - {({ active, close }) => - renderAs === "a" ? ( - - - {children} - - - ) : ( - - ) - } - -); - -CustomMenu.MenuItem = MenuItem; - -export { CustomMenu }; diff --git a/apps/app/components/ui/dropdowns/custom-menu.tsx b/apps/app/components/ui/dropdowns/custom-menu.tsx index e33583ce0..315349195 100644 --- a/apps/app/components/ui/dropdowns/custom-menu.tsx +++ b/apps/app/components/ui/dropdowns/custom-menu.tsx @@ -4,9 +4,10 @@ import Link from "next/link"; // headless ui import { Menu, Transition } from "@headlessui/react"; +// ui +import { DropdownProps } from "components/ui"; // icons -import { DropdownProps, Icon } from "components/ui"; -import { ChevronDownIcon } from "@heroicons/react/24/outline"; +import { ExpandMoreOutlined, MoreHorizOutlined } from "@mui/icons-material"; export type CustomMenuProps = DropdownProps & { children: React.ReactNode; @@ -53,8 +54,8 @@ const CustomMenu = ({ disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80" } ${buttonClassName}`} > - @@ -72,7 +73,14 @@ const CustomMenu = ({ } ${buttonClassName}`} > {label} - {!noChevron &&