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

fix: theming colors (#1533)

Browse source 
* chore: update border colors

* chore: loading screens bg color, custom theming default values

* chore: remove unnecessary images

* chore: update static colors

* chore: update old variable names

* chore: update issue activity icon colors

* chore: update user activity icon colors
This commit is contained in:
Aaryan Khandelwal 2023-07-17 16:28:23 +05:30 • committed by GitHub
parent 090870b03e
commit 538d67dbd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
196 changed files with 442 additions and 648 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -96,12 +96,12 @@ const Analytics = () => {
projects.length > 0 ? (
<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-custom-border-300 px-5 py-3">
<Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
{tabsList.map((tab) => (
<Tab
key={tab}
className={({ selected }) =>
`rounded-3xl border border-custom-border-300 px-4 py-2 text-xs hover:bg-custom-background-80 ${
`rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
selected ? "bg-custom-background-80" : ""
}`
}

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

@ -93,21 +93,21 @@ const WorkspacePage: NextPage = () => {
projects.length > 0 ? (
<div className="p-8">
<div className="flex flex-col gap-8">
<div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-300 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
<p className="font-semibold">
<div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-200 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
<p className="font-medium text-custom-text-100">
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-custom-border-300 px-3 py-1.5 text-sm font-medium duration-300"
className="rounded-md border-2 border-custom-border-200 px-3 py-1.5 text-sm font-medium hover:text-custom-text-100 duration-300"
>
{`What's New?`}
What{"'"}s New?
</button>
<a
href="https://github.com/makeplane/plane"
target="_blank"
className="rounded-md border-2 border-custom-border-300 px-3 py-1.5 text-sm font-medium duration-300"
className="rounded-md border-2 border-custom-border-200 px-3 py-1.5 text-sm font-medium hover:text-custom-text-100 duration-300"
rel="noopener noreferrer"
>
Star us on GitHub

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

@ -50,7 +50,7 @@ const MyIssuesPage: NextPage = () => {
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center gap-2 rounded-md border border-custom-border-300 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
className={`group flex items-center gap-2 rounded-md border border-custom-border-200 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"
}`}
>
@ -81,7 +81,7 @@ const MyIssuesPage: NextPage = () => {
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-300"
: "border-custom-border-200"
}`}
onClick={() => setProperties(key as keyof Properties)}
>

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
View file

@ -170,7 +170,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
</button>
</div>
)}
<div className="space-y-5 divide-y-2 divide-custom-border-300 opacity-60">
<div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60">
<IssueMainContent
issueDetails={issueDetails}
submitChanges={submitChanges}
@ -178,7 +178,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
/>
</div>
</div>
<div className="w-1/3 space-y-5 border-l border-custom-border-300 p-5">
<div className="w-1/3 space-y-5 border-l border-custom-border-200 p-5">
<IssueDetailsSidebar
control={control}
issueDetail={issueDetails}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
View file

@ -55,11 +55,11 @@ const ProjectArchivedIssues: NextPage = () => {
}
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-300">
<div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
<button
type="button"
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
className="flex items-center gap-1.5 rounded-full border border-custom-border-300 px-3 py-1.5 text-xs"
className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
>
<Icon iconName="archive" className="text-base" />
<span>Archived Issues</span>

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

@ -177,7 +177,7 @@ const ProjectCycles: NextPage = () => {
`rounded-3xl border px-6 py-1 outline-none ${
selected
? "border-custom-primary bg-custom-primary text-white font-medium"
: "border-custom-border-300 bg-custom-background-100 hover:bg-custom-background-80"
: "border-custom-border-200 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-custom-border-300 overflow-hidden">
<div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 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 overflow-hidden">
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-200 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div>
<div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
<div className="w-1/3 h-full space-y-5 border-l border-custom-border-200 p-5 overflow-hidden">
<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-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-200 hover:text-custom-text-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-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-200 hover:text-custom-text-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-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-100">
<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-200">
{inboxList?.[0]?.pending_issue_count}
</span>
)}

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

@ -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-custom-border-300 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-200 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 });
@ -455,13 +455,13 @@ const SinglePage: NextPage = () => {
height: "1.85rem",
fontSize: "0.875rem",
paddingLeft: "0.25rem",
color: `rgba(var(--color-text-secondary))`,
color: `rgba(var(--color-text-200))`,
boxShadow: "none",
backgroundColor: `rgba(var(--color-background-90))`,
borderLeft: `1px solid rgba(var(--color-background-80))`,
},
hash: {
color: `rgba(var(--color-text-secondary))`,
color: `rgba(var(--color-text-200))`,
boxShadow: "none",
backgroundColor: `rgba(var(--color-background-90))`,
},

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

@ -177,7 +177,7 @@ const ProjectPages: NextPage = () => {
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-300 bg-custom-background-100 hover:bg-custom-background-90"
: "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
}`
}
>

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="h-full mt-5 divide-y divide-custom-border-300 rounded-xl border border-custom-border-300 bg-custom-background-100 px-6 overflow-y-auto">
<section className="h-full mt-5 divide-y divide-custom-border-200 rounded-xl border border-custom-border-200 bg-custom-background-100 px-6 overflow-y-auto">
{estimatesList.map((estimate) => (
<SingleEstimate
key={estimate.id}

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

@ -154,7 +154,7 @@ 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-custom-border-300 bg-custom-background-100 p-5"
className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5"
>
<div className="flex items-start gap-3">
{feature.icon}

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

@ -261,7 +261,7 @@ const GeneralSettings: NextPage = () => {
</div>
<div className="col-span-12 sm:col-span-6">
{watch("cover_image") ? (
<div className="h-32 w-full rounded border border-custom-border-300 p-1">
<div className="h-32 w-full rounded border border-custom-border-200 p-1">
<div className="relative h-full w-full rounded">
<img
src={watch("cover_image")!}

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

@ -168,7 +168,7 @@ const MembersSettings: NextPage = () => {
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100 px-6">
<div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200 bg-custom-background-100 px-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex items-center justify-between py-6">

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

@ -95,7 +95,7 @@ const StatesSettings: NextPage = () => {
Add
</button>
</div>
<div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300">
<div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200">
{key === activeGroup && (
<CreateUpdateStateInline
groupLength={orderedStateGroups[key].length}
@ -121,7 +121,7 @@ const StatesSettings: NextPage = () => {
/>
) : (
<div
className="border-b border-custom-border-300 last:border-b-0"
className="border-b border-custom-border-200 last:border-b-0"
key={state.id}
>
<CreateUpdateStateInline

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

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

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

@ -48,7 +48,7 @@ const BillingSettings: NextPage = () => {
</div>
<div className="space-y-8 md:w-2/3">
<div>
<div className="w-80 rounded-md border border-custom-border-300 bg-custom-background-100 p-4 text-center">
<div className="w-80 rounded-md border border-custom-border-200 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>

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

@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100 px-6">
<div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200 bg-custom-background-100 px-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex items-center justify-between py-6">

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

@ -120,7 +120,7 @@ const OnBoard: NextPage = () => {
className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
isSelected
? "border-custom-primary-100"
: "border-custom-border-300 hover:bg-custom-background-80"
: "border-custom-border-200 hover:bg-custom-background-80"
}`}
onClick={() =>
handleInvitation(invitation, isSelected ? "withdraw" : "accepted")

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

@ -121,6 +121,7 @@ const ResetPasswordPage: NextPage = () => {
}}
error={errors.password}
placeholder="Enter new password..."
className="border-custom-border-300"
/>
</div>
<div className="space-y-1">
@ -134,6 +135,7 @@ const ResetPasswordPage: NextPage = () => {
}}
error={errors.confirmPassword}
placeholder="Confirm new password..."
className="border-custom-border-300"
/>
</div>
<PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>

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-custom-border-300 bg-custom-background-100 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-200 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>
) : (