binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5188 | WEB-5190] chore: layout and properties icon revamp (#7980)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-24 19:53:36 +05:30 • committed by GitHub
parent 33b6405695
commit d71dfe8f86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
115 changed files with 1362 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/web/core/components/dropdowns/date-range.tsx
View file

@ -5,13 +5,14 @@ import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { ArrowRight, CalendarCheck2, CalendarDays, X } from "lucide-react";
import { ArrowRight, CalendarDays, X } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
// ui
import type { DateRange, Matcher } from "@plane/propel/calendar";
import { Calendar } from "@plane/propel/calendar";
import { DueDatePropertyIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn, renderFormattedDate } from "@plane/utils";
// helpers
@ -236,7 +237,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
buttonToDateClassName
)}
>
{!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
{!hideIcon.to && <DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
</span>
{isClearable && !disabled && hasDisplayedDates && (

11
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -3,10 +3,11 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -104,7 +105,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: `${currentEstimatePoint?.value}`,
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">
{currentActiveEstimate?.type === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
@ -121,7 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: t("project_settings.estimates.no_estimate"),
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
),
@ -189,7 +190,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
{!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">
{selectedEstimate
@ -249,7 +250,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
>
{/* NOTE: This condition renders when estimates are not enabled for the project */}
<div className="flex-grow flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
</div>

8
apps/web/core/components/dropdowns/member/avatar.tsx
View file

@ -2,7 +2,7 @@
import { observer } from "mobx-react";
import type { LucideIcon } from "lucide-react";
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// plane ui
import { Avatar, AvatarGroup } from "@plane/ui";
import { cn, getFileURL } from "@plane/utils";
@ -49,5 +49,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
}
}
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
);
});