mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
feat: themes (#902)
* 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
GitHub
parent
9f04933957
commit
3c2f5d12ed
@ -141,7 +141,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
|
||||
<button
|
||||
type="button"
|
||||
className={`mt-5 flex w-full justify-end text-xs outline-none ${
|
||||
isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-theme"
|
||||
isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-brand-accent"
|
||||
} `}
|
||||
onClick={() => {
|
||||
setIsCodeResending(true);
|
||||
|
||||
@ -94,7 +94,7 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="ml-auto text-sm">
|
||||
<Link href={"/forgot-password"}>
|
||||
<a className="font-medium text-theme hover:text-indigo-500">Forgot your password?</a>
|
||||
<a className="font-medium text-brand-accent hover:text-indigo-500">Forgot your password?</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -37,7 +37,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
|
||||
<Link
|
||||
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
|
||||
>
|
||||
<button className="flex w-full items-center justify-center gap-3 rounded-md border border-gray-200 p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
|
||||
<button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
|
||||
<Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
|
||||
<span>Sign In with Github</span>
|
||||
</button>
|
||||
|
||||
@ -36,16 +36,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
|
||||
alt="ProjectSettingImg"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-xl font-medium text-gray-900">
|
||||
<h1 className="text-xl font-medium text-brand-base">
|
||||
Oops! You are not authorized to view this page
|
||||
</h1>
|
||||
|
||||
<div className="w-full text-base text-gray-500 max-w-md ">
|
||||
<div className="w-full text-base text-brand-secondary max-w-md ">
|
||||
{user ? (
|
||||
<p>
|
||||
You have signed in as {user.email}. <br />
|
||||
<Link href={`/signin?next=${currentPath}`}>
|
||||
<a className="text-gray-900 font-medium">Sign in</a>
|
||||
<a className="text-brand-base font-medium">Sign in</a>
|
||||
</Link>{" "}
|
||||
with different account that has access to this page.
|
||||
</p>
|
||||
@ -53,7 +53,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
|
||||
<p>
|
||||
You need to{" "}
|
||||
<Link href={`/signin?next=${currentPath}`}>
|
||||
<a className="text-gray-900 font-medium">Sign in</a>
|
||||
<a className="text-brand-base font-medium">Sign in</a>
|
||||
</Link>{" "}
|
||||
with an account that has access to this page.
|
||||
</p>
|
||||
|
||||
@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
|
||||
className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeftIcon className="h-3 w-3" />
|
||||
@ -37,7 +37,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
|
||||
<>
|
||||
{link ? (
|
||||
<Link href={link}>
|
||||
<a className="border-r-2 border-gray-300 px-3 text-sm">
|
||||
<a className="border-r-2 border-brand-base px-3 text-sm">
|
||||
<p className={`${icon ? "flex items-center gap-2" : ""}`}>
|
||||
{icon ?? null}
|
||||
{title}
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
|
||||
// cmdk
|
||||
import { Command } from "cmdk";
|
||||
import { THEMES_OBJ } from "constants/themes";
|
||||
import { useTheme } from "next-themes";
|
||||
import { SettingIcon } from "components/icons";
|
||||
|
||||
type Props = {
|
||||
setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{THEMES_OBJ.map((theme) => (
|
||||
<Command.Item
|
||||
key={theme.value}
|
||||
onSelect={() => {
|
||||
setTheme(theme.value);
|
||||
setIsPaletteOpen(false);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
{theme.label}
|
||||
</div>
|
||||
</Command.Item>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -44,6 +44,7 @@ import {
|
||||
ChangeIssueState,
|
||||
ChangeIssuePriority,
|
||||
ChangeIssueAssignee,
|
||||
ChangeInterfaceTheme,
|
||||
} from "components/command-palette";
|
||||
import { BulkDeleteIssuesModal } from "components/core";
|
||||
import { CreateUpdateCycleModal } from "components/cycles";
|
||||
@ -379,7 +380,7 @@ export const CommandPalette: React.FC = () => {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
@ -392,7 +393,7 @@ export const CommandPalette: React.FC = () => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl bg-brand-surface-2 border-brand-base border shadow-2xl transition-all">
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
if (value.toLowerCase().includes(search.toLowerCase())) return 1;
|
||||
@ -415,7 +416,7 @@ export const CommandPalette: React.FC = () => {
|
||||
>
|
||||
{issueId && issueDetails && (
|
||||
<div className="flex p-3">
|
||||
<p className="overflow-hidden truncate rounded-md bg-gray-100 p-1 px-2 text-xs font-medium text-gray-500">
|
||||
<p className="overflow-hidden truncate rounded-md bg-brand-surface-1 p-1 px-2 text-xs font-medium text-brand-secondary">
|
||||
{issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
|
||||
{issueDetails?.name}
|
||||
</p>
|
||||
@ -423,11 +424,11 @@ export const CommandPalette: React.FC = () => {
|
||||
)}
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Command.Input
|
||||
className="w-full border-0 border-b bg-transparent p-4 pl-11 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="w-full border-0 border-b border-brand-base bg-transparent p-4 pl-11 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder={placeholder}
|
||||
value={searchTerm}
|
||||
onValueChange={(e) => {
|
||||
@ -441,7 +442,9 @@ export const CommandPalette: React.FC = () => {
|
||||
resultsCount === 0 &&
|
||||
searchTerm !== "" &&
|
||||
debouncedSearchTerm !== "" && (
|
||||
<div className="my-4 text-center text-gray-500">No results found.</div>
|
||||
<div className="my-4 text-center text-brand-secondary">
|
||||
No results found.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(isLoading || isSearching) && (
|
||||
@ -502,8 +505,11 @@ export const CommandPalette: React.FC = () => {
|
||||
value={value}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-hidden text-gray-700">
|
||||
<Icon className="h-4 w-4 text-gray-500" color="#6b7280" />
|
||||
<div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
|
||||
<Icon
|
||||
className="h-4 w-4 text-brand-secondary"
|
||||
color="#6b7280"
|
||||
/>
|
||||
<p className="block flex-1 truncate">{item.name}</p>
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -528,8 +534,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<Squares2X2Icon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
|
||||
Change state...
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -541,8 +547,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<ChartBarIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<ChartBarIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Change priority...
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -554,8 +560,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<UsersIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<UsersIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Assign to...
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -566,15 +572,15 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{issueDetails?.assignees.includes(user.id) ? (
|
||||
<>
|
||||
<UserMinusIcon className="h-4 w-4 text-gray-500" />
|
||||
<UserMinusIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Un-assign from me
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlusIcon className="h-4 w-4 text-gray-500" />
|
||||
<UserPlusIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Assign to me
|
||||
</>
|
||||
)}
|
||||
@ -582,8 +588,8 @@ export const CommandPalette: React.FC = () => {
|
||||
</Command.Item>
|
||||
|
||||
<Command.Item onSelect={deleteIssue} className="focus:outline-none">
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<TrashIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<TrashIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Delete issue
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -594,16 +600,19 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<LinkIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<LinkIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Copy issue URL to clipboard
|
||||
</div>
|
||||
</Command.Item>
|
||||
</>
|
||||
)}
|
||||
<Command.Group heading="Issue">
|
||||
<Command.Item onSelect={createNewIssue} className="focus:bg-gray-200">
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<Command.Item
|
||||
onSelect={createNewIssue}
|
||||
className="focus:bg-brand-surface-2"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
|
||||
Create new issue
|
||||
</div>
|
||||
@ -617,7 +626,7 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={createNewProject}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
|
||||
Create new project
|
||||
</div>
|
||||
@ -633,7 +642,7 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={createNewCycle}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<ContrastIcon className="h-4 w-4" color="#6b7280" />
|
||||
Create new cycle
|
||||
</div>
|
||||
@ -646,7 +655,7 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={createNewModule}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
|
||||
Create new module
|
||||
</div>
|
||||
@ -656,7 +665,7 @@ export const CommandPalette: React.FC = () => {
|
||||
|
||||
<Command.Group heading="View">
|
||||
<Command.Item onSelect={createNewView} className="focus:outline-none">
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<ViewListIcon className="h-4 w-4" color="#6b7280" />
|
||||
Create new view
|
||||
</div>
|
||||
@ -685,7 +694,7 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4" color="#6b7280" />
|
||||
Search settings...
|
||||
</div>
|
||||
@ -696,11 +705,24 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={createNewWorkspace}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<FolderPlusIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Create new workspace
|
||||
</div>
|
||||
</Command.Item>
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
setPlaceholder("Change interface theme...");
|
||||
setSearchTerm("");
|
||||
setPages([...pages, "change-interface-theme"]);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Change interface theme...
|
||||
</div>
|
||||
</Command.Item>
|
||||
</Command.Group>
|
||||
<Command.Group heading="Help">
|
||||
<Command.Item
|
||||
@ -713,8 +735,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<RocketLaunchIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Open keyboard shortcuts
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -725,8 +747,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<DocumentIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<DocumentIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Open Plane documentation
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -737,7 +759,7 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<DiscordIcon className="h-4 w-4" color="#6b7280" />
|
||||
Join our Discord
|
||||
</div>
|
||||
@ -752,7 +774,7 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<GithubIcon className="h-4 w-4" color="#6b7280" />
|
||||
Report a bug
|
||||
</div>
|
||||
@ -764,8 +786,8 @@ export const CommandPalette: React.FC = () => {
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Chat with us
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -779,8 +801,8 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={() => goToSettings()}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<SettingIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
General
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -788,8 +810,8 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={() => goToSettings("members")}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<SettingIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Members
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -797,8 +819,8 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={() => goToSettings("billing")}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<SettingIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Billings and Plans
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -806,8 +828,8 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={() => goToSettings("integrations")}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<SettingIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Integrations
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -815,8 +837,8 @@ export const CommandPalette: React.FC = () => {
|
||||
onSelect={() => goToSettings("import-export")}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<SettingIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<SettingIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Import/Export
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -842,6 +864,9 @@ export const CommandPalette: React.FC = () => {
|
||||
setIsPaletteOpen={setIsPaletteOpen}
|
||||
/>
|
||||
)}
|
||||
{page === "change-interface-theme" && (
|
||||
<ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
</Dialog.Panel>
|
||||
|
||||
@ -3,3 +3,4 @@ export * from "./shortcuts-modal";
|
||||
export * from "./change-issue-state";
|
||||
export * from "./change-issue-priority";
|
||||
export * from "./change-issue-assignee";
|
||||
export * from "./change-interface-theme";
|
||||
|
||||
@ -71,7 +71,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -85,29 +85,29 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-white p-5">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-brand-surface-2 p-5">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="flex justify-between text-lg font-medium leading-6 text-gray-900"
|
||||
className="flex justify-between text-lg font-medium leading-6 text-brand-base"
|
||||
>
|
||||
<span>Keyboard Shortcuts</span>
|
||||
<span>
|
||||
<button type="button" onClick={() => setIsOpen(false)}>
|
||||
<XMarkIcon
|
||||
className="h-6 w-6 text-gray-400 hover:text-gray-500"
|
||||
className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</Dialog.Title>
|
||||
<div>
|
||||
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-gray-200 bg-gray-100 px-3 py-2">
|
||||
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-gray-500" />
|
||||
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
|
||||
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
|
||||
<Input
|
||||
className="w-full border-none bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
className="w-full border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
|
||||
id="search"
|
||||
name="search"
|
||||
type="text"
|
||||
@ -123,16 +123,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
<div key={shortcut.keys} className="flex w-full flex-col">
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-500">{shortcut.description}</p>
|
||||
<p className="text-sm text-brand-secondary">{shortcut.description}</p>
|
||||
<div className="flex items-center gap-x-2.5">
|
||||
{shortcut.keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
{key === "Ctrl" ? (
|
||||
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
|
||||
<MacCommandIcon />
|
||||
</span>
|
||||
) : (
|
||||
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
|
||||
{key === "Ctrl" ? <MacCommandIcon /> : key}
|
||||
</kbd>
|
||||
)}
|
||||
@ -145,7 +145,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
No shortcuts found for{" "}
|
||||
<span className="font-semibold italic">
|
||||
{`"`}
|
||||
@ -162,16 +162,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
<div className="flex flex-col gap-y-3">
|
||||
{shortcuts.map(({ keys, description }, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
<p className="text-sm text-brand-secondary">{description}</p>
|
||||
<div className="flex items-center gap-x-2.5">
|
||||
{keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
{key === "Ctrl" ? (
|
||||
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
|
||||
<MacCommandIcon />
|
||||
</span>
|
||||
) : (
|
||||
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
|
||||
{key === "Ctrl" ? <MacCommandIcon /> : key}
|
||||
</kbd>
|
||||
)}
|
||||
|
||||
@ -81,7 +81,7 @@ export const AllBoards: React.FC<Props> = ({
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between gap-2 rounded bg-white p-2 shadow"
|
||||
className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentState &&
|
||||
@ -92,7 +92,7 @@ export const AllBoards: React.FC<Props> = ({
|
||||
: addSpaceIfCamelCase(singleGroup)}
|
||||
</h4>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">0</span>
|
||||
<span className="text-xs text-brand-secondary">0</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -124,7 +124,7 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-between items-center px-1 ${
|
||||
!isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
|
||||
!isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
|
||||
@ -145,7 +145,7 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
<span
|
||||
className={`${
|
||||
isCollapsed ? "ml-0.5" : ""
|
||||
} rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
|
||||
} rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-xs text-center`}
|
||||
>
|
||||
{groupedByIssues?.[groupTitle].length ?? 0}
|
||||
</span>
|
||||
@ -155,7 +155,7 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
|
||||
onClick={() => {
|
||||
setIsCollapsed((prevData) => !prevData);
|
||||
}}
|
||||
@ -169,7 +169,7 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
{!isCompleted && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
|
||||
onClick={addIssueToState}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
|
||||
@ -66,7 +66,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
}, [currentState]);
|
||||
|
||||
return (
|
||||
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-gray-50"}`}>
|
||||
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-brand-base"}`}>
|
||||
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
|
||||
<BoardHeader
|
||||
addIssueToState={addIssueToState}
|
||||
@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`relative h-full overflow-y-auto p-1 ${
|
||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||
snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : ""
|
||||
} ${!isCollapsed ? "hidden" : "block"}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
@ -91,12 +91,12 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} pointer-events-none top-0 left-0 z-[99] h-full w-full bg-gray-100 opacity-50`}
|
||||
} pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute ${
|
||||
snapshot.isDraggingOver ? "block" : "hidden"
|
||||
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
|
||||
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs`}
|
||||
>
|
||||
This board is ordered by{" "}
|
||||
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
|
||||
@ -146,7 +146,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
className="flex items-center gap-2 font-medium text-brand-accent outline-none"
|
||||
onClick={addIssueToState}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
@ -158,7 +158,7 @@ export const SingleBoard: React.FC<Props> = ({
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 font-medium text-theme outline-none"
|
||||
className="flex items-center gap-2 font-medium text-brand-accent outline-none"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
|
||||
@ -261,8 +261,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
</a>
|
||||
</ContextMenu>
|
||||
<div
|
||||
className={`mb-3 rounded bg-white shadow ${
|
||||
snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
|
||||
className={`mb-3 rounded bg-brand-surface-1 shadow ${
|
||||
snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
@ -312,12 +312,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a>
|
||||
{properties.key && (
|
||||
<div className="mb-2.5 text-xs font-medium text-gray-700">
|
||||
<div className="mb-2.5 text-xs font-medium text-brand-secondary">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5
|
||||
className="break-all text-sm group-hover:text-theme"
|
||||
className="break-all text-sm group-hover:text-brand-accent"
|
||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||
>
|
||||
{truncateText(issue.name, 100)}
|
||||
@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<form>
|
||||
<Combobox
|
||||
onChange={(val: string) => {
|
||||
@ -136,12 +136,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
/>
|
||||
@ -154,7 +154,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
Select issues to delete
|
||||
</h2>
|
||||
)}
|
||||
@ -166,7 +166,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -182,7 +182,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<span>{issue.name}</span>
|
||||
@ -194,9 +194,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
<h3 className="text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -208,7 +208,7 @@ export const CalendarView = () => {
|
||||
<>
|
||||
<Popover.Button className={`group flex h-full items-start gap-1 text-gray-800`}>
|
||||
<div className="flex items-center justify-center gap-2 text-2xl font-semibold">
|
||||
<span className="text-black">{formatDate(currentDate, "Month")}</span>{" "}
|
||||
<span className="text-brand-base">{formatDate(currentDate, "Month")}</span>{" "}
|
||||
<span>{formatDate(currentDate, "yyyy")}</span>
|
||||
</div>
|
||||
</Popover.Button>
|
||||
@ -222,7 +222,7 @@ export const CalendarView = () => {
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-white shadow-lg rounded-[10px]">
|
||||
<Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-brand-surface-2 shadow-lg rounded-[10px]">
|
||||
<div className="flex justify-center items-center text-sm gap-5 px-2 py-2">
|
||||
{yearOptions.map((year) => (
|
||||
<button
|
||||
@ -237,7 +237,7 @@ export const CalendarView = () => {
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-4 px-2 border-t border-gray-200">
|
||||
<div className="grid grid-cols-4 px-2 border-t border-brand-base">
|
||||
{monthOptions.map((month) => (
|
||||
<button
|
||||
onClick={() =>
|
||||
@ -297,7 +297,7 @@ export const CalendarView = () => {
|
||||
|
||||
<div className="flex w-full gap-2 items-center justify-end">
|
||||
<button
|
||||
className="group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-4 py-1.5 text-sm hover:bg-gray-100 hover:text-gray-900 focus:outline-none"
|
||||
className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-4 py-1.5 text-sm hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none"
|
||||
onClick={() => {
|
||||
if (isMonthlyView) {
|
||||
updateDate(new Date());
|
||||
@ -315,7 +315,7 @@ export const CalendarView = () => {
|
||||
<CustomMenu
|
||||
customButton={
|
||||
<div
|
||||
className={`group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-100 hover:text-gray-900 focus:outline-none `}
|
||||
className={`group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-sm hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none `}
|
||||
>
|
||||
{isMonthlyView ? "Monthly" : "Weekly"}
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
@ -360,12 +360,12 @@ export const CalendarView = () => {
|
||||
/>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<div className="mt-1 flex w-52 items-center justify-between border-t border-gray-200 py-2 px-1 text-sm text-gray-600">
|
||||
<div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1 text-sm text-gray-600">
|
||||
<h4>Show weekends</h4>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
showWeekEnds ? "bg-green-500" : "bg-gray-200"
|
||||
showWeekEnds ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={showWeekEnds}
|
||||
@ -374,7 +374,7 @@ export const CalendarView = () => {
|
||||
<span className="sr-only">Show weekends</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
showWeekEnds ? "translate-x-2.5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
@ -392,7 +392,7 @@ export const CalendarView = () => {
|
||||
{weeks.map((date, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-start p-1.5 gap-2 border-gray-300 bg-gray-100 text-base font-medium text-gray-600 ${
|
||||
className={`flex items-center justify-start p-1.5 gap-2 border-brand-base bg-brand-surface-1 text-base font-medium text-gray-600 ${
|
||||
!isMonthlyView
|
||||
? showWeekEnds
|
||||
? (index + 1) % 7 === 0
|
||||
@ -424,7 +424,7 @@ export const CalendarView = () => {
|
||||
key={index}
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className={`flex flex-col gap-1.5 border-t border-gray-300 p-2.5 text-left text-sm font-medium hover:bg-gray-100 ${
|
||||
className={`flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
|
||||
showWeekEnds
|
||||
? (index + 1) % 7 === 0
|
||||
? ""
|
||||
@ -444,7 +444,7 @@ export const CalendarView = () => {
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
className={`w-full cursor-pointer truncate rounded bg-white p-1.5 hover:scale-105 ${
|
||||
className={`w-full cursor-pointer truncate rounded bg-brand-surface-2 p-1.5 hover:scale-105 ${
|
||||
snapshot.isDragging ? "shadow-lg" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
267
apps/app/components/core/custom-theme-form.tsx
Normal file
267
apps/app/components/core/custom-theme-form.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
|
||||
const defaultValues = {
|
||||
palette: "",
|
||||
};
|
||||
|
||||
export const ThemeForm: React.FC<any> = ({ handleFormSubmit, handleClose, status, data }) => {
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
} = useForm<any>({
|
||||
defaultValues,
|
||||
});
|
||||
const [darkPalette, setDarkPalette] = useState(false);
|
||||
|
||||
const handleUpdateTheme = async (formData: any) => {
|
||||
await handleFormSubmit({ ...formData, darkPalette });
|
||||
|
||||
reset({
|
||||
...defaultValues,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
...defaultValues,
|
||||
...data,
|
||||
});
|
||||
}, [data, reset]);
|
||||
|
||||
// --color-bg-base: 25, 27, 27;
|
||||
// --color-bg-surface-1: 31, 32, 35;
|
||||
// --color-bg-surface-2: 39, 42, 45;
|
||||
|
||||
// --color-border: 46, 50, 52;
|
||||
// --color-bg-sidebar: 19, 20, 22;
|
||||
// --color-accent: 60, 133, 217;
|
||||
|
||||
// --color-text-base: 255, 255, 255;
|
||||
// --color-text-secondary: 142, 148, 146;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleUpdateTheme)}>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-brand-base">Customize your theme</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="bgBase"
|
||||
label="Background"
|
||||
name="bgBase"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.bgBase}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Background color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Background color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="bgSurface1"
|
||||
label="Background surface 1"
|
||||
name="bgSurface1"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.bgSurface1}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Background surface 1 color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Background surface 1 color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="bgSurface2"
|
||||
label="Background surface 2"
|
||||
name="bgSurface1"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.bgSurface1}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Background surface 2 color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Background surface 2 color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="border"
|
||||
label="Border"
|
||||
name="border"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.border}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Border color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Border color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="sidebar"
|
||||
label="Sidebar"
|
||||
name="sidebar"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.sidebar}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Sidebar color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Sidebar color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Input
|
||||
id="accent"
|
||||
label="Accent"
|
||||
name="accent"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.accent}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Accent color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Accent color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-3">
|
||||
<Input
|
||||
id="textBase"
|
||||
label="Text primary"
|
||||
name="textBase"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.textBase}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Text primary color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Text primary color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-3">
|
||||
<Input
|
||||
id="textSecondary"
|
||||
label="Text secondary"
|
||||
name="textSecondary"
|
||||
type="name"
|
||||
placeholder="#FFFFFF"
|
||||
autoComplete="off"
|
||||
error={errors.textSecondary}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Text secondary color is required",
|
||||
pattern: {
|
||||
value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Text secondary color should be hex format",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
id="palette"
|
||||
label="All colors"
|
||||
name="palette"
|
||||
type="name"
|
||||
placeholder="Enter comma separated hex colors"
|
||||
autoComplete="off"
|
||||
error={errors.palette}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Color values is required",
|
||||
pattern: {
|
||||
value: /^(#(?:[0-9a-fA-F]{3}){1,2},){7}#(?:[0-9a-fA-F]{3}){1,2}$/g,
|
||||
message: "Color values should be hex format, separated by commas",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
onClick={() => setDarkPalette((prevData) => !prevData)}
|
||||
>
|
||||
<span className="text-xs">Dark palette</span>
|
||||
<button
|
||||
type="button"
|
||||
className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
|
||||
darkPalette ? "bg-brand-accent" : "bg-gray-300"
|
||||
} transition-colors duration-300 ease-in-out focus:outline-none`}
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span className="sr-only">Dark palette</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`pointer-events-none inline-block h-3 w-3 ${
|
||||
darkPalette ? "translate-x-3" : "translate-x-0"
|
||||
} transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" loading={isSubmitting}>
|
||||
{status
|
||||
? isSubmitting
|
||||
? "Updating Theme..."
|
||||
: "Update Theme"
|
||||
: isSubmitting
|
||||
? "Creating Theme..."
|
||||
: "Set Theme"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
65
apps/app/components/core/custom-theme-modal.tsx
Normal file
65
apps/app/components/core/custom-theme-modal.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React from "react";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// components
|
||||
import { ThemeForm } from "./custom-theme-form";
|
||||
// helpers
|
||||
import { applyTheme } from "helpers/theme.helper";
|
||||
// fetch-keys
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
};
|
||||
|
||||
export const CustomThemeModal: React.FC<Props> = ({ isOpen, handleClose }) => {
|
||||
const onClose = () => {
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleFormSubmit = async (formData: any) => {
|
||||
applyTheme(formData.palette, formData.darkPalette);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<ThemeForm
|
||||
handleClose={handleClose}
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
status={false}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<form>
|
||||
<Controller
|
||||
control={control}
|
||||
@ -139,11 +139,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
<Combobox as="div" {...field} multiple>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
@ -156,7 +156,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
Select issues to add
|
||||
</h2>
|
||||
)}
|
||||
@ -169,7 +169,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
{issue.name}
|
||||
@ -195,9 +195,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
<h3 className="text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -55,23 +55,23 @@ const activityDetails: {
|
||||
},
|
||||
modules: {
|
||||
message: "set the module to",
|
||||
icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
state: {
|
||||
message: "set the state to",
|
||||
icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
priority: {
|
||||
message: "set the priority to",
|
||||
icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
name: {
|
||||
message: "set the name to",
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
description: {
|
||||
message: "updated the description.",
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
estimate_point: {
|
||||
message: "set the estimate point to",
|
||||
@ -79,15 +79,15 @@ const activityDetails: {
|
||||
},
|
||||
target_date: {
|
||||
message: "set the due date to",
|
||||
icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
parent: {
|
||||
message: "set the parent to",
|
||||
icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
issue: {
|
||||
message: "deleted the issue.",
|
||||
icon: <TrashIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
estimate: {
|
||||
message: "updated the estimate",
|
||||
@ -217,7 +217,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
|
||||
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
|
||||
<ChatBubbleLeftEllipsisIcon
|
||||
className="h-3.5 w-3.5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
@ -230,7 +230,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
{activity.actor_detail.first_name}
|
||||
{activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-gray-500">
|
||||
<p className="mt-0.5 text-xs text-brand-secondary">
|
||||
Commented {timeAgo(activity.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
@ -244,7 +244,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
editable={false}
|
||||
onBlur={() => ({})}
|
||||
noBorder
|
||||
customClassName="text-xs bg-gray-100"
|
||||
customClassName="text-xs bg-brand-surface-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,7 +259,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
<div className="relative pb-1">
|
||||
{activities.length > 1 && activityIdx !== activities.length - 1 ? (
|
||||
<span
|
||||
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
|
||||
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : null}
|
||||
@ -268,7 +268,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
<div>
|
||||
<div className="relative px-1.5">
|
||||
<div className="mt-1.5">
|
||||
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
|
||||
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
|
||||
{activity.field ? (
|
||||
activityDetails[activity.field as keyof typeof activityDetails]?.icon
|
||||
) : activity.actor_detail.avatar &&
|
||||
@ -292,7 +292,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 py-3">
|
||||
<div className="text-xs text-gray-500">
|
||||
<div className="text-xs text-brand-secondary">
|
||||
<span className="text-gray font-medium">
|
||||
{activity.actor_detail.first_name}
|
||||
{activity.actor_detail.is_bot
|
||||
@ -300,7 +300,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
|
||||
: " " + activity.actor_detail.last_name}
|
||||
</span>
|
||||
<span> {action} </span>
|
||||
<span className="text-xs font-medium text-gray-900"> {value} </span>
|
||||
<span className="text-xs font-medium text-brand-base"> {value} </span>
|
||||
<span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -57,9 +57,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
|
||||
className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
|
||||
>
|
||||
<span className="font-medium capitalize text-gray-500">
|
||||
<span className="font-medium capitalize text-brand-secondary">
|
||||
{replaceUnderscoreIfSnakeCase(key)}:
|
||||
</span>
|
||||
{filters[key as keyof IIssueFilterOptions] === null ||
|
||||
@ -131,7 +131,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
|
||||
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
|
||||
: priority === "low"
|
||||
? "bg-green-100 text-green-500 hover:bg-green-100"
|
||||
: "bg-gray-100 text-gray-700 hover:bg-gray-100"
|
||||
: "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1"
|
||||
}`}
|
||||
>
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
@ -339,7 +339,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
|
||||
created_by: null,
|
||||
})
|
||||
}
|
||||
className="flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
|
||||
className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
|
||||
>
|
||||
<span className="font-medium">Clear all filters</span>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
|
||||
@ -121,7 +121,7 @@ export const GptAssistantModal: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border bg-white p-4 shadow ${
|
||||
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-surface-2 p-4 shadow ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
|
||||
return (
|
||||
<Popover className="relative z-[2]" ref={ref}>
|
||||
<Popover.Button
|
||||
className="rounded border border-gray-500 bg-white px-2 py-1 text-xs text-gray-700"
|
||||
className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
{label}
|
||||
@ -79,16 +79,16 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-white shadow-lg">
|
||||
<div className="h-96 w-80 overflow-auto rounded border bg-white p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
|
||||
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-brand-surface-2 shadow-lg">
|
||||
<div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
|
||||
<Tab.Group>
|
||||
<Tab.List as="span" className="inline-block rounded bg-gray-200 p-1">
|
||||
<Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
|
||||
{tabOptions.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
className={({ selected }) =>
|
||||
`rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
|
||||
selected ? "bg-theme text-white" : "text-black"
|
||||
selected ? "bg-brand-accent text-white" : "text-brand-base"
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
||||
@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto">
|
||||
@ -124,9 +124,9 @@ export const ImageUploadModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
|
||||
<div className="space-y-5">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Upload Image
|
||||
</Dialog.Title>
|
||||
<div className="space-y-3">
|
||||
@ -135,7 +135,7 @@ export const ImageUploadModal: React.FC<Props> = ({
|
||||
{...getRootProps()}
|
||||
className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
||||
(image === null && isDragActive) || !value
|
||||
? "border-2 border-dashed border-gray-300 hover:border-gray-400"
|
||||
? "border-2 border-dashed border-brand-base hover:border-gray-400"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC<Props> = ({
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600"
|
||||
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-gray-600"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
@ -157,7 +157,7 @@ export const ImageUploadModal: React.FC<Props> = ({
|
||||
) : (
|
||||
<>
|
||||
<UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" />
|
||||
<span className="mt-2 block text-sm font-medium text-gray-900">
|
||||
<span className="mt-2 block text-sm font-medium text-brand-base">
|
||||
{isDragActive
|
||||
? "Drop image here to upload"
|
||||
: "Drag & drop image here"}
|
||||
|
||||
@ -11,3 +11,4 @@ export * from "./link-modal";
|
||||
export * from "./image-picker-popover";
|
||||
export * from "./filter-list";
|
||||
export * from "./feeds";
|
||||
export * from "./theme-switch";
|
||||
|
||||
@ -12,8 +12,7 @@ import { SelectFilters } from "components/views";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon, ListBulletIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
|
||||
import { Squares2X2Icon } from "@heroicons/react/20/solid";
|
||||
import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
// types
|
||||
@ -53,30 +52,30 @@ export const IssuesFilterView: React.FC = () => {
|
||||
<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-gray-200 ${
|
||||
issueView === "list" ? "bg-gray-200" : ""
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
|
||||
issueView === "list" ? "bg-brand-base" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("list")}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
<ListBulletIcon className="h-4 w-4 text-brand-secondary" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
issueView === "kanban" ? "bg-gray-200" : ""
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
|
||||
issueView === "kanban" ? "bg-brand-base" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("kanban")}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
<Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
issueView === "calendar" ? "bg-gray-200" : ""
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
|
||||
issueView === "calendar" ? "bg-brand-base" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("calendar")}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
<CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
|
||||
</button>
|
||||
</div>
|
||||
<SelectFilters
|
||||
@ -113,8 +112,8 @@ export const IssuesFilterView: React.FC = () => {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-2 rounded-md border bg-transparent px-3 py-1.5 text-xs hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
|
||||
open ? "bg-gray-100 text-gray-900" : "text-gray-500"
|
||||
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-muted-1"
|
||||
}`}
|
||||
>
|
||||
View
|
||||
@ -130,11 +129,11 @@ export const IssuesFilterView: React.FC = () => {
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
|
||||
<div className="relative divide-y-2">
|
||||
<Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-brand-surface-2 p-3 shadow-lg">
|
||||
<div className="relative divide-y-2 divide-brand-base">
|
||||
<div className="space-y-4 pb-3 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-gray-600">Group by</h4>
|
||||
<h4 className="text-brand-secondary">Group by</h4>
|
||||
<CustomMenu
|
||||
label={
|
||||
GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)?.name ??
|
||||
@ -155,7 +154,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-gray-600">Order by</h4>
|
||||
<h4 className="text-brand-secondary">Order by</h4>
|
||||
<CustomMenu
|
||||
label={
|
||||
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
|
||||
@ -178,7 +177,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-gray-600">Issue type</h4>
|
||||
<h4 className="text-brand-secondary">Issue type</h4>
|
||||
<CustomMenu
|
||||
label={
|
||||
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
|
||||
@ -201,11 +200,11 @@ export const IssuesFilterView: React.FC = () => {
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-gray-600">Show empty states</h4>
|
||||
<h4 className="text-brand-secondary">Show empty states</h4>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
showEmptyGroups ? "bg-green-500" : "bg-gray-200"
|
||||
showEmptyGroups ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={showEmptyGroups}
|
||||
@ -214,7 +213,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
<span className="sr-only">Show empty groups</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
showEmptyGroups ? "translate-x-2.5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
@ -226,7 +225,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="font-medium text-theme"
|
||||
className="font-medium text-brand-accent"
|
||||
onClick={() => setNewFilterDefaultView()}
|
||||
>
|
||||
Set as default
|
||||
@ -234,7 +233,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 py-3">
|
||||
<h4 className="text-sm text-gray-600">Display Properties</h4>
|
||||
<h4 className="text-sm text-brand-secondary">Display Properties</h4>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{Object.keys(properties).map((key) => {
|
||||
if (key === "estimate" && !isEstimateActive) return null;
|
||||
|
||||
@ -502,8 +502,8 @@ export const IssuesView: React.FC<Props> = ({
|
||||
title="Create a new issue"
|
||||
description={
|
||||
<span>
|
||||
Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
|
||||
create a new issue
|
||||
Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
|
||||
shortcut to create a new issue
|
||||
</span>
|
||||
}
|
||||
Icon={PlusIcon}
|
||||
|
||||
@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
@ -70,11 +70,11 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<div className="space-y-5">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Add Link
|
||||
</Dialog.Title>
|
||||
<div className="mt-2 space-y-3">
|
||||
|
||||
@ -217,7 +217,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
</a>
|
||||
</ContextMenu>
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
|
||||
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base last:border-b-0"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu(true);
|
||||
|
||||
@ -132,10 +132,10 @@ export const SingleList: React.FC<Props> = ({
|
||||
return (
|
||||
<Disclosure key={groupTitle} as="div" defaultOpen>
|
||||
{({ open }) => (
|
||||
<div className="bg-white">
|
||||
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
<div
|
||||
className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
|
||||
open ? "" : "rounded-[10px]"
|
||||
className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
|
||||
open ? "rounded-t-[10px]" : "rounded-[10px]"
|
||||
}`}
|
||||
>
|
||||
<Disclosure.Button>
|
||||
@ -144,21 +144,21 @@ export const SingleList: React.FC<Props> = ({
|
||||
<div className="flex items-center">{getGroupIcon()}</div>
|
||||
)}
|
||||
{selectedGroup !== null ? (
|
||||
<h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
|
||||
<h2 className="text-sm font-semibold capitalize leading-6 text-brand-base">
|
||||
{getGroupTitle()}
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="font-medium leading-5">All Issues</h2>
|
||||
)}
|
||||
<span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
|
||||
{groupedByIssues?.[groupTitle].length ?? 0}
|
||||
<span className="rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-center text-xs text-brand-2">
|
||||
{groupedByIssues[groupTitle as keyof IIssue].length}
|
||||
</span>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 text-gray-500 hover:bg-gray-100"
|
||||
className="p-1 text-brand-secondary hover:bg-brand-surface-2"
|
||||
onClick={addIssueToState}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
@ -215,7 +215,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
|
||||
<p className="px-4 py-3 text-sm text-brand-secondary">No issues.</p>
|
||||
)
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">Loading...</div>
|
||||
|
||||
@ -33,7 +33,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
|
||||
<div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
|
||||
<Link href={link.url}>
|
||||
<a
|
||||
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 outline-none"
|
||||
className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 outline-none"
|
||||
target="_blank"
|
||||
>
|
||||
<ExternalLinkIcon width="14" height="14" />
|
||||
@ -41,7 +41,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
|
||||
className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/30"
|
||||
onClick={() => handleDeleteLink(link.id)}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
@ -49,13 +49,13 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
|
||||
</div>
|
||||
)}
|
||||
<Link href={link.url}>
|
||||
<a className="relative flex gap-2 rounded-md border bg-gray-50 p-2" target="_blank">
|
||||
<a className="relative flex gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2" target="_blank">
|
||||
<div className="mt-0.5">
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="w-4/5 break-all">{link.title}</h5>
|
||||
<p className="mt-0.5 text-gray-500">
|
||||
<p className="mt-0.5 text-brand-secondary">
|
||||
Added {timeAgo(link.created_at)}
|
||||
<br />
|
||||
by{" "}
|
||||
|
||||
@ -100,13 +100,13 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
||||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className={`flex w-full items-center justify-between rounded-md bg-gray-100 px-1 py-1.5
|
||||
className={`flex w-full items-center justify-between rounded-md bg-brand-surface-1 px-1 py-1.5
|
||||
${module ? "text-xs" : "text-sm"} `}
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
`w-full rounded px-3 py-1 text-brand-base ${
|
||||
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -114,8 +114,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
`w-full rounded px-3 py-1 text-brand-base ${
|
||||
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -123,8 +123,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-full rounded px-3 py-1 text-gray-900 ${
|
||||
selected ? " bg-theme text-white" : " hover:bg-hover-gray"
|
||||
`w-full rounded px-3 py-1 text-brand-base ${
|
||||
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -166,7 +166,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
||||
<SingleProgressStats
|
||||
title={
|
||||
<>
|
||||
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
|
||||
<Image
|
||||
src={User}
|
||||
height="100%"
|
||||
|
||||
@ -19,8 +19,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
||||
}) => (
|
||||
<div
|
||||
className={`flex w-full items-center justify-between rounded p-2 text-xs ${
|
||||
onClick ? "cursor-pointer hover:bg-gray-100" : ""
|
||||
} ${selected ? "bg-gray-100" : ""}`}
|
||||
onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
|
||||
} ${selected ? "bg-brand-surface-1" : ""}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
|
||||
|
||||
60
apps/app/components/core/theme-switch.tsx
Normal file
60
apps/app/components/core/theme-switch.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { useState, useEffect, ChangeEvent } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { THEMES_OBJ } from "constants/themes";
|
||||
import { CustomSelect } from "components/ui";
|
||||
import { CustomThemeModal } from "./custom-theme-modal";
|
||||
|
||||
export const ThemeSwitch = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [customThemeModal, setCustomThemeModal] = useState(false);
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CustomSelect
|
||||
value={theme}
|
||||
label={theme ? THEMES_OBJ.find((t) => t.value === theme)?.label : "Select your theme"}
|
||||
onChange={({ value, type }: { value: string; type: string }) => {
|
||||
if (value === "custom") {
|
||||
if (!customThemeModal) setCustomThemeModal(true);
|
||||
} else {
|
||||
const cssVars = [
|
||||
"--color-bg-base",
|
||||
"--color-bg-surface-1",
|
||||
"--color-bg-surface-2",
|
||||
|
||||
"--color-border",
|
||||
"--color-bg-sidebar",
|
||||
"--color-accent",
|
||||
|
||||
"--color-text-base",
|
||||
"--color-text-secondary",
|
||||
];
|
||||
cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
|
||||
}
|
||||
document.documentElement.style.setProperty("color-scheme", type);
|
||||
setTheme(value);
|
||||
}}
|
||||
input
|
||||
width="w-full"
|
||||
position="right"
|
||||
>
|
||||
{THEMES_OBJ.map(({ value, label, type }) => (
|
||||
<CustomSelect.Option key={value} value={{ value, type }}>
|
||||
{label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
{/* <CustomThemeModal isOpen={customThemeModal} handleClose={() => setCustomThemeModal(false)} /> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -64,7 +64,7 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
|
||||
{completedCycles ? (
|
||||
completedCycles.completed_cycles.length > 0 ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2 text-sm text-brand-secondary">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span>Completed cycles are not editable.</span>
|
||||
</div>
|
||||
|
||||
@ -62,8 +62,8 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
|
||||
</div>
|
||||
) : type === "current" ? (
|
||||
showNoCurrentCycleMessage && (
|
||||
<div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]">
|
||||
<h3 className="text-base font-medium text-black "> No current cycle is present.</h3>
|
||||
<div className="flex items-center justify-between bg-brand-surface-2 w-full px-6 py-4 rounded-[10px]">
|
||||
<h3 className="text-base font-medium text-brand-base "> No current cycle is present.</h3>
|
||||
<button onClick={() => setShowNoCurrentCycleMessage(false)}>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -153,8 +153,8 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
@ -163,11 +163,11 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Delete Cycle
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to delete cycle-{" "}
|
||||
<span className="font-bold">{data?.name}</span>? All of the data related
|
||||
to the cycle will be permanently removed. This action cannot be undone.
|
||||
|
||||
@ -37,30 +37,30 @@ export const EmptyCycle = () => {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
|
||||
<div className="relative h-32 w-72">
|
||||
<div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
|
||||
<div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
|
||||
<span className="text-sm font-semibold text-black">Cycle Name</span>
|
||||
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
|
||||
<div className="flex h-full w-full items-center gap-4">
|
||||
<span className="h-2 w-20 rounded-full bg-gray-200" />
|
||||
<span className="h-2 w-20 rounded-full bg-gray-200" />
|
||||
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
||||
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
|
||||
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
|
||||
<LinearProgressIndicator data={emptyCycleData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
|
||||
<div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
|
||||
<span className="text-sm font-semibold text-black">Cycle Name</span>
|
||||
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
|
||||
<div className="flex h-full w-full items-center gap-4">
|
||||
<span className="h-2 w-20 rounded-full bg-gray-200" />
|
||||
<span className="h-2 w-20 rounded-full bg-gray-200" />
|
||||
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
||||
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
|
||||
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
|
||||
<LinearProgressIndicator data={emptyCycleData} />
|
||||
</div>
|
||||
</div>
|
||||
@ -68,7 +68,7 @@ export const EmptyCycle = () => {
|
||||
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center ">
|
||||
<h3 className="text-xl font-semibold">Create New Cycle</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
|
||||
time. Create new cycle now.
|
||||
</p>
|
||||
|
||||
@ -94,7 +94,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||
<h3 className="text-lg font-medium leading-6 text-brand-base">
|
||||
{status ? "Update" : "Create"} Cycle
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
@ -196,7 +196,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
|
||||
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
|
||||
@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<CycleForm
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
handleClose={handleClose}
|
||||
|
||||
@ -59,9 +59,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
>
|
||||
<CyclesIcon className="h-3 w-3 text-gray-500" />
|
||||
<CyclesIcon className="h-3 w-3 text-brand-secondary" />
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
|
||||
</div>
|
||||
@ -75,7 +75,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-brand-surface-2 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="py-1">
|
||||
{options ? (
|
||||
@ -93,7 +93,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
||||
: ""
|
||||
} ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} relative cursor-pointer select-none p-2 text-gray-900`
|
||||
} relative cursor-pointer select-none p-2 text-brand-base`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
@ -103,14 +103,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">No options</p>
|
||||
<p className="text-center text-sm text-brand-secondary">No options</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-sm text-gray-500">Loading...</p>
|
||||
<p className="text-center text-sm text-brand-secondary">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
|
||||
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
|
||||
onClick={openCycleModal}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
|
||||
|
||||
@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<div
|
||||
className={`fixed top-0 ${
|
||||
isOpen ? "right-0" : "-right-[24rem]"
|
||||
} z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
|
||||
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
|
||||
>
|
||||
{cycle ? (
|
||||
<>
|
||||
@ -143,19 +143,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<div className="flex gap-2.5 px-5 text-sm">
|
||||
<div className="flex items-center ">
|
||||
<span
|
||||
className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
|
||||
className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
|
||||
>
|
||||
{capitalizeFirstLetter(cycleStatus)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
@ -216,8 +216,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3 " />
|
||||
@ -278,7 +278,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<div className="flex flex-col gap-6 px-6 py-6 w-full">
|
||||
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||
<div className="flex items-start justify-between gap-2 w-full">
|
||||
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
|
||||
<h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
|
||||
<CustomMenu width="lg" ellipsis>
|
||||
{!isCompleted && (
|
||||
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
|
||||
@ -297,7 +297,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
</CustomMenu>
|
||||
</div>
|
||||
|
||||
<span className="whitespace-normal text-sm leading-5 text-black">
|
||||
<span className="whitespace-normal text-sm leading-5 text-brand-base">
|
||||
{cycle.description}
|
||||
</span>
|
||||
</div>
|
||||
@ -323,7 +323,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
{cycle.owned_by.first_name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-gray-900">{cycle.owned_by.first_name}</span>
|
||||
<span className="text-brand-base">{cycle.owned_by.first_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -333,7 +333,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<span>Progress</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 text-gray-800">
|
||||
<div className="flex items-center gap-2.5 text-brand-muted-1">
|
||||
<span className="h-4 w-4">
|
||||
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
|
||||
</span>
|
||||
@ -344,15 +344,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2 ">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Progress</span>
|
||||
<span className="font-medium text-brand-secondary">Progress</span>
|
||||
{!open && progressPercentage ? (
|
||||
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
|
||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||
@ -371,7 +371,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
{cycleStatus === "upcoming"
|
||||
? "Cycle is yet to start."
|
||||
: "Invalid date. Please enter valid date."}
|
||||
@ -386,7 +386,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<div className="flex items-start justify-between gap-4 py-2 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>
|
||||
<DocumentIcon className="h-3 w-3 text-gray-500" />
|
||||
<DocumentIcon className="h-3 w-3 text-brand-secondary" />
|
||||
</span>
|
||||
<span>
|
||||
Pending Issues -{" "}
|
||||
@ -395,7 +395,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-gray-900">
|
||||
<div className="flex items-center gap-3 text-brand-base">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
|
||||
<span>Ideal</span>
|
||||
@ -424,15 +424,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Other Information</span>
|
||||
<span className="font-medium text-brand-secondary">Other Information</span>
|
||||
</div>
|
||||
|
||||
{cycle.total_issues > 0 ? (
|
||||
@ -445,7 +445,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
No issues found. Please add issue.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -238,7 +238,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
|
||||
<div className="flex flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<a className="w-full">
|
||||
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
|
||||
@ -350,7 +350,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`flex h-full w-full flex-col border-t border-gray-200 bg-gray-100 ${
|
||||
className={`flex h-full w-full flex-col border-t border-brand-base bg-brand-surface-1 ${
|
||||
open ? "" : "flex-row"
|
||||
}`}
|
||||
>
|
||||
@ -368,7 +368,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
|
||||
</div>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="overflow-hidden rounded-b-md bg-white py-3 shadow">
|
||||
<div className="overflow-hidden rounded-b-md bg-brand-surface-2 py-3 shadow">
|
||||
<div className="col-span-2 space-y-3 px-4">
|
||||
<div className="space-y-3 text-xs">
|
||||
{stateGroups.map((group) => (
|
||||
@ -388,7 +388,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
|
||||
<div>
|
||||
<span>
|
||||
{cycle[group.key as keyof ICycle] as number}{" "}
|
||||
<span className="text-gray-500">
|
||||
<span className="text-brand-secondary">
|
||||
-{" "}
|
||||
{cycle.total_issues > 0
|
||||
? `${Math.round(
|
||||
|
||||
@ -89,7 +89,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10">
|
||||
@ -103,7 +103,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between px-5">
|
||||
<div className="flex items-center gap-2">
|
||||
@ -114,8 +114,8 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pb-3 mt-2 px-5 border-b border-gray-200">
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
|
||||
<input
|
||||
className="outline-none"
|
||||
placeholder="Search for a cycle..."
|
||||
@ -129,7 +129,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
filteredOptions.map((option: ICycle) => (
|
||||
<button
|
||||
key={option.id}
|
||||
className="flex items-center gap-4 py-3 px-2 text-gray-600 text-sm rounded w-full hover:bg-gray-100"
|
||||
className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
|
||||
onClick={() => {
|
||||
transferIssue({
|
||||
new_cycle_id: option?.id,
|
||||
@ -149,14 +149,14 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-center text-gray-500">
|
||||
<span className="text-center text-brand-secondary">
|
||||
You don’t have any current cycle. Please create one to transfer the
|
||||
issues.
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading...</p>
|
||||
<p className="text-center text-brand-secondary">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +38,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
|
||||
: 0;
|
||||
return (
|
||||
<div className="flex items-center justify-between -mt-4 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2 text-sm text-brand-secondary">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span>Completed cycles are not editable.</span>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
return (
|
||||
<Popover className="relative z-[1]" ref={ref}>
|
||||
<Popover.Button
|
||||
className="rounded-full bg-gray-100 p-2 outline-none sm:text-sm"
|
||||
className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
{label}
|
||||
@ -69,8 +69,8 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg">
|
||||
<div className="h-[230px] w-[250px] overflow-auto border rounded-[4px] bg-white p-2 shadow-xl">
|
||||
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-brand-surface-2 shadow-lg">
|
||||
<div className="h-[230px] w-[250px] overflow-auto border border-brand-base rounded-[4px] bg-brand-surface-2 p-2 shadow-xl">
|
||||
<Tab.Group as="div" className="flex h-full w-full flex-col">
|
||||
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
|
||||
{tabOptions.map((tab) => (
|
||||
@ -100,7 +100,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
{recentEmojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="h-4 w-4 select-none text-base hover:bg-hover-gray flex items-center justify-between"
|
||||
className="h-4 w-4 select-none text-sm hover:bg-brand-surface-2 flex items-center justify-between"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
@ -119,7 +119,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
{emojis.map((emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
className="h-4 w-4 ml-1 select-none text-base hover:bg-hover-gray flex justify-center items-center"
|
||||
className="h-4 w-4 mb-1 select-none text-sm hover:bg-brand-surface-2 flex items-center"
|
||||
key={emoji}
|
||||
onClick={() => {
|
||||
onChange(emoji);
|
||||
@ -184,7 +184,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
{icons.material_rounded.map((icon) => (
|
||||
<button
|
||||
type="button"
|
||||
className="h-4 w-4 mb-1 select-none text-lg hover:bg-hover-gray flex items-center"
|
||||
className="h-4 w-4 mb-1 select-none text-lg hover:bg-brand-surface-2 flex items-center"
|
||||
key={icon.name}
|
||||
onClick={() => {
|
||||
if (onIconsClick) onIconsClick(icon.name);
|
||||
|
||||
@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 rounded-[10px] border bg-white p-5">
|
||||
<div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12 flex-shrink-0">
|
||||
<Image
|
||||
|
||||
@ -66,31 +66,31 @@ const activityDetails: {
|
||||
},
|
||||
modules: {
|
||||
message: "set the module to",
|
||||
icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
state: {
|
||||
message: "set the state to",
|
||||
icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
priority: {
|
||||
message: "set the priority to",
|
||||
icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
name: {
|
||||
message: "set the name to",
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
description: {
|
||||
message: "updated the description.",
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
target_date: {
|
||||
message: "set the due date to",
|
||||
icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
parent: {
|
||||
message: "set the parent to",
|
||||
icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
|
||||
icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
|
||||
},
|
||||
estimate: {
|
||||
message: "updated the estimate",
|
||||
@ -255,7 +255,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
}
|
||||
|
||||
value = (
|
||||
<span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
|
||||
<span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs border border-brand-base">
|
||||
<span className="absolute flex flex-shrink-0 items-center justify-center">
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
@ -265,7 +265,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<span className="ml-3 font-medium text-gray-900">{name}</span>
|
||||
<span className="ml-3 font-medium text-brand-base">{name}</span>
|
||||
</span>
|
||||
);
|
||||
} else if (activityItem.field === "assignees") {
|
||||
@ -298,7 +298,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
<div className="relative pb-1">
|
||||
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
|
||||
<span
|
||||
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
|
||||
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : null}
|
||||
@ -307,7 +307,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
<div>
|
||||
<div className="relative px-1.5">
|
||||
<div className="mt-1.5">
|
||||
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
|
||||
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
|
||||
{activityItem.field ? (
|
||||
activityDetails[activityItem.field as keyof typeof activityDetails]
|
||||
?.icon
|
||||
@ -332,7 +332,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 py-3">
|
||||
<div className="text-xs text-gray-500">
|
||||
<div className="text-xs text-brand-secondary">
|
||||
<span className="text-gray font-medium">
|
||||
{activityItem.actor_detail.first_name}
|
||||
{activityItem.actor_detail.is_bot
|
||||
@ -340,7 +340,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
|
||||
: " " + activityItem.actor_detail.last_name}
|
||||
</span>
|
||||
<span> {action} </span>
|
||||
<span className="text-xs font-medium text-gray-900"> {value} </span>
|
||||
<span className="text-xs font-medium text-brand-base"> {value} </span>
|
||||
<span className="whitespace-nowrap">
|
||||
{timeAgo(activityItem.created_at)}
|
||||
</span>
|
||||
|
||||
@ -10,7 +10,7 @@ import { useForm, Controller } from "react-hook-form";
|
||||
// services
|
||||
import issuesServices from "services/issues.service";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
import { Loader, SecondaryButton } from "components/ui";
|
||||
// helpers
|
||||
import { debounce } from "helpers/common.helper";
|
||||
// types
|
||||
@ -83,9 +83,9 @@ export const AddComment: React.FC = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="issue-comments-section">
|
||||
<div className="issue-comments-section" >
|
||||
<Controller
|
||||
name="comment_html"
|
||||
control={control}
|
||||
@ -101,13 +101,9 @@ export const AddComment: React.FC = () => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-gray-300 p-2 px-4 text-sm text-black hover:bg-gray-300 mt-4"
|
||||
>
|
||||
<SecondaryButton type="submit" disabled={isSubmitting} className="mt-2">
|
||||
{isSubmitting ? "Adding..." : "Comment"}
|
||||
</button>
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -67,7 +67,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
|
||||
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
|
||||
<ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
@ -77,7 +77,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
|
||||
{comment.actor_detail.first_name}
|
||||
{comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-gray-500">Commented {timeAgo(comment.created_at)}</p>
|
||||
<p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p>
|
||||
</div>
|
||||
<div className="issue-comments-section p-0">
|
||||
{isEditing ? (
|
||||
@ -117,7 +117,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
|
||||
editable={false}
|
||||
onBlur={() => ({})}
|
||||
noBorder
|
||||
customClassName="text-xs bg-gray-100"
|
||||
customClassName="text-xs bg-brand-surface-1"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
@ -102,7 +102,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-100 p-4">
|
||||
@ -116,7 +116,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<p className="break-all text-sm leading-7 text-gray-500">
|
||||
<p className="break-all text-sm leading-7 text-brand-secondary">
|
||||
Are you sure you want to delete issue{" "}
|
||||
<span className="break-all font-semibold">
|
||||
{data?.project_detail.identifier}-{data?.sequence_id}
|
||||
|
||||
@ -115,7 +115,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
|
||||
role="textbox"
|
||||
/>
|
||||
{characterLimit && (
|
||||
<div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-white p-1 text-xs">
|
||||
<div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
|
||||
<span
|
||||
className={`${
|
||||
watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
|
||||
@ -158,7 +158,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
|
||||
className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
|
||||
isSubmitting ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -216,12 +216,12 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<h3 className="text-xl font-semibold leading-6 text-gray-900">
|
||||
<h3 className="text-xl font-semibold leading-6 text-brand-base">
|
||||
{status ? "Update" : "Create"} Issue
|
||||
</h3>
|
||||
</div>
|
||||
{watch("parent") && watch("parent") !== "" ? (
|
||||
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
|
||||
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 rounded-full"
|
||||
@ -267,7 +267,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
/>
|
||||
{mostSimilarIssue && (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
|
||||
>
|
||||
@ -283,7 +283,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm text-blue-500"
|
||||
className="text-sm text-brand-accent"
|
||||
onClick={() => {
|
||||
setMostSimilarIssue(undefined);
|
||||
}}
|
||||
@ -298,7 +298,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
{issueName && issueName !== "" && (
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
|
||||
iAmFeelingLucky ? "cursor-wait" : ""
|
||||
}`}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
@ -315,7 +315,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
|
||||
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
|
||||
onClick={() => setGptAssistantModal((prevData) => !prevData)}
|
||||
>
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
@ -444,7 +444,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t px-5 pt-5">
|
||||
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
onClick={() => setCreateMore((prevData) => !prevData)}
|
||||
@ -453,7 +453,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
|
||||
createMore ? "bg-theme" : "bg-gray-300"
|
||||
createMore ? "bg-brand-accent" : "bg-gray-300"
|
||||
} transition-colors duration-300 ease-in-out focus:outline-none`}
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
@ -463,7 +463,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
aria-hidden="true"
|
||||
className={`pointer-events-none inline-block h-3 w-3 ${
|
||||
createMore ? "translate-x-3" : "translate-x-0"
|
||||
} transform rounded-full bg-white shadow ring-0 transition duration-300 ease-in-out`}
|
||||
} transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -219,7 +219,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<IssueForm
|
||||
issues={issues ?? []}
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
|
||||
@ -82,7 +82,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
|
||||
const isNotAllowed = false;
|
||||
|
||||
return (
|
||||
<div className="border-b border-gray-300 last:border-b-0 mx-6">
|
||||
<div className="border-b border-brand-base last:border-b-0 mx-6">
|
||||
<div key={issue.id} className="flex items-center justify-between gap-2 py-3">
|
||||
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
|
||||
<a className="group relative flex items-center gap-2">
|
||||
@ -97,7 +97,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="break-all text-sm text-gray-800">
|
||||
<span className="break-all text-sm text-brand-base">
|
||||
{truncateText(issue.name, 50)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
@ -127,7 +127,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
|
||||
<div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
|
||||
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
@ -136,7 +136,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
|
||||
{issue.label_details.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
|
||||
@ -71,17 +71,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
{multiple ? (
|
||||
<>
|
||||
<Combobox value={value} onChange={() => ({})} multiple>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
displayValue={() => ""}
|
||||
@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
{filteredIssues.length > 0 && (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
@ -106,7 +106,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -119,7 +119,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>{" "}
|
||||
{issue.id}
|
||||
@ -135,10 +135,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
{query !== "" && filteredIssues.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<RectangleStackIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
<p className="mt-4 text-sm text-brand-base">
|
||||
We couldn{"'"}t find any issue with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
@ -153,11 +153,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
<Combobox value={value} onChange={onChange}>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
displayValue={() => ""}
|
||||
@ -171,7 +171,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
@ -182,7 +182,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
onClick={() => handleClose()}
|
||||
@ -194,7 +194,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>{" "}
|
||||
{issue.name}
|
||||
@ -206,9 +206,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
<h3 className="text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -54,15 +54,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={true} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-500">Assignee</span>
|
||||
<UserGroupIcon className="h-4 w-4 text-brand-secondary" />
|
||||
<span className="text-brand-secondary">Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -18,11 +18,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={({ open }) =>
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
|
||||
: "hover:bg-brand-accent/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
||||
@ -60,11 +60,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
<>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
|
||||
: "hover:bg-brand-accent/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -78,8 +78,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
|
||||
<TagIcon className="h-3 w-3 text-gray-500" />
|
||||
<span className=" text-gray-500">Label</span>
|
||||
<TagIcon className="h-3 w-3 text-brand-secondary" />
|
||||
<span className=" text-brand-secondary">Label</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
@ -96,12 +96,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
|
||||
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search for label..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
@ -120,7 +120,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
key={label.id}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
active ? "bg-brand-surface-2" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={label.id}
|
||||
@ -150,8 +150,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
} else
|
||||
return (
|
||||
<div className="border-y border-gray-400 bg-gray-50">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
|
||||
<div className="border-y border-brand-base bg-brand-surface-2">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
|
||||
<RectangleGroupIcon className="h-3 w-3" /> {label.name}
|
||||
</div>
|
||||
<div>
|
||||
@ -160,7 +160,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
key={child.id}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
active ? "bg-brand-surface-2" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={child.id}
|
||||
@ -192,14 +192,14 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="px-2 text-xs text-gray-500">No labels found</p>
|
||||
<p className="px-2 text-xs text-brand-secondary">No labels found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="px-2 text-xs text-gray-500">Loading...</p>
|
||||
<p className="px-2 text-xs text-brand-secondary">Loading...</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-1">
|
||||
|
||||
@ -18,9 +18,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `text-xs ${value ? "" : "text-gray-500"}`)}
|
||||
{getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
<span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -59,7 +59,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
|
||||
<p className="text-gray-400">No projects found!</p>
|
||||
)
|
||||
) : (
|
||||
<div className="px-2 text-sm text-gray-500">Loading...</div>
|
||||
<div className="px-2 text-sm text-brand-secondary">Loading...</div>
|
||||
)}
|
||||
</CustomSelect>
|
||||
);
|
||||
|
||||
@ -56,7 +56,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{selectedOption ? (
|
||||
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
|
||||
) : currentDefaultState ? (
|
||||
@ -70,7 +70,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
footerOption={
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-gray-500 hover:bg-hover-gray"
|
||||
className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" aria-hidden="true" />
|
||||
|
||||
@ -64,11 +64,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2 -my-0.5">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
<span className="text-brand-secondary">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
"No assignees"
|
||||
|
||||
@ -115,7 +115,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
? watch("blocked_list").map((issue) => (
|
||||
<div
|
||||
key={issue}
|
||||
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-50"
|
||||
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-500/30"
|
||||
>
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${
|
||||
@ -176,7 +176,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<form>
|
||||
<Combobox
|
||||
onChange={(val: string) => {
|
||||
@ -191,12 +191,12 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
@ -209,7 +209,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
Select blocked issues
|
||||
</h2>
|
||||
)}
|
||||
@ -226,7 +226,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -244,7 +244,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{
|
||||
issues?.find((i) => i.id === issue.id)?.project_detail
|
||||
?.identifier
|
||||
@ -262,9 +262,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
<h3 className="text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
@ -288,8 +288,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`flex w-full ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
|
||||
onClick={() => setIsBlockedModalOpen(true)}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
|
||||
@ -176,7 +176,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Combobox
|
||||
onChange={(val: string) => {
|
||||
const selectedIssues = watchBlocker("blocker_issue_ids");
|
||||
@ -190,12 +190,12 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
@ -208,7 +208,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
Select blocker issues
|
||||
</h2>
|
||||
)}
|
||||
@ -225,7 +225,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -243,14 +243,14 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{
|
||||
issues?.find((i) => i.id === issue.id)?.project_detail
|
||||
?.identifier
|
||||
}
|
||||
-{issue.sequence_id}
|
||||
</span>
|
||||
<span>{issue.name}</span>
|
||||
<span className="text-brand-muted-1">{issue.name}</span>
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
);
|
||||
@ -260,9 +260,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
<h3 className="text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
@ -285,8 +285,8 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`flex w-full ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
|
||||
onClick={() => setIsBlockerModalOpen(true)}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
|
||||
@ -70,7 +70,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
|
||||
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}>
|
||||
<span
|
||||
className={`w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueCycle ? "" : "text-gray-900"
|
||||
issueCycle ? "" : "text-brand-base"
|
||||
}`}
|
||||
>
|
||||
{issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "None"}
|
||||
|
||||
@ -69,7 +69,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
|
||||
<Tooltip position="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}>
|
||||
<span
|
||||
className={`w-full max-w-[125px] truncate text-left sm:block ${
|
||||
issueModule ? "" : "text-gray-900"
|
||||
issueModule ? "" : "text-brand-base"
|
||||
}`}
|
||||
>
|
||||
{truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}
|
||||
|
||||
@ -78,8 +78,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`flex w-full ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
|
||||
onClick={() => setIsParentModalOpen(true)}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
|
||||
@ -30,7 +30,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-2 text-left capitalize ${
|
||||
value ? "" : "text-gray-900"
|
||||
value ? "" : "text-brand-base"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
|
||||
|
||||
@ -50,7 +50,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
|
||||
<div className="sm:basis-1/2">
|
||||
<CustomSelect
|
||||
label={
|
||||
<div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
|
||||
<div className={`flex items-center gap-2 text-left ${value ? "" : "text-brand-base"}`}>
|
||||
{getStateGroupIcon(
|
||||
selectedState?.group ?? "backlog",
|
||||
"16",
|
||||
|
||||
@ -229,7 +229,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueDetail ?? null}
|
||||
/>
|
||||
<div className="sticky top-5 w-full divide-y-2 divide-gray-100">
|
||||
<div className="sticky top-5 w-full divide-y-2 divide-brand-base">
|
||||
<div className="flex items-center justify-between pb-3">
|
||||
<h4 className="text-sm font-medium">
|
||||
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
|
||||
@ -237,7 +237,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border p-2 shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
|
||||
onClick={handleCopyText}
|
||||
>
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
@ -245,7 +245,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
{!isNotAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/30 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
|
||||
onClick={() => setDeleteIssueModal(true)}
|
||||
>
|
||||
<TrashIcon className="h-3.5 w-3.5" />
|
||||
@ -253,7 +253,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y-2 divide-gray-100">
|
||||
<div className="divide-y-2 divide-brand-base">
|
||||
<div className="py-1">
|
||||
<Controller
|
||||
control={control}
|
||||
@ -316,14 +316,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
issueDetail?.parent_detail ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded bg-gray-100 px-3 py-2 text-xs"
|
||||
className="flex items-center gap-2 rounded bg-brand-surface-1 px-3 py-2 text-xs"
|
||||
onClick={() => submitChanges({ parent: null })}
|
||||
>
|
||||
{issueDetail.parent_detail?.name}
|
||||
<XMarkIcon className="h-3 w-3" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="inline-block rounded bg-gray-100 px-3 py-2 text-xs">
|
||||
<div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs">
|
||||
No parent selected
|
||||
</div>
|
||||
)
|
||||
@ -395,7 +395,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
return (
|
||||
<span
|
||||
key={label.id}
|
||||
className="group flex cursor-pointer items-center gap-1 rounded-2xl border px-1 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-brand-base px-1 py-0.5 text-xs hover:border-red-500 hover:bg-red-500/30"
|
||||
onClick={() => {
|
||||
const updatedLabels = watchIssue("labels_list")?.filter(
|
||||
(l) => l !== labelId
|
||||
@ -435,8 +435,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
className={`flex ${
|
||||
isNotAllowed
|
||||
? "cursor-not-allowed"
|
||||
: "cursor-pointer hover:bg-gray-100"
|
||||
} items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`}
|
||||
: "cursor-pointer hover:bg-brand-surface-1"
|
||||
} items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`}
|
||||
>
|
||||
Select Label
|
||||
</Listbox.Button>
|
||||
@ -448,7 +448,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{issueLabels ? (
|
||||
issueLabels.length > 0 ? (
|
||||
@ -463,9 +463,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
<Listbox.Option
|
||||
key={label.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-indigo-50" : ""} ${
|
||||
`${active || selected ? "bg-brand-surface-1" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
|
||||
}
|
||||
value={label.id}
|
||||
>
|
||||
@ -483,8 +483,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
);
|
||||
} else
|
||||
return (
|
||||
<div className="border-y border-gray-400 bg-gray-50">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
|
||||
<div className="border-y border-brand-base bg-brand-surface-1">
|
||||
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
|
||||
<RectangleGroupIcon className="h-3 w-3" />{" "}
|
||||
{label.name}
|
||||
</div>
|
||||
@ -495,7 +495,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-indigo-50" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
|
||||
}
|
||||
value={child.id}
|
||||
>
|
||||
@ -530,8 +530,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`flex ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
|
||||
} items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`}
|
||||
onClick={() => setCreateLabelForm((prevData) => !prevData)}
|
||||
>
|
||||
{createLabelForm ? (
|
||||
@ -555,7 +555,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`flex items-center gap-1 rounded-md bg-white p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
|
||||
className={`flex items-center gap-1 rounded-md bg-brand-surface-2 p-1 outline-none focus:ring-2 focus:ring-brand-accent`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
@ -627,7 +627,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
{!isNotAllowed && (
|
||||
<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"
|
||||
onClick={() => setLinkModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
|
||||
@ -173,7 +173,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
|
||||
</Disclosure.Button>
|
||||
@ -181,7 +181,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
|
||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
|
||||
onClick={handleCreateIssueModal}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
@ -210,7 +210,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
key={issue.id}
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
|
||||
>
|
||||
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100">
|
||||
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-surface-1">
|
||||
<div className="flex items-center gap-2 rounded text-xs">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
@ -234,7 +234,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
handleSubIssueRemove(issue.id);
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-900" />
|
||||
<XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
|
||||
</button>
|
||||
)}
|
||||
</a>
|
||||
|
||||
@ -103,17 +103,17 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
|
||||
<div
|
||||
className={`flex ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center gap-2 text-gray-500`}
|
||||
} items-center gap-2 text-brand-secondary`}
|
||||
>
|
||||
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
|
||||
<div className="flex items-center justify-center gap-2 -my-0.5">
|
||||
<AssigneesList userIds={issue.assignees} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{issue.assignees.length} Assignees</span>
|
||||
<span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-500">Assignee</span>
|
||||
<UserGroupIcon className="h-4 w-4 text-brand-secondary" />
|
||||
<span className="text-brand-secondary">Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -97,7 +97,7 @@ export const ViewStateSelect: React.FC<Props> = ({
|
||||
tooltipHeading="State"
|
||||
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{selectedOption &&
|
||||
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
|
||||
{selectedOption?.name ?? "State"}
|
||||
|
||||
@ -84,7 +84,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
@ -98,10 +98,10 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Create Label
|
||||
</Dialog.Title>
|
||||
<div className="mt-8 flex items-center gap-2">
|
||||
@ -109,8 +109,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
{({ open, close }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group inline-flex items-center rounded-sm bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
||||
open ? "text-gray-900" : "text-gray-500"
|
||||
className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
||||
open ? "text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
@ -122,7 +122,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
|
||||
/>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
|
||||
className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
|
||||
open ? "text-gray-600" : "text-gray-400"
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
|
||||
@ -108,18 +108,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border bg-white p-5 ${
|
||||
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
|
||||
labelForm ? "" : "hidden"
|
||||
}`}
|
||||
ref={ref}
|
||||
>
|
||||
<div className="h-8 w-8 flex-shrink-0">
|
||||
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
|
||||
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
||||
open ? "text-gray-900" : "text-gray-500"
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
|
||||
open ? "text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
|
||||
@ -89,15 +89,15 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Combobox>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
@ -111,7 +111,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
<>
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
|
||||
Labels
|
||||
</h2>
|
||||
)}
|
||||
@ -132,7 +132,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
}}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
onClick={() => {
|
||||
@ -159,10 +159,10 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
{query !== "" && filteredLabels.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<RectangleStackIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
<p className="mt-4 text-sm text-brand-base">
|
||||
We couldn{"'"}t find any label with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -66,7 +66,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure as="div" className="rounded-[10px] border bg-white p-5 text-gray-900" defaultOpen>
|
||||
<Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex cursor-pointer items-center justify-between gap-2">
|
||||
@ -74,7 +74,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="font-medium text-gray-600">{label.name}</h6>
|
||||
<h6 className="font-medium text-brand-base">{label.name}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CustomMenu ellipsis>
|
||||
@ -100,7 +100,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
<Disclosure.Button>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "rotate-90 transform" : ""}`}
|
||||
className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</Disclosure.Button>
|
||||
@ -120,9 +120,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
{labelChildren.map((child) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="group flex items-center justify-between rounded-md border p-2 text-sm"
|
||||
className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
|
||||
>
|
||||
<h5 className="flex items-center gap-3 text-gray-600">
|
||||
<h5 className="flex items-center gap-3 text-brand-base">
|
||||
<span
|
||||
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
|
||||
@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
|
||||
editLabel,
|
||||
handleLabelDelete,
|
||||
}) => (
|
||||
<div className="gap-2 space-y-3 divide-y rounded-[10px] border bg-white p-5">
|
||||
<div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
|
||||
backgroundColor: label.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
<h6 className="font-medium text-gray-600">{label.name}</h6>
|
||||
<h6 className="font-medium text-brand-base">{label.name}</h6>
|
||||
</div>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
|
||||
@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -91,8 +91,8 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
@ -101,11 +101,11 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Delete Module
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to delete module-{" "}
|
||||
<span className="font-bold">{data?.name}</span>? All of the data related
|
||||
to the module will be permanently removed. This action cannot be undone.
|
||||
|
||||
@ -66,7 +66,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleCreateUpdateModule)}>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||
<h3 className="text-lg font-medium leading-6 text-brand-base">
|
||||
{status ? "Update" : "Create"} Module
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
@ -170,7 +170,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
|
||||
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
|
||||
{status
|
||||
|
||||
@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -139,7 +139,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<ModuleForm
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
handleClose={handleClose}
|
||||
|
||||
@ -56,11 +56,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
options={options}
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{selectedOption ? (
|
||||
<Avatar user={selectedOption} />
|
||||
) : (
|
||||
<div className="h-4 w-4 rounded-full bg-white">
|
||||
<div className="h-4 w-4 rounded-full bg-brand-surface-2">
|
||||
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -51,16 +51,16 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
<span className="text-brand-secondary">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-gray-500">Assignee</span>
|
||||
<UserGroupIcon className="h-4 w-4 text-brand-secondary" />
|
||||
<span className="text-brand-secondary">Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -62,11 +62,11 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{selectedOption ? (
|
||||
<Avatar user={selectedOption} />
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
|
||||
<Image
|
||||
src={User}
|
||||
height="100%"
|
||||
|
||||
@ -58,11 +58,11 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className="text-gray-500">{value.length} Assignees</span>
|
||||
<span className="text-brand-secondary">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
"No members"
|
||||
|
||||
@ -33,7 +33,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
|
||||
label={
|
||||
<span
|
||||
className={`flex items-center gap-2 text-left capitalize ${
|
||||
value ? "" : "text-gray-900"
|
||||
value ? "" : "text-brand-base"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
|
||||
@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
<div
|
||||
className={`fixed top-0 ${
|
||||
isOpen ? "right-0" : "-right-[24rem]"
|
||||
} z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
|
||||
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
|
||||
>
|
||||
{module ? (
|
||||
<>
|
||||
@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
<CustomSelect
|
||||
customButton={
|
||||
<span
|
||||
className={`flex cursor-pointer items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
|
||||
className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
|
||||
>
|
||||
{capitalizeFirstLetter(`${watch("status")}`)}
|
||||
</span>
|
||||
@ -218,13 +218,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
@ -271,8 +271,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3 " />
|
||||
@ -319,7 +319,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
<div className="flex flex-col gap-6 px-6 py-6 w-full">
|
||||
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||
<div className="flex items-start justify-between gap-2 w-full ">
|
||||
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
|
||||
<h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
|
||||
<CustomMenu width="lg" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</CustomMenu>
|
||||
</div>
|
||||
|
||||
<span className="whitespace-normal text-sm leading-5 text-black">
|
||||
<span className="whitespace-normal text-sm leading-5 text-brand-base">
|
||||
{module.description}
|
||||
</span>
|
||||
</div>
|
||||
@ -373,7 +373,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
<span>Progress</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 text-gray-800">
|
||||
<div className="flex items-center gap-2.5 text-brand-muted-1">
|
||||
<span className="h-4 w-4">
|
||||
<ProgressBar
|
||||
value={module.completed_issues}
|
||||
@ -387,15 +387,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2 ">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Progress</span>
|
||||
<span className="font-medium text-brand-secondary">Progress</span>
|
||||
{!open && moduleIssues && progressPercentage ? (
|
||||
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
|
||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||
@ -415,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
Invalid date. Please enter valid date.
|
||||
</span>
|
||||
</div>
|
||||
@ -428,7 +428,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
<div className="flex items-start justify-between gap-4 py-2 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>
|
||||
<DocumentIcon className="h-3 w-3 text-gray-500" />
|
||||
<DocumentIcon className="h-3 w-3 text-brand-secondary" />
|
||||
</span>
|
||||
<span>
|
||||
Pending Issues -{" "}
|
||||
@ -437,7 +437,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-gray-900">
|
||||
<div className="flex items-center gap-3 text-brand-base">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
|
||||
<span>Ideal</span>
|
||||
@ -466,15 +466,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2 ">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Other Information</span>
|
||||
<span className="font-medium text-brand-secondary">Other Information</span>
|
||||
</div>
|
||||
|
||||
{module.total_issues > 0 ? (
|
||||
@ -487,7 +487,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
No issues found. Please add issue.
|
||||
</span>
|
||||
</div>
|
||||
@ -522,11 +522,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col text-xs border-t border-gray-300 px-6 py-6">
|
||||
<div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
|
||||
<div className="flex justify-between items-center w-full">
|
||||
<h4 className="font-medium text-sm text-gray-500">Links</h4>
|
||||
<h4 className="font-medium text-sm text-brand-secondary">Links</h4>
|
||||
<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"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
|
||||
@ -122,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
|
||||
setIsOpen={setModuleDeleteModal}
|
||||
data={module}
|
||||
/>
|
||||
<div className="flex flex-col divide-y overflow-hidden rounded-[10px] border bg-white text-xs">
|
||||
<div className="flex flex-col divide-y divide-brand-base overflow-hidden rounded-[10px] border border-brand-base bg-brand-surface-2 text-xs">
|
||||
<div className="p-4">
|
||||
<div className="flex w-full flex-col gap-5">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<Tooltip tooltipContent={module.name} position="top-left">
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<a className="w-auto max-w-[calc(100%-9rem)]">
|
||||
<h3 className="truncate break-all text-lg font-semibold text-black">
|
||||
<h3 className="truncate break-all text-lg font-semibold text-brand-base">
|
||||
{truncateText(module.name, 75)}
|
||||
</h3>
|
||||
</a>
|
||||
@ -137,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
|
||||
</Tooltip>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="mr-2 flex whitespace-nowrap rounded bg-gray-100 px-2.5 py-2">
|
||||
<div className="mr-2 flex whitespace-nowrap rounded bg-brand-surface-1 px-2.5 py-2">
|
||||
<span className="capitalize">{module?.status?.replace("-", " ")}</span>
|
||||
</div>
|
||||
{module.is_favorite ? (
|
||||
@ -174,12 +174,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-1">
|
||||
<CalendarMonthIcon className="h-4 w-4 text-gray-900" />
|
||||
<CalendarMonthIcon className="h-4 w-4 text-brand-base" />
|
||||
<span className="text-gray-400">Start:</span>
|
||||
<span>{renderShortDateWithYearFormat(startDate)}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-1">
|
||||
<TargetIcon className="h-4 w-4 text-gray-900" />
|
||||
<TargetIcon className="h-4 w-4 text-brand-base" />
|
||||
<span className="text-gray-400">End:</span>
|
||||
<span>{renderShortDateWithYearFormat(endDate)}</span>
|
||||
</div>
|
||||
@ -187,7 +187,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-20 flex-col items-end">
|
||||
<div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
|
||||
<div className="flex w-full items-center justify-between gap-2 justify-self-end bg-brand-surface-1 p-4">
|
||||
<span>Progress</span>
|
||||
<div className="bar relative h-1 w-full rounded bg-gray-300">
|
||||
<div
|
||||
@ -199,10 +199,10 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
|
||||
</div>
|
||||
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="item-center flex h-full w-full justify-between bg-gray-100 px-4 pb-4">
|
||||
<div className="item-center flex h-full w-full justify-between bg-brand-surface-1 px-4 pb-4">
|
||||
<p className="text-[#858E96]">
|
||||
Last updated:
|
||||
<span className="font-medium text-black">
|
||||
<span className="font-medium text-brand-base">
|
||||
{renderShortDateWithYearFormat(lastUpdated)}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@ -44,7 +44,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full max-w-xl flex-col gap-12">
|
||||
<div className="flex flex-col gap-6 rounded-[10px] bg-white px-10 py-7 shadow-md">
|
||||
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
|
||||
<h2 className="text-2xl font-medium ">Invite co-workers to your team</h2>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 ">
|
||||
<span>Email</span>
|
||||
|
||||
@ -67,7 +67,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
||||
return (
|
||||
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex w-full max-w-xl flex-col gap-12">
|
||||
<div className="flex flex-col rounded-[10px] bg-white shadow-md">
|
||||
<div className="flex flex-col rounded-[10px] bg-brand-surface-2 shadow-md">
|
||||
<div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5">
|
||||
<span>First name</span>
|
||||
@ -94,7 +94,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-10 py-7">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-10 py-7">
|
||||
<span>What is your role?</span>
|
||||
<div className="w-full">
|
||||
<Controller
|
||||
|
||||
@ -65,10 +65,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid w-full place-items-center min-h-[490px]">
|
||||
<div className="grid min-h-[490px] w-full place-items-center">
|
||||
<Tab.Group
|
||||
as="div"
|
||||
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-white shadow-md"
|
||||
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-surface-2 shadow-md"
|
||||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
@ -78,8 +78,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-4 py-2 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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -89,8 +89,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-5 py-2 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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -109,7 +109,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel className="h-full">
|
||||
<div className="flex flex-col justify-between h-full w-full">
|
||||
<div className="flex h-full w-full flex-col justify-between">
|
||||
<div className="divide-y px-4 py-7">
|
||||
{invitations && invitations.length > 0 ? (
|
||||
invitations.map((invitation) => (
|
||||
@ -136,10 +136,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
<div className="text-sm font-medium text-brand-base">
|
||||
{invitation.workspace.name}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Invited by {invitation.workspace.owner.first_name}
|
||||
</p>
|
||||
</div>
|
||||
@ -157,7 +157,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
);
|
||||
}}
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
|
||||
className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -165,7 +165,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<PageForm
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
handleClose={handleClose}
|
||||
|
||||
@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -115,8 +115,8 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
@ -125,11 +125,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Delete Page
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to delete Page- {" "}
|
||||
<span className="font-bold">{data?.name}</span>
|
||||
? All of the data related to the page will be permanently removed.
|
||||
|
||||
@ -61,7 +61,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleCreateUpdatePage)}>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||
<h3 className="text-lg font-medium leading-6 text-brand-base">
|
||||
{status ? "Update" : "Create"} Page
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
|
||||
@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
||||
))}
|
||||
</ul>
|
||||
) : viewType === "detailed" ? (
|
||||
<div className="divide-y rounded-[10px] border border-gray-200 bg-white">
|
||||
<div className="divide-y rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
{pages.map((page) => (
|
||||
<SinglePageDetailedItem
|
||||
key={page.id}
|
||||
@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-[10px] border border-gray-200 bg-white">
|
||||
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
{pages.map((page) => (
|
||||
<SinglePageDetailedItem
|
||||
key={page.id}
|
||||
|
||||
@ -57,7 +57,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
|
||||
style={{
|
||||
backgroundColor: `${
|
||||
label?.color && label.color !== "" ? label.color : "#000000"
|
||||
|
||||
@ -51,7 +51,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
||||
<li>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<a>
|
||||
<div className="relative rounded p-4 hover:bg-gray-200">
|
||||
<div className="relative rounded p-4 hover:bg-brand-surface-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DocumentTextIcon className="h-4 w-4" />
|
||||
@ -62,7 +62,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
|
||||
style={{
|
||||
backgroundColor: `${
|
||||
label?.color && label.color !== "" ? label.color : "#000000"
|
||||
|
||||
@ -39,7 +39,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -53,8 +53,8 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
@ -63,11 +63,11 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
Remove {data?.email}?
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to remove member- {" "}
|
||||
<span className="font-bold">{data?.email}</span>
|
||||
? They will no longer have access to this project. This action
|
||||
|
||||
@ -164,7 +164,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -178,7 +178,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="transform rounded-lg bg-white text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="transform rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<div className="relative h-36 w-full rounded-t-lg bg-gray-300">
|
||||
{watch("cover_image") !== null && (
|
||||
<Image
|
||||
|
||||
@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -110,7 +110,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-100 p-4">
|
||||
@ -124,7 +124,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<p className="text-sm leading-7 text-gray-500">
|
||||
<p className="text-sm leading-7 text-brand-secondary">
|
||||
Are you sure you want to delete project{" "}
|
||||
<span className="break-all font-semibold">{selectedProject?.name}</span>? All
|
||||
of the data related to the project will be permanently removed. This action
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user