feat: themes (#902)

* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
This commit is contained in:
Aaryan Khandelwal 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

View File

@ -141,7 +141,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
<button
type="button"
className={`mt-5 flex w-full justify-end text-xs outline-none ${
isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-theme"
isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-brand-accent"
} `}
onClick={() => {
setIsCodeResending(true);

View File

@ -94,7 +94,7 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
<div className="mt-2 flex items-center justify-between">
<div className="ml-auto text-sm">
<Link href={"/forgot-password"}>
<a className="font-medium text-theme hover:text-indigo-500">Forgot your password?</a>
<a className="font-medium text-brand-accent hover:text-indigo-500">Forgot your password?</a>
</Link>
</div>
</div>

View File

@ -37,7 +37,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
<Link
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
>
<button className="flex w-full items-center justify-center gap-3 rounded-md border border-gray-200 p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
<button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
<Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
<span>Sign In with Github</span>
</button>

View File

@ -36,16 +36,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
alt="ProjectSettingImg"
/>
</div>
<h1 className="text-xl font-medium text-gray-900">
<h1 className="text-xl font-medium text-brand-base">
Oops! You are not authorized to view this page
</h1>
<div className="w-full text-base text-gray-500 max-w-md ">
<div className="w-full text-base text-brand-secondary max-w-md ">
{user ? (
<p>
You have signed in as {user.email}. <br />
<Link href={`/signin?next=${currentPath}`}>
<a className="text-gray-900 font-medium">Sign in</a>
<a className="text-brand-base font-medium">Sign in</a>
</Link>{" "}
with different account that has access to this page.
</p>
@ -53,7 +53,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
<p>
You need to{" "}
<Link href={`/signin?next=${currentPath}`}>
<a className="text-gray-900 font-medium">Sign in</a>
<a className="text-brand-base font-medium">Sign in</a>
</Link>{" "}
with an account that has access to this page.
</p>

View File

@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
<div className="flex items-center">
<button
type="button"
className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
onClick={() => router.back()}
>
<ArrowLeftIcon className="h-3 w-3" />
@ -37,7 +37,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
<>
{link ? (
<Link href={link}>
<a className="border-r-2 border-gray-300 px-3 text-sm">
<a className="border-r-2 border-brand-base px-3 text-sm">
<p className={`${icon ? "flex items-center gap-2" : ""}`}>
{icon ?? null}
{title}

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

View File

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

View File

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

View File

@ -71,7 +71,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -85,29 +85,29 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white p-5">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-brand-surface-2 p-5">
<div className="sm:flex sm:items-start">
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
<Dialog.Title
as="h3"
className="flex justify-between text-lg font-medium leading-6 text-gray-900"
className="flex justify-between text-lg font-medium leading-6 text-brand-base"
>
<span>Keyboard Shortcuts</span>
<span>
<button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon
className="h-6 w-6 text-gray-400 hover:text-gray-500"
className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
aria-hidden="true"
/>
</button>
</span>
</Dialog.Title>
<div>
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-gray-200 bg-gray-100 px-3 py-2">
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-gray-500" />
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
<Input
className="w-full border-none bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
className="w-full border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
id="search"
name="search"
type="text"
@ -123,16 +123,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div key={shortcut.keys} className="flex w-full flex-col">
<div className="flex flex-col gap-y-3">
<div className="flex items-center justify-between">
<p className="text-sm text-gray-500">{shortcut.description}</p>
<p className="text-sm text-brand-secondary">{shortcut.description}</p>
<div className="flex items-center gap-x-2.5">
{shortcut.keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
<span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
<MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}
@ -145,7 +145,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
))
) : (
<div className="flex flex-col gap-y-3">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
No shortcuts found for{" "}
<span className="font-semibold italic">
{`"`}
@ -162,16 +162,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div className="flex flex-col gap-y-3">
{shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex items-center justify-between">
<p className="text-sm text-gray-500">{description}</p>
<p className="text-sm text-brand-secondary">{description}</p>
<div className="flex items-center gap-x-2.5">
{keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
<span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
<MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}

View File

@ -81,7 +81,7 @@ export const AllBoards: React.FC<Props> = ({
return (
<div
key={index}
className="flex items-center justify-between gap-2 rounded bg-white p-2 shadow"
className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
>
<div className="flex items-center gap-2">
{currentState &&
@ -92,7 +92,7 @@ export const AllBoards: React.FC<Props> = ({
: addSpaceIfCamelCase(singleGroup)}
</h4>
</div>
<span className="text-xs text-gray-500">0</span>
<span className="text-xs text-brand-secondary">0</span>
</div>
);
})}

View File

@ -124,7 +124,7 @@ export const BoardHeader: React.FC<Props> = ({
return (
<div
className={`flex justify-between items-center px-1 ${
!isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
!isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
}`}
>
<div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@ -145,7 +145,7 @@ export const BoardHeader: React.FC<Props> = ({
<span
className={`${
isCollapsed ? "ml-0.5" : ""
} rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
} rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-xs text-center`}
>
{groupedByIssues?.[groupTitle].length ?? 0}
</span>
@ -155,7 +155,7 @@ export const BoardHeader: React.FC<Props> = ({
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
onClick={() => {
setIsCollapsed((prevData) => !prevData);
}}
@ -169,7 +169,7 @@ export const BoardHeader: React.FC<Props> = ({
{!isCompleted && (
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
onClick={addIssueToState}
>
<PlusIcon className="h-4 w-4" />

View File

@ -66,7 +66,7 @@ export const SingleBoard: React.FC<Props> = ({
}, [currentState]);
return (
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-gray-50"}`}>
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-brand-base"}`}>
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
<BoardHeader
addIssueToState={addIssueToState}
@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
{(provided, snapshot) => (
<div
className={`relative h-full overflow-y-auto p-1 ${
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : ""
} ${!isCollapsed ? "hidden" : "block"}`}
ref={provided.innerRef}
{...provided.droppableProps}
@ -91,12 +91,12 @@ export const SingleBoard: React.FC<Props> = ({
<div
className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden"
} pointer-events-none top-0 left-0 z-[99] h-full w-full bg-gray-100 opacity-50`}
} pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
/>
<div
className={`absolute ${
snapshot.isDraggingOver ? "block" : "hidden"
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs`}
>
This board is ordered by{" "}
{replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
@ -146,7 +146,7 @@ export const SingleBoard: React.FC<Props> = ({
{type === "issue" ? (
<button
type="button"
className="flex items-center gap-2 font-medium text-theme outline-none"
className="flex items-center gap-2 font-medium text-brand-accent outline-none"
onClick={addIssueToState}
>
<PlusIcon className="h-4 w-4" />
@ -158,7 +158,7 @@ export const SingleBoard: React.FC<Props> = ({
customButton={
<button
type="button"
className="flex items-center gap-2 font-medium text-theme outline-none"
className="flex items-center gap-2 font-medium text-brand-accent outline-none"
>
<PlusIcon className="h-4 w-4" />
Add Issue

View File

@ -261,8 +261,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<div
className={`mb-3 rounded bg-white shadow ${
snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
className={`mb-3 rounded bg-brand-surface-1 shadow ${
snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
}`}
ref={provided.innerRef}
{...provided.draggableProps}
@ -312,12 +312,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
<a>
{properties.key && (
<div className="mb-2.5 text-xs font-medium text-gray-700">
<div className="mb-2.5 text-xs font-medium text-brand-secondary">
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
)}
<h5
className="break-all text-sm group-hover:text-theme"
className="break-all text-sm group-hover:text-brand-accent"
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
>
{truncateText(issue.name, 100)}
@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/>
)}
{properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
)}

View File

@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<form>
<Combobox
onChange={(val: string) => {
@ -136,12 +136,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<input
type="text"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(event) => setQuery(event.target.value)}
/>
@ -154,7 +154,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
Select issues to delete
</h2>
)}
@ -166,7 +166,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
>
@ -182,7 +182,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>
<span>{issue.name}</span>
@ -194,9 +194,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500">
<h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
</h3>
</div>
)}

View File

@ -208,7 +208,7 @@ export const CalendarView = () => {
<>
<Popover.Button className={`group flex h-full items-start gap-1 text-gray-800`}>
<div className="flex items-center justify-center gap-2 text-2xl font-semibold">
<span className="text-black">{formatDate(currentDate, "Month")}</span>{" "}
<span className="text-brand-base">{formatDate(currentDate, "Month")}</span>{" "}
<span>{formatDate(currentDate, "yyyy")}</span>
</div>
</Popover.Button>
@ -222,7 +222,7 @@ export const CalendarView = () => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-white shadow-lg rounded-[10px]">
<Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-brand-surface-2 shadow-lg rounded-[10px]">
<div className="flex justify-center items-center text-sm gap-5 px-2 py-2">
{yearOptions.map((year) => (
<button
@ -237,7 +237,7 @@ export const CalendarView = () => {
</button>
))}
</div>
<div className="grid grid-cols-4 px-2 border-t border-gray-200">
<div className="grid grid-cols-4 px-2 border-t border-brand-base">
{monthOptions.map((month) => (
<button
onClick={() =>
@ -297,7 +297,7 @@ export const CalendarView = () => {
<div className="flex w-full gap-2 items-center justify-end">
<button
className="group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-4 py-1.5 text-sm hover:bg-gray-100 hover:text-gray-900 focus:outline-none"
className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-4 py-1.5 text-sm hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none"
onClick={() => {
if (isMonthlyView) {
updateDate(new Date());
@ -315,7 +315,7 @@ export const CalendarView = () => {
<CustomMenu
customButton={
<div
className={`group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-3 py-1.5 text-sm hover:bg-gray-100 hover:text-gray-900 focus:outline-none `}
className={`group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-sm hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none `}
>
{isMonthlyView ? "Monthly" : "Weekly"}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
@ -360,12 +360,12 @@ export const CalendarView = () => {
/>
</div>
</CustomMenu.MenuItem>
<div className="mt-1 flex w-52 items-center justify-between border-t border-gray-200 py-2 px-1 text-sm text-gray-600">
<div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1 text-sm text-gray-600">
<h4>Show weekends</h4>
<button
type="button"
className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
showWeekEnds ? "bg-green-500" : "bg-gray-200"
showWeekEnds ? "bg-green-500" : "bg-brand-surface-2"
}`}
role="switch"
aria-checked={showWeekEnds}
@ -374,7 +374,7 @@ export const CalendarView = () => {
<span className="sr-only">Show weekends</span>
<span
aria-hidden="true"
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
showWeekEnds ? "translate-x-2.5" : "translate-x-0"
}`}
/>
@ -392,7 +392,7 @@ export const CalendarView = () => {
{weeks.map((date, index) => (
<div
key={index}
className={`flex items-center justify-start p-1.5 gap-2 border-gray-300 bg-gray-100 text-base font-medium text-gray-600 ${
className={`flex items-center justify-start p-1.5 gap-2 border-brand-base bg-brand-surface-1 text-base font-medium text-gray-600 ${
!isMonthlyView
? showWeekEnds
? (index + 1) % 7 === 0
@ -424,7 +424,7 @@ export const CalendarView = () => {
key={index}
ref={provided.innerRef}
{...provided.droppableProps}
className={`flex flex-col gap-1.5 border-t border-gray-300 p-2.5 text-left text-sm font-medium hover:bg-gray-100 ${
className={`flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
showWeekEnds
? (index + 1) % 7 === 0
? ""
@ -444,7 +444,7 @@ export const CalendarView = () => {
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={`w-full cursor-pointer truncate rounded bg-white p-1.5 hover:scale-105 ${
className={`w-full cursor-pointer truncate rounded bg-brand-surface-2 p-1.5 hover:scale-105 ${
snapshot.isDragging ? "shadow-lg" : ""
}`}
>

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

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

View File

@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<form>
<Controller
control={control}
@ -139,11 +139,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
<Combobox as="div" {...field} multiple>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
/>
@ -156,7 +156,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mb-2 px-3 text-xs font-semibold text-brand-base">
Select issues to add
</h2>
)}
@ -169,7 +169,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
value={issue.id}
className={({ active }) =>
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
>
@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>
{issue.name}
@ -195,9 +195,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500">
<h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
</h3>
</div>
)}

View File

@ -55,23 +55,23 @@ const activityDetails: {
},
modules: {
message: "set the module to",
icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
state: {
message: "set the state to",
icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
priority: {
message: "set the priority to",
icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
name: {
message: "set the name to",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
description: {
message: "updated the description.",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
estimate_point: {
message: "set the estimate point to",
@ -79,15 +79,15 @@ const activityDetails: {
},
target_date: {
message: "set the due date to",
icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
parent: {
message: "set the parent to",
icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
issue: {
message: "deleted the issue.",
icon: <TrashIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
estimate: {
message: "updated the estimate",
@ -217,7 +217,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
</div>
)}
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
<ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-gray-400"
aria-hidden="true"
@ -230,7 +230,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
{activity.actor_detail.first_name}
{activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
</div>
<p className="mt-0.5 text-xs text-gray-500">
<p className="mt-0.5 text-xs text-brand-secondary">
Commented {timeAgo(activity.created_at)}
</p>
</div>
@ -244,7 +244,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
editable={false}
onBlur={() => ({})}
noBorder
customClassName="text-xs bg-gray-100"
customClassName="text-xs bg-brand-surface-1"
/>
</div>
</div>
@ -259,7 +259,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div className="relative pb-1">
{activities.length > 1 && activityIdx !== activities.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
aria-hidden="true"
/>
) : null}
@ -268,7 +268,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
{activity.field ? (
activityDetails[activity.field as keyof typeof activityDetails]?.icon
) : activity.actor_detail.avatar &&
@ -292,7 +292,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
</div>
</div>
<div className="min-w-0 flex-1 py-3">
<div className="text-xs text-gray-500">
<div className="text-xs text-brand-secondary">
<span className="text-gray font-medium">
{activity.actor_detail.first_name}
{activity.actor_detail.is_bot
@ -300,7 +300,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
: " " + activity.actor_detail.last_name}
</span>
<span> {action} </span>
<span className="text-xs font-medium text-gray-900"> {value} </span>
<span className="text-xs font-medium text-brand-base"> {value} </span>
<span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
</div>
</div>

View File

@ -57,9 +57,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return (
<div
key={key}
className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
>
<span className="font-medium capitalize text-gray-500">
<span className="font-medium capitalize text-brand-secondary">
{replaceUnderscoreIfSnakeCase(key)}:
</span>
{filters[key as keyof IIssueFilterOptions] === null ||
@ -131,7 +131,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
: priority === "low"
? "bg-green-100 text-green-500 hover:bg-green-100"
: "bg-gray-100 text-gray-700 hover:bg-gray-100"
: "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1"
}`}
>
<span>{getPriorityIcon(priority)}</span>
@ -339,7 +339,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
created_by: null,
})
}
className="flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
>
<span className="font-medium">Clear all filters</span>
<XMarkIcon className="h-4 w-4" />

View File

@ -121,7 +121,7 @@ export const GptAssistantModal: React.FC<Props> = ({
return (
<div
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border bg-white p-4 shadow ${
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-surface-2 p-4 shadow ${
isOpen ? "block" : "hidden"
}`}
>

View File

@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
return (
<Popover className="relative z-[2]" ref={ref}>
<Popover.Button
className="rounded border border-gray-500 bg-white px-2 py-1 text-xs text-gray-700"
className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
onClick={() => setIsOpen((prev) => !prev)}
>
{label}
@ -79,16 +79,16 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-white shadow-lg">
<div className="h-96 w-80 overflow-auto rounded border bg-white p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-brand-surface-2 shadow-lg">
<div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
<Tab.Group>
<Tab.List as="span" className="inline-block rounded bg-gray-200 p-1">
<Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
{tabOptions.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
selected ? "bg-theme text-white" : "text-black"
selected ? "bg-brand-accent text-white" : "text-brand-base"
}`
}
>

View File

@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC<Props> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-30 overflow-y-auto">
@ -124,9 +124,9 @@ export const ImageUploadModal: React.FC<Props> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Upload Image
</Dialog.Title>
<div className="space-y-3">
@ -135,7 +135,7 @@ export const ImageUploadModal: React.FC<Props> = ({
{...getRootProps()}
className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
(image === null && isDragActive) || !value
? "border-2 border-dashed border-gray-300 hover:border-gray-400"
? "border-2 border-dashed border-brand-base hover:border-gray-400"
: ""
}`}
>
@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC<Props> = ({
<>
<button
type="button"
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600"
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-gray-600"
>
Edit
</button>
@ -157,7 +157,7 @@ export const ImageUploadModal: React.FC<Props> = ({
) : (
<>
<UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" />
<span className="mt-2 block text-sm font-medium text-gray-900">
<span className="mt-2 block text-sm font-medium text-brand-base">
{isDragActive
? "Drop image here to upload"
: "Drag & drop image here"}

View File

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

View File

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

View File

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

View File

@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -70,11 +70,11 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Add Link
</Dialog.Title>
<div className="mt-2 space-y-3">

View File

@ -217,7 +217,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<div
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base last:border-b-0"
onContextMenu={(e) => {
e.preventDefault();
setContextMenu(true);

View File

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

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">
<Link href={link.url}>
<a
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 outline-none"
className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 outline-none"
target="_blank"
>
<ExternalLinkIcon width="14" height="14" />
@ -41,7 +41,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
</Link>
<button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/30"
onClick={() => handleDeleteLink(link.id)}
>
<TrashIcon className="h-4 w-4" />
@ -49,13 +49,13 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
</div>
)}
<Link href={link.url}>
<a className="relative flex gap-2 rounded-md border bg-gray-50 p-2" target="_blank">
<a className="relative flex gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2" target="_blank">
<div className="mt-0.5">
<LinkIcon className="h-3.5 w-3.5" />
</div>
<div>
<h5 className="w-4/5 break-all">{link.title}</h5>
<p className="mt-0.5 text-gray-500">
<p className="mt-0.5 text-brand-secondary">
Added {timeAgo(link.created_at)}
<br />
by{" "}

View File

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

View File

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

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

View File

@ -64,7 +64,7 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
{completedCycles ? (
completedCycles.completed_cycles.length > 0 ? (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-2 text-sm text-gray-500">
<div className="flex items-center gap-2 text-sm text-brand-secondary">
<ExclamationIcon height={14} width={14} />
<span>Completed cycles are not editable.</span>
</div>

View File

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

View File

@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -153,8 +153,8 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
@ -163,11 +163,11 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Delete Cycle
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete cycle-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related
to the cycle will be permanently removed. This action cannot be undone.

View File

@ -37,30 +37,30 @@ export const EmptyCycle = () => {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
<div className="relative h-32 w-72">
<div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
<div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
<span className="text-sm font-semibold text-black">Cycle Name</span>
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
<div className="flex h-full w-full items-center gap-4">
<span className="h-2 w-20 rounded-full bg-gray-200" />
<span className="h-2 w-20 rounded-full bg-gray-200" />
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
</div>
</div>
<div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
<LinearProgressIndicator data={emptyCycleData} />
</div>
</div>
<div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
<div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
<span className="text-sm font-semibold text-black">Cycle Name</span>
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
<div className="flex h-full w-full items-center gap-4">
<span className="h-2 w-20 rounded-full bg-gray-200" />
<span className="h-2 w-20 rounded-full bg-gray-200" />
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
</div>
</div>
<div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
<LinearProgressIndicator data={emptyCycleData} />
</div>
</div>
@ -68,7 +68,7 @@ export const EmptyCycle = () => {
<div className="flex flex-col items-center justify-center gap-4 text-center ">
<h3 className="text-xl font-semibold">Create New Cycle</h3>
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
time. Create new cycle now.
</p>

View File

@ -94,7 +94,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
return (
<form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h3 className="text-lg font-medium leading-6 text-brand-base">
{status ? "Update" : "Create"} Cycle
</h3>
<div className="space-y-3">
@ -196,7 +196,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton
type="submit"

View File

@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<CycleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

View File

@ -59,9 +59,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
{({ open }) => (
<>
<Listbox.Button
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
className={`flex cursor-pointer items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
>
<CyclesIcon className="h-3 w-3 text-gray-500" />
<CyclesIcon className="h-3 w-3 text-brand-secondary" />
<div className="flex items-center gap-2 truncate">
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
</div>
@ -75,7 +75,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
leaveTo="opacity-0"
>
<Listbox.Options
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-brand-surface-2 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
>
<div className="py-1">
{options ? (
@ -93,7 +93,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
: ""
} ${
active ? "bg-indigo-50" : ""
} relative cursor-pointer select-none p-2 text-gray-900`
} relative cursor-pointer select-none p-2 text-brand-base`
}
value={option.value}
>
@ -103,14 +103,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
</Listbox.Option>
))
) : (
<p className="text-center text-sm text-gray-500">No options</p>
<p className="text-center text-sm text-brand-secondary">No options</p>
)
) : (
<p className="text-center text-sm text-gray-500">Loading...</p>
<p className="text-center text-sm text-brand-secondary">Loading...</p>
)}
<button
type="button"
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
onClick={openCycleModal}
>
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />

View File

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

View File

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

View File

@ -89,7 +89,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10">
@ -103,7 +103,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between px-5">
<div className="flex items-center gap-2">
@ -114,8 +114,8 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
<XMarkIcon className="h-4 w-4" />
</button>
</div>
<div className="flex items-center gap-2 pb-3 mt-2 px-5 border-b border-gray-200">
<MagnifyingGlassIcon className="h-4 w-4 text-gray-500" />
<div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
<MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
<input
className="outline-none"
placeholder="Search for a cycle..."
@ -129,7 +129,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
filteredOptions.map((option: ICycle) => (
<button
key={option.id}
className="flex items-center gap-4 py-3 px-2 text-gray-600 text-sm rounded w-full hover:bg-gray-100"
className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
onClick={() => {
transferIssue({
new_cycle_id: option?.id,
@ -149,14 +149,14 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
) : (
<div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
<ExclamationIcon height={14} width={14} />
<span className="text-center text-gray-500">
<span className="text-center text-brand-secondary">
You dont have any current cycle. Please create one to transfer the
issues.
</span>
</div>
)
) : (
<p className="text-center text-gray-500">Loading...</p>
<p className="text-center text-brand-secondary">Loading...</p>
)}
</div>
</div>

View File

@ -38,7 +38,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
: 0;
return (
<div className="flex items-center justify-between -mt-4 mb-4">
<div className="flex items-center gap-2 text-sm text-gray-500">
<div className="flex items-center gap-2 text-sm text-brand-secondary">
<ExclamationIcon height={14} width={14} />
<span>Completed cycles are not editable.</span>
</div>

View File

@ -55,7 +55,7 @@ const EmojiIconPicker: React.FC<Props> = ({
return (
<Popover className="relative z-[1]" ref={ref}>
<Popover.Button
className="rounded-full bg-gray-100 p-2 outline-none sm:text-sm"
className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
onClick={() => setIsOpen((prev) => !prev)}
>
{label}
@ -69,8 +69,8 @@ const EmojiIconPicker: React.FC<Props> = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg">
<div className="h-[230px] w-[250px] overflow-auto border rounded-[4px] bg-white p-2 shadow-xl">
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-brand-surface-2 shadow-lg">
<div className="h-[230px] w-[250px] overflow-auto border border-brand-base rounded-[4px] bg-brand-surface-2 p-2 shadow-xl">
<Tab.Group as="div" className="flex h-full w-full flex-col">
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
{tabOptions.map((tab) => (
@ -100,7 +100,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{recentEmojis.map((emoji) => (
<button
type="button"
className="h-4 w-4 select-none text-base hover:bg-hover-gray flex items-center justify-between"
className="h-4 w-4 select-none text-sm hover:bg-brand-surface-2 flex items-center justify-between"
key={emoji}
onClick={() => {
onChange(emoji);
@ -119,7 +119,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{emojis.map((emoji) => (
<button
type="button"
className="h-4 w-4 ml-1 select-none text-base hover:bg-hover-gray flex justify-center items-center"
className="h-4 w-4 mb-1 select-none text-sm hover:bg-brand-surface-2 flex items-center"
key={emoji}
onClick={() => {
onChange(emoji);
@ -184,7 +184,7 @@ const EmojiIconPicker: React.FC<Props> = ({
{icons.material_rounded.map((icon) => (
<button
type="button"
className="h-4 w-4 mb-1 select-none text-lg hover:bg-hover-gray flex items-center"
className="h-4 w-4 mb-1 select-none text-lg hover:bg-brand-surface-2 flex items-center"
key={icon.name}
onClick={() => {
if (onIconsClick) onIconsClick(icon.name);

View File

@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
);
return (
<div className="flex items-center justify-between gap-2 rounded-[10px] border bg-white p-5">
<div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5">
<div className="flex items-start gap-4">
<div className="h-12 w-12 flex-shrink-0">
<Image

View File

@ -66,31 +66,31 @@ const activityDetails: {
},
modules: {
message: "set the module to",
icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
state: {
message: "set the state to",
icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
priority: {
message: "set the priority to",
icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
name: {
message: "set the name to",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
description: {
message: "updated the description.",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
target_date: {
message: "set the due date to",
icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
parent: {
message: "set the parent to",
icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
},
estimate: {
message: "updated the estimate",
@ -255,7 +255,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
}
value = (
<span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs border border-brand-base">
<span className="absolute flex flex-shrink-0 items-center justify-center">
<span
className="h-1.5 w-1.5 rounded-full"
@ -265,7 +265,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
aria-hidden="true"
/>
</span>
<span className="ml-3 font-medium text-gray-900">{name}</span>
<span className="ml-3 font-medium text-brand-base">{name}</span>
</span>
);
} else if (activityItem.field === "assignees") {
@ -298,7 +298,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
aria-hidden="true"
/>
) : null}
@ -307,7 +307,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
{activityItem.field ? (
activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon
@ -332,7 +332,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
</div>
</div>
<div className="min-w-0 flex-1 py-3">
<div className="text-xs text-gray-500">
<div className="text-xs text-brand-secondary">
<span className="text-gray font-medium">
{activityItem.actor_detail.first_name}
{activityItem.actor_detail.is_bot
@ -340,7 +340,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
: " " + activityItem.actor_detail.last_name}
</span>
<span> {action} </span>
<span className="text-xs font-medium text-gray-900"> {value} </span>
<span className="text-xs font-medium text-brand-base"> {value} </span>
<span className="whitespace-nowrap">
{timeAgo(activityItem.created_at)}
</span>

View File

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

View File

@ -67,7 +67,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
</div>
)}
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
<ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
</span>
</div>
@ -77,7 +77,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
{comment.actor_detail.first_name}
{comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
</div>
<p className="mt-0.5 text-xs text-gray-500">Commented {timeAgo(comment.created_at)}</p>
<p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p>
</div>
<div className="issue-comments-section p-0">
{isEditing ? (
@ -117,7 +117,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
editable={false}
onBlur={() => ({})}
noBorder
customClassName="text-xs bg-gray-100"
customClassName="text-xs bg-brand-surface-1"
/>
)}
</div>

View File

@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -102,7 +102,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
@ -116,7 +116,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
</span>
</div>
<span>
<p className="break-all text-sm leading-7 text-gray-500">
<p className="break-all text-sm leading-7 text-brand-secondary">
Are you sure you want to delete issue{" "}
<span className="break-all font-semibold">
{data?.project_detail.identifier}-{data?.sequence_id}

View File

@ -115,7 +115,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
role="textbox"
/>
{characterLimit && (
<div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-white p-1 text-xs">
<div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
<span
className={`${
watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@ -158,7 +158,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
)}
/>
<div
className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
isSubmitting ? "block" : "hidden"
}`}
>

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
</h3>
</div>
{watch("parent") && watch("parent") !== "" ? (
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
<div className="flex items-center gap-2">
<span
className="block h-1.5 w-1.5 rounded-full"
@ -267,7 +267,7 @@ export const IssueForm: FC<IssueFormProps> = ({
/>
{mostSimilarIssue && (
<div className="flex items-center gap-x-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
<Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
>
@ -283,7 +283,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</p>
<button
type="button"
className="text-sm text-blue-500"
className="text-sm text-brand-accent"
onClick={() => {
setMostSimilarIssue(undefined);
}}
@ -298,7 +298,7 @@ export const IssueForm: FC<IssueFormProps> = ({
{issueName && issueName !== "" && (
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
@ -315,7 +315,7 @@ export const IssueForm: FC<IssueFormProps> = ({
)}
<button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
onClick={() => setGptAssistantModal((prevData) => !prevData)}
>
<SparklesIcon className="h-4 w-4" />
@ -444,7 +444,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t px-5 pt-5">
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
<div
className="flex cursor-pointer items-center gap-1"
onClick={() => setCreateMore((prevData) => !prevData)}
@ -453,7 +453,7 @@ export const IssueForm: FC<IssueFormProps> = ({
<button
type="button"
className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
createMore ? "bg-theme" : "bg-gray-300"
createMore ? "bg-brand-accent" : "bg-gray-300"
} transition-colors duration-300 ease-in-out focus:outline-none`}
role="switch"
aria-checked="false"
@ -463,7 +463,7 @@ export const IssueForm: FC<IssueFormProps> = ({
aria-hidden="true"
className={`pointer-events-none inline-block h-3 w-3 ${
createMore ? "translate-x-3" : "translate-x-0"
} transform rounded-full bg-white shadow ring-0 transition duration-300 ease-in-out`}
} transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
/>
</button>
</div>

View File

@ -219,7 +219,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm
issues={issues ?? []}
handleFormSubmit={handleFormSubmit}

View File

@ -82,7 +82,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
const isNotAllowed = false;
return (
<div className="border-b border-gray-300 last:border-b-0 mx-6">
<div className="border-b border-brand-base last:border-b-0 mx-6">
<div key={issue.id} className="flex items-center justify-between gap-2 py-3">
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2">
@ -97,7 +97,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</Tooltip>
)}
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="break-all text-sm text-gray-800">
<span className="break-all text-sm text-brand-base">
{truncateText(issue.name, 50)}
</span>
</Tooltip>
@ -127,7 +127,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
/>
)}
{properties.sub_issue_count && (
<div className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
<div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
)}
@ -136,7 +136,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
>
<span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"

View File

@ -71,17 +71,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
{multiple ? (
<>
<Combobox value={value} onChange={() => ({})} multiple>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
displayValue={() => ""}
@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 && (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
{title}
</h2>
)}
@ -106,7 +106,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
>
@ -119,7 +119,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "}
{issue.id}
@ -135,10 +135,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{query !== "" && filteredIssues.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14">
<RectangleStackIcon
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<p className="mt-4 text-sm text-gray-900">
<p className="mt-4 text-sm text-brand-base">
We couldn{"'"}t find any issue with that term. Please try again.
</p>
</div>
@ -153,11 +153,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
<Combobox value={value} onChange={onChange}>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
displayValue={() => ""}
@ -171,7 +171,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
{title}
</h2>
)}
@ -182,7 +182,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
onClick={() => handleClose()}
@ -194,7 +194,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>{" "}
{issue.name}
@ -206,9 +206,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500">
<h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
</h3>
</div>
)}

View File

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

View File

@ -18,11 +18,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
<>
<Popover.Button
className={({ open }) =>
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
${
open
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
: "hover:bg-theme/5 "
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-brand-accent/5 "
}`
}
>

View File

@ -60,11 +60,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<>
<Combobox.Button
className={({ open }) =>
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
${
open
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
: "hover:bg-theme/5 "
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
: "hover:bg-brand-accent/5 "
}`
}
>
@ -78,8 +78,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
</span>
) : (
<span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
<TagIcon className="h-3 w-3 text-gray-500" />
<span className=" text-gray-500">Label</span>
<TagIcon className="h-3 w-3 text-brand-secondary" />
<span className=" text-brand-secondary">Label</span>
</span>
)}
</Combobox.Button>
@ -96,12 +96,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
>
<Combobox.Options
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
onChange={(event) => setQuery(event.target.value)}
placeholder="Search for label..."
displayValue={(assigned: any) => assigned?.name}
@ -120,7 +120,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
key={label.id}
className={({ active }) =>
`${
active ? "bg-gray-200" : ""
active ? "bg-brand-surface-2" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
}
value={label.id}
@ -150,8 +150,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
);
} else
return (
<div className="border-y border-gray-400 bg-gray-50">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
<div className="border-y border-brand-base bg-brand-surface-2">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
<RectangleGroupIcon className="h-3 w-3" /> {label.name}
</div>
<div>
@ -160,7 +160,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
key={child.id}
className={({ active }) =>
`${
active ? "bg-gray-200" : ""
active ? "bg-brand-surface-2" : ""
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
}
value={child.id}
@ -192,14 +192,14 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
);
})
) : (
<p className="px-2 text-xs text-gray-500">No labels found</p>
<p className="px-2 text-xs text-brand-secondary">No labels found</p>
)
) : (
<p className="px-2 text-xs text-gray-500">Loading...</p>
<p className="px-2 text-xs text-brand-secondary">Loading...</p>
)}
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
onClick={() => setIsOpen(true)}
>
<span className="flex items-center justify-start gap-1">

View File

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

View File

@ -59,7 +59,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
<p className="text-gray-400">No projects found!</p>
)
) : (
<div className="px-2 text-sm text-gray-500">Loading...</div>
<div className="px-2 text-sm text-brand-secondary">Loading...</div>
)}
</CustomSelect>
);

View File

@ -56,7 +56,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
onChange={onChange}
options={options}
label={
<div className="flex items-center gap-2 text-gray-500">
<div className="flex items-center gap-2 text-brand-secondary">
{selectedOption ? (
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
) : currentDefaultState ? (
@ -70,7 +70,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
footerOption={
<button
type="button"
className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-gray-500 hover:bg-hover-gray"
className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
onClick={() => setIsOpen(true)}
>
<PlusIcon className="h-4 w-4" aria-hidden="true" />

View File

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

View File

@ -115,7 +115,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
? watch("blocked_list").map((issue) => (
<div
key={issue}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-50"
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-500/30"
>
<Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${
@ -176,7 +176,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<form>
<Combobox
onChange={(val: string) => {
@ -191,12 +191,12 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<input
type="text"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
/>
@ -209,7 +209,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
Select blocked issues
</h2>
)}
@ -226,7 +226,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
>
@ -244,7 +244,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{
issues?.find((i) => i.id === issue.id)?.project_detail
?.identifier
@ -262,9 +262,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500">
<h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
</h3>
</div>
)}
@ -288,8 +288,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
<button
type="button"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed}
>

View File

@ -176,7 +176,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<Combobox
onChange={(val: string) => {
const selectedIssues = watchBlocker("blocker_issue_ids");
@ -190,12 +190,12 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<input
type="text"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
/>
@ -208,7 +208,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
{filteredIssues.length > 0 ? (
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
Select blocker issues
</h2>
)}
@ -225,7 +225,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
>
@ -243,14 +243,14 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
<span className="flex-shrink-0 text-xs text-brand-secondary">
{
issues?.find((i) => i.id === issue.id)?.project_detail
?.identifier
}
-{issue.sequence_id}
</span>
<span>{issue.name}</span>
<span className="text-brand-muted-1">{issue.name}</span>
</div>
</Combobox.Option>
);
@ -260,9 +260,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayerDiagonalIcon height="56" width="56" />
<h3 className="text-gray-500">
<h3 className="text-brand-secondary">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
</h3>
</div>
)}
@ -285,8 +285,8 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
<button
type="button"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed}
>

View File

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

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"}`}>
<span
className={`w-full max-w-[125px] truncate text-left sm:block ${
issueModule ? "" : "text-gray-900"
issueModule ? "" : "text-brand-base"
}`}
>
{truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}

View File

@ -78,8 +78,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
<button
type="button"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
} items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed}
>

View File

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

View File

@ -50,7 +50,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
<div className="sm:basis-1/2">
<CustomSelect
label={
<div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
<div className={`flex items-center gap-2 text-left ${value ? "" : "text-brand-base"}`}>
{getStateGroupIcon(
selectedState?.group ?? "backlog",
"16",

View File

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

View File

@ -173,7 +173,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
{({ open }) => (
<>
<div className="flex items-center justify-between">
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
</Disclosure.Button>
@ -181,7 +181,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
<div className="flex items-center">
<button
type="button"
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
onClick={handleCreateIssueModal}
>
<PlusIcon className="h-3 w-3" />
@ -210,7 +210,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
key={issue.id}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
>
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100">
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-surface-1">
<div className="flex items-center gap-2 rounded text-xs">
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@ -234,7 +234,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
handleSubIssueRemove(issue.id);
}}
>
<XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-900" />
<XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
</button>
)}
</a>

View File

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

View File

@ -97,7 +97,7 @@ export const ViewStateSelect: React.FC<Props> = ({
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
>
<div className="flex items-center gap-2 text-gray-500">
<div className="flex items-center gap-2 text-brand-secondary">
{selectedOption &&
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
{selectedOption?.name ?? "State"}

View File

@ -84,7 +84,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -98,10 +98,10 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Create Label
</Dialog.Title>
<div className="mt-8 flex items-center gap-2">
@ -109,8 +109,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
{({ open, close }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-sm bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-gray-900" : "text-gray-500"
className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" && (
@ -122,7 +122,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
/>
)}
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"

View File

@ -108,18 +108,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
return (
<div
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border bg-white p-5 ${
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
labelForm ? "" : "hidden"
}`}
ref={ref}
>
<div className="h-8 w-8 flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-gray-900" : "text-gray-500"
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" && (

View File

@ -89,15 +89,15 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Combobox>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
/>
@ -111,7 +111,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
<>
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
Labels
</h2>
)}
@ -132,7 +132,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
}}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
}`
}
onClick={() => {
@ -159,10 +159,10 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
{query !== "" && filteredLabels.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14">
<RectangleStackIcon
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
aria-hidden="true"
/>
<p className="mt-4 text-sm text-gray-900">
<p className="mt-4 text-sm text-brand-base">
We couldn{"'"}t find any label with that term. Please try again.
</p>
</div>

View File

@ -66,7 +66,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
};
return (
<Disclosure as="div" className="rounded-[10px] border bg-white p-5 text-gray-900" defaultOpen>
<Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
{({ open }) => (
<>
<div className="flex cursor-pointer items-center justify-between gap-2">
@ -74,7 +74,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<span>
<RectangleGroupIcon className="h-4 w-4" />
</span>
<h6 className="font-medium text-gray-600">{label.name}</h6>
<h6 className="font-medium text-brand-base">{label.name}</h6>
</div>
<div className="flex items-center gap-2">
<CustomMenu ellipsis>
@ -100,7 +100,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<Disclosure.Button>
<span>
<ChevronDownIcon
className={`h-4 w-4 text-gray-500 ${!open ? "rotate-90 transform" : ""}`}
className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
/>
</span>
</Disclosure.Button>
@ -120,9 +120,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
{labelChildren.map((child) => (
<div
key={child.id}
className="group flex items-center justify-between rounded-md border p-2 text-sm"
className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
>
<h5 className="flex items-center gap-3 text-gray-600">
<h5 className="flex items-center gap-3 text-brand-base">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{

View File

@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
editLabel,
handleLabelDelete,
}) => (
<div className="gap-2 space-y-3 divide-y rounded-[10px] border bg-white p-5">
<div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span
@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
backgroundColor: label.color && label.color !== "" ? label.color : "#000",
}}
/>
<h6 className="font-medium text-gray-600">{label.name}</h6>
<h6 className="font-medium text-brand-base">{label.name}</h6>
</div>
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>

View File

@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -91,8 +91,8 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
@ -101,11 +101,11 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Delete Module
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete module-{" "}
<span className="font-bold">{data?.name}</span>? All of the data related
to the module will be permanently removed. This action cannot be undone.

View File

@ -66,7 +66,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
return (
<form onSubmit={handleSubmit(handleCreateUpdateModule)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h3 className="text-lg font-medium leading-6 text-brand-base">
{status ? "Update" : "Create"} Module
</h3>
<div className="space-y-3">
@ -170,7 +170,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t px-5 pt-5">
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
{status

View File

@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -139,7 +139,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<ModuleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

View File

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

View File

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

View File

@ -62,11 +62,11 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
<CustomSearchSelect
value={value}
label={
<div className="flex items-center gap-2 text-gray-500">
<div className="flex items-center gap-2 text-brand-secondary">
{selectedOption ? (
<Avatar user={selectedOption} />
) : (
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
<Image
src={User}
height="100%"

View File

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

View File

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

View File

@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div
className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]"
} z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
>
{module ? (
<>
@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<CustomSelect
customButton={
<span
className={`flex cursor-pointer items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
>
{capitalizeFirstLetter(`${watch("status")}`)}
</span>
@ -218,13 +218,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
)}
/>
</div>
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
<Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => (
<>
<Popover.Button
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
open ? "bg-gray-100" : ""
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
open ? "bg-brand-surface-1" : ""
}`}
>
<CalendarDaysIcon className="h-3 w-3" />
@ -271,8 +271,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
open ? "bg-gray-100" : ""
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
open ? "bg-brand-surface-1" : ""
}`}
>
<CalendarDaysIcon className="h-3 w-3 " />
@ -319,7 +319,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div className="flex flex-col gap-6 px-6 py-6 w-full">
<div className="flex flex-col items-start justify-start gap-2 w-full">
<div className="flex items-start justify-between gap-2 w-full ">
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
<h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2">
@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</CustomMenu>
</div>
<span className="whitespace-normal text-sm leading-5 text-black">
<span className="whitespace-normal text-sm leading-5 text-brand-base">
{module.description}
</span>
</div>
@ -373,7 +373,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<span>Progress</span>
</div>
<div className="flex items-center gap-2.5 text-gray-800">
<div className="flex items-center gap-2.5 text-brand-muted-1">
<span className="h-4 w-4">
<ProgressBar
value={module.completed_issues}
@ -387,15 +387,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</div>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure defaultOpen>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure>
{({ open }) => (
<div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
>
<div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-gray-500">Progress</span>
<span className="font-medium text-brand-secondary">Progress</span>
{!open && moduleIssues && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{progressPercentage ? `${progressPercentage}%` : ""}
@ -415,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
) : (
<div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} />
<span className="text-xs italic text-gray-500">
<span className="text-xs italic text-brand-secondary">
Invalid date. Please enter valid date.
</span>
</div>
@ -428,7 +428,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div className="flex items-start justify-between gap-4 py-2 text-xs">
<div className="flex items-center gap-1">
<span>
<DocumentIcon className="h-3 w-3 text-gray-500" />
<DocumentIcon className="h-3 w-3 text-brand-secondary" />
</span>
<span>
Pending Issues -{" "}
@ -437,7 +437,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</span>
</div>
<div className="flex items-center gap-3 text-gray-900">
<div className="flex items-center gap-3 text-brand-base">
<div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
<span>Ideal</span>
@ -466,15 +466,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</Disclosure>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure defaultOpen>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
<Disclosure>
{({ open }) => (
<div
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
>
<div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-gray-500">Other Information</span>
<span className="font-medium text-brand-secondary">Other Information</span>
</div>
{module.total_issues > 0 ? (
@ -487,7 +487,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
) : (
<div className="flex items-center gap-1">
<ExclamationIcon height={14} width={14} />
<span className="text-xs italic text-gray-500">
<span className="text-xs italic text-brand-secondary">
No issues found. Please add issue.
</span>
</div>
@ -522,11 +522,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</Disclosure>
</div>
<div className="flex w-full flex-col text-xs border-t border-gray-300 px-6 py-6">
<div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
<div className="flex justify-between items-center w-full">
<h4 className="font-medium text-sm text-gray-500">Links</h4>
<h4 className="font-medium text-sm text-brand-secondary">Links</h4>
<button
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
onClick={() => setModuleLinkModal(true)}
>
<PlusIcon className="h-4 w-4" />

View File

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

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 flex-col gap-6 rounded-[10px] bg-white px-10 py-7 shadow-md">
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
<h2 className="text-2xl font-medium ">Invite co-workers to your team</h2>
<div className="flex flex-col items-start justify-center gap-2.5 ">
<span>Email</span>

View File

@ -67,7 +67,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
return (
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full max-w-xl flex-col gap-12">
<div className="flex flex-col rounded-[10px] bg-white shadow-md">
<div className="flex flex-col rounded-[10px] bg-brand-surface-2 shadow-md">
<div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
<div className="flex flex-col items-start justify-center gap-2.5">
<span>First name</span>
@ -94,7 +94,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
/>
</div>
</div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-10 py-7">
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-10 py-7">
<span>What is your role?</span>
<div className="w-full">
<Controller

View File

@ -65,10 +65,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
};
return (
<div className="grid w-full place-items-center min-h-[490px]">
<div className="grid min-h-[490px] w-full place-items-center">
<Tab.Group
as="div"
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-white shadow-md"
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-surface-2 shadow-md"
>
<Tab.List
as="div"
@ -78,8 +78,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
className={({ selected }) =>
`rounded-3xl border px-4 py-2 outline-none ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>
@ -89,8 +89,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
className={({ selected }) =>
`rounded-3xl border px-5 py-2 outline-none ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
? "border-brand-accent bg-brand-accent text-white"
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
}`
}
>
@ -109,7 +109,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
/>
</Tab.Panel>
<Tab.Panel className="h-full">
<div className="flex flex-col justify-between h-full w-full">
<div className="flex h-full w-full flex-col justify-between">
<div className="divide-y px-4 py-7">
{invitations && invitations.length > 0 ? (
invitations.map((invitation) => (
@ -136,10 +136,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-gray-900">
<div className="text-sm font-medium text-brand-base">
{invitation.workspace.name}
</div>
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Invited by {invitation.workspace.owner.first_name}
</p>
</div>
@ -157,7 +157,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
);
}}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
/>
</div>
</label>

View File

@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -165,7 +165,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<PageForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

View File

@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -115,8 +115,8 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
@ -125,11 +125,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Delete Page
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete Page- {" "}
<span className="font-bold">{data?.name}</span>
? All of the data related to the page will be permanently removed.

View File

@ -61,7 +61,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
return (
<form onSubmit={handleSubmit(handleCreateUpdatePage)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h3 className="text-lg font-medium leading-6 text-brand-base">
{status ? "Update" : "Create"} Page
</h3>
<div className="space-y-3">

View File

@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))}
</ul>
) : viewType === "detailed" ? (
<div className="divide-y rounded-[10px] border border-gray-200 bg-white">
<div className="divide-y rounded-[10px] border border-brand-base bg-brand-surface-2">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
))}
</div>
) : (
<div className="rounded-[10px] border border-gray-200 bg-white">
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}

View File

@ -57,7 +57,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
page.label_details.map((label) => (
<div
key={label.id}
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
style={{
backgroundColor: `${
label?.color && label.color !== "" ? label.color : "#000000"

View File

@ -51,7 +51,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a>
<div className="relative rounded p-4 hover:bg-gray-200">
<div className="relative rounded p-4 hover:bg-brand-surface-1">
<div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-2">
<DocumentTextIcon className="h-4 w-4" />
@ -62,7 +62,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
page.label_details.map((label) => (
<div
key={label.id}
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
style={{
backgroundColor: `${
label?.color && label.color !== "" ? label.color : "#000000"

View File

@ -39,7 +39,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -53,8 +53,8 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
@ -63,11 +63,11 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Remove {data?.email}?
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Are you sure you want to remove member- {" "}
<span className="font-bold">{data?.email}</span>
? They will no longer have access to this project. This action

View File

@ -164,7 +164,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -178,7 +178,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="transform rounded-lg bg-white text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="transform rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<div className="relative h-36 w-full rounded-t-lg bg-gray-300">
{watch("cover_image") !== null && (
<Image

View File

@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -110,7 +110,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
@ -124,7 +124,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
</span>
</div>
<span>
<p className="text-sm leading-7 text-gray-500">
<p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{selectedProject?.name}</span>? All
of the data related to the project will be permanently removed. This action

Some files were not shown because too many files have changed in this diff Show More