thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: pages theming (#912)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-21 02:15:21 +05:30 committed by GitHub
parent 9129a6cde2
commit f2701a12ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 167 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/core/board-view/single-board.tsx
View File

@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`relative h-full overflow-y-auto p-1 ${ className={`relative h-full overflow-y-auto p-1 ${
snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : "" snapshot.isDraggingOver ? "bg-brand-base/20" : ""
} ${!isCollapsed ? "hidden" : "block"}`} } ${!isCollapsed ? "hidden" : "block"}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
@ -96,10 +96,12 @@ export const SingleBoard: React.FC<Props> = ({
<div <div
className={`absolute ${ className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden" snapshot.isDraggingOver ? "block" : "hidden"
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs`} } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
> >
This board is ordered by{" "} This board is ordered by{" "}
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")} {replaceUnderscoreIfSnakeCase(
orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
)}
</div> </div>
</> </>
)} )}

2
apps/app/components/core/board-view/single-issue.tsx
View File

@ -261,7 +261,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <div
className={`mb-3 rounded bg-brand-surface-1 shadow ${ className={`mb-3 rounded bg-brand-base shadow ${
snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : "" snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
}`} }`}
ref={provided.innerRef} ref={provided.innerRef}

4
apps/app/components/core/issues-view.tsx
View File

@ -436,8 +436,8 @@ export const IssuesView: React.FC<Props> = ({
<div <div
className={`${ className={`${
trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0" trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
} fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${ } fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-red-500/20 p-3 text-xs font-medium italic text-red-500 ${
snapshot.isDraggingOver ? "bg-red-500 text-white" : "" snapshot.isDraggingOver ? "bg-red-500/100 text-white" : ""
} duration-200`} } duration-200`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}

13
apps/app/components/core/list-view/single-issue.tsx
View File

@ -44,7 +44,6 @@ import {
MODULE_ISSUES_WITH_PARAMS, MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS, PROJECT_ISSUES_LIST_WITH_PARAMS,
} from "constants/fetch-keys"; } from "constants/fetch-keys";
import { DIVIDER } from "@blueprintjs/core/lib/esm/common/classes";
type Props = { type Props = {
type?: string; type?: string;
@ -217,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <div
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base bg-brand-surface-1 last:border-b-0" className="flex items-center justify-between gap-2 border-b border-brand-base px-4 py-2.5 last:border-b-0"
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu(true); setContextMenu(true);
@ -269,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex items-center gap-1 rounded-md border border-brand-base text-brand-secondary px-3 py-1 text-xs shadow-sm"> <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}
@ -278,7 +277,7 @@ export const SingleListIssue: React.FC<Props> = ({
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span <span
key={label.id} key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base text-brand-secondary px-2 py-0.5 text-xs" className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
> >
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full"
@ -310,7 +309,7 @@ export const SingleListIssue: React.FC<Props> = ({
/> />
)} )}
{properties.link && ( {properties.link && (
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base"> <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-gray-500"> <div className="flex items-center gap-1 text-gray-500">
<LinkIcon className="h-3.5 w-3.5 text-gray-500" /> <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
@ -320,10 +319,10 @@ export const SingleListIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.attachment_count && ( {properties.attachment_count && (
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base"> <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-gray-500"> <div className="flex items-center gap-1 text-gray-500">
<PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" /> <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
{issue.attachment_count} {issue.attachment_count}
</div> </div>
</Tooltip> </Tooltip>

4
apps/app/components/core/list-view/single-list.tsx
View File

@ -211,9 +211,7 @@ export const SingleList: React.FC<Props> = ({
/> />
)) ))
) : ( ) : (
<p className="bg-brand-surface-1 px-4 py-2.5 text-sm text-brand-secondary"> <p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p>
No issues.
</p>
) )
) : ( ) : (
<div className="flex h-full w-full items-center justify-center">Loading...</div> <div className="flex h-full w-full items-center justify-center">Loading...</div>

6
apps/app/components/issues/activity.tsx
View File

@ -244,7 +244,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
activityItem.field !== "link" && activityItem.field !== "link" &&
activityItem.field !== "estimate" activityItem.field !== "estimate"
) { ) {
value = <span className="text-gray-600">created this issue.</span>; value = <span className="text-brand-secondary">created this issue.</span>;
} else if (activityItem.field === "state") { } else if (activityItem.field === "state") {
value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None"; value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
} else if (activityItem.field === "labels") { } else if (activityItem.field === "labels") {
@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1"> <div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? ( {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<span <span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-1" className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-base"
aria-hidden="true" aria-hidden="true"
/> />
) : null} ) : null}
@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white"> <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-base ring-white">
{activityItem.field ? ( {activityItem.field ? (
activityDetails[activityItem.field as keyof typeof activityDetails] activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon ?.icon

12
apps/app/components/issues/view-select/priority.tsx
View File

@ -52,18 +52,18 @@ export const ViewPrioritySelect: React.FC<Props> = ({
customButton={ customButton={
<button <button
type="button" type="button"
className={`grid h-6 w-6 place-items-center rounded border border-brand-base ${ className={`grid h-6 w-6 place-items-center rounded border ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center shadow-sm ${ } items-center shadow-sm ${
issue.priority === "urgent" issue.priority === "urgent"
? "text-red-600" ? "border-red-500/20 bg-red-500/20 text-red-500"
: issue.priority === "high" : issue.priority === "high"
? "text-orange-500" ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: issue.priority === "medium" : issue.priority === "medium"
? "text-yellow-500" ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
: issue.priority === "low" : issue.priority === "low"
? "bg-green-100 text-green-500" ? "border-green-500/20 bg-green-500/20 text-green-500"
: "" : "border-brand-base"
}`} }`}
> >
<Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}> <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>

14
apps/app/components/pages/create-update-block-inline.tsx
View File

@ -230,9 +230,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
}, [createPageBlock, updatePageBlock, data, handleSubmit]); }, [createPageBlock, updatePageBlock, data, handleSubmit]);
return ( return (
<div>
<form <form
className="divide-y rounded-[10px] border shadow" className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)} onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
> >
<div className="pt-2"> <div className="pt-2">
@ -247,7 +246,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
maxLength={255} maxLength={255}
/> />
</div> </div>
<div className="page-block-section relative -mt-2 text-gray-500"> <div className="page-block-section relative -mt-2 text-brand-secondary">
<Controller <Controller
name="description" name="description"
control={control} control={control}
@ -267,11 +266,11 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
/> />
)} )}
/> />
<div className="m-2 mt-6 ml-2 flex"> <div className="m-2 mt-6 flex">
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover: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-gray-100" : "" iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky} disabled={iAmFeelingLucky}
@ -287,7 +286,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
{data && ( {data && (
<button <button
type="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" className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
onClick={() => { onClick={() => {
onClose(); onClose();
setGptAssistantModal(); setGptAssistantModal();
@ -313,6 +312,5 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
</PrimaryButton> </PrimaryButton>
</div> </div>
</form> </form>
</div>
); );
}; };

47
apps/app/components/pages/pages-view.tsx
View File

@ -47,9 +47,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { data: people } = useSWR( const { data: people } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
workspaceSlug && projectId workspaceSlug && projectId
? () => projectService.projectMembers(workspaceSlug as string, projectId as string) ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
: null : null
); );
@ -67,7 +67,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
mutate<IPage[]>( mutate<IPage[]>(
ALL_PAGES_LIST(projectId as string), ALL_PAGES_LIST(projectId.toString()),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === page.id) p.is_favorite = true; if (p.id === page.id) p.is_favorite = true;
@ -77,7 +77,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
MY_PAGES_LIST(projectId as string), MY_PAGES_LIST(projectId.toString()),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === page.id) p.is_favorite = true; if (p.id === page.id) p.is_favorite = true;
@ -87,17 +87,17 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
FAVORITE_PAGES_LIST(projectId as string), FAVORITE_PAGES_LIST(projectId.toString()),
(prevData) => [page, ...(prevData as IPage[])], (prevData) => [page, ...(prevData ?? [])],
false false
); );
pagesService pagesService
.addPageToFavorites(workspaceSlug as string, projectId as string, { .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
page: page.id, page: page.id,
}) })
.then(() => { .then(() => {
mutate(RECENT_PAGES_LIST(projectId as string)); mutate(RECENT_PAGES_LIST(projectId.toString()));
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Success!", title: "Success!",
@ -117,7 +117,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
mutate<IPage[]>( mutate<IPage[]>(
ALL_PAGES_LIST(projectId as string), ALL_PAGES_LIST(projectId.toString()),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === page.id) p.is_favorite = false; if (p.id === page.id) p.is_favorite = false;
@ -127,7 +127,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
MY_PAGES_LIST(projectId as string), MY_PAGES_LIST(projectId.toString()),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === page.id) p.is_favorite = false; if (p.id === page.id) p.is_favorite = false;
@ -137,15 +137,15 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
FAVORITE_PAGES_LIST(projectId as string), FAVORITE_PAGES_LIST(projectId.toString()),
(prevData) => (prevData ?? []).filter((p) => p.id !== page.id), (prevData) => (prevData ?? []).filter((p) => p.id !== page.id),
false false
); );
pagesService pagesService
.removePageFromFavorites(workspaceSlug as string, projectId as string, page.id) .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
.then(() => { .then(() => {
mutate(RECENT_PAGES_LIST(projectId as string)); mutate(RECENT_PAGES_LIST(projectId.toString()));
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Success!", title: "Success!",
@ -165,25 +165,25 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
mutate<IPage[]>( mutate<IPage[]>(
ALL_PAGES_LIST(projectId as string), ALL_PAGES_LIST(projectId.toString()),
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
MY_PAGES_LIST(projectId as string), MY_PAGES_LIST(projectId.toString()),
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
false false
); );
mutate<IPage[]>( mutate<IPage[]>(
FAVORITE_PAGES_LIST(projectId as string), FAVORITE_PAGES_LIST(projectId.toString()),
(prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })), (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
false false
); );
pagesService pagesService
.patchPage(workspaceSlug as string, projectId as string, page.id, formData) .patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData)
.then(() => { .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 ? (
pages.length > 0 ? ( pages.length > 0 ? (
viewType === "list" ? ( viewType === "list" ? (
<ul role="list" className="divide-y"> <ul role="list" className="divide-y divide-brand-base">
{pages.map((page) => ( {pages.map((page) => (
<SinglePageListItem <SinglePageListItem
key={page.id} key={page.id}
@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))} ))}
</ul> </ul>
) : viewType === "detailed" ? ( ) : 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) => ( {pages.map((page) => (
<SinglePageDetailedItem <SinglePageDetailedItem
key={page.id} key={page.id}
@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))} ))}
</div> </div>
) : ( ) : (
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2"> <div className="rounded-[10px] border border-brand-base">
{pages.map((page) => ( {pages.map((page) => (
<SinglePageDetailedItem <SinglePageDetailedItem
key={page.id} key={page.id}
@ -261,6 +261,11 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </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 className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<Loader.Item height="150px" /> <Loader.Item height="150px" />

30
apps/app/components/pages/single-page-block.tsx
View File

@ -300,15 +300,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</div> </div>
) : ( ) : (
<div <div
className={`group relative ${ className={`group relative text-brand-secondary ${
snapshot.isDragging ? "rounded-md border-2 border-theme bg-white p-6 shadow-lg" : "" snapshot.isDragging ? "rounded-[10px] bg-brand-surface-1 p-6 shadow" : ""
}`} }`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
> >
<button <button
type="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} {...provided.dragHandleProps}
> >
<EllipsisVerticalIcon className="h-[18px]" /> <EllipsisVerticalIcon className="h-[18px]" />
@ -316,12 +316,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button> </button>
<div <div
ref={actionSectionRef} 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" : "" isMenuActive ? "!flex" : ""
}`} }`}
> >
{block.issue && block.sync && ( {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 ? ( {isSyncing ? (
<ArrowPathIcon className="h-3 w-3 animate-spin" /> <ArrowPathIcon className="h-3 w-3 animate-spin" />
) : ( ) : (
@ -332,8 +332,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
)} )}
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover: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-gray-100" : "" iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky} disabled={iAmFeelingLucky}
@ -348,7 +348,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button> </button>
<button <button
type="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)} onClick={() => setGptAssistantModal((prevData) => !prevData)}
> >
<SparklesIcon className="h-4 w-4" /> <SparklesIcon className="h-4 w-4" />
@ -356,7 +356,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button> </button>
<button <button
type="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)} onClick={() => setCreateBlockForm(true)}
> >
<PencilIcon className="h-3.5 w-3.5" /> <PencilIcon className="h-3.5 w-3.5" />
@ -364,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<CustomMenu <CustomMenu
customButton={ customButton={
<button <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)} onClick={() => setIsMenuActive(!isMenuActive)}
> >
<BoltIcon className="h-4.5 w-3.5" /> <BoltIcon className="h-4.5 w-3.5" />
@ -404,7 +404,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</div> </div>
<div <div
className={`flex items-start gap-2 ${ 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 <div
@ -417,19 +417,19 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`} 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"> <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" color="black" /> <LayerDiagonalIcon height="16" width="16" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id} {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a> </a>
</Link> </Link>
</div> </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} {block.name}
</h3> </h3>
</div> </div>
{block?.description_stripped.length > 0 && ( {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} {block.description_stripped}
</p> </p>
)} )}

4
apps/app/components/pages/single-page-detailed-item.tsx
View File

@ -52,7 +52,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
<a className="block p-4"> <a className="block p-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center 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.length > 0 &&
page.label_details.map((label) => ( page.label_details.map((label) => (
<div <div
@ -175,7 +175,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
</CustomMenu> </CustomMenu>
</div> </div>
</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.length > 0
? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
: null} : null}

11
apps/app/components/pages/single-page-list-item.tsx
View File

@ -51,11 +51,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<li> <li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a> <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 items-center justify-between">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<DocumentTextIcon className="h-4 w-4" /> <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)} {truncateText(page.name, 75)}
</p> </p>
{page.label_details.length > 0 && {page.label_details.length > 0 &&
@ -64,16 +64,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
key={label.id} key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs" className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
style={{ style={{
backgroundColor: `${ backgroundColor: `${label?.color}20`,
label?.color && label.color !== "" ? label.color : "#000000"
}20`,
}} }}
> >
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: backgroundColor: label?.color,
label?.color && label.color !== "" ? label.color : "#000000",
}} }}
/> />
{label.name} {label.name}

2
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
> >
<Menu.Items <Menu.Items
static static
className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg focus:outline-none"
> >
{options.map((option) => ( {options.map((option) => (
<div className="relative p-1" key={option.id}> <div className="relative p-1" key={option.id}>

4
apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
View File

@ -121,9 +121,9 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8" noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
} ${ } ${
bg === "primary" bg === "primary"
? "bg-brand-sidebar"
: bg === "secondary"
? "bg-brand-surface-1" ? "bg-brand-surface-1"
: bg === "secondary"
? "bg-brand-sidebar"
: "bg-brand-base" : "bg-brand-base"
}`} }`}
> >

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -142,7 +142,7 @@ const IssueDetailsPage: NextPage = () => {
<div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5"> <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
<div className="rounded-lg"> <div className="rounded-lg">
{issueDetails?.parent && issueDetails.parent !== "" ? ( {issueDetails?.parent && issueDetails.parent !== "" ? (
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs"> <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-base p-2 text-xs">
<Link <Link
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${ href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issueDetails.parent issueDetails.parent

14
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -310,7 +310,7 @@ const SinglePage: NextPage = () => {
} }
> >
{pageDetails ? ( {pageDetails ? (
<div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-surface-1 p-4"> <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-base p-4">
<div className="flex items-center justify-between gap-2 px-3"> <div className="flex items-center justify-between gap-2 px-3">
<button <button
type="button" type="button"
@ -331,7 +331,7 @@ const SinglePage: NextPage = () => {
return ( return (
<div <div
key={label.id} key={label.id}
className="group flex items-center gap-1 cursor-pointer rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50" className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
onClick={() => { onClick={() => {
const updatedLabels = pageDetails.labels.filter((l) => l !== labelId); const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
partialUpdatePage({ labels_list: updatedLabels }); partialUpdatePage({ labels_list: updatedLabels });
@ -389,13 +389,13 @@ const SinglePage: NextPage = () => {
/> />
)} )}
</div> </div>
<div className="flex items-center gap-6"> <div className="flex items-center gap-6 text-brand-secondary">
<Tooltip <Tooltip
tooltipContent={`Last updated at ${renderShortTime( tooltipContent={`Last updated at ${renderShortTime(
pageDetails.updated_at pageDetails.updated_at
)} on ${renderShortDate(pageDetails.updated_at)}`} )} on ${renderShortDate(pageDetails.updated_at)}`}
> >
<p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p> <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
</Tooltip> </Tooltip>
<button className="flex items-center gap-2" onClick={handleCopyText}> <button className="flex items-center gap-2" onClick={handleCopyText}>
<LinkIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
@ -418,7 +418,7 @@ const SinglePage: NextPage = () => {
}} }}
/> />
) : ( ) : (
<ColorPalletteIcon height={16} width={16} color="#000000" /> <ColorPalletteIcon height={16} width={16} />
)} )}
</Popover.Button> </Popover.Button>
@ -486,7 +486,7 @@ const SinglePage: NextPage = () => {
onBlur={handleSubmit(updatePage)} onBlur={handleSubmit(updatePage)}
onChange={(e) => setValue("name", e.target.value)} onChange={(e) => setValue("name", e.target.value)}
required={true} required={true}
className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 " className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
role="textbox" role="textbox"
/> />
</div> </div>
@ -515,7 +515,7 @@ const SinglePage: NextPage = () => {
{!createBlockForm && ( {!createBlockForm && (
<button <button
type="button" type="button"
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4" className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-1"
onClick={handleNewBlock} onClick={handleNewBlock}
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />

13
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View File

@ -25,7 +25,7 @@ import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "compone
import { Input, PrimaryButton } from "components/ui"; import { Input, PrimaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons // icons
import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; import {ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
// types // types
import { IPage, TPageViewProps } from "types"; import { IPage, TPageViewProps } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
@ -148,7 +148,6 @@ const ProjectPages: NextPage = () => {
}); });
}; };
const currentTabValue = (tab: string | null) => { const currentTabValue = (tab: string | null) => {
switch (tab) { switch (tab) {
case "Recent": case "Recent":
@ -191,7 +190,7 @@ const ProjectPages: NextPage = () => {
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="h-4 w-4" />
Create Page Create Page
</PrimaryButton> </PrimaryButton>
} }
@ -199,13 +198,13 @@ const ProjectPages: NextPage = () => {
<div className="space-y-4"> <div className="space-y-4">
<form <form
onSubmit={handleSubmit(createPage)} onSubmit={handleSubmit(createPage)}
className="flex items-center relative justify-between gap-2 mb-12 rounded-[6px] border border-gray-200 bg-white p-2 shadow" className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"
> >
<Input <Input
type="text" type="text"
name="name" name="name"
register={register} register={register}
className="border-none font-medium flex break-all text-xl outline-none focus:ring-0" className="flex break-all border-none text-xl font-medium outline-none focus:ring-0"
placeholder="Title" placeholder="Title"
/> />
{watch("name") !== "" && ( {watch("name") !== "" && (
@ -235,7 +234,7 @@ const ProjectPages: NextPage = () => {
} }
}} }}
> >
<Tab.List as="div" className="flex items-center justify-between mb-6"> <Tab.List as="div" className="mb-6 flex items-center justify-between">
<div className="flex gap-4"> <div className="flex gap-4">
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map( {["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
(tab, index) => ( (tab, index) => (
@ -245,7 +244,7 @@ const ProjectPages: NextPage = () => {
`rounded-full border px-5 py-1.5 text-sm outline-none ${ `rounded-full border px-5 py-1.5 text-sm outline-none ${
selected selected
? "border-brand-accent bg-brand-accent text-white" ? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1" : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
}` }`
} }
> >

6
apps/app/styles/globals.css
View File

@ -176,17 +176,17 @@
/* react datepicker styling */ /* react datepicker styling */
.react-datepicker-wrapper input::placeholder { .react-datepicker-wrapper input::placeholder {
color: #000; color: rgba(var(--color-text-secondary));
opacity: 1; opacity: 1;
} }
.react-datepicker-wrapper input:-ms-input-placeholder { .react-datepicker-wrapper input:-ms-input-placeholder {
color: #000; color: rgba(var(--color-text-secondary));
} }
.react-datepicker-wrapper .react-datepicker__close-icon::after { .react-datepicker-wrapper .react-datepicker__close-icon::after {
background: transparent; background: transparent;
color: #000; color: rgba(var(--color-text-secondary));
} }
.react-datepicker-popper { .react-datepicker-popper {

2
apps/app/tailwind.config.js
View File

@ -18,7 +18,7 @@ module.exports = {
secondary: "white", secondary: "white",
brand: { brand: {
accent: withOpacity("--color-accent"), accent: withOpacity("--color-accent"),
base: withOpacity("--color-border"), base: withOpacity("--color-bg-base"),
}, },
}, },
borderColor: { borderColor: {