refactor: actions icon migration (#8219)
* chore: gitignore updated * chore: check icon added to propel package * feat: search icon migration * chore: check icon migration * chore: plus icon added to propel package * chore: code refactor * chore: plus icon migration and code refactor * chore: trash icon added to propel package * chore: code refactor * chore: trash icon migration * chore: edit icon added to propel package * chore: new tab icon added to propel package * chore: edit icon migration * chore: newtab icon migration * chore: lock icon added to propel package * chore: lock icon migration * chore: globe icon added to propel package * chore: globe icon migration * chore: copy icon added to propel package * chore: copy icon migration * chore: link icon added to propel package * chore: link icon migration * chore: link icon migration * chore: info icon added to propel package * chore: code refactor * chore: code refactor * chore: code refactor * chore: code refactor
This commit is contained in:
parent
92ac28fcb8
commit
2980c2d76b
215 changed files with 932 additions and 729 deletions
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Info, Plus, SquareUser } from "lucide-react";
|
||||
import { Info, SquareUser } from "lucide-react";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import {
|
||||
MODULE_STATUS,
|
||||
|
|
@ -15,6 +15,7 @@ import {
|
|||
// plane types
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import {
|
||||
PlusIcon,
|
||||
MembersPropertyIcon,
|
||||
ModuleStatusIcon,
|
||||
WorkItemsIcon,
|
||||
|
|
@ -459,7 +460,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
{t("add_link")}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -485,7 +486,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
{t("add_link")}
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { useCallback, useRef, useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
// icons
|
||||
import { ListFilter, Search } from "lucide-react";
|
||||
import { ListFilter } from "lucide-react";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
|
||||
// plane helpers
|
||||
// types
|
||||
import type { TModuleFilters } from "@plane/types";
|
||||
|
|
@ -91,7 +91,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
|
|||
inputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<SearchIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
|
|
@ -102,7 +102,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
|
|||
}
|
||||
)}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<SearchIcon className="h-3.5 w-3.5" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Search } from "lucide-react";
|
||||
// plane imports
|
||||
import type { TModuleStatus } from "@plane/propel/icons";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
// plane imports
|
||||
import { CloseIcon, SearchIcon } from "@plane/propel/icons";
|
||||
import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
|
||||
// components
|
||||
import { FilterOption } from "@/components/issues/issue-layouts/filters";
|
||||
|
|
@ -38,7 +37,7 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
|
|||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="bg-surface-1 p-2.5 pb-0">
|
||||
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
|
||||
<Search className="text-placeholder" size={12} strokeWidth={2} />
|
||||
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
|
||||
import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
|
||||
import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { getButtonStyling } from "@plane/propel/button";
|
||||
import { ChevronDownIcon } from "@plane/propel/icons";
|
||||
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
|
||||
import type { TModuleOrderByOptions } from "@plane/types";
|
||||
// ui
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
|
|
@ -49,7 +49,7 @@ export function ModuleOrderByDropdown(props: Props) {
|
|||
}}
|
||||
>
|
||||
{t(option.i18n_label)}
|
||||
{value?.includes(option.key) && <Check className="h-3 w-3" />}
|
||||
{value?.includes(option.key) && <CheckIcon className="h-3 w-3" />}
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
{!isManual && (
|
||||
|
|
@ -62,7 +62,7 @@ export function ModuleOrderByDropdown(props: Props) {
|
|||
}}
|
||||
>
|
||||
Ascending
|
||||
{!isDescending && <Check className="h-3 w-3" />}
|
||||
{!isDescending && <CheckIcon className="h-3 w-3" />}
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
className="flex items-center justify-between gap-2"
|
||||
|
|
@ -71,7 +71,7 @@ export function ModuleOrderByDropdown(props: Props) {
|
|||
}}
|
||||
>
|
||||
Descending
|
||||
{isDescending && <Check className="h-3 w-3" />}
|
||||
{isDescending && <CheckIcon className="h-3 w-3" />}
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { observer } from "mobx-react";
|
||||
import { Copy, Pencil, Trash2 } from "lucide-react";
|
||||
// plane types
|
||||
|
||||
import { MODULE_TRACKER_ELEMENTS } from "@plane/constants";
|
||||
import { CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
|
||||
// plane types
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import type { ILinkDetails } from "@plane/types";
|
||||
|
|
@ -67,7 +68,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
handleEditLink();
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-3 stroke-[1.5]" />
|
||||
<EditIcon className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
|
|
@ -75,7 +76,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
onClick={() => copyToClipboard(link.url)}
|
||||
className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
|
||||
>
|
||||
<Copy className="size-3 stroke-[1.5]" />
|
||||
<CopyIcon className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
{isEditingAllowed && (
|
||||
<button
|
||||
|
|
@ -88,7 +89,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
handleDeleteLink();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-3 stroke-[1.5]" />
|
||||
<TrashIcon className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import React, { useRef } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useParams, usePathname, useSearchParams } from "next/navigation";
|
||||
// icons
|
||||
import { Check, Info } from "lucide-react";
|
||||
import { Info } from "lucide-react";
|
||||
import { CheckIcon } from "@plane/propel/icons";
|
||||
// ui
|
||||
import { CircularProgressIndicator } from "@plane/ui";
|
||||
// components
|
||||
|
|
@ -72,12 +73,12 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
|
|||
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
|
||||
{completedModuleCheck ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
<CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
) : (
|
||||
<span className="text-13 text-accent-primary">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
<CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
) : (
|
||||
<span className="text-9 text-tertiary">{`${progress}%`}</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ import type { FC } from "react";
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ListFilter, Search } from "lucide-react";
|
||||
import { ListFilter } from "lucide-react";
|
||||
// plane helpers
|
||||
import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// types
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import type { TModuleFilters } from "@plane/types";
|
||||
// ui
|
||||
|
|
@ -105,7 +105,7 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
|||
setIsSearchOpen(true);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
icon={Search}
|
||||
icon={SearchIcon}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
|
|
@ -116,7 +116,7 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
|||
}
|
||||
)}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<SearchIcon className="h-3.5 w-3.5" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue