thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: themes (#902)

Browse Source 
* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

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

2
apps/app/components/account/email-code-form.tsx
View File

@ -141,7 +141,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
<button <button
type="button" type="button"
className={`mt-5 flex w-full justify-end text-xs outline-none ${ 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={() => { onClick={() => {
setIsCodeResending(true); setIsCodeResending(true);

2
apps/app/components/account/email-password-form.tsx
View File

@ -94,7 +94,7 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
<div className="mt-2 flex items-center justify-between"> <div className="mt-2 flex items-center justify-between">
<div className="ml-auto text-sm"> <div className="ml-auto text-sm">
<Link href={"/forgot-password"}> <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> </Link>
</div> </div>
</div> </div>

2
apps/app/components/account/github-login-button.tsx
View File

@ -37,7 +37,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
<Link <Link
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`} 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" /> <Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
<span>Sign In with Github</span> <span>Sign In with Github</span>
</button> </button>

8
apps/app/components/auth-screens/not-authorized-view.tsx
View File

@ -36,16 +36,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
alt="ProjectSettingImg" alt="ProjectSettingImg"
/> />
</div> </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 Oops! You are not authorized to view this page
</h1> </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 ? ( {user ? (
<p> <p>
You have signed in as {user.email}. <br /> You have signed in as {user.email}. <br />
<Link href={`/signin?next=${currentPath}`}> <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>{" "} </Link>{" "}
with different account that has access to this page. with different account that has access to this page.
</p> </p>
@ -53,7 +53,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
<p> <p>
You need to{" "} You need to{" "}
<Link href={`/signin?next=${currentPath}`}> <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>{" "} </Link>{" "}
with an account that has access to this page. with an account that has access to this page.
</p> </p>

4
apps/app/components/breadcrumbs/index.tsx
View File

@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
<div className="flex items-center"> <div className="flex items-center">
<button <button
type="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()} onClick={() => router.back()}
> >
<ArrowLeftIcon className="h-3 w-3" /> <ArrowLeftIcon className="h-3 w-3" />
@ -37,7 +37,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
<> <>
{link ? ( {link ? (
<Link href={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" : ""}`}> <p className={`${icon ? "flex items-center gap-2" : ""}`}>
{icon ?? null} {icon ?? null}
{title} {title}

45
apps/app/components/command-palette/change-interface-theme.tsx Normal file
View File

@ -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>
))}
</>
);
};

121
apps/app/components/command-palette/command-pallette.tsx
View File

@ -44,6 +44,7 @@ import {
ChangeIssueState, ChangeIssueState,
ChangeIssuePriority, ChangeIssuePriority,
ChangeIssueAssignee, ChangeIssueAssignee,
ChangeInterfaceTheme,
} from "components/command-palette"; } from "components/command-palette";
import { BulkDeleteIssuesModal } from "components/core"; import { BulkDeleteIssuesModal } from "components/core";
import { CreateUpdateCycleModal } from "components/cycles"; import { CreateUpdateCycleModal } from "components/cycles";
@ -379,7 +380,7 @@ export const CommandPalette: React.FC = () => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 <Command
filter={(value, search) => { filter={(value, search) => {
if (value.toLowerCase().includes(search.toLowerCase())) return 1; if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@ -415,7 +416,7 @@ export const CommandPalette: React.FC = () => {
> >
{issueId && issueDetails && ( {issueId && issueDetails && (
<div className="flex p-3"> <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.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
{issueDetails?.name} {issueDetails?.name}
</p> </p>
@ -423,11 +424,11 @@ export const CommandPalette: React.FC = () => {
)} )}
<div className="relative"> <div className="relative">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<Command.Input <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} placeholder={placeholder}
value={searchTerm} value={searchTerm}
onValueChange={(e) => { onValueChange={(e) => {
@ -441,7 +442,9 @@ export const CommandPalette: React.FC = () => {
resultsCount === 0 && resultsCount === 0 &&
searchTerm !== "" && searchTerm !== "" &&
debouncedSearchTerm !== "" && ( 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) && ( {(isLoading || isSearching) && (
@ -502,8 +505,11 @@ export const CommandPalette: React.FC = () => {
value={value} value={value}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 overflow-hidden text-gray-700"> <div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
<Icon className="h-4 w-4 text-gray-500" color="#6b7280" /> <Icon
className="h-4 w-4 text-brand-secondary"
color="#6b7280"
/>
<p className="block flex-1 truncate">{item.name}</p> <p className="block flex-1 truncate">{item.name}</p>
</div> </div>
</Command.Item> </Command.Item>
@ -528,8 +534,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<Squares2X2Icon className="h-4 w-4 text-gray-500" /> <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
Change state... Change state...
</div> </div>
</Command.Item> </Command.Item>
@ -541,8 +547,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<ChartBarIcon className="h-4 w-4 text-gray-500" /> <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
Change priority... Change priority...
</div> </div>
</Command.Item> </Command.Item>
@ -554,8 +560,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<UsersIcon className="h-4 w-4 text-gray-500" /> <UsersIcon className="h-4 w-4 text-brand-secondary" />
Assign to... Assign to...
</div> </div>
</Command.Item> </Command.Item>
@ -566,15 +572,15 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" 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) ? ( {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 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 Assign to me
</> </>
)} )}
@ -582,8 +588,8 @@ export const CommandPalette: React.FC = () => {
</Command.Item> </Command.Item>
<Command.Item onSelect={deleteIssue} className="focus:outline-none"> <Command.Item onSelect={deleteIssue} className="focus:outline-none">
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<TrashIcon className="h-4 w-4 text-gray-500" /> <TrashIcon className="h-4 w-4 text-brand-secondary" />
Delete issue Delete issue
</div> </div>
</Command.Item> </Command.Item>
@ -594,16 +600,19 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<LinkIcon className="h-4 w-4 text-gray-500" /> <LinkIcon className="h-4 w-4 text-brand-secondary" />
Copy issue URL to clipboard Copy issue URL to clipboard
</div> </div>
</Command.Item> </Command.Item>
</> </>
)} )}
<Command.Group heading="Issue"> <Command.Group heading="Issue">
<Command.Item onSelect={createNewIssue} className="focus:bg-gray-200"> <Command.Item
<div className="flex items-center gap-2 text-gray-700"> 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" /> <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
Create new issue Create new issue
</div> </div>
@ -617,7 +626,7 @@ export const CommandPalette: React.FC = () => {
onSelect={createNewProject} onSelect={createNewProject}
className="focus:outline-none" 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" /> <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
Create new project Create new project
</div> </div>
@ -633,7 +642,7 @@ export const CommandPalette: React.FC = () => {
onSelect={createNewCycle} onSelect={createNewCycle}
className="focus:outline-none" 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" /> <ContrastIcon className="h-4 w-4" color="#6b7280" />
Create new cycle Create new cycle
</div> </div>
@ -646,7 +655,7 @@ export const CommandPalette: React.FC = () => {
onSelect={createNewModule} onSelect={createNewModule}
className="focus:outline-none" 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" /> <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
Create new module Create new module
</div> </div>
@ -656,7 +665,7 @@ export const CommandPalette: React.FC = () => {
<Command.Group heading="View"> <Command.Group heading="View">
<Command.Item onSelect={createNewView} className="focus:outline-none"> <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" /> <ViewListIcon className="h-4 w-4" color="#6b7280" />
Create new view Create new view
</div> </div>
@ -685,7 +694,7 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" 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" /> <SettingIcon className="h-4 w-4" color="#6b7280" />
Search settings... Search settings...
</div> </div>
@ -696,11 +705,24 @@ export const CommandPalette: React.FC = () => {
onSelect={createNewWorkspace} onSelect={createNewWorkspace}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<FolderPlusIcon className="h-4 w-4 text-gray-500" /> <FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
Create new workspace Create new workspace
</div> </div>
</Command.Item> </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>
<Command.Group heading="Help"> <Command.Group heading="Help">
<Command.Item <Command.Item
@ -713,8 +735,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<RocketLaunchIcon className="h-4 w-4 text-gray-500" /> <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
Open keyboard shortcuts Open keyboard shortcuts
</div> </div>
</Command.Item> </Command.Item>
@ -725,8 +747,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<DocumentIcon className="h-4 w-4 text-gray-500" /> <DocumentIcon className="h-4 w-4 text-brand-secondary" />
Open Plane documentation Open Plane documentation
</div> </div>
</Command.Item> </Command.Item>
@ -737,7 +759,7 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" 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" /> <DiscordIcon className="h-4 w-4" color="#6b7280" />
Join our Discord Join our Discord
</div> </div>
@ -752,7 +774,7 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" 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" /> <GithubIcon className="h-4 w-4" color="#6b7280" />
Report a bug Report a bug
</div> </div>
@ -764,8 +786,8 @@ export const CommandPalette: React.FC = () => {
}} }}
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-brand-secondary">
<ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" /> <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
Chat with us Chat with us
</div> </div>
</Command.Item> </Command.Item>
@ -779,8 +801,8 @@ export const CommandPalette: React.FC = () => {
onSelect={() => goToSettings()} onSelect={() => goToSettings()}
className="focus:outline-none" 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 text-gray-500" /> <SettingIcon className="h-4 w-4 text-brand-secondary" />
General General
</div> </div>
</Command.Item> </Command.Item>
@ -788,8 +810,8 @@ export const CommandPalette: React.FC = () => {
onSelect={() => goToSettings("members")} onSelect={() => goToSettings("members")}
className="focus:outline-none" 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 text-gray-500" /> <SettingIcon className="h-4 w-4 text-brand-secondary" />
Members Members
</div> </div>
</Command.Item> </Command.Item>
@ -797,8 +819,8 @@ export const CommandPalette: React.FC = () => {
onSelect={() => goToSettings("billing")} onSelect={() => goToSettings("billing")}
className="focus:outline-none" 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 text-gray-500" /> <SettingIcon className="h-4 w-4 text-brand-secondary" />
Billings and Plans Billings and Plans
</div> </div>
</Command.Item> </Command.Item>
@ -806,8 +828,8 @@ export const CommandPalette: React.FC = () => {
onSelect={() => goToSettings("integrations")} onSelect={() => goToSettings("integrations")}
className="focus:outline-none" 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 text-gray-500" /> <SettingIcon className="h-4 w-4 text-brand-secondary" />
Integrations Integrations
</div> </div>
</Command.Item> </Command.Item>
@ -815,8 +837,8 @@ export const CommandPalette: React.FC = () => {
onSelect={() => goToSettings("import-export")} onSelect={() => goToSettings("import-export")}
className="focus:outline-none" 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 text-gray-500" /> <SettingIcon className="h-4 w-4 text-brand-secondary" />
Import/Export Import/Export
</div> </div>
</Command.Item> </Command.Item>
@ -842,6 +864,9 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen={setIsPaletteOpen} setIsPaletteOpen={setIsPaletteOpen}
/> />
)} )}
{page === "change-interface-theme" && (
<ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
)}
</Command.List> </Command.List>
</Command> </Command>
</Dialog.Panel> </Dialog.Panel>

1
apps/app/components/command-palette/index.ts
View File

@ -3,3 +3,4 @@ export * from "./shortcuts-modal";
export * from "./change-issue-state"; export * from "./change-issue-state";
export * from "./change-issue-priority"; export * from "./change-issue-priority";
export * from "./change-issue-assignee"; export * from "./change-issue-assignee";
export * from "./change-interface-theme";

30
apps/app/components/command-palette/shortcuts-modal.tsx
View File

@ -71,7 +71,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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"> <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-white p-5"> <div className="bg-brand-surface-2 p-5">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left"> <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" 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>Keyboard Shortcuts</span>
<span> <span>
<button type="button" onClick={() => setIsOpen(false)}> <button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon <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" aria-hidden="true"
/> />
</button> </button>
</span> </span>
</Dialog.Title> </Dialog.Title>
<div> <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"> <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-gray-500" /> <MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
<Input <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" id="search"
name="search" name="search"
type="text" 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 key={shortcut.keys} className="flex w-full flex-col">
<div className="flex flex-col gap-y-3"> <div className="flex flex-col gap-y-3">
<div className="flex items-center justify-between"> <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"> <div className="flex items-center gap-x-2.5">
{shortcut.keys.split(",").map((key, index) => ( {shortcut.keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {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 /> <MacCommandIcon />
</span> </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} {key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd> </kbd>
)} )}
@ -145,7 +145,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
)) ))
) : ( ) : (
<div className="flex flex-col gap-y-3"> <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{" "} No shortcuts found for{" "}
<span className="font-semibold italic"> <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"> <div className="flex flex-col gap-y-3">
{shortcuts.map(({ keys, description }, index) => ( {shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex items-center justify-between"> <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"> <div className="flex items-center gap-x-2.5">
{keys.split(",").map((key, index) => ( {keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {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 /> <MacCommandIcon />
</span> </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} {key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd> </kbd>
)} )}

4
apps/app/components/core/board-view/all-boards.tsx
View File

@ -81,7 +81,7 @@ export const AllBoards: React.FC<Props> = ({
return ( return (
<div <div
key={index} 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"> <div className="flex items-center gap-2">
{currentState && {currentState &&
@ -92,7 +92,7 @@ export const AllBoards: React.FC<Props> = ({
: addSpaceIfCamelCase(singleGroup)} : addSpaceIfCamelCase(singleGroup)}
</h4> </h4>
</div> </div>
<span className="text-xs text-gray-500">0</span> <span className="text-xs text-brand-secondary">0</span>
</div> </div>
); );
})} })}

8
apps/app/components/core/board-view/board-header.tsx
View File

@ -124,7 +124,7 @@ export const BoardHeader: React.FC<Props> = ({
return ( return (
<div <div
className={`flex justify-between items-center px-1 ${ 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"}`}> <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@ -145,7 +145,7 @@ export const BoardHeader: React.FC<Props> = ({
<span <span
className={`${ className={`${
isCollapsed ? "ml-0.5" : "" 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} {groupedByIssues?.[groupTitle].length ?? 0}
</span> </span>
@ -155,7 +155,7 @@ export const BoardHeader: React.FC<Props> = ({
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}> <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
<button <button
type="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={() => { onClick={() => {
setIsCollapsed((prevData) => !prevData); setIsCollapsed((prevData) => !prevData);
}} }}
@ -169,7 +169,7 @@ export const BoardHeader: React.FC<Props> = ({
{!isCompleted && ( {!isCompleted && (
<button <button
type="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} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />

12
apps/app/components/core/board-view/single-board.tsx
View File

@ -66,7 +66,7 @@ export const SingleBoard: React.FC<Props> = ({
}, [currentState]); }, [currentState]);
return ( 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"}`}> <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
<BoardHeader <BoardHeader
addIssueToState={addIssueToState} addIssueToState={addIssueToState}
@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`relative h-full overflow-y-auto p-1 ${ 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"}`} } ${!isCollapsed ? "hidden" : "block"}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
@ -91,12 +91,12 @@ export const SingleBoard: React.FC<Props> = ({
<div <div
className={`absolute ${ className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden" 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 <div
className={`absolute ${ className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden" 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{" "} This board is ordered by{" "}
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")} {replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
@ -146,7 +146,7 @@ export const SingleBoard: React.FC<Props> = ({
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="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} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
@ -158,7 +158,7 @@ export const SingleBoard: React.FC<Props> = ({
customButton={ customButton={
<button <button
type="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" /> <PlusIcon className="h-4 w-4" />
Add Issue Add Issue

10
apps/app/components/core/board-view/single-issue.tsx
View File

@ -261,8 +261,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <div
className={`mb-3 rounded bg-white shadow ${ className={`mb-3 rounded bg-brand-surface-1 shadow ${
snapshot.isDragging ? "border-2 border-theme shadow-lg" : "" snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
}`} }`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
@ -312,12 +312,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}> <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
<a> <a>
{properties.key && ( {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} {issue.project_detail.identifier}-{issue.sequence_id}
</div> </div>
)} )}
<h5 <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 }} style={{ lineClamp: 3, WebkitLineClamp: 3 }}
> >
{truncateText(issue.name, 100)} {truncateText(issue.name, 100)}
@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {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"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

16
apps/app/components/core/bulk-delete-issues-modal.tsx
View File

@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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> <form>
<Combobox <Combobox
onChange={(val: string) => { onChange={(val: string) => {
@ -136,12 +136,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<input <input
type="text" 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..." placeholder="Search..."
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
/> />
@ -154,7 +154,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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 Select issues to delete
</h2> </h2>
)} )}
@ -166,7 +166,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ `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, 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} {issue.project_detail.identifier}-{issue.sequence_id}
</span> </span>
<span>{issue.name}</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"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} 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> </h3>
</div> </div>
)} )}

22
apps/app/components/core/calendar-view/calendar.tsx
View File

@ -208,7 +208,7 @@ export const CalendarView = () => {
<> <>
<Popover.Button className={`group flex h-full items-start gap-1 text-gray-800`}> <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"> <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> <span>{formatDate(currentDate, "yyyy")}</span>
</div> </div>
</Popover.Button> </Popover.Button>
@ -222,7 +222,7 @@ export const CalendarView = () => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" 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"> <div className="flex justify-center items-center text-sm gap-5 px-2 py-2">
{yearOptions.map((year) => ( {yearOptions.map((year) => (
<button <button
@ -237,7 +237,7 @@ export const CalendarView = () => {
</button> </button>
))} ))}
</div> </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) => ( {monthOptions.map((month) => (
<button <button
onClick={() => onClick={() =>
@ -297,7 +297,7 @@ export const CalendarView = () => {
<div className="flex w-full gap-2 items-center justify-end"> <div className="flex w-full gap-2 items-center justify-end">
<button <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={() => { onClick={() => {
if (isMonthlyView) { if (isMonthlyView) {
updateDate(new Date()); updateDate(new Date());
@ -315,7 +315,7 @@ export const CalendarView = () => {
<CustomMenu <CustomMenu
customButton={ customButton={
<div <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"} {isMonthlyView ? "Monthly" : "Weekly"}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" /> <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
@ -360,12 +360,12 @@ export const CalendarView = () => {
/> />
</div> </div>
</CustomMenu.MenuItem> </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> <h4>Show weekends</h4>
<button <button
type="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 ${ 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" role="switch"
aria-checked={showWeekEnds} aria-checked={showWeekEnds}
@ -374,7 +374,7 @@ export const CalendarView = () => {
<span className="sr-only">Show weekends</span> <span className="sr-only">Show weekends</span>
<span <span
aria-hidden="true" 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" showWeekEnds ? "translate-x-2.5" : "translate-x-0"
}`} }`}
/> />
@ -392,7 +392,7 @@ export const CalendarView = () => {
{weeks.map((date, index) => ( {weeks.map((date, index) => (
<div <div
key={index} 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 !isMonthlyView
? showWeekEnds ? showWeekEnds
? (index + 1) % 7 === 0 ? (index + 1) % 7 === 0
@ -424,7 +424,7 @@ export const CalendarView = () => {
key={index} key={index}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...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 showWeekEnds
? (index + 1) % 7 === 0 ? (index + 1) % 7 === 0
? "" ? ""
@ -444,7 +444,7 @@ export const CalendarView = () => {
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...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" : "" snapshot.isDragging ? "shadow-lg" : ""
}`} }`}
> >

267
apps/app/components/core/custom-theme-form.tsx Normal file
View 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
View 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>
);
};

16
apps/app/components/core/existing-issues-list-modal.tsx
View File

@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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> <form>
<Controller <Controller
control={control} control={control}
@ -139,11 +139,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
<Combobox as="div" {...field} multiple> <Combobox as="div" {...field} multiple>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<Combobox.Input <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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
@ -156,7 +156,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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 Select issues to add
</h2> </h2>
)} )}
@ -169,7 +169,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `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, 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} {issue.project_detail.identifier}-{issue.sequence_id}
</span> </span>
{issue.name} {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"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} 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> </h3>
</div> </div>
)} )}

30
apps/app/components/core/feeds.tsx
View File

@ -55,23 +55,23 @@ const activityDetails: {
}, },
modules: { modules: {
message: "set the module to", 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: { state: {
message: "set the state to", 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: { priority: {
message: "set the priority to", 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: { name: {
message: "set the name to", 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: { description: {
message: "updated the 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: { estimate_point: {
message: "set the estimate point to", message: "set the estimate point to",
@ -79,15 +79,15 @@ const activityDetails: {
}, },
target_date: { target_date: {
message: "set the due date to", 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: { parent: {
message: "set the parent to", 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: { issue: {
message: "deleted the 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: { estimate: {
message: "updated the estimate", message: "updated the estimate",
@ -217,7 +217,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
</div> </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 <ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-gray-400" className="h-3.5 w-3.5 text-gray-400"
aria-hidden="true" aria-hidden="true"
@ -230,7 +230,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
{activity.actor_detail.first_name} {activity.actor_detail.first_name}
{activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name} {activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
</div> </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)} Commented {timeAgo(activity.created_at)}
</p> </p>
</div> </div>
@ -244,7 +244,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
editable={false} editable={false}
onBlur={() => ({})} onBlur={() => ({})}
noBorder noBorder
customClassName="text-xs bg-gray-100" customClassName="text-xs bg-brand-surface-1"
/> />
</div> </div>
</div> </div>
@ -259,7 +259,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div className="relative pb-1"> <div className="relative pb-1">
{activities.length > 1 && activityIdx !== activities.length - 1 ? ( {activities.length > 1 && activityIdx !== activities.length - 1 ? (
<span <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" aria-hidden="true"
/> />
) : null} ) : null}
@ -268,7 +268,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-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 ? ( {activity.field ? (
activityDetails[activity.field as keyof typeof activityDetails]?.icon activityDetails[activity.field as keyof typeof activityDetails]?.icon
) : activity.actor_detail.avatar && ) : activity.actor_detail.avatar &&
@ -292,7 +292,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
</div> </div>
</div> </div>
<div className="min-w-0 flex-1 py-3"> <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"> <span className="text-gray font-medium">
{activity.actor_detail.first_name} {activity.actor_detail.first_name}
{activity.actor_detail.is_bot {activity.actor_detail.is_bot
@ -300,7 +300,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
: " " + activity.actor_detail.last_name} : " " + activity.actor_detail.last_name}
</span> </span>
<span> {action} </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> <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
</div> </div>
</div> </div>

8
apps/app/components/core/filter-list.tsx
View File

@ -57,9 +57,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<div <div
key={key} 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)}: {replaceUnderscoreIfSnakeCase(key)}:
</span> </span>
{filters[key as keyof IIssueFilterOptions] === null || {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" ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
: priority === "low" : priority === "low"
? "bg-green-100 text-green-500 hover:bg-green-100" ? "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> <span>{getPriorityIcon(priority)}</span>
@ -339,7 +339,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
created_by: null, 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> <span className="font-medium">Clear all filters</span>
<XMarkIcon className="h-4 w-4" /> <XMarkIcon className="h-4 w-4" />

2
apps/app/components/core/gpt-assistant-modal.tsx
View File

@ -121,7 +121,7 @@ export const GptAssistantModal: React.FC<Props> = ({
return ( return (
<div <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" isOpen ? "block" : "hidden"
}`} }`}
> >

10
apps/app/components/core/image-picker-popover.tsx
View File

@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
return ( return (
<Popover className="relative z-[2]" ref={ref}> <Popover className="relative z-[2]" ref={ref}>
<Popover.Button <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)} onClick={() => setIsOpen((prev) => !prev)}
> >
{label} {label}
@ -79,16 +79,16 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-white shadow-lg"> <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 bg-white p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]"> <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.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) => ( {tabOptions.map((tab) => (
<Tab <Tab
key={tab.key} key={tab.key}
className={({ selected }) => className={({ selected }) =>
`rounded py-1 px-4 text-center text-sm outline-none transition-colors ${ `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"
}` }`
} }
> >

12
apps/app/components/core/image-upload-modal.tsx
View File

@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-30 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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"> <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 Upload Image
</Dialog.Title> </Dialog.Title>
<div className="space-y-3"> <div className="space-y-3">
@ -135,7 +135,7 @@ export const ImageUploadModal: React.FC<Props> = ({
{...getRootProps()} {...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 ${ 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 (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 <button
type="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 Edit
</button> </button>
@ -157,7 +157,7 @@ export const ImageUploadModal: React.FC<Props> = ({
) : ( ) : (
<> <>
<UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" /> <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 {isDragActive
? "Drop image here to upload" ? "Drop image here to upload"
: "Drag & drop image here"} : "Drag & drop image here"}

1
apps/app/components/core/index.ts
View File

@ -11,3 +11,4 @@ export * from "./link-modal";
export * from "./image-picker-popover"; export * from "./image-picker-popover";
export * from "./filter-list"; export * from "./filter-list";
export * from "./feeds"; export * from "./feeds";
export * from "./theme-switch";

45
apps/app/components/core/issues-view-filter.tsx
View File

@ -12,8 +12,7 @@ import { SelectFilters } from "components/views";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
// icons // icons
import { ChevronDownIcon, ListBulletIcon, CalendarDaysIcon } from "@heroicons/react/24/outline"; import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline";
import { Squares2X2Icon } from "@heroicons/react/20/solid";
// helpers // helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types // types
@ -53,30 +52,30 @@ export const IssuesFilterView: React.FC = () => {
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-1">
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover: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-gray-200" : "" issueView === "list" ? "bg-brand-base" : ""
}`} }`}
onClick={() => setIssueView("list")} onClick={() => setIssueView("list")}
> >
<ListBulletIcon className="h-4 w-4" /> <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
</button> </button>
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover: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-gray-200" : "" issueView === "kanban" ? "bg-brand-base" : ""
}`} }`}
onClick={() => setIssueView("kanban")} onClick={() => setIssueView("kanban")}
> >
<Squares2X2Icon className="h-4 w-4" /> <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
</button> </button>
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover: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-gray-200" : "" issueView === "calendar" ? "bg-brand-base" : ""
}`} }`}
onClick={() => setIssueView("calendar")} onClick={() => setIssueView("calendar")}
> >
<CalendarDaysIcon className="h-4 w-4" /> <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
</button> </button>
</div> </div>
<SelectFilters <SelectFilters
@ -113,8 +112,8 @@ export const IssuesFilterView: React.FC = () => {
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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-gray-100 text-gray-900" : "text-gray-500" open ? "bg-brand-surface-1 text-brand-base" : "text-brand-muted-1"
}`} }`}
> >
View View
@ -130,11 +129,11 @@ export const IssuesFilterView: React.FC = () => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" 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"> <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"> <div className="relative divide-y-2 divide-brand-base">
<div className="space-y-4 pb-3 text-xs"> <div className="space-y-4 pb-3 text-xs">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-gray-600">Group by</h4> <h4 className="text-brand-secondary">Group by</h4>
<CustomMenu <CustomMenu
label={ label={
GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)?.name ?? GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)?.name ??
@ -155,7 +154,7 @@ export const IssuesFilterView: React.FC = () => {
</CustomMenu> </CustomMenu>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-gray-600">Order by</h4> <h4 className="text-brand-secondary">Order by</h4>
<CustomMenu <CustomMenu
label={ label={
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ?? ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
@ -178,7 +177,7 @@ export const IssuesFilterView: React.FC = () => {
</CustomMenu> </CustomMenu>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-gray-600">Issue type</h4> <h4 className="text-brand-secondary">Issue type</h4>
<CustomMenu <CustomMenu
label={ label={
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type) FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
@ -201,11 +200,11 @@ export const IssuesFilterView: React.FC = () => {
</CustomMenu> </CustomMenu>
</div> </div>
<div className="flex items-center justify-between"> <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 <button
type="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 ${ 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" role="switch"
aria-checked={showEmptyGroups} aria-checked={showEmptyGroups}
@ -214,7 +213,7 @@ export const IssuesFilterView: React.FC = () => {
<span className="sr-only">Show empty groups</span> <span className="sr-only">Show empty groups</span>
<span <span
aria-hidden="true" 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" showEmptyGroups ? "translate-x-2.5" : "translate-x-0"
}`} }`}
/> />
@ -226,7 +225,7 @@ export const IssuesFilterView: React.FC = () => {
</button> </button>
<button <button
type="button" type="button"
className="font-medium text-theme" className="font-medium text-brand-accent"
onClick={() => setNewFilterDefaultView()} onClick={() => setNewFilterDefaultView()}
> >
Set as default Set as default
@ -234,7 +233,7 @@ export const IssuesFilterView: React.FC = () => {
</div> </div>
</div> </div>
<div className="space-y-2 py-3"> <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"> <div className="flex flex-wrap items-center gap-2">
{Object.keys(properties).map((key) => { {Object.keys(properties).map((key) => {
if (key === "estimate" && !isEstimateActive) return null; if (key === "estimate" && !isEstimateActive) return null;

4
apps/app/components/core/issues-view.tsx
View File

@ -502,8 +502,8 @@ export const IssuesView: React.FC<Props> = ({
title="Create a new issue" title="Create a new issue"
description={ description={
<span> <span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
create a new issue shortcut to create a new issue
</span> </span>
} }
Icon={PlusIcon} Icon={PlusIcon}

6
apps/app/components/core/link-modal.tsx
View File

@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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)}> <form onSubmit={handleSubmit(onSubmit)}>
<div> <div>
<div className="space-y-5"> <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 Add Link
</Dialog.Title> </Dialog.Title>
<div className="mt-2 space-y-3"> <div className="mt-2 space-y-3">

2
apps/app/components/core/list-view/single-issue.tsx
View File

@ -217,7 +217,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <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) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu(true); setContextMenu(true);

16
apps/app/components/core/list-view/single-list.tsx
View File

@ -132,10 +132,10 @@ export const SingleList: React.FC<Props> = ({
return ( return (
<Disclosure key={groupTitle} as="div" defaultOpen> <Disclosure key={groupTitle} as="div" defaultOpen>
{({ open }) => ( {({ open }) => (
<div className="bg-white"> <div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
<div <div
className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${ className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
open ? "" : "rounded-[10px]" open ? "rounded-t-[10px]" : "rounded-[10px]"
}`} }`}
> >
<Disclosure.Button> <Disclosure.Button>
@ -144,21 +144,21 @@ export const SingleList: React.FC<Props> = ({
<div className="flex items-center">{getGroupIcon()}</div> <div className="flex items-center">{getGroupIcon()}</div>
)} )}
{selectedGroup !== null ? ( {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()} {getGroupTitle()}
</h2> </h2>
) : ( ) : (
<h2 className="font-medium leading-5">All Issues</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"> <span className="rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-center text-xs text-brand-2">
{groupedByIssues?.[groupTitle].length ?? 0} {groupedByIssues[groupTitle as keyof IIssue].length}
</span> </span>
</div> </div>
</Disclosure.Button> </Disclosure.Button>
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="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} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <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> <div className="flex h-full w-full items-center justify-center">Loading...</div>

8
apps/app/components/core/sidebar/links-list.tsx
View File

@ -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"> <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
<Link href={link.url}> <Link href={link.url}>
<a <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" target="_blank"
> >
<ExternalLinkIcon width="14" height="14" /> <ExternalLinkIcon width="14" height="14" />
@ -41,7 +41,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
</Link> </Link>
<button <button
type="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)} onClick={() => handleDeleteLink(link.id)}
> >
<TrashIcon className="h-4 w-4" /> <TrashIcon className="h-4 w-4" />
@ -49,13 +49,13 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
</div> </div>
)} )}
<Link href={link.url}> <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"> <div className="mt-0.5">
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
</div> </div>
<div> <div>
<h5 className="w-4/5 break-all">{link.title}</h5> <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)} Added {timeAgo(link.created_at)}
<br /> <br />
by{" "} by{" "}

16
apps/app/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -100,13 +100,13 @@ export const SidebarProgressStats: React.FC<Props> = ({
> >
<Tab.List <Tab.List
as="div" 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"} `} ${module ? "text-xs" : "text-sm"} `}
> >
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full rounded px-3 py-1 text-gray-900 ${ `w-full rounded px-3 py-1 text-brand-base ${
selected ? " bg-theme text-white" : " hover:bg-hover-gray" selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}` }`
} }
> >
@ -114,8 +114,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full rounded px-3 py-1 text-gray-900 ${ `w-full rounded px-3 py-1 text-brand-base ${
selected ? " bg-theme text-white" : " hover:bg-hover-gray" selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}` }`
} }
> >
@ -123,8 +123,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full rounded px-3 py-1 text-gray-900 ${ `w-full rounded px-3 py-1 text-brand-base ${
selected ? " bg-theme text-white" : " hover:bg-hover-gray" selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}` }`
} }
> >
@ -166,7 +166,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
<SingleProgressStats <SingleProgressStats
title={ 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 <Image
src={User} src={User}
height="100%" height="100%"

4
apps/app/components/core/sidebar/single-progress-stats.tsx
View File

@ -19,8 +19,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
}) => ( }) => (
<div <div
className={`flex w-full items-center justify-between rounded p-2 text-xs ${ className={`flex w-full items-center justify-between rounded p-2 text-xs ${
onClick ? "cursor-pointer hover:bg-gray-100" : "" onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
} ${selected ? "bg-gray-100" : ""}`} } ${selected ? "bg-brand-surface-1" : ""}`}
onClick={onClick} onClick={onClick}
> >
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div> <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>

60
apps/app/components/core/theme-switch.tsx Normal file
View 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)} /> */}
</>
);
};

2
apps/app/components/cycles/completed-cycles-list.tsx
View File

@ -64,7 +64,7 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
{completedCycles ? ( {completedCycles ? (
completedCycles.completed_cycles.length > 0 ? ( completedCycles.completed_cycles.length > 0 ? (
<div className="flex flex-col gap-4"> <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} /> <ExclamationIcon height={14} width={14} />
<span>Completed cycles are not editable.</span> <span>Completed cycles are not editable.</span>
</div> </div>

4
apps/app/components/cycles/cycles-list.tsx
View File

@ -62,8 +62,8 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
</div> </div>
) : type === "current" ? ( ) : type === "current" ? (
showNoCurrentCycleMessage && ( showNoCurrentCycleMessage && (
<div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]"> <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-black "> No current cycle is present.</h3> <h3 className="text-base font-medium text-brand-base "> No current cycle is present.</h3>
<button onClick={() => setShowNoCurrentCycleMessage(false)}> <button onClick={() => setShowNoCurrentCycleMessage(false)}>
<XMarkIcon className="h-4 w-4" /> <XMarkIcon className="h-4 w-4" />
</button> </button>

10
apps/app/components/cycles/delete-cycle-modal.tsx
View File

@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <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="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"> <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 <ExclamationTriangleIcon
@ -163,11 +163,11 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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 Delete Cycle
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <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-{" "} Are you sure you want to delete cycle-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related <span className="font-bold">{data?.name}</span>? All of the data related
to the cycle will be permanently removed. This action cannot be undone. to the cycle will be permanently removed. This action cannot be undone.

22
apps/app/components/cycles/empty-cycle.tsx
View File

@ -37,30 +37,30 @@ export const EmptyCycle = () => {
return ( return (
<div className="flex h-full w-full flex-col items-center justify-center gap-5 "> <div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
<div className="relative h-32 w-72"> <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"> <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"> <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-brand-surface-2" />
<span className="h-2 w-20 rounded-full bg-gray-200" /> <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
</div> </div>
</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} /> <LinearProgressIndicator data={emptyCycleData} />
</div> </div>
</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"> <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"> <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-brand-surface-2" />
<span className="h-2 w-20 rounded-full bg-gray-200" /> <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
</div> </div>
</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} /> <LinearProgressIndicator data={emptyCycleData} />
</div> </div>
</div> </div>
@ -68,7 +68,7 @@ export const EmptyCycle = () => {
<div className="flex flex-col items-center justify-center gap-4 text-center "> <div className="flex flex-col items-center justify-center gap-4 text-center ">
<h3 className="text-xl font-semibold">Create New Cycle</h3> <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 Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
time. Create new cycle now. time. Create new cycle now.
</p> </p>

4
apps/app/components/cycles/form.tsx
View File

@ -94,7 +94,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
return ( return (
<form onSubmit={handleSubmit(handleCreateUpdateCycle)}> <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
<div className="space-y-5"> <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 {status ? "Update" : "Create"} Cycle
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
@ -196,7 +196,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
</div> </div>
</div> </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> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton <PrimaryButton
type="submit" type="submit"

4
apps/app/components/cycles/modal.tsx
View File

@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 <CycleForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

14
apps/app/components/cycles/select.tsx
View File

@ -59,9 +59,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
{({ open }) => ( {({ open }) => (
<> <>
<Listbox.Button <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"> <div className="flex items-center gap-2 truncate">
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"} {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
</div> </div>
@ -75,7 +75,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <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"> <div className="py-1">
{options ? ( {options ? (
@ -93,7 +93,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
: "" : ""
} ${ } ${
active ? "bg-indigo-50" : "" 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} value={option.value}
> >
@ -103,14 +103,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
</Listbox.Option> </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 <button
type="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} onClick={openCycleModal}
> >
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" /> <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />

42
apps/app/components/cycles/sidebar.tsx
View File

@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div <div
className={`fixed top-0 ${ className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]" 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 ? ( {cycle ? (
<> <>
@ -143,19 +143,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex gap-2.5 px-5 text-sm"> <div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<span <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)} {capitalizeFirstLetter(cycleStatus)}
</span> </span>
</div> </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"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} 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 ${ 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-gray-100" : "" open ? "bg-brand-surface-1" : ""
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <CalendarDaysIcon className="h-3 w-3" />
@ -216,8 +216,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} 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 ${ 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-gray-100" : "" open ? "bg-brand-surface-1" : ""
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3 " /> <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 gap-6 px-6 py-6 w-full">
<div className="flex flex-col items-start justify-start gap-2 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"> <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> <CustomMenu width="lg" ellipsis>
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
@ -297,7 +297,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</CustomMenu> </CustomMenu>
</div> </div>
<span className="whitespace-normal text-sm leading-5 text-black"> <span className="whitespace-normal text-sm leading-5 text-brand-base">
{cycle.description} {cycle.description}
</span> </span>
</div> </div>
@ -323,7 +323,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
{cycle.owned_by.first_name.charAt(0)} {cycle.owned_by.first_name.charAt(0)}
</span> </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>
</div> </div>
@ -333,7 +333,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<span>Progress</span> <span>Progress</span>
</div> </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"> <span className="h-4 w-4">
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} /> <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
</span> </span>
@ -344,15 +344,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure defaultOpen> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`} 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 w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm"> <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 ? ( {!open && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]"> <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{progressPercentage ? `${progressPercentage}%` : ""} {progressPercentage ? `${progressPercentage}%` : ""}
@ -371,7 +371,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} /> <ExclamationIcon height={14} width={14} />
<span className="text-xs italic text-gray-500"> <span className="text-xs italic text-brand-secondary">
{cycleStatus === "upcoming" {cycleStatus === "upcoming"
? "Cycle is yet to start." ? "Cycle is yet to start."
: "Invalid date. Please enter valid date."} : "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-start justify-between gap-4 py-2 text-xs">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span> <span>
<DocumentIcon className="h-3 w-3 text-gray-500" /> <DocumentIcon className="h-3 w-3 text-brand-secondary" />
</span> </span>
<span> <span>
Pending Issues -{" "} Pending Issues -{" "}
@ -395,7 +395,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</span> </span>
</div> </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"> <div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" /> <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
<span>Ideal</span> <span>Ideal</span>
@ -424,15 +424,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure defaultOpen> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`} 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 w-full items-center justify-between gap-2">
<div className="flex items-center justify-start gap-2 text-sm"> <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> </div>
{cycle.total_issues > 0 ? ( {cycle.total_issues > 0 ? (
@ -445,7 +445,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} /> <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. No issues found. Please add issue.
</span> </span>
</div> </div>

8
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -238,7 +238,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
return ( return (
<div> <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}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full"> <a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4"> <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> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <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" open ? "" : "flex-row"
}`} }`}
> >
@ -368,7 +368,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
</div> </div>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <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="col-span-2 space-y-3 px-4">
<div className="space-y-3 text-xs"> <div className="space-y-3 text-xs">
{stateGroups.map((group) => ( {stateGroups.map((group) => (
@ -388,7 +388,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
<div> <div>
<span> <span>
{cycle[group.key as keyof ICycle] as number}{" "} {cycle[group.key as keyof ICycle] as number}{" "}
<span className="text-gray-500"> <span className="text-brand-secondary">
-{" "} -{" "}
{cycle.total_issues > 0 {cycle.total_issues > 0
? `${Math.round( ? `${Math.round(

14
apps/app/components/cycles/transfer-issues-modal.tsx
View File

@ -89,7 +89,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 flex-col gap-4">
<div className="flex items-center justify-between px-5"> <div className="flex items-center justify-between px-5">
<div className="flex items-center gap-2"> <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" /> <XMarkIcon className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-center gap-2 pb-3 mt-2 px-5 border-b border-gray-200"> <div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
<MagnifyingGlassIcon className="h-4 w-4 text-gray-500" /> <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
<input <input
className="outline-none" className="outline-none"
placeholder="Search for a cycle..." placeholder="Search for a cycle..."
@ -129,7 +129,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
filteredOptions.map((option: ICycle) => ( filteredOptions.map((option: ICycle) => (
<button <button
key={option.id} 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={() => { onClick={() => {
transferIssue({ transferIssue({
new_cycle_id: option?.id, 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"> <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
<ExclamationIcon height={14} width={14} /> <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 You don’t have any current cycle. Please create one to transfer the
issues. issues.
</span> </span>
</div> </div>
) )
) : ( ) : (
<p className="text-center text-gray-500">Loading...</p> <p className="text-center text-brand-secondary">Loading...</p>
)} )}
</div> </div>
</div> </div>

2
apps/app/components/cycles/transfer-issues.tsx
View File

@ -38,7 +38,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
: 0; : 0;
return ( return (
<div className="flex items-center justify-between -mt-4 mb-4"> <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} /> <ExclamationIcon height={14} width={14} />
<span>Completed cycles are not editable.</span> <span>Completed cycles are not editable.</span>
</div> </div>

12
apps/app/components/emoji-icon-picker/index.tsx
View File

@ -55,7 +55,7 @@ const EmojiIconPicker: React.FC<Props> = ({
return ( return (
<Popover className="relative z-[1]" ref={ref}> <Popover className="relative z-[1]" ref={ref}>
<Popover.Button <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)} onClick={() => setIsOpen((prev) => !prev)}
> >
{label} {label}
@ -69,8 +69,8 @@ const EmojiIconPicker: React.FC<Props> = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg"> <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 rounded-[4px] bg-white p-2 shadow-xl"> <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.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"> <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
{tabOptions.map((tab) => ( {tabOptions.map((tab) => (
@ -100,7 +100,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{recentEmojis.map((emoji) => ( {recentEmojis.map((emoji) => (
<button <button
type="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} key={emoji}
onClick={() => { onClick={() => {
onChange(emoji); onChange(emoji);
@ -119,7 +119,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{emojis.map((emoji) => ( {emojis.map((emoji) => (
<button <button
type="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} key={emoji}
onClick={() => { onClick={() => {
onChange(emoji); onChange(emoji);
@ -184,7 +184,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{icons.material_rounded.map((icon) => ( {icons.material_rounded.map((icon) => (
<button <button
type="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} key={icon.name}
onClick={() => { onClick={() => {
if (onIconsClick) onIconsClick(icon.name); if (onIconsClick) onIconsClick(icon.name);

2
apps/app/components/integration/single-integration-card.tsx
View File

@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
); );
return ( 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="flex items-start gap-4">
<div className="h-12 w-12 flex-shrink-0"> <div className="h-12 w-12 flex-shrink-0">
<Image <Image

26
apps/app/components/issues/activity.tsx
View File

@ -66,31 +66,31 @@ const activityDetails: {
}, },
modules: { modules: {
message: "set the module to", 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: { state: {
message: "set the state to", 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: { priority: {
message: "set the priority to", 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: { name: {
message: "set the name to", 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: { description: {
message: "updated the 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: { target_date: {
message: "set the due date to", 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: { parent: {
message: "set the parent to", 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: { estimate: {
message: "updated the estimate", message: "updated the estimate",
@ -255,7 +255,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
} }
value = ( 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="absolute flex flex-shrink-0 items-center justify-center">
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full"
@ -265,7 +265,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
<span className="ml-3 font-medium text-gray-900">{name}</span> <span className="ml-3 font-medium text-brand-base">{name}</span>
</span> </span>
); );
} else if (activityItem.field === "assignees") { } else if (activityItem.field === "assignees") {
@ -298,7 +298,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1"> <div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? ( {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<span <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" aria-hidden="true"
/> />
) : null} ) : null}
@ -307,7 +307,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-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 ? ( {activityItem.field ? (
activityDetails[activityItem.field as keyof typeof activityDetails] activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon ?.icon
@ -332,7 +332,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
</div> </div>
</div> </div>
<div className="min-w-0 flex-1 py-3"> <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"> <span className="text-gray font-medium">
{activityItem.actor_detail.first_name} {activityItem.actor_detail.first_name}
{activityItem.actor_detail.is_bot {activityItem.actor_detail.is_bot
@ -340,7 +340,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
: " " + activityItem.actor_detail.last_name} : " " + activityItem.actor_detail.last_name}
</span> </span>
<span> {action} </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"> <span className="whitespace-nowrap">
{timeAgo(activityItem.created_at)} {timeAgo(activityItem.created_at)}
</span> </span>

14
apps/app/components/issues/comment/add-comment.tsx
View File

@ -10,7 +10,7 @@ import { useForm, Controller } from "react-hook-form";
// services // services
import issuesServices from "services/issues.service"; import issuesServices from "services/issues.service";
// ui // ui
import { Loader } from "components/ui"; import { Loader, SecondaryButton } from "components/ui";
// helpers // helpers
import { debounce } from "helpers/common.helper"; import { debounce } from "helpers/common.helper";
// types // types
@ -83,9 +83,9 @@ export const AddComment: React.FC = () => {
); );
return ( return (
<div className="space-y-5"> <div>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="issue-comments-section"> <div className="issue-comments-section" >
<Controller <Controller
name="comment_html" name="comment_html"
control={control} control={control}
@ -101,13 +101,9 @@ export const AddComment: React.FC = () => {
)} )}
/> />
<button <SecondaryButton type="submit" disabled={isSubmitting} className="mt-2">
type="submit"
disabled={isSubmitting}
className="rounded-md bg-gray-300 p-2 px-4 text-sm text-black hover:bg-gray-300 mt-4"
>
{isSubmitting ? "Adding..." : "Comment"} {isSubmitting ? "Adding..." : "Comment"}
</button> </SecondaryButton>
</div> </div>
</form> </form>
</div> </div>

6
apps/app/components/issues/comment/comment-card.tsx
View File

@ -67,7 +67,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
</div> </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" /> <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
</span> </span>
</div> </div>
@ -77,7 +77,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
{comment.actor_detail.first_name} {comment.actor_detail.first_name}
{comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name} {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
</div> </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>
<div className="issue-comments-section p-0"> <div className="issue-comments-section p-0">
{isEditing ? ( {isEditing ? (
@ -117,7 +117,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
editable={false} editable={false}
onBlur={() => ({})} onBlur={() => ({})}
noBorder noBorder
customClassName="text-xs bg-gray-100" customClassName="text-xs bg-brand-surface-1"
/> />
)} )}
</div> </div>

6
apps/app/components/issues/delete-issue-modal.tsx
View File

@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <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> </span>
</div> </div>
<span> <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{" "} Are you sure you want to delete issue{" "}
<span className="break-all font-semibold"> <span className="break-all font-semibold">
{data?.project_detail.identifier}-{data?.sequence_id} {data?.project_detail.identifier}-{data?.sequence_id}

4
apps/app/components/issues/description-form.tsx
View File

@ -115,7 +115,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
role="textbox" role="textbox"
/> />
{characterLimit && ( {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 <span
className={`${ className={`${
watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : "" watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@ -158,7 +158,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
)} )}
/> />
<div <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" isSubmitting ? "block" : "hidden"
}`} }`}
> >

18
apps/app/components/issues/form.tsx
View File

@ -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 {status ? "Update" : "Create"} Issue
</h3> </h3>
</div> </div>
{watch("parent") && watch("parent") !== "" ? ( {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"> <div className="flex items-center gap-2">
<span <span
className="block h-1.5 w-1.5 rounded-full" className="block h-1.5 w-1.5 rounded-full"
@ -267,7 +267,7 @@ export const IssueForm: FC<IssueFormProps> = ({
/> />
{mostSimilarIssue && ( {mostSimilarIssue && (
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-brand-secondary">
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
> >
@ -283,7 +283,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</p> </p>
<button <button
type="button" type="button"
className="text-sm text-blue-500" className="text-sm text-brand-accent"
onClick={() => { onClick={() => {
setMostSimilarIssue(undefined); setMostSimilarIssue(undefined);
}} }}
@ -298,7 +298,7 @@ export const IssueForm: FC<IssueFormProps> = ({
{issueName && issueName !== "" && ( {issueName && issueName !== "" && (
<button <button
type="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" : "" iAmFeelingLucky ? "cursor-wait" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
@ -315,7 +315,7 @@ export const IssueForm: FC<IssueFormProps> = ({
)} )}
<button <button
type="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)} onClick={() => setGptAssistantModal((prevData) => !prevData)}
> >
<SparklesIcon className="h-4 w-4" /> <SparklesIcon className="h-4 w-4" />
@ -444,7 +444,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</div> </div>
</div> </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 <div
className="flex cursor-pointer items-center gap-1" className="flex cursor-pointer items-center gap-1"
onClick={() => setCreateMore((prevData) => !prevData)} onClick={() => setCreateMore((prevData) => !prevData)}
@ -453,7 +453,7 @@ export const IssueForm: FC<IssueFormProps> = ({
<button <button
type="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 ${ 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`} } transition-colors duration-300 ease-in-out focus:outline-none`}
role="switch" role="switch"
aria-checked="false" aria-checked="false"
@ -463,7 +463,7 @@ export const IssueForm: FC<IssueFormProps> = ({
aria-hidden="true" aria-hidden="true"
className={`pointer-events-none inline-block h-3 w-3 ${ className={`pointer-events-none inline-block h-3 w-3 ${
createMore ? "translate-x-3" : "translate-x-0" 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> </button>
</div> </div>

4
apps/app/components/issues/modal.tsx
View File

@ -219,7 +219,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 <IssueForm
issues={issues ?? []} issues={issues ?? []}
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}

8
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -82,7 +82,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
const isNotAllowed = false; const isNotAllowed = false;
return ( 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"> <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}`}> <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2"> <a className="group relative flex items-center gap-2">
@ -97,7 +97,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</Tooltip> </Tooltip>
)} )}
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}> <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)} {truncateText(issue.name, 50)}
</span> </span>
</Tooltip> </Tooltip>
@ -127,7 +127,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
/> />
)} )}
{properties.sub_issue_count && ( {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"} {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}
@ -136,7 +136,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span <span
key={label.id} 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 <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" className="h-1.5 w-1.5 flex-shrink-0 rounded-full"

30
apps/app/components/issues/parent-issues-list-modal.tsx
View File

@ -71,17 +71,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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 ? ( {multiple ? (
<> <>
<Combobox value={value} onChange={() => ({})} multiple> <Combobox value={value} onChange={() => ({})} multiple>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<Combobox.Input <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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
displayValue={() => ""} displayValue={() => ""}
@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 && ( {filteredIssues.length > 0 && (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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} {title}
</h2> </h2>
)} )}
@ -106,7 +106,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `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, 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} {issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "} </span>{" "}
{issue.id} {issue.id}
@ -135,10 +135,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{query !== "" && filteredIssues.length === 0 && ( {query !== "" && filteredIssues.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14"> <div className="py-14 px-6 text-center sm:px-14">
<RectangleStackIcon <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" 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. We couldn{"'"}t find any issue with that term. Please try again.
</p> </p>
</div> </div>
@ -153,11 +153,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
<Combobox value={value} onChange={onChange}> <Combobox value={value} onChange={onChange}>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<Combobox.Input <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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
displayValue={() => ""} displayValue={() => ""}
@ -171,7 +171,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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} {title}
</h2> </h2>
)} )}
@ -182,7 +182,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `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()} onClick={() => handleClose()}
@ -194,7 +194,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color, 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} {issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "} </span>{" "}
{issue.name} {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"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} 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> </h3>
</div> </div>
)} )}

6
apps/app/components/issues/select/assignee.tsx
View File

@ -54,15 +54,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
onChange={onChange} onChange={onChange}
options={options} options={options}
label={ 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) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={true} /> <AssigneesList userIds={value} length={3} showLength={true} />
</div> </div>
) : ( ) : (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<UserGroupIcon className="h-4 w-4 text-gray-500" /> <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
<span className="text-gray-500">Assignee</span> <span className="text-brand-secondary">Assignee</span>
</div> </div>
)} )}
</div> </div>

6
apps/app/components/issues/select/date.tsx
View File

@ -18,11 +18,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
<> <>
<Popover.Button <Popover.Button
className={({ open }) => 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 open
? "border-theme bg-theme/5 outline-none ring-1 ring-theme " ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-theme/5 " : "hover:bg-brand-accent/5 "
}` }`
} }
> >

32
apps/app/components/issues/select/label.tsx
View File

@ -60,11 +60,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<> <>
<Combobox.Button <Combobox.Button
className={({ open }) => 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 open
? "border-theme bg-theme/5 outline-none ring-1 ring-theme " ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-theme/5 " : "hover:bg-brand-accent/5 "
}` }`
} }
> >
@ -78,8 +78,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
</span> </span>
) : ( ) : (
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs"> <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" /> <TagIcon className="h-3 w-3 text-brand-secondary" />
<span className=" text-gray-500">Label</span> <span className=" text-brand-secondary">Label</span>
</span> </span>
)} )}
</Combobox.Button> </Combobox.Button>
@ -96,12 +96,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none 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"> <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-gray-500" /> <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
<Combobox.Input <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)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search for label..." placeholder="Search for label..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
@ -120,7 +120,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
key={label.id} key={label.id}
className={({ active }) => 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` } 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} value={label.id}
@ -150,8 +150,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
); );
} else } else
return ( return (
<div className="border-y border-gray-400 bg-gray-50"> <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-gray-900"> <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} <RectangleGroupIcon className="h-3 w-3" /> {label.name}
</div> </div>
<div> <div>
@ -160,7 +160,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
key={child.id} key={child.id}
className={({ active }) => 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` } 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} 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 <button
type="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)} onClick={() => setIsOpen(true)}
> >
<span className="flex items-center justify-start gap-1"> <span className="flex items-center justify-start gap-1">

4
apps/app/components/issues/select/priority.tsx
View File

@ -18,9 +18,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
label={ label={
<div className="flex items-center justify-center gap-2 text-xs"> <div className="flex items-center justify-center gap-2 text-xs">
<span className="flex items-center"> <span className="flex items-center">
{getPriorityIcon(value, `text-xs ${value ? "" : "text-gray-500"}`)} {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
</span> </span>
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}> <span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
{value ?? "Priority"} {value ?? "Priority"}
</span> </span>
</div> </div>

2
apps/app/components/issues/select/project.tsx
View File

@ -59,7 +59,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
<p className="text-gray-400">No projects found!</p> <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> </CustomSelect>
); );

4
apps/app/components/issues/select/state.tsx
View File

@ -56,7 +56,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
onChange={onChange} onChange={onChange}
options={options} options={options}
label={ label={
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-brand-secondary">
{selectedOption ? ( {selectedOption ? (
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
) : currentDefaultState ? ( ) : currentDefaultState ? (
@ -70,7 +70,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
footerOption={ footerOption={
<button <button
type="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)} onClick={() => setIsOpen(true)}
> >
<PlusIcon className="h-4 w-4" aria-hidden="true" /> <PlusIcon className="h-4 w-4" aria-hidden="true" />

4
apps/app/components/issues/sidebar-select/assignee.tsx
View File

@ -64,11 +64,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={ 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) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2 -my-0.5"> <div className="flex items-center justify-center gap-2 -my-0.5">
<AssigneesList userIds={value} length={3} showLength={false} /> <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>
) : ( ) : (
"No assignees" "No assignees"

22
apps/app/components/issues/sidebar-select/blocked.tsx
View File

@ -115,7 +115,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
? watch("blocked_list").map((issue) => ( ? watch("blocked_list").map((issue) => (
<div <div
key={issue} 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 <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${ href={`/${workspaceSlug}/projects/${projectId}/issues/${
@ -176,7 +176,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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> <form>
<Combobox <Combobox
onChange={(val: string) => { onChange={(val: string) => {
@ -191,12 +191,12 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<input <input
type="text" 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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
@ -209,7 +209,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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 Select blocked issues
</h2> </h2>
)} )}
@ -226,7 +226,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ `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, 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 issues?.find((i) => i.id === issue.id)?.project_detail
?.identifier ?.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"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} 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> </h3>
</div> </div>
)} )}
@ -288,8 +288,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
<button <button
type="button" type="button"
className={`flex w-full ${ className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} 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`} } 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)} onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

22
apps/app/components/issues/sidebar-select/blocker.tsx
View File

@ -176,7 +176,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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 <Combobox
onChange={(val: string) => { onChange={(val: string) => {
const selectedIssues = watchBlocker("blocker_issue_ids"); const selectedIssues = watchBlocker("blocker_issue_ids");
@ -190,12 +190,12 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
> >
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<input <input
type="text" 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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
@ -208,7 +208,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">
{query === "" && ( {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 Select blocker issues
</h2> </h2>
)} )}
@ -225,7 +225,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
value={issue.id} value={issue.id}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ `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, 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 issues?.find((i) => i.id === issue.id)?.project_detail
?.identifier ?.identifier
} }
-{issue.sequence_id} -{issue.sequence_id}
</span> </span>
<span>{issue.name}</span> <span className="text-brand-muted-1">{issue.name}</span>
</div> </div>
</Combobox.Option> </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"> <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" /> <LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500"> <h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "} 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> </h3>
</div> </div>
)} )}
@ -285,8 +285,8 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
<button <button
type="button" type="button"
className={`flex w-full ${ className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} 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`} } 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)} onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

2
apps/app/components/issues/sidebar-select/cycle.tsx
View File

@ -70,7 +70,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}> <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}>
<span <span
className={`w-full max-w-[125px] truncate text-left sm:block ${ 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"} {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "None"}

2
apps/app/components/issues/sidebar-select/module.tsx
View File

@ -69,7 +69,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<Tooltip position="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}> <Tooltip position="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}>
<span <span
className={`w-full max-w-[125px] truncate text-left sm:block ${ 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)} {truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}

4
apps/app/components/issues/sidebar-select/parent.tsx
View File

@ -78,8 +78,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
<button <button
type="button" type="button"
className={`flex w-full ${ className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} 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`} } 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)} onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

2
apps/app/components/issues/sidebar-select/priority.tsx
View File

@ -30,7 +30,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
label={ label={
<span <span
className={`flex items-center gap-2 text-left capitalize ${ className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900" value ? "" : "text-brand-base"
}`} }`}
> >
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")} {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}

2
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -50,7 +50,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
<CustomSelect <CustomSelect
label={ 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( {getStateGroupIcon(
selectedState?.group ?? "backlog", selectedState?.group ?? "backlog",
"16", "16",

38
apps/app/components/issues/sidebar.tsx
View File

@ -229,7 +229,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
isOpen={deleteIssueModal} isOpen={deleteIssueModal}
data={issueDetail ?? null} 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"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium"> <h4 className="text-sm font-medium">
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id} {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"> <div className="flex flex-wrap items-center gap-2">
<button <button
type="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} onClick={handleCopyText}
> >
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
@ -245,7 +245,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
{!isNotAllowed && ( {!isNotAllowed && (
<button <button
type="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)} onClick={() => setDeleteIssueModal(true)}
> >
<TrashIcon className="h-3.5 w-3.5" /> <TrashIcon className="h-3.5 w-3.5" />
@ -253,7 +253,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
)} )}
</div> </div>
</div> </div>
<div className="divide-y-2 divide-gray-100"> <div className="divide-y-2 divide-brand-base">
<div className="py-1"> <div className="py-1">
<Controller <Controller
control={control} control={control}
@ -316,14 +316,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
issueDetail?.parent_detail ? ( issueDetail?.parent_detail ? (
<button <button
type="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 })} onClick={() => submitChanges({ parent: null })}
> >
{issueDetail.parent_detail?.name} {issueDetail.parent_detail?.name}
<XMarkIcon className="h-3 w-3" /> <XMarkIcon className="h-3 w-3" />
</button> </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 No parent selected
</div> </div>
) )
@ -395,7 +395,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
return ( return (
<span <span
key={label.id} 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={() => { onClick={() => {
const updatedLabels = watchIssue("labels_list")?.filter( const updatedLabels = watchIssue("labels_list")?.filter(
(l) => l !== labelId (l) => l !== labelId
@ -435,8 +435,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
className={`flex ${ className={`flex ${
isNotAllowed isNotAllowed
? "cursor-not-allowed" ? "cursor-not-allowed"
: "cursor-pointer hover:bg-gray-100" : "cursor-pointer hover:bg-brand-surface-1"
} items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`} } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`}
> >
Select Label Select Label
</Listbox.Button> </Listbox.Button>
@ -448,7 +448,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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"> <div className="py-1">
{issueLabels ? ( {issueLabels ? (
issueLabels.length > 0 ? ( issueLabels.length > 0 ? (
@ -463,9 +463,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
<Listbox.Option <Listbox.Option
key={label.id} key={label.id}
className={({ active, selected }) => className={({ active, selected }) =>
`${active || selected ? "bg-indigo-50" : ""} ${ `${active || selected ? "bg-brand-surface-1" : ""} ${
selected ? "font-medium" : "" 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} value={label.id}
> >
@ -483,8 +483,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
); );
} else } else
return ( return (
<div className="border-y border-gray-400 bg-gray-50"> <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-gray-900"> <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
<RectangleGroupIcon className="h-3 w-3" />{" "} <RectangleGroupIcon className="h-3 w-3" />{" "}
{label.name} {label.name}
</div> </div>
@ -495,7 +495,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
className={({ active, selected }) => className={({ active, selected }) =>
`${active || selected ? "bg-indigo-50" : ""} ${ `${active || selected ? "bg-indigo-50" : ""} ${
selected ? "font-medium" : "" 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} value={child.id}
> >
@ -530,8 +530,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
<button <button
type="button" type="button"
className={`flex ${ className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`} } items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`}
onClick={() => setCreateLabelForm((prevData) => !prevData)} onClick={() => setCreateLabelForm((prevData) => !prevData)}
> >
{createLabelForm ? ( {createLabelForm ? (
@ -555,7 +555,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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") !== "" && ( {watch("color") && watch("color") !== "" && (
<span <span
@ -627,7 +627,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
{!isNotAllowed && ( {!isNotAllowed && (
<button <button
type="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)} onClick={() => setLinkModal(true)}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />

8
apps/app/components/issues/sub-issues-list.tsx
View File

@ -173,7 +173,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
{({ open }) => ( {({ open }) => (
<> <>
<div className="flex items-center justify-between"> <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" : ""}`} /> <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span> Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
</Disclosure.Button> </Disclosure.Button>
@ -181,7 +181,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
<div className="flex items-center"> <div className="flex items-center">
<button <button
type="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} onClick={handleCreateIssueModal}
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />
@ -210,7 +210,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
key={issue.id} key={issue.id}
href={`/${workspaceSlug}/projects/${projectId}/issues/${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"> <div className="flex items-center gap-2 rounded text-xs">
<span <span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full" 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); 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> </button>
)} )}
</a> </a>

8
apps/app/components/issues/view-select/assignee.tsx
View File

@ -103,17 +103,17 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
<div <div
className={`flex ${ className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer" 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) ? ( {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
<div className="flex items-center justify-center gap-2 -my-0.5"> <div className="flex items-center justify-center gap-2 -my-0.5">
<AssigneesList userIds={issue.assignees} length={3} showLength={false} /> <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>
) : ( ) : (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<UserGroupIcon className="h-4 w-4 text-gray-500" /> <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
<span className="text-gray-500">Assignee</span> <span className="text-brand-secondary">Assignee</span>
</div> </div>
)} )}
</div> </div>

2
apps/app/components/issues/view-select/state.tsx
View File

@ -97,7 +97,7 @@ export const ViewStateSelect: React.FC<Props> = ({
tooltipHeading="State" tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")} 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 && {selectedOption &&
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)} getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
{selectedOption?.name ?? "State"} {selectedOption?.name ?? "State"}

12
apps/app/components/labels/create-label-modal.tsx
View File

@ -84,7 +84,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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)}> <form onSubmit={handleSubmit(onSubmit)}>
<div> <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 Create Label
</Dialog.Title> </Dialog.Title>
<div className="mt-8 flex items-center gap-2"> <div className="mt-8 flex items-center gap-2">
@ -109,8 +109,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
{({ open, close }) => ( {({ open, close }) => (
<> <>
<Popover.Button <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 ${ 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-gray-900" : "text-gray-500" open ? "text-brand-base" : "text-brand-secondary"
}`} }`}
> >
{watch("color") && watch("color") !== "" && ( {watch("color") && watch("color") !== "" && (
@ -122,7 +122,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
/> />
)} )}
<ChevronDownIcon <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" open ? "text-gray-600" : "text-gray-400"
}`} }`}
aria-hidden="true" aria-hidden="true"

8
apps/app/components/labels/create-update-label-inline.tsx
View File

@ -108,18 +108,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
return ( return (
<div <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" labelForm ? "" : "hidden"
}`} }`}
ref={ref} ref={ref}
> >
<div className="h-8 w-8 flex-shrink-0"> <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 }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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-gray-900" : "text-gray-500" open ? "text-brand-base" : "text-brand-secondary"
}`} }`}
> >
{watch("color") && watch("color") !== "" && ( {watch("color") && watch("color") !== "" && (

14
apps/app/components/labels/labels-list-modal.tsx
View File

@ -89,15 +89,15 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" 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> <Combobox>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <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" aria-hidden="true"
/> />
<Combobox.Input <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..." placeholder="Search..."
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
@ -111,7 +111,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
<> <>
<li className="p-2"> <li className="p-2">
{query === "" && ( {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 Labels
</h2> </h2>
)} )}
@ -132,7 +132,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
}} }}
className={({ active }) => className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ `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={() => { onClick={() => {
@ -159,10 +159,10 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
{query !== "" && filteredLabels.length === 0 && ( {query !== "" && filteredLabels.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14"> <div className="py-14 px-6 text-center sm:px-14">
<RectangleStackIcon <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" 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. We couldn{"'"}t find any label with that term. Please try again.
</p> </p>
</div> </div>

10
apps/app/components/labels/single-label-group.tsx
View File

@ -66,7 +66,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
}; };
return ( 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 }) => ( {({ open }) => (
<> <>
<div className="flex cursor-pointer items-center justify-between gap-2"> <div className="flex cursor-pointer items-center justify-between gap-2">
@ -74,7 +74,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<span> <span>
<RectangleGroupIcon className="h-4 w-4" /> <RectangleGroupIcon className="h-4 w-4" />
</span> </span>
<h6 className="font-medium text-gray-600">{label.name}</h6> <h6 className="font-medium text-brand-base">{label.name}</h6>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CustomMenu ellipsis> <CustomMenu ellipsis>
@ -100,7 +100,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<Disclosure.Button> <Disclosure.Button>
<span> <span>
<ChevronDownIcon <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> </span>
</Disclosure.Button> </Disclosure.Button>
@ -120,9 +120,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
{labelChildren.map((child) => ( {labelChildren.map((child) => (
<div <div
key={child.id} 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 <span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full" className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{ style={{

4
apps/app/components/labels/single-label.tsx
View File

@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
editLabel, editLabel,
handleLabelDelete, 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 justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span <span
@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
backgroundColor: label.color && label.color !== "" ? label.color : "#000", 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> </div>
<CustomMenu ellipsis> <CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}> <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>

10
apps/app/components/modules/delete-module-modal.tsx
View File

@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <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="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"> <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 <ExclamationTriangleIcon
@ -101,11 +101,11 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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 Delete Module
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <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-{" "} Are you sure you want to delete module-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related <span className="font-bold">{data?.name}</span>? All of the data related
to the module will be permanently removed. This action cannot be undone. to the module will be permanently removed. This action cannot be undone.

4
apps/app/components/modules/form.tsx
View File

@ -66,7 +66,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
return ( return (
<form onSubmit={handleSubmit(handleCreateUpdateModule)}> <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
<div className="space-y-5"> <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 {status ? "Update" : "Create"} Module
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
@ -170,7 +170,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
</div> </div>
</div> </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> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}> <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
{status {status

4
apps/app/components/modules/modal.tsx
View File

@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 <ModuleForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

4
apps/app/components/modules/select/select-lead.tsx
View File

@ -56,11 +56,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
options={options} options={options}
value={value} value={value}
label={ label={
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-brand-secondary">
{selectedOption ? ( {selectedOption ? (
<Avatar user={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" /> <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
</div> </div>
)} )}

8
apps/app/components/modules/select/select-members.tsx
View File

@ -51,16 +51,16 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={ 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) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} /> <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>
) : ( ) : (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<UserGroupIcon className="h-4 w-4 text-gray-500" /> <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
<span className="text-gray-500">Assignee</span> <span className="text-brand-secondary">Assignee</span>
</div> </div>
)} )}
</div> </div>

4
apps/app/components/modules/sidebar-select/select-lead.tsx
View File

@ -62,11 +62,11 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={ label={
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-brand-secondary">
{selectedOption ? ( {selectedOption ? (
<Avatar user={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 <Image
src={User} src={User}
height="100%" height="100%"

4
apps/app/components/modules/sidebar-select/select-members.tsx
View File

@ -58,11 +58,11 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={ 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) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} /> <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>
) : ( ) : (
"No members" "No members"

2
apps/app/components/modules/sidebar-select/select-status.tsx
View File

@ -33,7 +33,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
label={ label={
<span <span
className={`flex items-center gap-2 text-left capitalize ${ className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900" value ? "" : "text-brand-base"
}`} }`}
> >
<span <span

46
apps/app/components/modules/sidebar.tsx
View File

@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div <div
className={`fixed top-0 ${ className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]" 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 ? ( {module ? (
<> <>
@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<CustomSelect <CustomSelect
customButton={ customButton={
<span <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")}`)} {capitalizeFirstLetter(`${watch("status")}`)}
</span> </span>
@ -218,13 +218,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
)} )}
/> />
</div> </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"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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-gray-100" : "" open ? "bg-brand-surface-1" : ""
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <CalendarDaysIcon className="h-3 w-3" />
@ -271,8 +271,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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-gray-100" : "" open ? "bg-brand-surface-1" : ""
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3 " /> <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 gap-6 px-6 py-6 w-full">
<div className="flex flex-col items-start justify-start gap-2 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 "> <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 width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</CustomMenu> </CustomMenu>
</div> </div>
<span className="whitespace-normal text-sm leading-5 text-black"> <span className="whitespace-normal text-sm leading-5 text-brand-base">
{module.description} {module.description}
</span> </span>
</div> </div>
@ -373,7 +373,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<span>Progress</span> <span>Progress</span>
</div> </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"> <span className="h-4 w-4">
<ProgressBar <ProgressBar
value={module.completed_issues} value={module.completed_issues}
@ -387,15 +387,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure defaultOpen> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`} 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 w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm"> <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 ? ( {!open && moduleIssues && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]"> <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{progressPercentage ? `${progressPercentage}%` : ""} {progressPercentage ? `${progressPercentage}%` : ""}
@ -415,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} /> <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. Invalid date. Please enter valid date.
</span> </span>
</div> </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-start justify-between gap-4 py-2 text-xs">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span> <span>
<DocumentIcon className="h-3 w-3 text-gray-500" /> <DocumentIcon className="h-3 w-3 text-brand-secondary" />
</span> </span>
<span> <span>
Pending Issues -{" "} Pending Issues -{" "}
@ -437,7 +437,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</span> </span>
</div> </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"> <div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" /> <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
<span>Ideal</span> <span>Ideal</span>
@ -466,15 +466,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure defaultOpen> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`} 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 w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm"> <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> </div>
{module.total_issues > 0 ? ( {module.total_issues > 0 ? (
@ -487,7 +487,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} /> <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. No issues found. Please add issue.
</span> </span>
</div> </div>
@ -522,11 +522,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</Disclosure> </Disclosure>
</div> </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"> <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 <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)} onClick={() => setModuleLinkModal(true)}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />

16
apps/app/components/modules/single-module-card.tsx
View File

@ -122,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
setIsOpen={setModuleDeleteModal} setIsOpen={setModuleDeleteModal}
data={module} 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="p-4">
<div className="flex w-full flex-col gap-5"> <div className="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left"> <Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-auto max-w-[calc(100%-9rem)]"> <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)} {truncateText(module.name, 75)}
</h3> </h3>
</a> </a>
@ -137,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</Tooltip> </Tooltip>
<div className="flex items-center gap-1"> <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> <span className="capitalize">{module?.status?.replace("-", " ")}</span>
</div> </div>
{module.is_favorite ? ( {module.is_favorite ? (
@ -174,12 +174,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="flex items-start gap-1"> <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 className="text-gray-400">Start:</span>
<span>{renderShortDateWithYearFormat(startDate)}</span> <span>{renderShortDateWithYearFormat(startDate)}</span>
</div> </div>
<div className="flex items-start gap-1"> <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 className="text-gray-400">End:</span>
<span>{renderShortDateWithYearFormat(endDate)}</span> <span>{renderShortDateWithYearFormat(endDate)}</span>
</div> </div>
@ -187,7 +187,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
</div> </div>
<div className="flex h-20 flex-col items-end"> <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> <span>Progress</span>
<div className="bar relative h-1 w-full rounded bg-gray-300"> <div className="bar relative h-1 w-full rounded bg-gray-300">
<div <div
@ -199,10 +199,10 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span> <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
</div> </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]"> <p className="text-[#858E96]">
Last updated: Last updated:
<span className="font-medium text-black"> <span className="font-medium text-brand-base">
{renderShortDateWithYearFormat(lastUpdated)} {renderShortDateWithYearFormat(lastUpdated)}
</span> </span>
</p> </p>

2
apps/app/components/onboarding/invite-members.tsx
View File

@ -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 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> <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 "> <div className="flex flex-col items-start justify-center gap-2.5 ">
<span>Email</span> <span>Email</span>

4
apps/app/components/onboarding/user-details.tsx
View File

@ -67,7 +67,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
return ( return (
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}> <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 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 justify-between gap-3 px-10 py-7 sm:flex-row">
<div className="flex flex-col items-start justify-center gap-2.5"> <div className="flex flex-col items-start justify-center gap-2.5">
<span>First name</span> <span>First name</span>
@ -94,7 +94,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
/> />
</div> </div>
</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> <span>What is your role?</span>
<div className="w-full"> <div className="w-full">
<Controller <Controller

20
apps/app/components/onboarding/workspace.tsx
View File

@ -65,10 +65,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
}; };
return ( 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 <Tab.Group
as="div" 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 <Tab.List
as="div" as="div"
@ -78,8 +78,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
className={({ selected }) => className={({ selected }) =>
`rounded-3xl border px-4 py-2 outline-none ${ `rounded-3xl border px-4 py-2 outline-none ${
selected selected
? "border-theme bg-theme text-white" ? "border-brand-accent bg-brand-accent text-white"
: "border-gray-300 bg-white hover:bg-hover-gray" : "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 }) => className={({ selected }) =>
`rounded-3xl border px-5 py-2 outline-none ${ `rounded-3xl border px-5 py-2 outline-none ${
selected selected
? "border-theme bg-theme text-white" ? "border-brand-accent bg-brand-accent text-white"
: "border-gray-300 bg-white hover:bg-hover-gray" : "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>
<Tab.Panel className="h-full"> <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"> <div className="divide-y px-4 py-7">
{invitations && invitations.length > 0 ? ( {invitations && invitations.length > 0 ? (
invitations.map((invitation) => ( invitations.map((invitation) => (
@ -136,10 +136,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
</span> </span>
</div> </div>
<div className="min-w-0 flex-1"> <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} {invitation.workspace.name}
</div> </div>
<p className="text-sm text-gray-500"> <p className="text-sm text-brand-secondary">
Invited by {invitation.workspace.owner.first_name} Invited by {invitation.workspace.owner.first_name}
</p> </p>
</div> </div>
@ -157,7 +157,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
); );
}} }}
type="checkbox" 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> </div>
</label> </label>

4
apps/app/components/pages/create-update-page-modal.tsx
View File

@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 <PageForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

10
apps/app/components/pages/delete-page-modal.tsx
View File

@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <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="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"> <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 <ExclamationTriangleIcon
@ -125,11 +125,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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 Delete Page
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <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- {" "} Are you sure you want to delete Page- {" "}
<span className="font-bold">{data?.name}</span> <span className="font-bold">{data?.name}</span>
? All of the data related to the page will be permanently removed. ? All of the data related to the page will be permanently removed.

2
apps/app/components/pages/page-form.tsx
View File

@ -61,7 +61,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
return ( return (
<form onSubmit={handleSubmit(handleCreateUpdatePage)}> <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
<div className="space-y-5"> <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 {status ? "Update" : "Create"} Page
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">

4
apps/app/components/pages/pages-view.tsx
View File

@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))} ))}
</ul> </ul>
) : viewType === "detailed" ? ( ) : 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) => ( {pages.map((page) => (
<SinglePageDetailedItem <SinglePageDetailedItem
key={page.id} key={page.id}
@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))} ))}
</div> </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) => ( {pages.map((page) => (
<SinglePageDetailedItem <SinglePageDetailedItem
key={page.id} key={page.id}

2
apps/app/components/pages/single-page-detailed-item.tsx
View File

@ -57,7 +57,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
page.label_details.map((label) => ( page.label_details.map((label) => (
<div <div
key={label.id} 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={{ style={{
backgroundColor: `${ backgroundColor: `${
label?.color && label.color !== "" ? label.color : "#000000" label?.color && label.color !== "" ? label.color : "#000000"

4
apps/app/components/pages/single-page-list-item.tsx
View File

@ -51,7 +51,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<li> <li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a> <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 items-center justify-between">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<DocumentTextIcon className="h-4 w-4" /> <DocumentTextIcon className="h-4 w-4" />
@ -62,7 +62,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
page.label_details.map((label) => ( page.label_details.map((label) => (
<div <div
key={label.id} 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={{ style={{
backgroundColor: `${ backgroundColor: `${
label?.color && label.color !== "" ? label.color : "#000000" label?.color && label.color !== "" ? label.color : "#000000"

10
apps/app/components/project/confirm-project-member-remove.tsx
View File

@ -39,7 +39,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <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="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"> <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 <ExclamationTriangleIcon
@ -63,11 +63,11 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
/> />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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}? Remove {data?.email}?
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <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- {" "} Are you sure you want to remove member- {" "}
<span className="font-bold">{data?.email}</span> <span className="font-bold">{data?.email}</span>
? They will no longer have access to this project. This action ? They will no longer have access to this project. This action

4
apps/app/components/project/create-project-modal.tsx
View File

@ -164,7 +164,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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"> <div className="relative h-36 w-full rounded-t-lg bg-gray-300">
{watch("cover_image") !== null && ( {watch("cover_image") !== null && (
<Image <Image

6
apps/app/components/project/delete-project-modal.tsx
View File

@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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 flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <span className="place-items-center rounded-full bg-red-100 p-4">
@ -124,7 +124,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
</span> </span>
</div> </div>
<span> <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{" "} Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{selectedProject?.name}</span>? All <span className="break-all font-semibold">{selectedProject?.name}</span>? All
of the data related to the project will be permanently removed. This action 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