chore: icon revamp and refactor (#2447)

* chore: svg icons added in plane/ui package

* chore: swap priority and state icon with plane/ui icons

* chore: replace core folder icons with lucide and plane ui icons

* style: priority icon size

* chore: replace icons with lucide and plane/ui icons

* chore: replace cycle folder icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* fix: build error

* fix: build error

* fix: build error
This commit is contained in:
Anmol Singh Bhatia 2023-10-16 20:27:22 +05:30 committed by GitHub
parent 1fc5d2bd45
commit 651b252c23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
270 changed files with 2567 additions and 1480 deletions

View file

@ -12,18 +12,20 @@ import { CycleDeleteModal } from "./cycle-delete-modal";
// ui
import { CustomMenu } from "components/ui";
import { AssigneesList } from "components/ui/avatar";
import { Tooltip, LinearProgressIndicator } from "@plane/ui";
import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import {
TargetIcon,
ContrastIcon,
PersonRunningIcon,
ArrowRightIcon,
TriangleExclamationIcon,
AlarmClockIcon,
} from "components/icons";
import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
AlarmClock,
AlertTriangle,
ArrowRight,
CalendarDays,
ChevronDown,
LinkIcon,
Pencil,
Star,
Target,
Trash2,
} from "lucide-react";
// helpers
import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -202,12 +204,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
>
{cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" />
<RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap">
<AlarmClockIcon className="h-4 w-4" />
<AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
</span>
) : cycleStatus === "completed" ? (
@ -219,7 +221,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}`}
>
<span>
<TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
<AlertTriangle className="h-3.5 w-3.5" />
</span>
</Tooltip>
)}{" "}
@ -231,11 +233,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</span>
{cycle.is_favorite ? (
<button onClick={handleRemoveFromFavorites}>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button>
) : (
<button onClick={handleAddToFavorites}>
<StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button>
)}
</span>
@ -244,12 +246,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
{cycleStatus !== "draft" && (
<>
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" />
<CalendarDays className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<ArrowRightIcon className="h-4 w-4" />
<ArrowRight className="h-4 w-4" />
<div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" />
<Target className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
</>
@ -298,7 +300,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}}
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
>
<PencilIcon className="h-4 w-4" />
<Pencil className="h-4 w-4" />
</button>
)}
@ -311,7 +313,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
}}
>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<Trash2 className="h-4 w-4" />
<span>Delete cycle</span>
</span>
</CustomMenu.MenuItem>
@ -375,7 +377,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</Tooltip>
<Disclosure.Button>
<span className="p-1">
<ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</span>
</Disclosure.Button>
</div>