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

chore: changed light mode colors (#913)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-21 10:46:04 +05:30 committed by GitHub
parent f2701a12ea
commit 6f03022f65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,8 +57,8 @@ export const IssuesFilterView: React.FC = () => {
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-1">
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${ className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
issueView === "list" ? "bg-brand-base" : "" issueView === "list" ? "bg-brand-surface-2" : ""
}`} }`}
onClick={() => setIssueView("list")} onClick={() => setIssueView("list")}
> >
@ -66,8 +66,8 @@ export const IssuesFilterView: React.FC = () => {
</button> </button>
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${ className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
issueView === "kanban" ? "bg-brand-base" : "" issueView === "kanban" ? "bg-brand-surface-2" : ""
}`} }`}
onClick={() => setIssueView("kanban")} onClick={() => setIssueView("kanban")}
> >
@ -75,8 +75,8 @@ export const IssuesFilterView: React.FC = () => {
</button> </button>
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${ className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
issueView === "calendar" ? "bg-brand-base" : "" issueView === "calendar" ? "bg-brand-surface-2" : ""
}`} }`}
onClick={() => setIssueView("calendar")} onClick={() => setIssueView("calendar")}
> >
@ -134,7 +134,7 @@ export const IssuesFilterView: React.FC = () => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-brand-surface-2 p-3 shadow-lg"> <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg border border-brand-base bg-brand-surface-1 p-3 shadow-lg">
<div className="relative divide-y-2 divide-brand-base"> <div className="relative divide-y-2 divide-brand-base">
<div className="space-y-4 pb-3 text-xs"> <div className="space-y-4 pb-3 text-xs">
{issueView !== "calendar" && ( {issueView !== "calendar" && (
@ -259,8 +259,8 @@ export const IssuesFilterView: React.FC = () => {
type="button" type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${ className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties] properties[key as keyof Properties]
? "border-theme bg-theme text-white" ? "border-brand-accent bg-brand-accent text-brand-base"
: "border-gray-300" : "border-brand-base"
}`} }`}
onClick={() => setProperties(key as keyof Properties)} onClick={() => setProperties(key as keyof Properties)}
> >

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

@ -399,7 +399,7 @@ export const IssuesView: React.FC<Props> = ({
<> <>
<div <div
className={`flex items-center justify-between gap-2 ${ className={`flex items-center justify-between gap-2 ${
issueView === "list" && areFiltersApplied ? "mt-6 px-8" : "-mt-2" issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
}`} }`}
> >
<FilterList filters={filters} setFilters={setFilters} /> <FilterList filters={filters} setFilters={setFilters} />

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

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

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

@ -133,7 +133,7 @@ export const SingleList: React.FC<Props> = ({
<Disclosure as="div" defaultOpen> <Disclosure as="div" defaultOpen>
{({ open }) => ( {({ open }) => (
<div> <div>
<div className="flex items-center justify-between bg-brand-base px-4 py-2.5"> <div className="flex items-center justify-between px-4 py-2.5">
<Disclosure.Button> <Disclosure.Button>
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
{selectedGroup !== null && ( {selectedGroup !== null && (
@ -211,7 +211,9 @@ export const SingleList: React.FC<Props> = ({
/> />
)) ))
) : ( ) : (
<p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p> <p className="bg-brand-base 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> <div className="flex h-full w-full items-center justify-center">Loading...</div>

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

@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div className="relative pb-1"> <div className="relative pb-1">
{issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? ( {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
<span <span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-base" className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
aria-hidden="true" aria-hidden="true"
/> />
) : null} ) : null}
@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-base ring-white"> <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
{activityItem.field ? ( {activityItem.field ? (
activityDetails[activityItem.field as keyof typeof activityDetails] activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon ?.icon

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

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

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

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

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

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

18
apps/app/components/pages/single-page-block.tsx
View File

@ -301,14 +301,14 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
) : ( ) : (
<div <div
className={`group relative text-brand-secondary ${ className={`group relative text-brand-secondary ${
snapshot.isDragging ? "rounded-[10px] bg-brand-surface-1 p-6 shadow" : "" snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
}`} }`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
> >
<button <button
type="button" type="button"
className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-1 group-hover:!flex" className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<EllipsisVerticalIcon className="h-[18px]" /> <EllipsisVerticalIcon className="h-[18px]" />
@ -321,7 +321,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
}`} }`}
> >
{block.issue && block.sync && ( {block.issue && block.sync && (
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-1 py-1 px-1.5 text-xs"> <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
{isSyncing ? ( {isSyncing ? (
<ArrowPathIcon className="h-3 w-3 animate-spin" /> <ArrowPathIcon className="h-3 w-3 animate-spin" />
) : ( ) : (
@ -332,8 +332,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
)} )}
<button <button
type="button" type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${ className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : "" iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
}`} }`}
onClick={handleAutoGenerateDescription} onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky} disabled={iAmFeelingLucky}
@ -348,7 +348,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button> </button>
<button <button
type="button" type="button"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1" className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
onClick={() => setGptAssistantModal((prevData) => !prevData)} onClick={() => setGptAssistantModal((prevData) => !prevData)}
> >
<SparklesIcon className="h-4 w-4" /> <SparklesIcon className="h-4 w-4" />
@ -356,7 +356,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button> </button>
<button <button
type="button" type="button"
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1" className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
onClick={() => setCreateBlockForm(true)} onClick={() => setCreateBlockForm(true)}
> >
<PencilIcon className="h-3.5 w-3.5" /> <PencilIcon className="h-3.5 w-3.5" />
@ -364,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<CustomMenu <CustomMenu
customButton={ customButton={
<button <button
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1" className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
onClick={() => setIsMenuActive(!isMenuActive)} onClick={() => setIsMenuActive(!isMenuActive)}
> >
<BoltIcon className="h-4.5 w-3.5" /> <BoltIcon className="h-4.5 w-3.5" />
@ -417,7 +417,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
> >
<a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs"> <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 px-1.5 py-1 text-xs">
<LayerDiagonalIcon height="16" width="16" /> <LayerDiagonalIcon height="16" width="16" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id} {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a> </a>

12
apps/app/components/ui/context-menu.tsx
View File

@ -37,13 +37,17 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
}`} }`}
> >
<div <div
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs shadow-lg`} className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-1 p-2 text-xs shadow-lg`}
style={{ style={{
left: `${position.x}px`, left: `${position.x}px`,
top: `${position.y}px`, top: `${position.y}px`,
}} }}
> >
{title && <h4 className="border-b px-1 py-1 pb-2 text-[0.8rem] font-medium">{title}</h4>} {title && (
<h4 className="border-b border-brand-base px-1 py-1 pb-2 text-[0.8rem] font-medium">
{title}
</h4>
)}
{children} {children}
</div> </div>
</div> </div>
@ -71,7 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
{renderAs === "a" ? ( {renderAs === "a" ? (
<Link href={href}> <Link href={href}>
<a <a
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`} className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
> >
<> <>
{Icon && <Icon />} {Icon && <Icon />}
@ -82,7 +86,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
) : ( ) : (
<button <button
type="button" type="button"
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`} className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
onClick={onClick} onClick={onClick}
> >
<> <>

16
apps/app/components/ui/custom-menu.tsx
View File

@ -53,7 +53,7 @@ const CustomMenu = ({
{ellipsis || verticalEllipsis ? ( {ellipsis || verticalEllipsis ? (
<Menu.Button <Menu.Button
type="button" type="button"
className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none" className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-2 focus:outline-none"
> >
<EllipsisHorizontalIcon <EllipsisHorizontalIcon
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
@ -62,7 +62,9 @@ const CustomMenu = ({
) : ( ) : (
<Menu.Button <Menu.Button
type="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"} ${ className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-2 ${
open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
} ${
textAlignment === "right" textAlignment === "right"
? "text-right" ? "text-right"
: textAlignment === "center" : textAlignment === "center"
@ -101,7 +103,7 @@ const CustomMenu = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <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 ${ className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-1 p-1 text-xs shadow-lg focus:outline-none ${
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right" optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
} ${ } ${
height === "sm" height === "sm"
@ -146,8 +148,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
<Link href={href ?? ""}> <Link href={href ?? ""}>
<a <a
className={`${className} ${ className={`${className} ${
active ? "bg-brand-surface-1" : "" active ? "bg-brand-surface-2" : ""
} 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`} } 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-2`}
onClick={close} onClick={close}
> >
{children} {children}
@ -157,8 +159,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
<button <button
type="button" type="button"
className={`${className} ${ className={`${className} ${
active ? "bg-brand-surface-1" : "" active ? "bg-brand-surface-2" : ""
} 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`} } 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-2`}
onClick={onClick} onClick={onClick}
> >
{children} {children}

8
apps/app/components/ui/custom-search-select.tsx
View File

@ -69,7 +69,7 @@ export const CustomSearchSelect = ({
) : ( ) : (
<Combobox.Button <Combobox.Button
className={`flex w-full border border-brand-base ${ className={`flex w-full border border-brand-base ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base" disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
} ${ } ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" 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 ${ } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
@ -97,9 +97,9 @@ export const CustomSearchSelect = ({
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Combobox.Options <Combobox.Options
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${ className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
position === "right" ? "right-0" : "left-0" position === "right" ? "right-0" : "left-0"
} z-10 mt-1 origin-top-right rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`} } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
> >
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2"> <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
<MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" /> <MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
@ -130,7 +130,7 @@ export const CustomSearchSelect = ({
key={option.value} key={option.value}
value={option.value} value={option.value}
className={({ active, selected }) => className={({ active, selected }) =>
`${active || selected ? "bg-brand-surface-1" : ""} ${ `${active || selected ? "bg-brand-surface-2" : ""} ${
selected ? "font-medium" : "" selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary` } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
} }

8
apps/app/components/ui/custom-select.tsx
View File

@ -51,7 +51,7 @@ const CustomSelect = ({
) : ( ) : (
<Listbox.Button <Listbox.Button
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1" 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:outline-none ${ } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${ } ${
@ -78,9 +78,9 @@ const CustomSelect = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options <Listbox.Options
className={`${optionsClassName} absolute ${ className={`${optionsClassName} absolute border border-brand-base ${
position === "right" ? "right-0" : "left-0" position === "right" ? "right-0" : "left-0"
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${ } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${input ? "max-h-48" : ""} ${ } ${input ? "max-h-48" : ""} ${
maxHeight === "lg" maxHeight === "lg"
@ -110,7 +110,7 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
<Listbox.Option <Listbox.Option
value={value} value={value}
className={({ active, selected }) => className={({ active, selected }) =>
`${className} ${active || selected ? "bg-brand-surface-1" : ""} ${ `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${
selected ? "font-medium" : "" selected ? "font-medium" : ""
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary` } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
} }

10
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
> >
<Menu.Items <Menu.Items
static static
className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg focus:outline-none" className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none"
> >
{options.map((option) => ( {options.map((option) => (
<div className="relative p-1" key={option.id}> <div className="relative p-1" key={option.id}>
@ -83,7 +83,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
<> <>
<div <div
className={`${ className={`${
active || option.selected ? "bg-brand-surface-1" : "" active || option.selected ? "bg-brand-surface-2" : ""
} flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${ } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
direction === "right" ? "justify-between" : "" direction === "right" ? "justify-between" : ""
}`} }`}
@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
</Menu.Item> </Menu.Item>
{option.children && option.id === openChildFor && ( {option.children && option.id === openChildFor && (
<div <div
className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${ className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
direction === "left" direction === "left"
? "right-full -translate-x-1" ? "right-full -translate-x-1"
: "left-full translate-x-1" : "left-full translate-x-1"
@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
onSelect(child.value); onSelect(child.value);
}} }}
className={`${ className={`${
child.selected ? "bg-brand-surface-1" : "" child.selected ? "bg-brand-surface-2" : ""
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover: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-2`}
> >
{child.label} {child.label}
</button> </button>

6
apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
View File

@ -70,7 +70,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
if (!workspaceMemberMe && !error) if (!workspaceMemberMe && !error)
return ( return (
<div className="h-screen grid place-items-center p-4"> <div className="grid h-screen place-items-center p-4">
<div className="flex flex-col items-center gap-3 text-center"> <div className="flex flex-col items-center gap-3 text-center">
<h3 className="text-xl">Loading your workspace...</h3> <h3 className="text-xl">Loading your workspace...</h3>
<Spinner /> <Spinner />
@ -83,7 +83,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
// FIXME: show 404 for workspace not workspace member // FIXME: show 404 for workspace not workspace member
if (error?.status === 404) { if (error?.status === 404) {
return ( return (
<div className="container h-screen flex justify-center items-center"> <div className="container flex h-screen items-center justify-center">
<p className="text-2xl font-semibold">No such workspace exist. Create one?</p> <p className="text-2xl font-semibold">No such workspace exist. Create one?</p>
</div> </div>
); );
@ -131,7 +131,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8" noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8"
} ${ } ${
bg === "primary" bg === "primary"
? "bg-brand-base" ? "bg-brand-surface-1"
: bg === "secondary" : bg === "secondary"
? "bg-brand-surface-1" ? "bg-brand-surface-1"
: "bg-brand-base" : "bg-brand-base"

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -142,7 +142,7 @@ const IssueDetailsPage: NextPage = () => {
<div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5"> <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
<div className="rounded-lg"> <div className="rounded-lg">
{issueDetails?.parent && issueDetails.parent !== "" ? ( {issueDetails?.parent && issueDetails.parent !== "" ? (
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-base p-2 text-xs"> <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
<Link <Link
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${ href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issueDetails.parent issueDetails.parent

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -358,7 +358,7 @@ const SinglePage: NextPage = () => {
customButton={ customButton={
<button <button
type="button" type="button"
className="flex items-center gap-1 rounded-md bg-brand-surface-1 p-1.5 text-xs hover:bg-brand-surface-2" className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
> >
<PlusIcon className="h-3.5 w-3.5" /> <PlusIcon className="h-3.5 w-3.5" />
</button> </button>
@ -375,7 +375,7 @@ const SinglePage: NextPage = () => {
customButton={ customButton={
<button <button
type="button" type="button"
className="flex items-center gap-1 rounded-md bg-brand-surface-1 px-3 py-1.5 text-xs hover:bg-brand-surface-2" className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />
Add label Add label
@ -515,7 +515,7 @@ const SinglePage: NextPage = () => {
{!createBlockForm && ( {!createBlockForm && (
<button <button
type="button" type="button"
className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-1" className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
onClick={handleNewBlock} onClick={handleNewBlock}
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />

4
apps/app/styles/globals.css
View File

@ -30,9 +30,9 @@
} }
[data-theme="light"] { [data-theme="light"] {
--color-bg-base: 243, 244, 246; --color-bg-base: 255, 255, 255;
--color-bg-surface-1: 249, 250, 251; --color-bg-surface-1: 249, 250, 251;
--color-bg-surface-2: 255, 255, 255; --color-bg-surface-2: 243, 244, 246;
--color-border: 229, 231, 235; --color-border: 229, 231, 235;
--color-bg-sidebar: 255, 255, 255; --color-bg-sidebar: 255, 255, 255;