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

feat: themes (#902)

Browse source 
* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
This commit is contained in:
Aaryan Khandelwal 2023-04-20 13:41:24 +05:30 • committed by GitHub
parent 9f04933957
commit 3c2f5d12ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
191 changed files with 1550 additions and 880 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -150,7 +150,7 @@ const SingleCycle: React.FC = () => {
<IssuesFilterView />
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
cycleSidebar ? "rotate-180" : ""
}`}
onClick={() => setCycleSidebar((prevData) => !prevData)}

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

@ -127,7 +127,7 @@ const ProjectCycles: NextPage = () => {
<div className="space-y-8">
<div className="flex flex-col gap-5">
{currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
<h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
<h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>
)}
<div className="space-y-5">
<CyclesList
@ -139,7 +139,7 @@ const ProjectCycles: NextPage = () => {
</div>
</div>
<div className="flex flex-col gap-5">
<h3 className="text-3xl font-semibold text-black">Other Cycles</h3>
<h3 className="text-3xl font-semibold text-brand-base">Other Cycles</h3>
<div>
<Tab.Group
defaultIndex={currentTabValue(cycleTab)}
@ -165,8 +165,8 @@ const ProjectCycles: NextPage = () => {
className={({ selected }) =>
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>
@ -176,8 +176,8 @@ const ProjectCycles: NextPage = () => {
className={({ selected }) =>
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>
@ -187,8 +187,8 @@ const ProjectCycles: NextPage = () => {
className={({ selected }) =>
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>

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

@ -140,10 +140,10 @@ const IssueDetailsPage: NextPage = () => {
>
{issueDetails && projectId ? (
<div className="flex h-full">
<div className="basis-2/3 space-y-5 divide-y-2 p-5">
<div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
<div className="rounded-lg">
{issueDetails?.parent && issueDetails.parent !== "" ? (
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
<Link
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issueDetails.parent
@ -182,7 +182,7 @@ const IssueDetailsPage: NextPage = () => {
</CustomMenu.MenuItem>
))
) : (
<CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-gray-900">
<CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-base">
No other sibling issues
</CustomMenu.MenuItem>
)}
@ -201,13 +201,13 @@ const IssueDetailsPage: NextPage = () => {
<IssueAttachments />
</div>
</div>
<div className="space-y-5 bg-secondary pt-3">
<h3 className="text-lg">Comments/Activity</h3>
<div className="space-y-5 bg-brand-base pt-3">
<h3 className="text-lg text-brand-base">Comments/Activity</h3>
<IssueActivitySection />
<AddComment />
</div>
</div>
<div className="basis-1/3 space-y-5 border-l p-5">
<div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
<IssueDetailsSidebar
control={control}
issueDetail={issueDetails}

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

@ -154,7 +154,7 @@ const SingleModule: React.FC = () => {
<IssuesFilterView />
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
moduleSidebar ? "rotate-180" : ""
}`}
onClick={() => setModuleSidebar((prevData) => !prevData)}

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

