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) => (
<div
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"}`}
ref={provided.innerRef}
{...provided.droppableProps}
@ -96,10 +96,12 @@ export const SingleBoard: React.FC<Props> = ({
<div
className={`absolute ${
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{" "}
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
{replaceUnderscoreIfSnakeCase(
orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
)}
</div>
</>
)}

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

@ -261,7 +261,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<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" : ""
}`}
ref={provided.innerRef}

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

@ -436,8 +436,8 @@ export const IssuesView: React.FC<Props> = ({
<div
className={`${
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 ${
snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
} 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/100 text-white" : ""
} duration-200`}
ref={provided.innerRef}
{...provided.droppableProps}

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

@ -44,7 +44,6 @@ import {
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
} from "constants/fetch-keys";
import { DIVIDER } from "@blueprintjs/core/lib/esm/common/classes";
type Props = {
type?: string;
@ -217,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<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) => {
e.preventDefault();
setContextMenu(true);
@ -269,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
/>
)}
{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"}
</div>
)}
@ -278,7 +277,7 @@ export const SingleListIssue: React.FC<Props> = ({
{issue.label_details.map((label) => (
<span
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
className="h-1.5 w-1.5 rounded-full"
@ -310,7 +309,7 @@ export const SingleListIssue: React.FC<Props> = ({
/>
)}
{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}`}>
<div className="flex items-center gap-1 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>
)}
{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}`}>
<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}
</div>
</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">
No issues.
</p>
<p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p>
)
) : (
<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 !== "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") {
value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
} else if (activityItem.field === "labels") {
@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<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"
/>
) : null}
@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div>
<div className="relative px-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 ? (
activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon

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

@ -52,18 +52,18 @@ export const ViewPrioritySelect: React.FC<Props> = ({
customButton={
<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"
} items-center shadow-sm ${
issue.priority === "urgent"
? "text-red-600"
? "border-red-500/20 bg-red-500/20 text-red-500"
: issue.priority === "high"
? "text-orange-500"
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: issue.priority === "medium"
? "text-yellow-500"
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
: 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"}>

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

@ -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
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 { 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" />

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
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>
)}

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">
<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}

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

@ -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}

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

@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
>
<Menu.Items
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) => (
<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"
} ${
bg === "primary"
? "bg-brand-sidebar"
: bg === "secondary"
? "bg-brand-surface-1"
: bg === "secondary"
? "bg-brand-sidebar"
: "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="rounded-lg">
{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
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issueDetails.parent

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

@ -310,7 +310,7 @@ const SinglePage: NextPage = () => {
}
>
{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">
<button
type="button"
@ -331,7 +331,7 @@ const SinglePage: NextPage = () => {
return (
<div
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={() => {
const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
partialUpdatePage({ labels_list: updatedLabels });
@ -389,13 +389,13 @@ const SinglePage: NextPage = () => {
/>
)}
</div>
<div className="flex items-center gap-6">
<div className="flex items-center gap-6 text-brand-secondary">
<Tooltip
tooltipContent={`Last updated at ${renderShortTime(
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>
<button className="flex items-center gap-2" onClick={handleCopyText}>
<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>
@ -486,7 +486,7 @@ const SinglePage: NextPage = () => {
onBlur={handleSubmit(updatePage)}
onChange={(e) => setValue("name", e.target.value)}
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"
/>
</div>
@ -515,7 +515,7 @@ const SinglePage: NextPage = () => {
{!createBlockForm && (
<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}
>
<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 { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
import {ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
// types
import { IPage, TPageViewProps } from "types";
import type { NextPage } from "next";
@ -148,7 +148,6 @@ const ProjectPages: NextPage = () => {
});
};
const currentTabValue = (tab: string | null) => {
switch (tab) {
case "Recent":
@ -191,7 +190,7 @@ const ProjectPages: NextPage = () => {
document.dispatchEvent(e);
}}
>
<PlusIcon className="w-4 h-4" />
<PlusIcon className="h-4 w-4" />
Create Page
</PrimaryButton>
}
@ -199,13 +198,13 @@ const ProjectPages: NextPage = () => {
<div className="space-y-4">
<form
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
type="text"
name="name"
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"
/>
{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">
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
(tab, index) => (
@ -245,7 +244,7 @@ const ProjectPages: NextPage = () => {
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
? "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-wrapper input::placeholder {
color: #000;
color: rgba(var(--color-text-secondary));
opacity: 1;
}
.react-datepicker-wrapper input:-ms-input-placeholder {
color: #000;
color: rgba(var(--color-text-secondary));
}
.react-datepicker-wrapper .react-datepicker__close-icon::after {
background: transparent;
color: #000;
color: rgba(var(--color-text-secondary));
}
.react-datepicker-popper {

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

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