style: pages theming (#912)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
9129a6cde2
commit
f2701a12ea
19 changed files with 167 additions and 169 deletions
|
|
@ -230,89 +230,87 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
|||
}, [createPageBlock, updatePageBlock, data, handleSubmit]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form
|
||||
className="divide-y rounded-[10px] border shadow"
|
||||
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
|
||||
>
|
||||
<div className="pt-2">
|
||||
<div className="flex justify-between">
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Title"
|
||||
register={register}
|
||||
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
|
||||
autoComplete="off"
|
||||
maxLength={255}
|
||||
/>
|
||||
</div>
|
||||
<div className="page-block-section relative -mt-2 text-gray-500">
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
render={({ field: { value } }) => (
|
||||
<RemirrorRichTextEditor
|
||||
value={
|
||||
!value || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
? watch("description_html")
|
||||
: value
|
||||
}
|
||||
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
|
||||
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
|
||||
placeholder="Write something..."
|
||||
customClassName="text-sm"
|
||||
noBorder
|
||||
borderOnFocus={false}
|
||||
/>
|
||||
<form
|
||||
className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
|
||||
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
|
||||
>
|
||||
<div className="pt-2">
|
||||
<div className="flex justify-between">
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Title"
|
||||
register={register}
|
||||
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
|
||||
autoComplete="off"
|
||||
maxLength={255}
|
||||
/>
|
||||
</div>
|
||||
<div className="page-block-section relative -mt-2 text-brand-secondary">
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
render={({ field: { value } }) => (
|
||||
<RemirrorRichTextEditor
|
||||
value={
|
||||
!value || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
? watch("description_html")
|
||||
: value
|
||||
}
|
||||
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
|
||||
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
|
||||
placeholder="Write something..."
|
||||
customClassName="text-sm"
|
||||
noBorder
|
||||
borderOnFocus={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="m-2 mt-6 flex">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
|
||||
}`}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
disabled={iAmFeelingLucky}
|
||||
>
|
||||
{iAmFeelingLucky ? (
|
||||
"Generating response..."
|
||||
) : (
|
||||
<>
|
||||
<SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<div className="m-2 mt-6 ml-2 flex">
|
||||
</button>
|
||||
{data && (
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
|
||||
}`}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
disabled={iAmFeelingLucky}
|
||||
className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
setGptAssistantModal();
|
||||
}}
|
||||
>
|
||||
{iAmFeelingLucky ? (
|
||||
"Generating response..."
|
||||
) : (
|
||||
<>
|
||||
<SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
|
||||
</>
|
||||
)}
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
AI
|
||||
</button>
|
||||
{data && (
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-2 ml-4 flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
setGptAssistantModal();
|
||||
}}
|
||||
>
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
AI
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 p-4">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
|
||||
{data
|
||||
? isSubmitting
|
||||
? "Updating..."
|
||||
: "Update block"
|
||||
: isSubmitting
|
||||
? "Adding..."
|
||||
: "Add block"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 p-4">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
|
||||
{data
|
||||
? isSubmitting
|
||||
? "Updating..."
|
||||
: "Update block"
|
||||
: isSubmitting
|
||||
? "Adding..."
|
||||
: "Add block"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IPage[]>(
|
||||
ALL_PAGES_LIST(projectId as string),
|
||||
ALL_PAGES_LIST(projectId.toString()),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === page.id) p.is_favorite = true;
|
||||
|
|
@ -77,7 +77,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
MY_PAGES_LIST(projectId as string),
|
||||
MY_PAGES_LIST(projectId.toString()),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === page.id) p.is_favorite = true;
|
||||
|
|
@ -87,17 +87,17 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
FAVORITE_PAGES_LIST(projectId as string),
|
||||
(prevData) => [page, ...(prevData as IPage[])],
|
||||
FAVORITE_PAGES_LIST(projectId.toString()),
|
||||
(prevData) => [page, ...(prevData ?? [])],
|
||||
false
|
||||
);
|
||||
|
||||
pagesService
|
||||
.addPageToFavorites(workspaceSlug as string, projectId as string, {
|
||||
.addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
|
||||
page: page.id,
|
||||
})
|
||||
.then(() => {
|
||||
mutate(RECENT_PAGES_LIST(projectId as string));
|
||||
mutate(RECENT_PAGES_LIST(projectId.toString()));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
|
|
@ -117,7 +117,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IPage[]>(
|
||||
ALL_PAGES_LIST(projectId as string),
|
||||
ALL_PAGES_LIST(projectId.toString()),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === page.id) p.is_favorite = false;
|
||||
|
|
@ -127,7 +127,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
MY_PAGES_LIST(projectId as string),
|
||||
MY_PAGES_LIST(projectId.toString()),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((p) => {
|
||||
if (p.id === page.id) p.is_favorite = false;
|
||||
|
|
@ -137,15 +137,15 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
FAVORITE_PAGES_LIST(projectId as string),
|
||||
FAVORITE_PAGES_LIST(projectId.toString()),
|
||||
(prevData) => (prevData ?? []).filter((p) => p.id !== page.id),
|
||||
false
|
||||
);
|
||||
|
||||
pagesService
|
||||
.removePageFromFavorites(workspaceSlug as string, projectId as string, page.id)
|
||||
.removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
|
||||
.then(() => {
|
||||
mutate(RECENT_PAGES_LIST(projectId as string));
|
||||
mutate(RECENT_PAGES_LIST(projectId.toString()));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
|
|
@ -165,25 +165,25 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IPage[]>(
|
||||
ALL_PAGES_LIST(projectId as string),
|
||||
ALL_PAGES_LIST(projectId.toString()),
|
||||
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
|
||||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
MY_PAGES_LIST(projectId as string),
|
||||
MY_PAGES_LIST(projectId.toString()),
|
||||
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
|
||||
false
|
||||
);
|
||||
mutate<IPage[]>(
|
||||
FAVORITE_PAGES_LIST(projectId as string),
|
||||
FAVORITE_PAGES_LIST(projectId.toString()),
|
||||
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
|
||||
false
|
||||
);
|
||||
|
||||
pagesService
|
||||
.patchPage(workspaceSlug as string, projectId as string, page.id, formData)
|
||||
.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData)
|
||||
.then(() => {
|
||||
mutate(RECENT_PAGES_LIST(projectId as string));
|
||||
mutate(RECENT_PAGES_LIST(projectId.toString()));
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -202,7 +202,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
{pages ? (
|
||||
pages.length > 0 ? (
|
||||
viewType === "list" ? (
|
||||
<ul role="list" className="divide-y">
|
||||
<ul role="list" className="divide-y divide-brand-base">
|
||||
{pages.map((page) => (
|
||||
<SinglePageListItem
|
||||
key={page.id}
|
||||
|
|
@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
))}
|
||||
</ul>
|
||||
) : viewType === "detailed" ? (
|
||||
<div className="divide-y rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
|
||||
{pages.map((page) => (
|
||||
<SinglePageDetailedItem
|
||||
key={page.id}
|
||||
|
|
@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
<div className="rounded-[10px] border border-brand-base">
|
||||
{pages.map((page) => (
|
||||
<SinglePageDetailedItem
|
||||
key={page.id}
|
||||
|
|
@ -261,6 +261,11 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
|||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : viewType === "detailed" ? (
|
||||
<Loader className="space-y-4">
|
||||
<Loader.Item height="150px" />
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<Loader className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Loader.Item height="150px" />
|
||||
|
|
|
|||
|
|
@ -300,15 +300,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`group relative ${
|
||||
snapshot.isDragging ? "rounded-md border-2 border-theme bg-white p-6 shadow-lg" : ""
|
||||
className={`group relative text-brand-secondary ${
|
||||
snapshot.isDragging ? "rounded-[10px] bg-brand-surface-1 p-6 shadow" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-gray-100 group-hover:!flex"
|
||||
className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-1 group-hover:!flex"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-[18px]" />
|
||||
|
|
@ -316,12 +316,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
</button>
|
||||
<div
|
||||
ref={actionSectionRef}
|
||||
className={`absolute top-4 right-0 hidden items-center gap-2 bg-white pl-4 group-hover:!flex ${
|
||||
className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
|
||||
isMenuActive ? "!flex" : ""
|
||||
}`}
|
||||
>
|
||||
{block.issue && block.sync && (
|
||||
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
|
||||
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-1 py-1 px-1.5 text-xs">
|
||||
{isSyncing ? (
|
||||
<ArrowPathIcon className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
|
|
@ -332,8 +332,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
|
||||
}`}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
disabled={iAmFeelingLucky}
|
||||
|
|
@ -348,7 +348,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
|
||||
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
|
||||
onClick={() => setGptAssistantModal((prevData) => !prevData)}
|
||||
>
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
|
|
@ -356,7 +356,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
|
||||
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
|
||||
onClick={() => setCreateBlockForm(true)}
|
||||
>
|
||||
<PencilIcon className="h-3.5 w-3.5" />
|
||||
|
|
@ -364,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
<CustomMenu
|
||||
customButton={
|
||||
<button
|
||||
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-gray-100"
|
||||
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
>
|
||||
<BoltIcon className="h-4.5 w-3.5" />
|
||||
|
|
@ -404,7 +404,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
</div>
|
||||
<div
|
||||
className={`flex items-start gap-2 ${
|
||||
snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
|
||||
snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
|
|
@ -417,19 +417,19 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
|
|||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
|
||||
>
|
||||
<a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
|
||||
<LayerDiagonalIcon height="16" width="16" color="black" />
|
||||
<a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs">
|
||||
<LayerDiagonalIcon height="16" width="16" />
|
||||
{projectDetails?.identifier}-{block.issue_detail?.sequence_id}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="max-w-[1000px] overflow-hidden text-base font-medium">
|
||||
<h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
|
||||
{block.name}
|
||||
</h3>
|
||||
</div>
|
||||
{block?.description_stripped.length > 0 && (
|
||||
<p className="mt-3 h-5 truncate text-sm font-normal text-gray-500">
|
||||
<p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
|
||||
{block.description_stripped}
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
|||
<a className="block p-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="mr-2 truncate font-medium">{truncateText(page.name, 75)}</p>
|
||||
<p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
|
|
@ -175,7 +175,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
|||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
|
||||
<div className="relative mt-2 space-y-2 text-sm text-brand-secondary">
|
||||
{page.blocks.length > 0
|
||||
? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
|
||||
: null}
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
|||
<li>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<a>
|
||||
<div className="relative rounded p-4 hover:bg-brand-surface-1">
|
||||
<div className="relative rounded p-4 text-brand-secondary hover:bg-brand-base">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DocumentTextIcon className="h-4 w-4" />
|
||||
<p className="mr-2 truncate text-base font-medium text-gray-800">
|
||||
<p className="mr-2 truncate text-sm text-brand-base">
|
||||
{truncateText(page.name, 75)}
|
||||
</p>
|
||||
{page.label_details.length > 0 &&
|
||||
|
|
@ -64,16 +64,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
|||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
|
||||
style={{
|
||||
backgroundColor: `${
|
||||
label?.color && label.color !== "" ? label.color : "#000000"
|
||||
}20`,
|
||||
backgroundColor: `${label?.color}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor:
|
||||
label?.color && label.color !== "" ? label.color : "#000000",
|
||||
backgroundColor: label?.color,
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue