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 2023-04-20 18:13:21 +05:30 committed by GitHub
parent 170b3d6eec
commit 952d35dd79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 170 additions and 144 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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}

View File

@ -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 }) => (

View File

@ -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"

View File

@ -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}

View File

@ -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>

View File

@ -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",
}}

View File

@ -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 && (

View File

@ -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 */

View File

@ -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: {