Skip to content

Commit

Permalink
chore: changed light mode colors (#913)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 committed Apr 21, 2023
1 parent f2701a1 commit 6f03022
Show file tree
Hide file tree
Showing 18 changed files with 68 additions and 60 deletions.
18 changes: 9 additions & 9 deletions apps/app/components/core/issues-view-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,26 +57,26 @@ 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-brand-surface-1 ${
issueView === "list" ? "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 === "list" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setIssueView("list")}
>
<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-brand-base ${
issueView === "kanban" ? "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-surface-2" : ""
}`}
onClick={() => setIssueView("kanban")}
>
<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-brand-base ${
issueView === "calendar" ? "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-surface-2" : ""
}`}
onClick={() => setIssueView("calendar")}
>
Expand Down Expand Up @@ -134,7 +134,7 @@ 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-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="space-y-4 pb-3 text-xs">
{issueView !== "calendar" && (
Expand Down Expand Up @@ -259,8 +259,8 @@ export const IssuesFilterView: React.FC = () => {
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-theme bg-theme text-white"
: "border-gray-300"
? "border-brand-accent bg-brand-accent text-brand-base"
: "border-brand-base"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/core/issues-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ export const IssuesView: React.FC<Props> = ({
<>
<div
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} />
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/core/list-view/single-issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a>
</ContextMenu>
<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) => {
e.preventDefault();
setContextMenu(true);
Expand Down
6 changes: 4 additions & 2 deletions apps/app/components/core/list-view/single-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export const SingleList: React.FC<Props> = ({
<Disclosure as="div" defaultOpen>
{({ open }) => (
<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>
<div className="flex items-center gap-x-3">
{selectedGroup !== null && (
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/issues/activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,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-brand-base"
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
aria-hidden="true"
/>
) : null}
Expand All @@ -311,7 +311,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-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 ? (
activityDetails[activityItem.field as keyof typeof activityDetails]
?.icon
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/sidebar-select/blocked.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
<button
type="button"
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`}
onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed}
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/sidebar-select/blocker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
<button
type="button"
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`}
onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed}
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/sidebar-select/parent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
<button
type="button"
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`}
onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed}
Expand Down
18 changes: 9 additions & 9 deletions apps/app/components/pages/single-page-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,14 +301,14 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
) : (
<div
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}
{...provided.draggableProps}
>
<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}
>
<EllipsisVerticalIcon className="h-[18px]" />
Expand All @@ -321,7 +321,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
}`}
>
{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 ? (
<ArrowPathIcon className="h-3 w-3 animate-spin" />
) : (
Expand All @@ -332,8 +332,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
)}
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
iAmFeelingLucky ? "cursor-wait 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-2" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
Expand All @@ -348,23 +348,23 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
</button>
<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)}
>
<SparklesIcon className="h-4 w-4" />
AI
</button>
<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)}
>
<PencilIcon className="h-3.5 w-3.5" />
</button>
<CustomMenu
customButton={
<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)}
>
<BoltIcon className="h-4.5 w-3.5" />
Expand Down Expand Up @@ -417,7 +417,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
<Link
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" />
{projectDetails?.identifier}-{block.issue_detail?.sequence_id}
</a>
Expand Down
12 changes: 8 additions & 4 deletions apps/app/components/ui/context-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,17 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
}`}
>
<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={{
left: `${position.x}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}
</div>
</div>
Expand Down Expand Up @@ -71,7 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
{renderAs === "a" ? (
<Link href={href}>
<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 />}
Expand All @@ -82,7 +86,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
) : (
<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}
>
<>
Expand Down
16 changes: 9 additions & 7 deletions apps/app/components/ui/custom-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const CustomMenu = ({
{ellipsis || verticalEllipsis ? (
<Menu.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
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
Expand All @@ -62,7 +62,9 @@ const CustomMenu = ({
) : (
<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"} ${
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"
? "text-right"
: textAlignment === "center"
Expand Down Expand Up @@ -101,7 +103,7 @@ const CustomMenu = ({
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 ${
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"
} ${
height === "sm"
Expand Down Expand Up @@ -146,8 +148,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
<Link href={href ?? ""}>
<a
className={`${className} ${
active ? "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-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-2`}
onClick={close}
>
{children}
Expand All @@ -157,8 +159,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
<button
type="button"
className={`${className} ${
active ? "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-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-2`}
onClick={onClick}
>
{children}
Expand Down
8 changes: 4 additions & 4 deletions apps/app/components/ui/custom-search-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const CustomSearchSelect = ({
) : (
<Combobox.Button
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"
} items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
Expand Down Expand Up @@ -97,9 +97,9 @@ export const CustomSearchSelect = ({
leaveTo="opacity-0 translate-y-1"
>
<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"
} 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">
<MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
Expand Down Expand Up @@ -130,7 +130,7 @@ export const CustomSearchSelect = ({
key={option.value}
value={option.value}
className={({ active, selected }) =>
`${active || selected ? "bg-brand-surface-1" : ""} ${
`${active || selected ? "bg-brand-surface-2" : ""} ${
selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
}
Expand Down

1 comment on commit 6f03022

@vercel
Copy link

@vercel vercel bot commented on 6f03022 Apr 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-caravel.vercel.app
plane-dev.vercel.app
plane-dev-git-develop-caravel.vercel.app

Please sign in to comment.