binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-371]: Implemented react-day-picker for date selections (#3679)

Browse source 
* dev: initialize new date picker

* style: selected date focus state

* chore: replace custom date filter modal components

* chore: replaced inbox snooze popover datepicker

* chore: replaced the custom date picker

* style: date range picker designed

* chore: date range picker implemented throughout the platform

* chore: updated tab indices

* chore: range-picker in the issue layouts

* chore: passed due date color

* chore: removed range picker from issue dates
This commit is contained in:
Aaryan Khandelwal 2024-02-21 19:55:18 +05:30 • committed by GitHub
parent e86d2ba743
commit b1592adc66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 1018 additions and 998 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/components/notifications/select-snooze-till-modal.tsx
View file

@ -1,6 +1,7 @@
import { Fragment, FC } from "react";
import { useRouter } from "next/router";
import { useForm, Controller } from "react-hook-form";
import { DateDropdown } from "components/dropdowns";
import { Transition, Dialog } from "@headlessui/react";
import { X } from "lucide-react";
// constants
@ -9,7 +10,6 @@ import { allTimeIn30MinutesInterval12HoursFormat } from "constants/notification"
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect } from "@plane/ui";
import { CustomDatePicker } from "components/ui";
// types
import type { IUserNotification } from "@plane/types";
@ -169,17 +169,18 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
control={control}
rules={{ required: "Please select a date" }}
render={({ field: { value, onChange } }) => (
<CustomDatePicker
placeholder="Select date"
<DateDropdown
value={value}
placeholder="Select date"
onChange={(val) => {
setValue("time", null);
onChange(val);
}}
className="w-full rounded-md border border-custom-border-300 bg-custom-background-100 px-3 py-2 !text-sm text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none"
wrapperClassName="w-full"
noBorder
minDate={new Date()}
buttonVariant="border-with-text"
buttonContainerClassName="w-full text-left"
buttonClassName="border-custom-border-300 px-3 py-2.5"
hideIcon
/>
)}
/>
@ -213,11 +214,10 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
onClick={() => {
setValue("period", "AM");
}}
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
watch("period") === "AM"
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${watch("period") === "AM"
? "bg-custom-primary-100/90 text-custom-primary-0"
: "bg-custom-background-80"
}`}
}`}
>
AM
</div>
@ -225,11 +225,10 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
onClick={() => {
setValue("period", "PM");
}}
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
watch("period") === "PM"
className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${watch("period") === "PM"
? "bg-custom-primary-100/90 text-custom-primary-0"
: "bg-custom-background-80"
}`}
}`}
>
PM
</div>