chore: update classnames according to the new theming structure (#1494)
* 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
GitHub
parent
a14f8c281b
commit
4c2cb2368a
329 changed files with 2130 additions and 1995 deletions
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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))`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue