github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: calendar theming (#918)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-04-21 15:45:57 +05:30 committed by GitHub
parent 62dc6c2f3f
commit 8f12d3d01b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/app/components/core/calendar-view/calendar.tsx
View File

@ -108,9 +108,9 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
cycleId as string, cycleId as string,
{ {
...params, ...params,
target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat( target_date: `${renderDateFormat(
calendarDateRange.endDate calendarDateRange.startDate
)};before`, )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
group_by: null, group_by: null,
} }
) )
@ -129,9 +129,9 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
moduleId as string, moduleId as string,
{ {
...params, ...params,
target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat( target_date: `${renderDateFormat(
calendarDateRange.endDate calendarDateRange.startDate
)};before`, )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
group_by: null, group_by: null,
} }
) )
@ -227,15 +227,15 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
return calendarIssues ? ( return calendarIssues ? (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<div className="-m-2 h-full overflow-y-auto rounded-lg text-gray-600"> <div className="-m-2 h-full overflow-y-auto rounded-lg text-brand-secondary">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<div className="relative flex h-full w-full items-center justify-start gap-2 text-sm "> <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
<Popover className="flex h-full items-center justify-start rounded-lg"> <Popover className="flex h-full items-center justify-start rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button className={`group flex h-full items-start gap-1 text-gray-800`}> <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
<div className="flex items-center justify-center gap-2 text-2xl font-semibold"> <div className="flex items-center justify-center gap-2 text-2xl font-semibold">
<span className="text-brand-base">{formatDate(currentDate, "Month")}</span>{" "} <span>{formatDate(currentDate, "Month")}</span>{" "}
<span>{formatDate(currentDate, "yyyy")}</span> <span>{formatDate(currentDate, "yyyy")}</span>
</div> </div>
</Popover.Button> </Popover.Button>
@ -256,9 +256,9 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
onClick={() => updateDate(updateDateWithYear(year.label, currentDate))} onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
className={` ${ className={` ${
isSameYear(year.value, currentDate) isSameYear(year.value, currentDate)
? "text-sm font-medium text-gray-800" ? "text-sm font-medium text-brand-base"
: "text-xs text-gray-400 " : "text-xs text-brand-secondary "
} hover:text-sm hover:font-medium hover:text-gray-800`} } hover:text-sm hover:font-medium hover:text-brand-base`}
> >
{year.label} {year.label}
</button> </button>
@ -270,9 +270,9 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
onClick={() => onClick={() =>
updateDate(updateDateWithMonth(month.value, currentDate)) updateDate(updateDateWithMonth(month.value, currentDate))
} }
className={`px-2 py-2 text-xs text-gray-400 hover:font-medium hover:text-gray-800 ${ className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
isSameMonth(month.value, currentDate) isSameMonth(month.value, currentDate)
? "font-medium text-gray-800" ? "font-medium text-brand-base"
: "" : ""
}`} }`}
> >
@ -358,7 +358,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
endDate: lastDayOfWeek(currentDate), endDate: lastDayOfWeek(currentDate),
}); });
}} }}
className="w-52 text-sm text-gray-600" className="w-52 text-sm text-brand-secondary"
> >
<div className="flex w-full max-w-[260px] items-center justify-between gap-2"> <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
<span className="flex items-center gap-2">Monthly View</span> <span className="flex items-center gap-2">Monthly View</span>
@ -377,7 +377,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
endDate: getCurrentWeekEndDate(currentDate), endDate: getCurrentWeekEndDate(currentDate),
}); });
}} }}
className="w-52 text-sm text-gray-600" className="w-52 text-sm text-brand-secondary"
> >
<div className="flex w-full items-center justify-between gap-2"> <div className="flex w-full items-center justify-between gap-2">
<span className="flex items-center gap-2">Weekly View</span> <span className="flex items-center gap-2">Weekly View</span>
@ -388,7 +388,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
/> />
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1 text-sm text-gray-600"> <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1 text-sm text-brand-secondary">
<h4>Show weekends</h4> <h4>Show weekends</h4>
<button <button
type="button" type="button"
@ -420,7 +420,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
{weeks.map((date, index) => ( {weeks.map((date, index) => (
<div <div
key={index} key={index}
className={`flex items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-gray-600 ${ className={`flex items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
!isMonthlyView !isMonthlyView
? showWeekEnds ? showWeekEnds
? (index + 1) % 7 === 0 ? (index + 1) % 7 === 0
@ -486,12 +486,12 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
)} )}
</Draggable> </Draggable>
))} ))}
<div className="flex items-center justify-center p-1.5 text-sm text-gray-600 opacity-0 group-hover:opacity-100"> <div className="flex items-center justify-center p-1.5 text-sm text-brand-secondary opacity-0 group-hover:opacity-100">
<button <button
className="flex items-center justify-center gap-2 text-center" className="flex items-center justify-center gap-2 text-center"
onClick={() => addIssueToDate(date.date)} onClick={() => addIssueToDate(date.date)}
> >
<PlusIcon className="h-4 w-4 text-gray-600" /> <PlusIcon className="h-4 w-4 text-brand-secondary" />
Add new issue Add new issue
</button> </button>
</div> </div>