mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: updated text and background colors (#1496)
* fix: custom colors opacity * chore: update text colors for dark mode * fix: dropdown text colors, datepicker bg color * chore: update text colors * chore: updated primary bg color
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
7554988164
commit
253edebb93
@ -238,8 +238,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<h5 className="break-words">
|
||||
{project.name}
|
||||
<h5 className="flex items-center gap-1">
|
||||
<p className="break-words">{project.name}</p>
|
||||
<span className="text-custom-text-200 text-xs ml-1">
|
||||
({project.identifier})
|
||||
</span>
|
||||
|
||||
@ -334,9 +334,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5 className="text-sm group-hover:text-custom-primary break-words line-clamp-3">
|
||||
{issue.name}
|
||||
</h5>
|
||||
<h5 className="text-sm break-words line-clamp-3">{issue.name}</h5>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">
|
||||
|
||||
@ -23,10 +23,33 @@ import {
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
|
||||
// types
|
||||
import { Properties } from "types";
|
||||
import { Properties, TIssueViewOptions } from "types";
|
||||
// constants
|
||||
import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
|
||||
|
||||
const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
|
||||
{
|
||||
type: "list",
|
||||
icon: <ListBulletIcon className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
type: "kanban",
|
||||
icon: <Squares2X2Icon className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
type: "calendar",
|
||||
icon: <CalendarDaysIcon className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
type: "spreadsheet",
|
||||
icon: <Icon iconName="table_chart" />,
|
||||
},
|
||||
{
|
||||
type: "gantt_chart",
|
||||
icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
|
||||
},
|
||||
];
|
||||
|
||||
export const IssuesFilterView: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, viewId } = router.query;
|
||||
@ -56,53 +79,20 @@ export const IssuesFilterView: React.FC = () => {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<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-custom-sidebar-background-80 ${
|
||||
issueView === "list" ? "bg-custom-sidebar-background-80" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("list")}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4 text-custom-sidebar-text-200" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
|
||||
issueView === "kanban" ? "bg-custom-sidebar-background-80" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("kanban")}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4 text-custom-sidebar-text-200" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
|
||||
issueView === "calendar" ? "bg-custom-sidebar-background-80" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("calendar")}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4 text-custom-sidebar-text-200" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
|
||||
issueView === "spreadsheet" ? "bg-custom-sidebar-background-80" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("spreadsheet")}
|
||||
>
|
||||
<Icon iconName="table_chart" className="text-custom-sidebar-text-200" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
|
||||
issueView === "gantt_chart" ? "bg-custom-sidebar-background-80" : ""
|
||||
}`}
|
||||
onClick={() => setIssueView("gantt_chart")}
|
||||
>
|
||||
<span className="material-symbols-rounded text-custom-sidebar-text-200 text-[18px] rotate-90">
|
||||
waterfall_chart
|
||||
</span>
|
||||
</button>
|
||||
{issueViewOptions.map((option) => (
|
||||
<button
|
||||
key={option.type}
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
|
||||
issueView === option.type
|
||||
? "bg-custom-sidebar-background-80"
|
||||
: "text-custom-sidebar-text-200"
|
||||
}`}
|
||||
onClick={() => setIssueView(option.type)}
|
||||
>
|
||||
{option.icon}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<SelectFilters
|
||||
filters={filters}
|
||||
@ -146,7 +136,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none ${
|
||||
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
|
||||
open
|
||||
? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
|
||||
: "text-custom-sidebar-text-200"
|
||||
|
||||
@ -279,11 +279,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
|
||||
e.preventDefault();
|
||||
handleEditCycle();
|
||||
}}
|
||||
className="flex cursor-pointer items-center rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-90"
|
||||
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
|
||||
>
|
||||
<span>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// hooks
|
||||
@ -157,7 +156,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
<a className="w-full">
|
||||
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<span className="flex items-start gap-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<ContrastIcon
|
||||
className="mt-1 h-5 w-5"
|
||||
color={`${
|
||||
@ -179,15 +178,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
position="top-left"
|
||||
>
|
||||
<h3 className="break-words w-full text-base font-semibold">
|
||||
{truncateText(cycle.name, 70)}
|
||||
{truncateText(cycle.name, 60)}
|
||||
</h3>
|
||||
</Tooltip>
|
||||
<p className="mt-2 text-custom-text-200 break-words w-full">
|
||||
{cycle.description}
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
<span className="flex items-center gap-4 capitalize">
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex items-center gap-4">
|
||||
<span
|
||||
className={`rounded-full px-1.5 py-0.5
|
||||
${
|
||||
@ -203,14 +202,14 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
}`}
|
||||
>
|
||||
{cycleStatus === "current" ? (
|
||||
<span className="flex gap-1">
|
||||
<span className="flex gap-1 whitespace-nowrap">
|
||||
<PersonRunningIcon className="h-4 w-4" />
|
||||
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
|
||||
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
|
||||
</span>
|
||||
) : cycleStatus === "upcoming" ? (
|
||||
<span className="flex gap-1">
|
||||
<AlarmClockIcon className="h-4 w-4" />
|
||||
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
|
||||
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
|
||||
</span>
|
||||
) : cycleStatus === "completed" ? (
|
||||
<span className="flex items-center gap-1">
|
||||
@ -236,12 +235,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
|
||||
{cycleStatus !== "draft" && (
|
||||
<div className="flex items-center justify-start gap-2 text-custom-text-200">
|
||||
<div className="flex items-start gap-1 ">
|
||||
<div className="flex items-start gap-1 whitespace-nowrap">
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
<span>{renderShortDateWithYearFormat(startDate)}</span>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-4 w-4" />
|
||||
<div className="flex items-start gap-1 ">
|
||||
<div className="flex items-start gap-1 whitespace-nowrap">
|
||||
<TargetIcon className="h-4 w-4" />
|
||||
<span>{renderShortDateWithYearFormat(endDate)}</span>
|
||||
</div>
|
||||
@ -287,7 +286,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
}`}
|
||||
>
|
||||
{cycleStatus === "current" ? (
|
||||
<span className="flex gap-1">
|
||||
<span className="flex gap-1 whitespace-nowrap">
|
||||
{cycle.total_issues > 0 ? (
|
||||
<>
|
||||
<RadialProgressBar
|
||||
@ -380,7 +379,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -72,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({
|
||||
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
|
||||
{estimate.name}
|
||||
{projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
|
||||
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
|
||||
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
|
||||
In use
|
||||
</span>
|
||||
)}
|
||||
@ -83,7 +83,10 @@ export const SingleEstimate: React.FC<Props> = ({
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
|
||||
<SecondaryButton onClick={handleUseEstimate} className="py-1">
|
||||
<SecondaryButton
|
||||
onClick={handleUseEstimate}
|
||||
className="!py-1 text-custom-text-200 hover:text-custom-text-100"
|
||||
>
|
||||
Use
|
||||
</SecondaryButton>
|
||||
)}
|
||||
|
||||
@ -8,6 +8,7 @@ import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date
|
||||
import trackEventServices from "services/track-event.service";
|
||||
// types
|
||||
import { ICurrentUserResponse, IIssue } from "types";
|
||||
import useIssuesView from "hooks/use-issues-view";
|
||||
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
@ -29,6 +30,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { issueView } = useIssuesView();
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
tooltipHeading="Due Date"
|
||||
@ -71,7 +74,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
|
||||
user
|
||||
);
|
||||
}}
|
||||
className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
|
||||
className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
|
||||
issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
|
||||
}`}
|
||||
noBorder={noBorder}
|
||||
disabled={isNotAllowed}
|
||||
/>
|
||||
|
||||
@ -71,9 +71,15 @@ export const ViewLabelSelect: React.FC<Props> = ({
|
||||
position={tooltipPosition}
|
||||
tooltipHeading="Labels"
|
||||
tooltipContent={
|
||||
issue.label_details.length > 0
|
||||
? issue.label_details.map((label) => label.name ?? "").join(", ")
|
||||
: "No Label"
|
||||
issue.labels.length > 0
|
||||
? issue.labels
|
||||
.map((labelId) => {
|
||||
const label = issueLabels?.find((l) => l.id === labelId);
|
||||
|
||||
return label?.name ?? "";
|
||||
})
|
||||
.join(", ")
|
||||
: "No label"
|
||||
}
|
||||
>
|
||||
<div
|
||||
@ -81,20 +87,23 @@ export const ViewLabelSelect: React.FC<Props> = ({
|
||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} items-center gap-2 text-custom-text-200`}
|
||||
>
|
||||
{issue.label_details.length > 0 ? (
|
||||
{issue.labels.length > 0 ? (
|
||||
<>
|
||||
{issue.label_details.slice(0, 4).map((label, index) => (
|
||||
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
|
||||
<span
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
|
||||
{issue.labels.slice(0, 4).map((labelId, index) => {
|
||||
const label = issueLabels?.find((l) => l.id === labelId);
|
||||
|
||||
return (
|
||||
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
|
||||
<span
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
|
||||
style={{
|
||||
backgroundColor: label?.color ?? "#000000",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@ -10,7 +10,6 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import { ICurrentUserResponse, IIssue } from "types";
|
||||
@ -67,7 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
|
||||
const stateLabel = (
|
||||
<Tooltip
|
||||
tooltipHeading="State"
|
||||
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
|
||||
tooltipContent={selectedOption?.name ?? ""}
|
||||
position={tooltipPosition}
|
||||
>
|
||||
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
|
||||
|
||||
@ -185,12 +185,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
|
||||
<div className="flex items-start gap-1">
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
<span>Start:</span>
|
||||
<span>{renderShortDateWithYearFormat(startDate)}</span>
|
||||
<span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-1">
|
||||
<TargetIcon className="h-4 w-4" />
|
||||
<span>End:</span>
|
||||
<span>{renderShortDateWithYearFormat(endDate)}</span>
|
||||
<span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -184,7 +184,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="transform rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
|
||||
{watch("cover_image") !== null && (
|
||||
<img
|
||||
|
||||
@ -111,9 +111,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
|
||||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
|
||||
<h5 className={`overflow-hidden text-sm ${open ? "" : "text-custom-text-200"}`}>
|
||||
{truncateText(project?.name, 20)}
|
||||
</p>
|
||||
</h5>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
|
||||
@ -59,7 +59,7 @@ const CustomMenu = ({
|
||||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
|
||||
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon
|
||||
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
|
||||
|
||||
@ -148,8 +148,8 @@ export const CustomSearchSelect = ({
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-custom-background-80" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
|
||||
selected ? "text-custom-text-100" : "text-custom-text-200"
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
|
||||
}
|
||||
>
|
||||
{({ active, selected }) => (
|
||||
@ -157,7 +157,7 @@ export const CustomSearchSelect = ({
|
||||
{option.content}
|
||||
{multiple ? (
|
||||
<div
|
||||
className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
|
||||
className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
|
||||
active || selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -118,8 +118,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
|
||||
value={value}
|
||||
className={({ active, selected }) =>
|
||||
`${className} ${active || selected ? "bg-custom-background-80" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200`
|
||||
selected ? "text-custom-text-100" : "text-custom-text-200"
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
|
||||
@ -42,13 +42,13 @@ export const CustomDatePicker: React.FC<Props> = ({
|
||||
: renderAs === "button"
|
||||
? `px-2 py-1 text-xs shadow-sm ${
|
||||
disabled ? "" : "hover:bg-custom-background-80"
|
||||
} duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
|
||||
} duration-300`
|
||||
: ""
|
||||
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} ${
|
||||
noBorder ? "" : "border border-custom-border-100"
|
||||
} w-full rounded-md bg-transparent caret-transparent ${className}`}
|
||||
} w-full rounded-md caret-transparent outline-none ${className}`}
|
||||
dateFormat="MMM dd, yyyy"
|
||||
isClearable={isClearable}
|
||||
disabled={disabled}
|
||||
|
||||
@ -64,13 +64,13 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
|
||||
<Icon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-custom-text-100">{title}</div>
|
||||
{description ? <div className="text-sm text-custom-text-200">{description}</div> : null}
|
||||
<div className="min-w-0 flex-1 text-custom-text-200">
|
||||
<div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
|
||||
{description ? <div className="text-sm">{description}</div> : null}
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon
|
||||
className="h-5 w-5 text-custom-text-100 group-hover:text-custom-text-200"
|
||||
className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -43,7 +43,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-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
|
||||
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -108,9 +108,9 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
</div>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p>
|
||||
<h4 className="text-custom-text-100">
|
||||
{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
|
||||
</p>
|
||||
</h4>
|
||||
)}
|
||||
</div>
|
||||
</Menu.Button>
|
||||
@ -166,7 +166,13 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
)}
|
||||
</span>
|
||||
|
||||
<h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
|
||||
<h5
|
||||
className={`text-sm ${
|
||||
workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
{truncateText(workspace.name, 18)}
|
||||
</h5>
|
||||
</div>
|
||||
<span className="p-1">
|
||||
<CheckIcon
|
||||
|
||||
@ -73,6 +73,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
|
||||
...prevData[issueIndex],
|
||||
...formData,
|
||||
assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
|
||||
labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
|
||||
};
|
||||
|
||||
prevData.splice(issueIndex, 1, updatedIssue);
|
||||
@ -90,6 +91,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
|
||||
...oldGroup[issueIndex],
|
||||
...formData,
|
||||
assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
|
||||
labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
|
||||
};
|
||||
|
||||
if (selectedGroupBy !== Object.keys(formData)[0])
|
||||
|
||||
@ -140,7 +140,7 @@ const SingleCycle: React.FC = () => {
|
||||
<IssuesFilterView />
|
||||
<SecondaryButton
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="!py-1.5 font-normal rounded-md text-custom-text-200"
|
||||
className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
|
||||
outline
|
||||
>
|
||||
Analytics
|
||||
|
||||
@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
|
||||
<IssuesFilterView />
|
||||
<SecondaryButton
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
|
||||
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
|
||||
outline
|
||||
>
|
||||
Analytics
|
||||
@ -72,7 +72,7 @@ const ProjectIssues: NextPage = () => {
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
|
||||
<a>
|
||||
<SecondaryButton
|
||||
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
|
||||
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
|
||||
outline
|
||||
>
|
||||
<span>Inbox</span>
|
||||
|
||||
@ -144,7 +144,7 @@ const SingleModule: React.FC = () => {
|
||||
<IssuesFilterView />
|
||||
<SecondaryButton
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="!py-1.5 font-normal rounded-md text-custom-text-200"
|
||||
className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
|
||||
outline
|
||||
>
|
||||
Analytics
|
||||
|
||||
@ -122,14 +122,14 @@ const EstimatesSettings: NextPage = () => {
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="h-full flex flex-col p-8 overflow-hidden">
|
||||
<SettingsHeader />
|
||||
<section className="flex items-center justify-between">
|
||||
<h3 className="text-2xl font-semibold">Estimates</h3>
|
||||
<div className="col-span-12 space-y-5 sm:col-span-7">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="flex cursor-pointer items-center gap-2 text-theme"
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
|
||||
onClick={() => {
|
||||
setEstimateToUpdate(undefined);
|
||||
setEstimateFormOpen(true);
|
||||
@ -137,7 +137,7 @@ const EstimatesSettings: NextPage = () => {
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Create New Estimate
|
||||
</span>
|
||||
</div>
|
||||
{projectDetails?.estimate && (
|
||||
<SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
|
||||
)}
|
||||
@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
|
||||
</section>
|
||||
{estimatesList ? (
|
||||
estimatesList.length > 0 ? (
|
||||
<section className="mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6">
|
||||
<section className="h-full mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6 overflow-y-auto">
|
||||
{estimatesList.map((estimate) => (
|
||||
<SingleEstimate
|
||||
key={estimate.id}
|
||||
@ -158,7 +158,7 @@ const EstimatesSettings: NextPage = () => {
|
||||
))}
|
||||
</section>
|
||||
) : (
|
||||
<div className="mt-5">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptyState
|
||||
type="estimate"
|
||||
title="Create New Estimate"
|
||||
|
||||
@ -188,7 +188,7 @@ const FeaturesSettings: NextPage = () => {
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{feature.icon}
|
||||
<div>
|
||||
<div className="">
|
||||
<h4 className="text-lg font-semibold">{feature.title}</h4>
|
||||
<p className="text-sm text-custom-text-200">{feature.description}</p>
|
||||
</div>
|
||||
@ -219,11 +219,21 @@ const FeaturesSettings: NextPage = () => {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="https://plane.so/" target="_blank" rel="noreferrer">
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
<a
|
||||
href="https://plane.so/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-custom-text-100"
|
||||
>
|
||||
<SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
|
||||
</a>
|
||||
<a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
|
||||
<a
|
||||
href="https://github.com/makeplane/plane"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-custom-text-100"
|
||||
>
|
||||
<SecondaryButton outline>Star us on GitHub</SecondaryButton>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -58,11 +58,11 @@ const ProjectIntegrations: NextPage = () => {
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="h-full flex flex-col p-8 overflow-hidden">
|
||||
<SettingsHeader />
|
||||
{workspaceIntegrations ? (
|
||||
workspaceIntegrations.length > 0 ? (
|
||||
<section className="space-y-8">
|
||||
<section className="space-y-8 overflow-y-auto">
|
||||
<IntegrationAndImportExportBanner bannerName="Integrations" />
|
||||
<div className="space-y-5">
|
||||
{workspaceIntegrations.map((integration) => (
|
||||
|
||||
@ -85,10 +85,10 @@ const StatesSettings: NextPage = () => {
|
||||
return (
|
||||
<div key={key}>
|
||||
<div className="mb-2 flex w-full justify-between">
|
||||
<h4 className="font-medium capitalize">{key}</h4>
|
||||
<h4 className="text-custom-text-200 capitalize">{key}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-custom-primary outline-none"
|
||||
className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
|
||||
onClick={() => setActiveGroup(key as keyof StateGroup)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
|
||||
@ -88,26 +88,26 @@
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark !important;
|
||||
|
||||
--color-background-100: 0, 0, 0; /* primary bg */
|
||||
--color-background-100: 7, 7, 7; /* primary bg */
|
||||
--color-background-90: 11, 11, 11; /* secondary bg */
|
||||
--color-background-80: 23, 23, 23; /* tertiary bg */
|
||||
|
||||
--color-text-100: 255, 255, 255; /* primary text */
|
||||
--color-text-200: 82, 82, 82; /* secondary text */
|
||||
--color-text-300: 115, 115, 115; /* tertiary text */
|
||||
--color-text-100: 241, 241, 241; /* primary text */
|
||||
--color-text-200: 115, 115, 115; /* secondary text */
|
||||
--color-text-300: 163, 163, 163; /* tertiary text */
|
||||
|
||||
--color-border-100: 34, 34, 34; /* subtle border= 1 */
|
||||
--color-border-200: 38, 38, 38; /* subtle border- 2 */
|
||||
--color-border-300: 46, 46, 46; /* strong border- 1 */
|
||||
--color-border-400: 58, 58, 58; /* strong border- 2 */
|
||||
|
||||
--color-sidebar-background-100: 0, 0, 0; /* primary sidebar bg */
|
||||
--color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
|
||||
--color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
|
||||
--color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
|
||||
|
||||
--color-sidebar-text-100: 255, 255, 255; /* primary sidebar text */
|
||||
--color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
|
||||
--color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
|
||||
--color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
|
||||
--color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
|
||||
--color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
|
||||
|
||||
--color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
|
||||
--color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
|
||||
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
|
||||
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user