forked from github/plane
style: list and kanban view theming (#906)
* fix: sidebar workspace dropdown logo * style: list and kanban view theming
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
170b3d6eec
commit
952d35dd79
@ -123,8 +123,8 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-between items-center px-1 ${
|
||||
!isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
|
||||
className={`flex items-center justify-between px-1 ${
|
||||
!isCollapsed ? "flex-col rounded-md bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<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-brand-surface-2 py-1 min-w-[2.5rem] text-xs text-center`}
|
||||
} min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs`}
|
||||
>
|
||||
{groupedByIssues?.[groupTitle].length ?? 0}
|
||||
</span>
|
||||
|
||||
@ -358,7 +358,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
{issue.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 text-brand-secondary"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
@ -389,7 +389,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.link && (
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-gray-500" />
|
||||
@ -399,10 +399,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
</div>
|
||||
)}
|
||||
{properties.attachment_count && (
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
|
||||
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
|
||||
{issue.attachment_count}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@ -12,7 +12,12 @@ import { SelectFilters } from "components/views";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ListBulletIcon,
|
||||
Squares2X2Icon,
|
||||
CalendarDaysIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
// types
|
||||
@ -113,7 +118,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
<>
|
||||
<Popover.Button
|
||||
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"
|
||||
open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
View
|
||||
|
||||
@ -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-brand-base last:border-b-0"
|
||||
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base bg-brand-surface-1 last:border-b-0"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu(true);
|
||||
@ -231,13 +231,15 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
tooltipHeading="Issue ID"
|
||||
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
|
||||
>
|
||||
<span className="flex-shrink-0 text-xs text-gray-400">
|
||||
<span className="flex-shrink-0 text-xs text-brand-secondary">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
|
||||
<span className="text-[0.825rem] text-brand-base">
|
||||
{truncateText(issue.name, 50)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
@ -267,7 +269,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{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 text-brand-secondary px-3 py-1 text-xs shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
@ -276,7 +278,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
{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 text-brand-secondary px-2 py-0.5 text-xs"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
@ -308,8 +310,8 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.link && (
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
|
||||
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
|
||||
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-gray-500" />
|
||||
{issue.link_count}
|
||||
@ -318,8 +320,8 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
</div>
|
||||
)}
|
||||
{properties.attachment_count && (
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
|
||||
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
|
||||
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
|
||||
{issue.attachment_count}
|
||||
|
||||
@ -130,14 +130,10 @@ export const SingleList: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure key={groupTitle} as="div" defaultOpen>
|
||||
<Disclosure as="div" defaultOpen>
|
||||
{({ open }) => (
|
||||
<div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
|
||||
<div
|
||||
className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
|
||||
open ? "rounded-t-[10px]" : "rounded-[10px]"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center justify-between bg-brand-base px-4 py-2.5">
|
||||
<Disclosure.Button>
|
||||
<div className="flex items-center gap-x-3">
|
||||
{selectedGroup !== null && (
|
||||
@ -150,7 +146,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
) : (
|
||||
<h2 className="font-medium leading-5">All Issues</h2>
|
||||
)}
|
||||
<span className="rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-center text-xs text-brand-2">
|
||||
<span className="text-brand-2 min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs">
|
||||
{groupedByIssues[groupTitle as keyof IIssue].length}
|
||||
</span>
|
||||
</div>
|
||||
@ -168,7 +164,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
) : (
|
||||
<CustomMenu
|
||||
customButton={
|
||||
<div className="flex items-center cursor-pointer">
|
||||
<div className="flex cursor-pointer items-center">
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</div>
|
||||
}
|
||||
@ -215,7 +211,9 @@ export const SingleList: React.FC<Props> = ({
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="px-4 py-3 text-sm text-brand-secondary">No issues.</p>
|
||||
<p className="bg-brand-surface-1 px-4 py-2.5 text-sm text-brand-secondary">
|
||||
No issues.
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">Loading...</div>
|
||||
|
||||
@ -106,7 +106,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
|
||||
} 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">
|
||||
<div className="-my-0.5 flex items-center justify-center gap-2">
|
||||
<AssigneesList userIds={issue.assignees} length={3} showLength={false} />
|
||||
<span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
|
||||
</div>
|
||||
|
||||
@ -52,19 +52,19 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-6 w-6 place-items-center rounded ${
|
||||
className={`grid h-6 w-6 place-items-center rounded border border-brand-base ${
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
} items-center shadow-sm ${
|
||||
issue.priority === "urgent"
|
||||
? "bg-red-100 text-red-600 hover:bg-red-100"
|
||||
? "text-red-600"
|
||||
: issue.priority === "high"
|
||||
? "bg-orange-100 text-orange-500 hover:bg-orange-100"
|
||||
? "text-orange-500"
|
||||
: issue.priority === "medium"
|
||||
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
|
||||
? "text-yellow-500"
|
||||
: issue.priority === "low"
|
||||
? "bg-green-100 text-green-500 hover:bg-green-100"
|
||||
: "bg-gray-100"
|
||||
} border-none`}
|
||||
? "bg-green-100 text-green-500"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
|
||||
<span>
|
||||
|
||||
@ -17,18 +17,27 @@ type AvatarProps = {
|
||||
index?: number;
|
||||
height?: string;
|
||||
width?: string;
|
||||
fontSize?: string
|
||||
fontSize?: string;
|
||||
};
|
||||
|
||||
export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", width="20px", fontSize="12px" }) => (
|
||||
<div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
|
||||
height: height,
|
||||
width: width,
|
||||
}}>
|
||||
export const Avatar: React.FC<AvatarProps> = ({
|
||||
user,
|
||||
index,
|
||||
height = "20px",
|
||||
width = "20px",
|
||||
fontSize = "12px",
|
||||
}) => (
|
||||
<div
|
||||
className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}
|
||||
style={{
|
||||
height: height,
|
||||
width: width,
|
||||
}}
|
||||
>
|
||||
{user && user.avatar && user.avatar !== "" ? (
|
||||
<div
|
||||
className={`rounded-full border-2 ${
|
||||
index ? "border-white bg-brand-surface-2" : "border-transparent"
|
||||
index ? "border-brand-surface-1 bg-brand-surface-2" : "border-transparent"
|
||||
}`}
|
||||
style={{
|
||||
height: height,
|
||||
@ -44,11 +53,14 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", widt
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white" style={{
|
||||
height: height,
|
||||
width: width,
|
||||
fontSize: fontSize,
|
||||
}}>
|
||||
<div
|
||||
className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
|
||||
style={{
|
||||
height: height,
|
||||
width: width,
|
||||
fontSize: fontSize,
|
||||
}}
|
||||
>
|
||||
{user?.first_name && user.first_name !== ""
|
||||
? user.first_name.charAt(0)
|
||||
: user?.email?.charAt(0)}
|
||||
|
||||
@ -44,30 +44,75 @@ const CustomMenu = ({
|
||||
customButton,
|
||||
}: Props) => (
|
||||
<Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
|
||||
{customButton ? (
|
||||
<Menu.Button as="div">{customButton}</Menu.Button>
|
||||
) : (
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
{({ open }) => (
|
||||
<>
|
||||
{customButton ? (
|
||||
<Menu.Button as="div">{customButton}</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
<div>
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon
|
||||
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
|
||||
/>
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"} ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
? "text-center"
|
||||
: "text-left"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded-md"
|
||||
: "rounded-md border border-brand-base shadow-sm focus:outline-none"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border border-brand-base shadow-sm focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-skinborder-brand-accent"
|
||||
height === "sm"
|
||||
? "max-h-28"
|
||||
: height === "md"
|
||||
? "max-h-44"
|
||||
: height === "rg"
|
||||
? "max-h-56"
|
||||
: height === "lg"
|
||||
? "max-h-80"
|
||||
: ""
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
@ -77,53 +122,14 @@ const CustomMenu = ({
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "w-full"
|
||||
: "min-w-full"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-1">{children}</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
height === "sm"
|
||||
? "max-h-28"
|
||||
: height === "md"
|
||||
? "max-h-44"
|
||||
: height === "rg"
|
||||
? "max-h-56"
|
||||
: height === "lg"
|
||||
? "max-h-80"
|
||||
: ""
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
: width === "md"
|
||||
? "w-20"
|
||||
: width === "lg"
|
||||
? "w-32"
|
||||
: width === "xl"
|
||||
? "w-48"
|
||||
: "min-w-full"
|
||||
}`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@ -141,7 +147,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
<a
|
||||
className={`${className} ${
|
||||
active ? "bg-brand-surface-1" : ""
|
||||
} inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
|
||||
} hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1`}
|
||||
onClick={close}
|
||||
>
|
||||
{children}
|
||||
@ -152,7 +158,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
type="button"
|
||||
className={`${className} ${
|
||||
active ? "bg-brand-surface-1" : ""
|
||||
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
|
||||
} hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -68,11 +68,11 @@ export const CustomSearchSelect = ({
|
||||
<Combobox.Button as="div">{customButton}</Combobox.Button>
|
||||
) : (
|
||||
<Combobox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
|
||||
className={`flex w-full border border-brand-base ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base"
|
||||
} ${
|
||||
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
@ -132,7 +132,7 @@ export const CustomSearchSelect = ({
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-brand-surface-1" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} text-brand-muted-1 flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
|
||||
}
|
||||
>
|
||||
{({ active, selected }) => (
|
||||
|
||||
@ -51,8 +51,8 @@ const CustomSelect = ({
|
||||
) : (
|
||||
<Listbox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
|
||||
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} ${
|
||||
textAlignment === "right"
|
||||
|
||||
@ -36,7 +36,7 @@ export const CustomDatePicker: React.FC<Props> = ({
|
||||
}}
|
||||
className={`${
|
||||
renderAs === "input"
|
||||
? "block border-brand-base bg-transparent px-3 py-2 text-sm focus:outline-none"
|
||||
? "block px-3 py-2 text-sm focus:outline-none"
|
||||
: renderAs === "button"
|
||||
? `px-3 py-1 text-xs shadow-sm ${
|
||||
disabled ? "" : "hover:bg-brand-surface-1"
|
||||
@ -44,7 +44,7 @@ export const CustomDatePicker: React.FC<Props> = ({
|
||||
: ""
|
||||
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} w-full rounded-md border bg-transparent caret-transparent ${className}`}
|
||||
} w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
|
||||
dateFormat="dd-MM-yyyy"
|
||||
isClearable={isClearable}
|
||||
disabled={disabled}
|
||||
|
||||
@ -41,7 +41,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
||||
<div>
|
||||
<Menu.Button
|
||||
onClick={() => setOpenChildFor(null)}
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
|
||||
open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
@ -83,8 +83,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
active || option.selected ? "bg-brand-surface-1" : "text-brand-base"
|
||||
} flex items-center gap-1 rounded px-1 py-1.5 ${
|
||||
active || option.selected ? "bg-brand-surface-1" : ""
|
||||
} flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
|
||||
direction === "right" ? "justify-between" : ""
|
||||
}`}
|
||||
>
|
||||
@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
||||
onSelect(child.value);
|
||||
}}
|
||||
className={`${
|
||||
child.selected ? "bg-brand-surface-1" : "text-brand-base"
|
||||
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-brand-surface-1`}
|
||||
child.selected ? "bg-brand-surface-1" : ""
|
||||
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-1`}
|
||||
>
|
||||
{child.label}
|
||||
</button>
|
||||
|
||||
@ -160,7 +160,7 @@ export const SelectFilters: React.FC<Props> = ({
|
||||
label: (
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
className="h-2 w-2 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
|
||||
}}
|
||||
|
||||
@ -12,7 +12,6 @@ import Container from "layouts/container";
|
||||
import AppHeader from "layouts/app-layout/app-header";
|
||||
import AppSidebar from "layouts/app-layout/app-sidebar";
|
||||
import SettingsNavbar from "layouts/settings-navbar";
|
||||
import { WorkspaceAuthorizationLayout } from "./workspace-authorization-wrapper";
|
||||
// components
|
||||
import { NotAuthorizedView, JoinProject } from "components/auth-screens";
|
||||
import { CommandPalette } from "components/command-palette";
|
||||
@ -72,7 +71,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
|
||||
<div className="flex h-screen w-full overflow-x-hidden">
|
||||
<AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
|
||||
{loading ? (
|
||||
<div className="h-full w-full grid place-items-center p-4">
|
||||
<div className="grid h-full w-full place-items-center p-4">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<h3 className="text-xl">Loading your project...</h3>
|
||||
<Spinner />
|
||||
@ -81,8 +80,8 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
|
||||
) : error?.status === 401 || error?.status === 403 ? (
|
||||
<JoinProject />
|
||||
) : error?.status === 404 ? (
|
||||
<div className="container h-screen grid place-items-center">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="container grid h-screen place-items-center">
|
||||
<div className="space-y-4 text-center">
|
||||
<p className="text-2xl font-semibold">No such project exist. Create one?</p>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
@ -121,7 +120,11 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
|
||||
className={`flex w-full flex-grow flex-col ${
|
||||
noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
|
||||
} ${
|
||||
bg === "primary" ? "bg-brand-base" : bg === "secondary" ? "bg-brand-surface-1" : "bg-brand-base"
|
||||
bg === "primary"
|
||||
? "bg-brand-base"
|
||||
: bg === "secondary"
|
||||
? "bg-brand-surface-1"
|
||||
: "bg-brand-base"
|
||||
}`}
|
||||
>
|
||||
{settingsLayout && (
|
||||
|
||||
@ -113,12 +113,11 @@
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar-track {
|
||||
height: 7px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #9ca3af;
|
||||
background-color: rgba(var(--color-bg-surface-1));
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar {
|
||||
@ -128,12 +127,11 @@
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar-track {
|
||||
width: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #9ca3af;
|
||||
background-color: rgba(var(--color-bg-surface-1));
|
||||
}
|
||||
/* end scrollbar style */
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
function withOpacity(variableName) {
|
||||
return ({ opacityValue }) => {
|
||||
if (opacityValue !== undefined) {
|
||||
return `rgba(var(${variableName}), ${opacityValue})`;
|
||||
}
|
||||
if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
|
||||
|
||||
return `rgb(var(${variableName}))`;
|
||||
};
|
||||
}
|
||||
@ -19,11 +18,14 @@ module.exports = {
|
||||
secondary: "white",
|
||||
brand: {
|
||||
accent: withOpacity("--color-accent"),
|
||||
base: withOpacity("--color-border"),
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
brand: {
|
||||
base: withOpacity("--color-border"),
|
||||
"surface-1": withOpacity("--color-bg-surface-1"),
|
||||
"surface-2": withOpacity("--color-bg-surface-2"),
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user