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

chore: update classnames according to the new theming structure (#1494)

Browse source 
* chore: store various shades of accent color

* refactor: custom theme selector

* refactor: custom theme selector

* chore: update custom theme input labels

* fix: color generator function logic

* fix: accent color preloaded data

* chore: new theming structure

* chore: update shades calculation logic

* refactor: variable names

* chore: update color scheming

* chore: new color scheming

* refactor: themes folder structure

* chore: update classnames to the new ones

* chore: update static colors

* chore: sidebar link colors

* chore: placeholder color

* chore: update border classnames
This commit is contained in:
Aaryan Khandelwal 2023-07-10 12:47:00 +05:30 • committed by GitHub
parent a14f8c281b
commit 4c2cb2368a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
329 changed files with 2130 additions and 1995 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/app/pages/404.tsx
View file

@ -21,7 +21,7 @@ const PageNotFound: NextPage = () => (
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Sorry, the page you are looking for cannot be found. It may have been removed, had its
name changed, or is temporarily unavailable.
</p>

8
apps/app/pages/[workspaceSlug]/analytics.tsx
View file

@ -97,15 +97,15 @@ const Analytics = () => {
// </PrimaryButton>
// }
>
<div className="h-full flex flex-col overflow-hidden bg-brand-base">
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<Tab.Group as={Fragment}>
<Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
<Tab.List as="div" className="space-x-2 border-b border-custom-border-100 px-5 py-3">
{tabsList.map((tab) => (
<Tab
key={tab}
className={({ selected }) =>
`rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
selected ? "bg-brand-surface-2" : ""
`rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
selected ? "bg-custom-background-80" : ""
}`
}
onClick={() => trackAnalyticsEvent(tab)}

6
apps/app/pages/[workspaceSlug]/index.tsx
View file

@ -49,21 +49,21 @@ const WorkspacePage: NextPage = () => {
)}
<div className="p-8">
<div className="flex flex-col gap-8">
<div className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-brand-base bg-brand-base px-4 py-6 md:flex-row md:items-center md:py-3">
<div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
<p className="font-semibold">
Plane is open source, support us by starring us on GitHub.
</p>
<div className="flex items-center gap-2">
<button
onClick={() => setIsProductUpdatesModalOpen(true)}
className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
>
{`What's New?`}
</button>
<a
href="https://github.com/makeplane/plane"
target="_blank"
className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
rel="noopener noreferrer"
>
Star us on GitHub

16
apps/app/pages/[workspaceSlug]/me/my-issues.tsx
View file

@ -47,8 +47,8 @@ const MyIssuesPage: NextPage = () => {
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
className={`group flex items-center gap-2 rounded-md border border-custom-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
}`}
>
<span>View</span>
@ -64,9 +64,9 @@ const MyIssuesPage: NextPage = () => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-brand-base p-3 shadow-lg">
<Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-custom-background-100 p-3 shadow-lg">
<div className="space-y-2 py-3">
<h4 className="text-sm text-brand-secondary">Properties</h4>
<h4 className="text-sm text-custom-text-200">Properties</h4>
<div className="flex flex-wrap items-center gap-2">
{Object.keys(properties).map((key) => {
if (key === "estimate") return null;
@ -77,8 +77,8 @@ const MyIssuesPage: NextPage = () => {
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base"
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-100"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
@ -114,11 +114,11 @@ const MyIssuesPage: NextPage = () => {
<Disclosure as="div" defaultOpen>
{({ open }) => (
<div>
<div className="flex items-center px-4 py-2.5">
<div className="flex items-center px-4 py-2.5 bg-custom-background-90">
<Disclosure.Button>
<div className="flex items-center gap-x-2">
<h2 className="font-medium leading-5">My Issues</h2>
<span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
<span className="rounded-full bg-custom-background-80 py-0.5 px-3 text-sm text-custom-text-200">
{myIssues.length}
</span>
</div>

2
apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
View file

@ -28,7 +28,7 @@ const ProfileActivity = () => {
<div className="mb-8 space-y-6">
<div>
<h3 className="text-3xl font-semibold">Profile Settings</h3>
<p className="mt-1 text-brand-secondary">
<p className="mt-1 text-custom-text-200">
This information will be visible to only you.
</p>
</div>

22
apps/app/pages/[workspaceSlug]/me/profile/index.tsx
View file

@ -140,7 +140,7 @@ const Profile: NextPage = () => {
<div className="mb-8 space-y-6">
<div>
<h3 className="text-3xl font-semibold">Profile Settings</h3>
<p className="mt-1 text-brand-secondary">
<p className="mt-1 text-custom-text-200">
This information will be visible to only you.
</p>
</div>
@ -149,8 +149,8 @@ const Profile: NextPage = () => {
<div className="space-y-8 sm:space-y-12">
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-brand-base">Profile Picture</h4>
<p className="text-sm text-brand-secondary">
<h4 className="text-lg font-semibold text-custom-text-100">Profile Picture</h4>
<p className="text-sm text-custom-text-200">
Max file size is 5MB. Supported file types are .jpg and .png.
</p>
</div>
@ -158,8 +158,8 @@ const Profile: NextPage = () => {
<div className="flex items-center gap-4">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-12 w-12 rounded-md bg-brand-surface-2 p-2">
<UserIcon className="h-full w-full text-brand-secondary" />
<div className="h-12 w-12 rounded-md bg-custom-background-80 p-2">
<UserIcon className="h-full w-full text-custom-text-200" />
</div>
) : (
<div className="relative h-12 w-12 overflow-hidden">
@ -194,8 +194,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-brand-base">Full Name</h4>
<p className="text-sm text-brand-secondary">
<h4 className="text-lg font-semibold text-custom-text-100">Full Name</h4>
<p className="text-sm text-custom-text-200">
This name will be reflected on all the projects you are working on.
</p>
</div>
@ -223,8 +223,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-brand-base">Email</h4>
<p className="text-sm text-brand-secondary">
<h4 className="text-lg font-semibold text-custom-text-100">Email</h4>
<p className="text-sm text-custom-text-200">
The email address that you are using.
</p>
</div>
@ -242,8 +242,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-brand-base">Role</h4>
<p className="text-sm text-brand-secondary">Add your role.</p>
<h4 className="text-lg font-semibold text-custom-text-100">Role</h4>
<p className="text-sm text-custom-text-200">Add your role.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Controller

6
apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
View file

@ -40,7 +40,7 @@ const ProfilePreferences = () => {
<div className="mb-8 space-y-6">
<div>
<h3 className="text-3xl font-semibold">Profile Settings</h3>
<p className="mt-1 text-brand-secondary">
<p className="mt-1 text-custom-text-200">
This information will be visible to only you.
</p>
</div>
@ -49,8 +49,8 @@ const ProfilePreferences = () => {
<div className="space-y-8 sm:space-y-12">
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-brand-base">Theme</h4>
<p className="text-sm text-brand-secondary">
<h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
<p className="text-sm text-custom-text-200">
Select or customize your interface color scheme.
</p>
</div>

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View file

@ -140,14 +140,14 @@ const SingleCycle: React.FC = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 font-normal rounded-md text-brand-secondary"
className="!py-1.5 font-normal rounded-md text-custom-text-200"
outline
>
Analytics
</SecondaryButton>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
cycleSidebar ? "rotate-180" : ""
}`}
onClick={() => setCycleSidebar((prevData) => !prevData)}

24
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View file

@ -109,37 +109,37 @@ const ProjectCycles: NextPage = () => {
/>
<div className="space-y-5 p-8 h-full flex flex-col overflow-hidden">
<div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
<h3 className="text-2xl font-semibold text-custom-text-100">Cycles</h3>
<div className="flex items-center gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
cyclesView === "list" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
cyclesView === "list" ? "bg-custom-background-80" : ""
}`}
onClick={() => setCyclesView("list")}
>
<ListBulletIcon className="h-4 w-4 text-brand-secondary" />
<ListBulletIcon className="h-4 w-4 text-custom-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
cyclesView === "board" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
cyclesView === "board" ? "bg-custom-background-80" : ""
}`}
onClick={() => setCyclesView("board")}
>
<Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
<Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
cyclesView === "gantt_chart" ? "bg-custom-background-80" : ""
}`}
onClick={() => {
setCyclesView("gantt_chart");
setCycleTab("All");
}}
>
<span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
<span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
waterfall_chart
</span>
</button>
@ -177,8 +177,8 @@ const ProjectCycles: NextPage = () => {
className={({ selected }) =>
`rounded-3xl border px-6 py-1 outline-none ${
selected
? "border-brand-accent bg-brand-accent text-white font-medium"
: "border-brand-base bg-brand-base hover:bg-brand-surface-2"
? "border-custom-primary bg-custom-primary text-white font-medium"
: "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80"
}`
}
>

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
View file

@ -52,7 +52,7 @@ const ProjectInbox: NextPage = () => {
>
<div className="flex flex-col h-full">
<InboxActionHeader />
<div className="grid grid-cols-4 flex-1 divide-x divide-brand-base overflow-hidden">
<div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-100 overflow-hidden">
<IssuesListSidebar />
<div className="col-span-3 h-full overflow-auto">
<InboxMainContent />

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View file

@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
>
{issueDetails && projectId ? (
<div className="flex h-full">
<div className="w-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
<div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-100 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div>
<div className="w-1/3 space-y-5 border-l border-brand-base p-5">
<div className="w-1/3 space-y-5 border-l border-custom-border-100 p-5">
<IssueDetailsSidebar
control={control}
issueDetail={issueDetails}

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View file

@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 rounded-md font-normal text-brand-secondary"
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
outline
>
Analytics
@ -72,12 +72,12 @@ const ProjectIssues: NextPage = () => {
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
<a>
<SecondaryButton
className="relative !py-1.5 rounded-md font-normal text-brand-secondary"
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
outline
>
<span>Inbox</span>
{inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-brand-base bg-brand-surface-2 border border-brand-base">
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-100">
{inboxList?.[0]?.pending_issue_count}
</span>
)}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file

@ -144,14 +144,14 @@ const SingleModule: React.FC = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 font-normal rounded-md text-brand-secondary"
className="!py-1.5 font-normal rounded-md text-custom-text-200"
outline
>
Analytics
</SecondaryButton>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
moduleSidebar ? "rotate-180" : ""
}`}
onClick={() => setModuleSidebar((prevData) => !prevData)}

14
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
View file

@ -99,25 +99,25 @@ const ProjectModules: NextPage = () => {
modules.length > 0 ? (
<div className="space-y-5 p-8 flex flex-col h-full overflow-hidden">
<div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
<h3 className="text-2xl font-semibold text-custom-text-100">Modules</h3>
<div className="flex items-center gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
modulesView === "grid" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
modulesView === "grid" ? "bg-custom-background-80" : ""
}`}
onClick={() => setModulesView("grid")}
>
<Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
<Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
modulesView === "gantt_chart" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
modulesView === "gantt_chart" ? "bg-custom-background-80" : ""
}`}
onClick={() => setModulesView("gantt_chart")}
>
<span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
<span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
waterfall_chart
</span>
</button>

26
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View file

@ -306,7 +306,7 @@ const SinglePage: NextPage = () => {
<div className="flex w-full items-center gap-2">
<button
type="button"
className="flex items-center gap-2 text-sm text-brand-secondary"
className="flex items-center gap-2 text-sm text-custom-text-200"
onClick={() => router.back()}
>
<ArrowLeftIcon className="h-4 w-4" />
@ -320,7 +320,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 rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0"
role="textbox"
noPadding
/>
@ -337,7 +337,7 @@ const SinglePage: NextPage = () => {
return (
<div
key={label.id}
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"
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 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 });
@ -366,7 +366,7 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs"
>
<PlusIcon className="h-3.5 w-3.5" />
{pageDetails.labels.length <= 0 && <span>Add Label</span>}
@ -376,12 +376,12 @@ const SinglePage: NextPage = () => {
footerOption={
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
onClick={() => {
setLabelModal(true);
}}
>
<span className="flex items-center justify-start gap-1 text-brand-secondary">
<span className="flex items-center justify-start gap-1 text-custom-text-200">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
@ -395,7 +395,7 @@ const SinglePage: NextPage = () => {
</div>
</div>
<div className="flex items-center">
<div className="flex items-center gap-6 text-brand-secondary">
<div className="flex items-center gap-6 text-custom-text-200">
<Tooltip
tooltipContent={`Last updated at ${renderShortTime(
pageDetails.updated_at
@ -413,7 +413,7 @@ const SinglePage: NextPage = () => {
<Popover.Button
type="button"
className={`group inline-flex items-center outline-none ${
open ? "text-brand-base" : "text-brand-secondary"
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
{watch("color") && watch("color") !== "" ? (
@ -443,12 +443,12 @@ const SinglePage: NextPage = () => {
styles={{
default: {
card: {
backgroundColor: `rgba(var(--color-bg-surface-2))`,
backgroundColor: `rgba(var(--color-background-80))`,
},
triangle: {
position: "absolute",
borderColor:
"transparent transparent rgba(var(--color-bg-surface-2)) transparent",
"transparent transparent rgba(var(--color-background-80)) transparent",
},
input: {
border: "none",
@ -457,13 +457,13 @@ const SinglePage: NextPage = () => {
paddingLeft: "0.25rem",
color: `rgba(var(--color-text-secondary))`,
boxShadow: "none",
backgroundColor: `rgba(var(--color-bg-surface-1))`,
borderLeft: `1px solid rgba(var(--color-bg-surface-2))`,
backgroundColor: `rgba(var(--color-background-90))`,
borderLeft: `1px solid rgba(var(--color-background-80))`,
},
hash: {
color: `rgba(var(--color-text-secondary))`,
boxShadow: "none",
backgroundColor: `rgba(var(--color-bg-surface-1))`,
backgroundColor: `rgba(var(--color-background-90))`,
},
},
}}

14
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View file

@ -125,12 +125,12 @@ const ProjectPages: NextPage = () => {
>
<div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
<div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
<div className="flex gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "list" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
viewType === "list" ? "bg-custom-background-80" : ""
}`}
onClick={() => setViewType("list")}
>
@ -138,8 +138,8 @@ const ProjectPages: NextPage = () => {
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "detailed" ? "bg-brand-surface-2" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
viewType === "detailed" ? "bg-custom-background-80" : ""
}`}
onClick={() => setViewType("detailed")}
>
@ -176,8 +176,8 @@ const ProjectPages: NextPage = () => {
className={({ selected }) =>
`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-base hover:bg-brand-surface-1"
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-90"
}`
}
>

8
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
View file

@ -111,7 +111,7 @@ const ControlSettings: NextPage = () => {
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Project Lead</h4>
<p className="text-sm text-brand-secondary">Select the project leader.</p>
<p className="text-sm text-custom-text-200">Select the project leader.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -123,7 +123,7 @@ const ControlSettings: NextPage = () => {
{...field}
label={
people?.find((person) => person.member.id === field.value)?.member
.first_name ?? <span className="text-brand-secondary">Select lead</span>
.first_name ?? <span className="text-custom-text-200">Select lead</span>
}
width="w-full"
input
@ -169,7 +169,7 @@ const ControlSettings: NextPage = () => {
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Default Assignee</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Select the default assignee for the project.
</p>
</div>
@ -183,7 +183,7 @@ const ControlSettings: NextPage = () => {
{...field}
label={
people?.find((p) => p.member.id === field.value)?.member.first_name ?? (
<span className="text-brand-secondary">Select default assignee</span>
<span className="text-custom-text-200">Select default assignee</span>
)
}
width="w-full"

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View file

@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
</section>
{estimatesList ? (
estimatesList.length > 0 ? (
<section className="mt-5 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
<section className="mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6">
{estimatesList.map((estimate) => (
<SingleEstimate
key={estimate.id}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View file

@ -184,13 +184,13 @@ const FeaturesSettings: NextPage = () => {
{featuresList.map((feature) => (
<div
key={feature.property}
className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-base p-5"
className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5"
>
<div className="flex items-start gap-3">
{feature.icon}
<div>
<h4 className="text-lg font-semibold">{feature.title}</h4>
<p className="text-sm text-brand-secondary">{feature.description}</p>
<p className="text-sm text-custom-text-200">{feature.description}</p>
</div>
</div>
<ToggleSwitch

14
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View file

@ -166,7 +166,7 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Icon & Name</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Select an icon and a name for your project.
</p>
</div>
@ -226,7 +226,7 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Description</h4>
<p className="text-sm text-brand-secondary">Give a description to your project.</p>
<p className="text-sm text-custom-text-200">Give a description to your project.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -249,13 +249,13 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Cover Photo</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Select your cover photo from the given library.
</p>
</div>
<div className="col-span-12 sm:col-span-6">
{watch("cover_image") ? (
<div className="h-32 w-full rounded border border-brand-base p-1">
<div className="h-32 w-full rounded border border-custom-border-100 p-1">
<div className="relative h-full w-full rounded">
<img
src={watch("cover_image")!}
@ -283,7 +283,7 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Identifier</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Create a 1-6 characters{"'"} identifier for the project.
</p>
</div>
@ -319,7 +319,7 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Network</h4>
<p className="text-sm text-brand-secondary">Select privacy type for the project.</p>
<p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -366,7 +366,7 @@ const GeneralSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Danger Zone</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
The danger zone of the project delete page is a critical area that requires careful
consideration and attention. When deleting a project, all of the data and resources
within that project will be permanently removed and cannot be recovered.

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View file

@ -113,7 +113,7 @@ const LabelsSettings: NextPage = () => {
<section className="grid grid-cols-12 gap-10">
<div className="col-span-12 sm:col-span-5">
<h3 className="text-2xl font-semibold">Labels</h3>
<p className="text-brand-secondary">Manage the labels of this project.</p>
<p className="text-custom-text-200">Manage the labels of this project.</p>
<PrimaryButton onClick={newLabel} size="sm" className="mt-4">
<span className="flex items-center gap-2">
<PlusIcon className="h-4 w-4" />

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View file

@ -153,7 +153,7 @@ const MembersSettings: NextPage = () => {
<h3 className="text-2xl font-semibold">Members</h3>
<button
type="button"
className="flex items-center gap-2 text-brand-accent outline-none"
className="flex items-center gap-2 text-custom-primary outline-none"
onClick={() => setInviteModal(true)}
>
<PlusIcon className="h-4 w-4" />
@ -168,7 +168,7 @@ const MembersSettings: NextPage = () => {
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
<div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex items-center justify-between py-6">
@ -190,7 +190,7 @@ const MembersSettings: NextPage = () => {
<h4 className="text-sm">
{member.first_name} {member.last_name}
</h4>
<p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
<p className="mt-0.5 text-xs text-custom-text-200">{member.email}</p>
</div>
</div>
<div className="flex items-center gap-2 text-xs">

10
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View file

@ -75,8 +75,8 @@ const StatesSettings: NextPage = () => {
<SettingsHeader />
<div className="grid grid-cols-12 gap-10">
<div className="col-span-12 sm:col-span-5">
<h3 className="text-2xl font-semibold text-brand-base">States</h3>
<p className="text-brand-secondary">Manage the states of this project.</p>
<h3 className="text-2xl font-semibold text-custom-text-100">States</h3>
<p className="text-custom-text-200">Manage the states of this project.</p>
</div>
<div className="col-span-12 space-y-8 sm:col-span-7">
{states && projectDetails ? (
@ -88,14 +88,14 @@ const StatesSettings: NextPage = () => {
<h4 className="font-medium capitalize">{key}</h4>
<button
type="button"
className="flex items-center gap-2 text-brand-accent outline-none"
className="flex items-center gap-2 text-custom-primary outline-none"
onClick={() => setActiveGroup(key as keyof StateGroup)}
>
<PlusIcon className="h-4 w-4" />
Add
</button>
</div>
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
<div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
{key === activeGroup && (
<CreateUpdateStateInline
groupLength={orderedStateGroups[key].length}
@ -121,7 +121,7 @@ const StatesSettings: NextPage = () => {
/>
) : (
<div
className="border-b border-brand-base last:border-b-0"
className="border-b border-custom-border-100 last:border-b-0"
key={state.id}
>
<CreateUpdateStateInline

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
View file

@ -101,8 +101,8 @@ const ProjectViews: NextPage = () => {
{views ? (
views.length > 0 ? (
<div className="space-y-5 p-8">
<h3 className="text-2xl font-semibold text-brand-base">Views</h3>
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
<h3 className="text-2xl font-semibold text-custom-text-100">Views</h3>
<div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
{views.map((view) => (
<SingleViewItem
key={view.id}

36
apps/app/pages/[workspaceSlug]/projects/index.tsx
View file

@ -87,24 +87,28 @@ const ProjectsPage: NextPage = () => {
user={user}
/>
{projects ? (
<div className="p-8">
<div className="h-full w-full overflow-hidden">
{projects.length === 0 ? (
<EmptyState
type="project"
title="Create New Project"
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
imgURL={emptyProject}
/>
<div className="h-full w-full grid place-items-center p-8">
<EmptyState
type="project"
title="Create New Project"
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
imgURL={emptyProject}
/>
</div>
) : (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{projects.map((project) => (
<SingleProjectCard
key={project.id}
project={project}
setToJoinProject={setSelectedProjectToJoin}
setDeleteProject={setDeleteProject}
/>
))}
<div className="h-full p-8 overflow-y-auto">
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{projects.map((project) => (
<SingleProjectCard
key={project.id}
project={project}
setToJoinProject={setSelectedProjectToJoin}
setDeleteProject={setDeleteProject}
/>
))}
</div>
</div>
)}
</div>

8
apps/app/pages/[workspaceSlug]/settings/billing.tsx
View file

@ -44,18 +44,18 @@ const BillingSettings: NextPage = () => {
<section className="space-y-8">
<div>
<h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
<p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
<p className="mt-4 text-sm text-custom-text-200">[Free launch preview] plan Pro</p>
</div>
<div className="space-y-8 md:w-2/3">
<div>
<div className="w-80 rounded-md border border-brand-base bg-brand-base p-4 text-center">
<div className="w-80 rounded-md border border-custom-border-100 bg-custom-background-100 p-4 text-center">
<h4 className="text-md mb-1 leading-6">Payment due</h4>
<h2 className="text-3xl font-extrabold">--</h2>
</div>
</div>
<div>
<h4 className="text-md mb-1 leading-6">Current plan</h4>
<p className="mb-3 text-sm text-brand-secondary">
<p className="mb-3 text-sm text-custom-text-200">
You are currently using the free plan
</p>
<a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
@ -64,7 +64,7 @@ const BillingSettings: NextPage = () => {
</div>
<div>
<h4 className="text-md mb-1 leading-6">Billing history</h4>
<p className="mb-3 text-sm text-brand-secondary">There are no invoices to display</p>
<p className="mb-3 text-sm text-custom-text-200">There are no invoices to display</p>
</div>
</div>
</section>

10
apps/app/pages/[workspaceSlug]/settings/index.tsx
View file

@ -177,7 +177,7 @@ const WorkspaceSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Logo</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Max file size is 5MB. Supported file types are .jpg and .png.
</p>
</div>
@ -218,7 +218,7 @@ const WorkspaceSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">URL</h4>
<p className="text-sm text-brand-secondary">Your workspace URL.</p>
<p className="text-sm text-custom-text-200">Your workspace URL.</p>
</div>
<div className="col-span-12 flex items-center gap-2 sm:col-span-6">
<Input
@ -258,7 +258,7 @@ const WorkspaceSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Name</h4>
<p className="text-sm text-brand-secondary">Give a name to your workspace.</p>
<p className="text-sm text-custom-text-200">Give a name to your workspace.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Input
@ -277,7 +277,7 @@ const WorkspaceSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Company Size</h4>
<p className="text-sm text-brand-secondary">How big is your company?</p>
<p className="text-sm text-custom-text-200">How big is your company?</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Controller
@ -308,7 +308,7 @@ const WorkspaceSettings: NextPage = () => {
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold">Danger Zone</h4>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
The danger zone of the workspace delete page is a critical area that requires
careful consideration and attention. When deleting a workspace, all of the data
and resources within that workspace will be permanently removed and cannot be

6
apps/app/pages/[workspaceSlug]/settings/members.tsx
View file

@ -154,7 +154,7 @@ const MembersSettings: NextPage = () => {
<h3 className="text-2xl font-semibold">Members</h3>
<button
type="button"
className="flex items-center gap-2 text-brand-accent outline-none"
className="flex items-center gap-2 text-custom-primary outline-none"
onClick={() => setInviteModal(true)}
>
<PlusIcon className="h-4 w-4" />
@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
<div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex items-center justify-between py-6">
@ -191,7 +191,7 @@ const MembersSettings: NextPage = () => {
<h4 className="text-sm">
{member.first_name} {member.last_name}
</h4>
<p className="text-xs text-brand-secondary">{member.email}</p>
<p className="text-xs text-custom-text-200">{member.email}</p>
</div>
</div>
<div className="flex items-center gap-2 text-xs">

6
apps/app/pages/_error.tsx
View file

@ -35,18 +35,18 @@ const CustomErrorComponent = () => {
<div className="space-y-8 text-center">
<div className="space-y-2">
<h3 className="text-lg font-semibold">Exception Detected!</h3>
<p className="text-sm text-brand-secondary w-1/2 mx-auto">
<p className="text-sm text-custom-text-200 w-1/2 mx-auto">
We{"'"}re Sorry! An exception has been detected, and our engineering team has been
notified. We apologize for any inconvenience this may have caused. Please reach out to
our engineering team at{" "}
<a href="mailto:support@plane.so" className="text-brand-accent">
<a href="mailto:support@plane.so" className="text-custom-primary">
support@plane.so
</a>{" "}
or on our{" "}
<a
href="https://discord.com/invite/A92xrEGCge"
target="_blank"
className="text-brand-accent"
className="text-custom-primary"
rel="noopener noreferrer"
>
Discord

143
apps/app/pages/colors.tsx Normal file
View file

@ -0,0 +1,143 @@
import React from "react";
// layouts
import DefaultLayout from "layouts/default-layout";
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
// types
import type { NextPage } from "next";
const Colors: NextPage = () => (
<UserAuthorizationLayout>
<DefaultLayout>
<div className="space-y-8 p-8">
<div>
Primary:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-primary-0" />
<div className="h-12 w-12 bg-custom-primary-10" />
<div className="h-12 w-12 bg-custom-primary-20" />
<div className="h-12 w-12 bg-custom-primary-30" />
<div className="h-12 w-12 bg-custom-primary-40" />
<div className="h-12 w-12 bg-custom-primary-50" />
<div className="h-12 w-12 bg-custom-primary-60" />
<div className="h-12 w-12 bg-custom-primary-70" />
<div className="h-12 w-12 bg-custom-primary-80" />
<div className="h-12 w-12 bg-custom-primary-90" />
<div className="h-12 w-12 bg-custom-primary-100" />
<div className="h-12 w-12 bg-custom-primary-200" />
<div className="h-12 w-12 bg-custom-primary-300" />
<div className="h-12 w-12 bg-custom-primary-400" />
<div className="h-12 w-12 bg-custom-primary-500" />
<div className="h-12 w-12 bg-custom-primary-600" />
<div className="h-12 w-12 bg-custom-primary-700" />
<div className="h-12 w-12 bg-custom-primary-800" />
<div className="h-12 w-12 bg-custom-primary-900" />
<div className="h-12 w-12 bg-custom-primary-1000" />
</div>
</div>
<div>
Background:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-background-0" />
<div className="h-12 w-12 bg-custom-background-10" />
<div className="h-12 w-12 bg-custom-background-20" />
<div className="h-12 w-12 bg-custom-background-30" />
<div className="h-12 w-12 bg-custom-background-40" />
<div className="h-12 w-12 bg-custom-background-50" />
<div className="h-12 w-12 bg-custom-background-60" />
<div className="h-12 w-12 bg-custom-background-70" />
<div className="h-12 w-12 bg-custom-background-80" />
<div className="h-12 w-12 bg-custom-background-90" />
<div className="h-12 w-12 bg-custom-background-100" />
<div className="h-12 w-12 bg-custom-background-200" />
<div className="h-12 w-12 bg-custom-background-300" />
<div className="h-12 w-12 bg-custom-background-400" />
<div className="h-12 w-12 bg-custom-background-500" />
<div className="h-12 w-12 bg-custom-background-600" />
<div className="h-12 w-12 bg-custom-background-700" />
<div className="h-12 w-12 bg-custom-background-800" />
<div className="h-12 w-12 bg-custom-background-900" />
<div className="h-12 w-12 bg-custom-background-1000" />
</div>
</div>
<div>
Text:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-text-0" />
<div className="h-12 w-12 bg-custom-text-10" />
<div className="h-12 w-12 bg-custom-text-20" />
<div className="h-12 w-12 bg-custom-text-30" />
<div className="h-12 w-12 bg-custom-text-40" />
<div className="h-12 w-12 bg-custom-text-50" />
<div className="h-12 w-12 bg-custom-text-60" />
<div className="h-12 w-12 bg-custom-text-70" />
<div className="h-12 w-12 bg-custom-text-80" />
<div className="h-12 w-12 bg-custom-text-90" />
<div className="h-12 w-12 bg-custom-text-100" />
<div className="h-12 w-12 bg-custom-text-200" />
<div className="h-12 w-12 bg-custom-text-300" />
<div className="h-12 w-12 bg-custom-text-400" />
<div className="h-12 w-12 bg-custom-text-500" />
<div className="h-12 w-12 bg-custom-text-600" />
<div className="h-12 w-12 bg-custom-text-700" />
<div className="h-12 w-12 bg-custom-text-800" />
<div className="h-12 w-12 bg-custom-text-900" />
<div className="h-12 w-12 bg-custom-text-1000" />
</div>
</div>
<div>
Sidebar Background:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-sidebar-background-0" />
<div className="h-12 w-12 bg-custom-sidebar-background-10" />
<div className="h-12 w-12 bg-custom-sidebar-background-20" />
<div className="h-12 w-12 bg-custom-sidebar-background-30" />
<div className="h-12 w-12 bg-custom-sidebar-background-40" />
<div className="h-12 w-12 bg-custom-sidebar-background-50" />
<div className="h-12 w-12 bg-custom-sidebar-background-60" />
<div className="h-12 w-12 bg-custom-sidebar-background-70" />
<div className="h-12 w-12 bg-custom-sidebar-background-80" />
<div className="h-12 w-12 bg-custom-sidebar-background-90" />
<div className="h-12 w-12 bg-custom-sidebar-background-100" />
<div className="h-12 w-12 bg-custom-sidebar-background-200" />
<div className="h-12 w-12 bg-custom-sidebar-background-300" />
<div className="h-12 w-12 bg-custom-sidebar-background-400" />
<div className="h-12 w-12 bg-custom-sidebar-background-500" />
<div className="h-12 w-12 bg-custom-sidebar-background-600" />
<div className="h-12 w-12 bg-custom-sidebar-background-700" />
<div className="h-12 w-12 bg-custom-sidebar-background-800" />
<div className="h-12 w-12 bg-custom-sidebar-background-900" />
<div className="h-12 w-12 bg-custom-sidebar-background-1000" />
</div>
</div>
<div>
Sidebar Text:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-sidebar-text-0" />
<div className="h-12 w-12 bg-custom-sidebar-text-10" />
<div className="h-12 w-12 bg-custom-sidebar-text-20" />
<div className="h-12 w-12 bg-custom-sidebar-text-30" />
<div className="h-12 w-12 bg-custom-sidebar-text-40" />
<div className="h-12 w-12 bg-custom-sidebar-text-50" />
<div className="h-12 w-12 bg-custom-sidebar-text-60" />
<div className="h-12 w-12 bg-custom-sidebar-text-70" />
<div className="h-12 w-12 bg-custom-sidebar-text-80" />
<div className="h-12 w-12 bg-custom-sidebar-text-90" />
<div className="h-12 w-12 bg-custom-sidebar-text-100" />
<div className="h-12 w-12 bg-custom-sidebar-text-200" />
<div className="h-12 w-12 bg-custom-sidebar-text-300" />
<div className="h-12 w-12 bg-custom-sidebar-text-400" />
<div className="h-12 w-12 bg-custom-sidebar-text-500" />
<div className="h-12 w-12 bg-custom-sidebar-text-600" />
<div className="h-12 w-12 bg-custom-sidebar-text-700" />
<div className="h-12 w-12 bg-custom-sidebar-text-800" />
<div className="h-12 w-12 bg-custom-sidebar-text-900" />
<div className="h-12 w-12 bg-custom-sidebar-text-1000" />
</div>
</div>
</div>
</DefaultLayout>
</UserAuthorizationLayout>
);
export default Colors;

12
apps/app/pages/create-workspace.tsx
View file

@ -31,14 +31,14 @@ const CreateWorkspace: NextPage = () => {
<div className="relative grid h-full place-items-center p-5">
<div className="h-full flex flex-col items-center justify-center w-full py-4">
<div className="mb-7 flex items-center justify-center text-center">
<OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
</div>
<div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md">
<div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md">
<div className="flex items-center justify-start gap-3 px-7 pt-7 pb-3.5 text-gray-8 text-sm">
<div className="flex flex-col gap-2 justify-center ">
<h3 className="text-base font-semibold text-brand-base">Create Workspace</h3>
<p className="text-sm text-brand-secondary">
<h3 className="text-base font-semibold text-custom-text-100">Create Workspace</h3>
<p className="text-sm text-custom-text-200">
Create or join the workspace to get started with Plane.
</p>
</div>
@ -53,8 +53,8 @@ const CreateWorkspace: NextPage = () => {
</div>
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
<span className="text-xs text-brand-secondary">Logged in:</span>
<span className="text-sm text-brand-base">{user?.email}</span>
<span className="text-xs text-custom-text-200">Logged in:</span>
<span className="text-sm text-custom-text-100">{user?.email}</span>
</div>
</div>
</DefaultLayout>

6
apps/app/pages/index.tsx
View file

@ -133,16 +133,16 @@ const HomePage: NextPage = () => {
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
<div className="flex flex-col items-center justify-center gap-10">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<div className="text-center text-xl font-medium text-brand-base">
<div className="text-center text-xl font-medium text-custom-text-100">
Sign In to your Plane Account
</div>
</div>
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
<div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
<div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5">
<div className="flex flex-col items-center justify-center gap-3 border-t border-custom-border-100 py-5 px-5">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
<GithubLoginButton handleSignIn={handleGithubSignIn} />
</div>

95
apps/app/pages/installations/[provider]/index.tsx
View file

@ -26,7 +26,6 @@ const AppPostInstallation = ({
provider,
code,
}: IGithuPostInstallationProps) => {
const { setToastAlert } = useToast();
useEffect(() => {
@ -42,59 +41,59 @@ const AppPostInstallation = ({
console.log(err);
});
} else if (provider === "slack" && state && code) {
appinstallationsService
.getSlackAuthDetails(code)
.then((res) => {
const [workspaceSlug, projectId, integrationId] = state.split(",");
appinstallationsService
.getSlackAuthDetails(code)
.then((res) => {
const [workspaceSlug, projectId, integrationId] = state.split(",");
if(!projectId) {
const payload = {
metadata: {
...res,
},
};
if (!projectId) {
const payload = {
metadata: {
...res,
},
};
appinstallationsService
.addInstallationApp(state, provider, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err?.response;
});
} else {
const payload = {
access_token: res.access_token,
bot_user_id: res.bot_user_id,
webhook_url: res.incoming_webhook.url,
data: res,
team_id: res.team.id,
team_name: res.team.name,
scopes: res.scope,
};
appinstallationsService
.addSlackChannel(workspaceSlug, projectId, integrationId, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err.response
})
}
})
.catch((err) => {
console.log(err);
});
appinstallationsService
.addInstallationApp(state, provider, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err?.response;
});
} else {
const payload = {
access_token: res.access_token,
bot_user_id: res.bot_user_id,
webhook_url: res.incoming_webhook.url,
data: res,
team_id: res.team.id,
team_name: res.team.name,
scopes: res.scope,
};
appinstallationsService
.addSlackChannel(workspaceSlug, projectId, integrationId, payload)
.then((r) => {
window.opener = null;
window.open("", "_self");
window.close();
})
.catch((err) => {
throw err.response;
});
}
})
.catch((err) => {
console.log(err);
});
}
}, [state, installation_id, provider, code]);
return (
<div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">
<h2 className="text-2xl text-brand-base">Installing. Please wait...</h2>
<div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
<h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
<Spinner />
</div>
);

18
apps/app/pages/invitations.tsx
View file

@ -85,18 +85,18 @@ const OnBoard: NextPage = () => {
<div className="relative grid h-full place-items-center p-5">
<div className="h-full flex flex-col items-center justify-center w-full py-4">
<div className="mb-7 flex items-center justify-center text-center">
<OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
</div>
<div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-brand-base shadow-md">
<div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-custom-background-100 shadow-md">
{invitations && workspaces ? (
invitations.length > 0 ? (
<div className="flex w-full flex-col gap-3 justify-between">
<div className="flex flex-col gap-2 justify-center ">
<h3 className="text-base font-semibold text-brand-base">
<h3 className="text-base font-semibold text-custom-text-100">
Workspace Invitations
</h3>
<p className="text-sm text-brand-secondary">
<p className="text-sm text-custom-text-200">
Create or join the workspace to get started with Plane.
</p>
</div>
@ -129,12 +129,12 @@ const OnBoard: NextPage = () => {
{workspaces.map((workspace) => (
<Link key={workspace.id} href={workspace.slug}>
<a>
<div className="mb-2 flex items-center justify-between rounded border border-brand-base px-4 py-2">
<div className="mb-2 flex items-center justify-between rounded border border-custom-border-100 px-4 py-2">
<div className="flex items-center gap-x-2 text-sm">
<CubeIcon className="h-5 w-5 text-brand-secondary" />
<CubeIcon className="h-5 w-5 text-custom-text-200" />
{workspace.name}
</div>
<div className="flex items-center gap-x-2 text-xs text-brand-secondary">
<div className="flex items-center gap-x-2 text-xs text-custom-text-200">
{workspace.owner.first_name}
</div>
</div>
@ -167,8 +167,8 @@ const OnBoard: NextPage = () => {
</div>
</div>
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
<span className="text-xs text-brand-secondary">Logged in:</span>
<span className="text-sm text-brand-base">{user?.email}</span>
<span className="text-xs text-custom-text-200">Logged in:</span>
<span className="text-sm text-custom-text-100">{user?.email}</span>
</div>
</div>
</DefaultLayout>

8
apps/app/pages/magic-sign-in.tsx
View file

@ -45,18 +45,18 @@ const MagicSignIn: NextPage = () => {
return (
<DefaultLayout>
<div className="h-screen w-full overflow-auto bg-brand-surface-1">
<div className="h-screen w-full overflow-auto bg-custom-background-90">
{isSigningIn ? (
<div className="flex h-full w-full flex-col items-center justify-center gap-3">
<h2 className="text-4xl font-medium">Signing you in...</h2>
<p className="text-sm font-medium text-brand-secondary">
<p className="text-sm font-medium text-custom-text-200">
Please wait while we are preparing your take off.
</p>
</div>
) : errorSigningIn ? (
<div className="flex h-full w-full flex-col items-center justify-center gap-3">
<h2 className="text-4xl font-medium">Error</h2>
<div className="text-sm font-medium text-brand-secondary flex gap-2">
<div className="text-sm font-medium text-custom-text-200 flex gap-2">
<div>{errorSigningIn}.</div>
<span
className="cursor-pointer underline"
@ -86,7 +86,7 @@ const MagicSignIn: NextPage = () => {
) : (
<div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
<h2 className="text-4xl font-medium">Success</h2>
<p className="text-sm font-medium text-brand-secondary">
<p className="text-sm font-medium text-custom-text-200">
Redirecting you to the app...
</p>
</div>

8
apps/app/pages/onboarding.tsx
View file

@ -52,7 +52,7 @@ const Onboarding: NextPage = () => {
{step <= 3 ? (
<div className="h-full flex flex-col justify-center w-full py-4">
<div className="mb-7 flex items-center justify-center text-center">
<OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
</div>
{step === 1 ? (
<UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
@ -64,7 +64,7 @@ const Onboarding: NextPage = () => {
</div>
) : (
<div className="flex w-full max-w-2xl flex-col gap-12">
<div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
<div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-custom-background-100 pb-7 text-center shadow-md">
{step === 4 ? (
<OnboardingCard data={ONBOARDING_CARDS.welcome} />
) : step === 5 ? (
@ -124,8 +124,8 @@ const Onboarding: NextPage = () => {
</div>
)}
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
<span className="text-xs text-brand-secondary">Logged in:</span>
<span className="text-sm text-brand-base">{user?.email}</span>
<span className="text-xs text-custom-text-200">Logged in:</span>
<span className="text-sm text-custom-text-100">{user?.email}</span>
</div>
</div>
)}

4
apps/app/pages/reset-password.tsx
View file

@ -81,11 +81,11 @@ const ResetPasswordPage: NextPage = () => {
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
<div className="flex flex-col items-center justify-center gap-10">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<h2 className="text-center text-xl font-medium text-brand-base">
<h2 className="text-center text-xl font-medium text-custom-text-100">
Reset your password
</h2>
</div>
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
<div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
<div>
<Input

4
apps/app/pages/sign-up.tsx
View file

@ -65,12 +65,12 @@ const SignUp: NextPage = () => {
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
<div className="flex flex-col items-center justify-center gap-10">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<div className="text-center text-xl font-medium text-brand-base">
<div className="text-center text-xl font-medium text-custom-text-100">
Create a new Plane Account
</div>
</div>
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
<div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
<EmailPasswordForm onSubmit={handleSignUp} />
</div>
</div>

2
apps/app/pages/workspace-member-invitation.tsx
View file

@ -66,7 +66,7 @@ const WorkspaceInvitation: NextPage = () => {
{invitationDetail ? (
<>
{error ? (
<div className="flex w-full flex-col space-y-4 rounded border border-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
<div className="flex w-full flex-col space-y-4 rounded border border-custom-border-100 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
<h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
</div>
) : (