@ -91,7 +91,7 @@ const ProjectModules: NextPage = () => {
modules.length > 0 ? (
<div className="space-y-5">
<div className="flex flex-col gap-5">
<h3 className="text-3xl font-semibold text-black">Modules</h3>
<h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
<div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
{modules.map((module) => (

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

@ -310,11 +310,11 @@ const SinglePage: NextPage = () => {
}
>
{pageDetails ? (
<div className="h-full w-full space-y-4 rounded-md border bg-white p-4">
<div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-surface-1 p-4">
<div className="flex items-center justify-between gap-2 px-3">
<button
type="button"
className="flex items-center gap-2 text-sm text-gray-500"
className="flex items-center gap-2 text-sm text-brand-secondary"
onClick={() => router.back()}
>
<ArrowLeftIcon className="h-4 w-4" />
@ -331,7 +331,7 @@ const SinglePage: NextPage = () => {
return (
<div
key={label.id}
className="group flex items-center gap-1 cursor-pointer rounded-2xl border px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
className="group flex items-center gap-1 cursor-pointer rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
onClick={() => {
const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
partialUpdatePage({ labels_list: updatedLabels });
@ -358,7 +358,7 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-md bg-gray-100 p-1.5 text-xs hover:bg-gray-200"
className="flex items-center gap-1 rounded-md bg-brand-surface-1 p-1.5 text-xs hover:bg-brand-surface-2"
>
<PlusIcon className="h-3.5 w-3.5" />
</button>
@ -375,7 +375,7 @@ const SinglePage: NextPage = () => {
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 pr-2.5 py-1 text-xs hover:bg-gray-200"
className="flex items-center gap-1 rounded-md bg-brand-surface-1 px-3 py-1.5 text-xs hover:bg-brand-surface-2"
>
<PlusIcon className="h-3 w-3" />
Add label
@ -407,7 +407,7 @@ const SinglePage: NextPage = () => {
<Popover.Button
type="button"
className={`group inline-flex items-center outline-none ${
open ? "text-gray-900" : "text-gray-500"
open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" ? (

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

@ -244,8 +244,8 @@ const ProjectPages: NextPage = () => {
className={({ selected }) =>
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>
@ -257,8 +257,8 @@ const ProjectPages: NextPage = () => {
<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-gray-200 ${
viewType === "list" ? "bg-gray-200" : ""
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" : ""
}`}
onClick={() => setViewType("list")}
>
@ -266,8 +266,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-gray-200 ${
viewType === "detailed" ? "bg-gray-200" : ""
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" : ""
}`}
onClick={() => setViewType("detailed")}
>
@ -275,8 +275,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-gray-200 ${
viewType === "masonry" ? "bg-gray-200" : ""
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "masonry" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setViewType("masonry")}
>

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

@ -108,7 +108,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-xl font-semibold">Project Lead</h4>
<p className="text-gray-500">Select the project leader.</p>
<p className="text-brand-secondary">Select the project leader.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -168,7 +168,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-xl font-semibold">Default Assignee</h4>
<p className="text-gray-500">Select the default assignee for the project.</p>
<p className="text-brand-secondary">Select the default assignee for the project.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (

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

@ -91,12 +91,12 @@ const FeaturesSettings: NextPage = () => {
<section className="space-y-8">
<h3 className="text-2xl font-semibold">Features</h3>
<div className="space-y-5">
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
<div className="flex items-start gap-3">
<ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
<div>
<h4 className="text-xl font-semibold">Cycles</h4>
<p className="text-gray-500">
<p className="text-brand-secondary">
Cycles are enabled for all the projects in this workspace. Access them from the
navigation bar.
</p>
@ -105,7 +105,7 @@ const FeaturesSettings: NextPage = () => {
<button
type="button"
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
projectDetails?.cycle_view ? "bg-green-500" : "bg-gray-200"
projectDetails?.cycle_view ? "bg-green-500" : "bg-brand-surface-2"
}`}
role="switch"
aria-checked={projectDetails?.cycle_view}
@ -126,18 +126,18 @@ const FeaturesSettings: NextPage = () => {
<span className="sr-only">Use cycles</span>
<span
aria-hidden="true"
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
</div>
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
<div className="flex items-start gap-3">
<PeopleGroupIcon color="#FF6B00" width={28} height={28} className="flex-shrink-0" />
<div>
<h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
<p className="text-gray-500">
<p className="text-brand-secondary">
Modules are enabled for all the projects in this workspace. Access it from the
navigation bar.
</p>
@ -146,7 +146,7 @@ const FeaturesSettings: NextPage = () => {
<button
type="button"
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
projectDetails?.module_view ? "bg-green-500" : "bg-gray-200"
projectDetails?.module_view ? "bg-green-500" : "bg-brand-surface-2"
}`}
role="switch"
aria-checked={projectDetails?.module_view}
@ -167,18 +167,18 @@ const FeaturesSettings: NextPage = () => {
<span className="sr-only">Use cycles</span>
<span
aria-hidden="true"
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
</div>
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
<div className="flex items-start gap-3">
<ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
<div>
<h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
<p className="text-gray-500">
<p className="text-brand-secondary">
Views are enabled for all the projects in this workspace. Access it from the
navigation bar.
</p>
@ -187,7 +187,7 @@ const FeaturesSettings: NextPage = () => {
<button
type="button"
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
projectDetails?.issue_views_view ? "bg-green-500" : "bg-gray-200"
projectDetails?.issue_views_view ? "bg-green-500" : "bg-brand-surface-2"
}`}
role="switch"
aria-checked={projectDetails?.issue_views_view}
@ -208,18 +208,18 @@ const FeaturesSettings: NextPage = () => {
<span className="sr-only">Use views</span>
<span
aria-hidden="true"
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
projectDetails?.issue_views_view ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
</div>
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
<div className="flex items-start gap-3">
<DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
<div>
<h4 className="text-xl font-semibold">Pages</h4>
<p className="text-gray-500">
<p className="text-brand-secondary">
Pages are enabled for all the projects in this workspace. Access them from the
navigation bar.
</p>
@ -228,7 +228,7 @@ const FeaturesSettings: NextPage = () => {
<button
type="button"
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
projectDetails?.page_view ? "bg-green-500" : "bg-gray-200"
projectDetails?.page_view ? "bg-green-500" : "bg-brand-surface-2"
}`}
role="switch"
aria-checked={projectDetails?.page_view}
@ -249,7 +249,7 @@ const FeaturesSettings: NextPage = () => {
<span className="sr-only">Use cycles</span>
<span
aria-hidden="true"
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
}`}
/>

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

@ -156,7 +156,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-xl font-semibold">Icon & Name</h4>
<p className="text-gray-500">Select an icon and a name for your project.</p>
<p className="text-brand-secondary">Select an icon and a name for your project.</p>
</div>
<div className="col-span-12 flex gap-2 sm:col-span-6">
{projectDetails ? (
@ -197,7 +197,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-xl font-semibold">Description</h4>
<p className="text-gray-500">Give a description to your project.</p>
<p className="text-brand-secondary">Give a description to your project.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -254,8 +254,8 @@ 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-xl font-semibold">Identifier</h4>
<p className="text-gray-500">
Create a 1-5 characters{"'"} identifier for the project.
<p className="text-brand-secondary">
Create a 1-6 characters{"'"} identifier for the project.
</p>
</div>
<div className="col-span-12 sm:col-span-6">
@ -290,7 +290,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-xl font-semibold">Network</h4>
<p className="text-gray-500">Select privacy type for the project.</p>
<p className="text-brand-secondary">Select privacy type for the project.</p>
</div>
<div className="col-span-12 sm:col-span-6">
{projectDetails ? (
@ -337,7 +337,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-xl font-semibold">Danger Zone</h4>
<p className="text-gray-500">
<p className="text-brand-secondary">
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

@ -106,7 +106,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-gray-500">Manage the labels of this project.</p>
<p className="text-brand-secondary">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

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

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

@ -72,8 +72,8 @@ const StatesSettings: NextPage = () => {
>
<div className="grid grid-cols-12 gap-10">
<div className="col-span-12 sm:col-span-5">
<h3 className="text-2xl font-semibold">States</h3>
<p className="text-gray-500">Manage the states of this project.</p>
<h3 className="text-2xl font-semibold text-brand-base">States</h3>
<p className="text-brand-secondary">Manage the states of this project.</p>
</div>
<div className="col-span-12 space-y-8 sm:col-span-7">
{states && projectDetails ? (
@ -85,14 +85,14 @@ const StatesSettings: NextPage = () => {
<h4 className="font-medium capitalize">{key}</h4>
<button
type="button"
className="flex items-center gap-2 text-theme outline-none"
className="flex items-center gap-2 text-brand-accent outline-none"
onClick={() => setActiveGroup(key as keyof StateGroup)}
>
<PlusIcon className="h-4 w-4" />
Add
</button>
</div>
<div className="divide-y rounded-[10px] border">
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
{key === activeGroup && (
<CreateUpdateStateInline
onClose={() => {

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

@ -79,7 +79,7 @@ const ProjectViews: NextPage = () => {
document.dispatchEvent(e);
}}
>
<PlusIcon className="w-4 h-4" />
<PlusIcon className="h-4 w-4" />
Create View
</PrimaryButton>
</div>
@ -98,8 +98,8 @@ const ProjectViews: NextPage = () => {
{views ? (
views.length > 0 ? (
<div className="space-y-5">
<h3 className="text-3xl font-semibold text-black">Views</h3>
<ul role="list" className="divide-y">
<h3 className="text-3xl font-semibold text-brand-base">Views</h3>
<div className="rounded-[10px] border border-brand-base">
{views.map((view) => (
<SingleViewItem
key={view.id}
@ -108,7 +108,7 @@ const ProjectViews: NextPage = () => {
handleDeleteView={() => handleDeleteView(view)}
/>
))}
</ul>
</div>
</div>
) : (
<EmptyState