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

8
apps/web/core/components/modules/analytics-sidebar/root.tsx
View file

@ -4,7 +4,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 { CalendarClock, ChevronDown, ChevronRight, Info, Plus, SquareUser, Users } from "lucide-react";
import { ChevronDown, ChevronRight, Info, Plus, SquareUser } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
import {
MODULE_STATUS,
@ -16,7 +16,7 @@ import {
} from "@plane/constants";
// plane types
import { useTranslation } from "@plane/i18n";
import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, ModuleStatusIcon, WorkItemsIcon, StartDatePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// plane ui
@ -303,7 +303,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-5 pb-6 pt-2.5">
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" />
<StartDatePropertyIcon className="h-4 w-4" />
<span className="text-base">{t("date_range")}</span>
</div>
<div className="h-7">
@ -371,7 +371,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<Users className="h-4 w-4" />
<MembersPropertyIcon className="h-4 w-4" />
<span className="text-base">{t("members")}</span>
</div>
<Controller

12
apps/web/core/components/modules/module-layout-icon.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import type { TModuleLayoutOptions } from "@plane/types";
import { cn } from "@plane/utils";
@ -16,9 +16,9 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
// get Layout icon
const icons = {
list: List,
board: LayoutGrid,
gantt: GanttChartSquare,
list: ListLayoutIcon,
board: GridLayoutIcon,
gantt: TimelineLayoutIcon,
};
const Icon = icons[layoutType ?? "list"];
@ -28,10 +28,10 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
<>
{withContainer ? (
<div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
<Icon size={size} className={cn(className)} />
<Icon width={size} height={size} className={cn(className)} />
</div>
) : (
<Icon size={size} className={cn("flex-shrink-0", className)} />
<Icon width={size} height={size} className={cn("flex-shrink-0", className)} />
)}
</>
);

4
apps/web/core/components/modules/select/status.tsx
View file

@ -7,7 +7,7 @@ import type { FieldError, Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/propel/icons";
import { StatePropertyIcon, ModuleStatusIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -37,7 +37,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
{value ? (
<ModuleStatusIcon status={value} />
) : (
<DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
)}
{(selectedValue && t(selectedValue?.i18n_label)) ?? (
<span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>

4
apps/web/core/components/modules/sidebar-select/select-status.tsx
View file

@ -7,7 +7,7 @@ import type { Control, UseFormWatch } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon } from "@plane/propel/icons";
import { StatePropertyIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -26,7 +26,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<p>Status</p>
</div>
<div className="sm:basis-1/2">