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

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