From 4de3db2624520ddd0186156e4e2e1cd3bcfdb432 Mon Sep 17 00:00:00 2001
From: vineetk13 <vineetkme.99@gmail.com>
Date: Mon, 13 Jan 2025 20:54:12 +0530
Subject: [PATCH 1/4] feat: react-day-picker upgrade and caption dropdowns

---
 .../core/filters/date-filter-modal.tsx        |  10 +-
 web/core/components/dropdowns/date-range.tsx  |   8 +-
 web/core/components/dropdowns/date.tsx        |   8 +-
 .../inbox/modals/snooze-issue-modal.tsx       |   7 +-
 web/package.json                              |   2 +-
 web/styles/react-day-picker.css               | 318 +++++++-----------
 6 files changed, 148 insertions(+), 205 deletions(-)

diff --git a/web/core/components/core/filters/date-filter-modal.tsx b/web/core/components/core/filters/date-filter-modal.tsx
index 9fa63ad6450..1ae7ea35100 100644
--- a/web/core/components/core/filters/date-filter-modal.tsx
+++ b/web/core/components/core/filters/date-filter-modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Fragment } from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Controller, useForm } from "react-hook-form";
 
 import { X } from "lucide-react";
@@ -49,6 +49,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const date1 = getDate(watch("date1"));
   const date2 = getDate(watch("date1"));
 
+  const defaultClassNames = getDefaultClassNames();
+
   const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
 
   return (
@@ -97,6 +99,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         const date2Value = getDate(watch("date2"));
                         return (
                           <DayPicker
+                            classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                            captionLayout="dropdown"
                             selected={dateValue}
                             defaultMonth={dateValue}
                             onSelect={(date) => {
@@ -105,7 +109,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                             }}
                             mode="single"
                             disabled={date2Value ? [{ after: date2Value }] : undefined}
-                            className="border border-custom-border-200 p-3 rounded-md"
                           />
                         );
                       }}
@@ -119,6 +122,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                           const date1Value = getDate(watch("date1"));
                           return (
                             <DayPicker
+                              classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                              captionLayout="dropdown"
                               selected={dateValue}
                               defaultMonth={dateValue}
                               onSelect={(date) => {
@@ -127,7 +132,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                               }}
                               mode="single"
                               disabled={date1Value ? [{ before: date1Value }] : undefined}
-                              className="border border-custom-border-200 p-3 rounded-md"
                             />
                           );
                         }}
diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 453215e9947..aa90d887b42 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
-import { DateRange, DayPicker, Matcher } from "react-day-picker";
+import { DateRange, DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { ArrowRight, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -133,6 +133,8 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     setDateRange(value);
   }, [value]);
 
+  const defaultClassNames = getDefaultClassNames();
+
   const comboButton = (
     <button
       ref={setReferenceElement}
@@ -198,12 +200,14 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3"
+            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
             <DayPicker
+              captionLayout="dropdown"
+              classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
               selected={dateRange}
               onSelect={(val) => {
                 // if both the dates are not required, immediately call onSelect
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index bca7ed52c80..8035825b0c0 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { DayPicker, Matcher } from "react-day-picker";
+import { DayPicker, Matcher, getDefaultClassNames } from "react-day-picker";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
@@ -80,6 +80,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
 
   const isDateSelected = value && value.toString().trim() !== "";
 
+  const defaultClassNames = getDefaultClassNames();
+
   const onOpen = () => {
     if (referenceElement) referenceElement.focus();
   };
@@ -166,7 +168,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg overflow-hidden z-20",
                 optionsClassName
               )}
               ref={setPopperElement}
@@ -174,6 +176,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
               {...attributes.popper}
             >
               <DayPicker
+                captionLayout="dropdown"
+                classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
                 onSelect={(date) => {
diff --git a/web/core/components/inbox/modals/snooze-issue-modal.tsx b/web/core/components/inbox/modals/snooze-issue-modal.tsx
index 02134d56635..8d6931438f5 100644
--- a/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, Fragment, useState } from "react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@plane/ui";
@@ -18,6 +18,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
   // states
   const [date, setDate] = useState(value || new Date());
 
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -46,6 +48,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
               <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <div className="flex h-full w-full flex-col gap-y-1">
                   <DayPicker
+                    captionLayout="dropdown"
+                    classNames={{root: `${defaultClassNames.root} rounded-md border border-custom-border-200 p-3`}}
                     selected={date ? new Date(date) : undefined}
                     defaultMonth={date ? new Date(date) : undefined}
                     onSelect={(date) => {
@@ -53,7 +57,6 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
                       setDate(date);
                     }}
                     mode="single"
-                    className="rounded-md border border-custom-border-200 p-3"
                     disabled={[
                       {
                         before: new Date(),
diff --git a/web/package.json b/web/package.json
index 5d2ff54e983..3537563eeb1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -55,7 +55,7 @@
     "posthog-js": "^1.131.3",
     "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-day-picker": "^8.10.0",
+    "react-day-picker": "^9.5.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
diff --git a/web/styles/react-day-picker.css b/web/styles/react-day-picker.css
index 4532d3a0324..a0c67c877cd 100644
--- a/web/styles/react-day-picker.css
+++ b/web/styles/react-day-picker.css
@@ -1,4 +1,4 @@
-.rdp {
+.rdp-root {
   font-size: 12px;
 
   --rdp-cell-size: 40px;
@@ -21,126 +21,112 @@
   background: transparent;
 }
 
-/* Hide elements for devices that are not screen readers */
-.rdp-vhidden {
+.rdp-root {
+  position: relative; /* Required to position the nav. */
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  border: 0 !important;
 }
 
-/* Buttons */
-.rdp-button_reset {
-  appearance: none;
-  position: relative;
-  margin: 0;
-  padding: 0;
-  cursor: default;
-  color: inherit;
-  background: none;
-  font: inherit;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
+/* ---------- */
+/* Day Buttons */
+/* ----------- */
 
-.rdp-button_reset:focus-visible {
-  /* Make sure to reset outline only when :focus-visible is supported */
-  outline: none;
+.rdp-day_button {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
 }
 
-.rdp-button {
-  border: 2px solid transparent;
+.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
+  opacity: 0.5;
 }
 
-.rdp-button[disabled]:not(.rdp-day_selected) {
+.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
   opacity: 0.25;
 }
 
-.rdp-button:not([disabled]) {
+.rdp-day:not(.rdp-disabled) .rdp-day_button {
   cursor: pointer;
 }
 
-.rdp-button:focus-visible:not([disabled]):not(.rdp-day_selected) {
+.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
   color: inherit;
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:focus-visible:not([disabled]).rdp-day_selected:not(.rdp-day_range_middle) {
+.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
   outline: var(--rdp-outline);
   outline-offset: 2px;
   background-color: var(--rdp-dark-background-color);
   outline-width: thin;
 }
 
-.rdp-button:hover:not([disabled]).rdp-day_selected {
-  background-color: var(--rdp-dark-background-color);
-}
-
-.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+.rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
   background-color: var(--rdp-background-color);
-}
+} 
 
-.rdp-months {
-  display: flex;
+.rdp-selected .rdp-day_button {
+  background-color: var(--rdp-accent-color);
+  border-radius: 50%;
+  color: var(--rdp-selected-color);
+  z-index: 1;
 }
 
-.rdp-month {
-  margin: 0 1em;
+.rdp-selected .rdp-day_button:hover:not([data-disabled="true"]) {
+  background-color: var(--rdp-dark-background-color);
 }
 
-.rdp-month:first-child {
-  margin-left: 0;
+.rdp-week {
+  margin: 0;
+  padding: 0;
 }
 
-.rdp-month:last-child {
-  margin-right: 0;
+.rdp-today:not(.rdp-outside) {
+  position: relative;
 }
 
-.rdp-table {
-  margin: 0;
-  max-width: calc(var(--rdp-cell-size) * 7);
-  border-collapse: collapse;
+.rdp-today:not(.rdp-outside)::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  width: 0.5em;
+  height: 0.5em;
+  background-color: var(--rdp-background-color);
+  border-radius: 100%;
+  transform: translate(-50%, 0);
 }
 
-.rdp-with_weeknumber .rdp-table {
-  max-width: calc(var(--rdp-cell-size) * 8);
-  border-collapse: collapse;
+.rdp-selected .rdp-day_button:focus-visible,
+.rdp-selected .rdp-day_button:hover {
+  color: var(--rdp-selected-color);
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
 }
 
-.rdp-caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.rdp-weekday {
+  vertical-align: middle;
+  font-weight: 700;
+  text-align: center;
+  font-size: 0.75em;
+  height: var(--rdp-cell-size);
   padding: 0;
-  text-align: left;
-}
+  text-transform: uppercase;
 
-.rdp-multiple_months .rdp-caption {
-  position: relative;
-  display: block;
-  text-align: center;
 }
 
-.rdp-caption_dropdowns {
-  position: relative;
-  display: inline-flex;
-}
+/* ---------- */
+/* Top Nav  */
+/* ---------- */
 
 .rdp-caption_label {
-  position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
@@ -155,36 +141,43 @@
   font-weight: 600;
 }
 
-.rdp-nav {
-  white-space: nowrap;
-}
 
-.rdp-multiple_months .rdp-caption_start .rdp-nav {
+.rdp-nav {
+  box-sizing: border-box;
   position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-}
+  padding: inherit;
 
-.rdp-multiple_months .rdp-caption_end .rdp-nav {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
+  top: 1.2em;
+  right: 1em;
+
+  display: flex;
+  align-items: center;
 }
 
-.rdp-nav_button {
+.rdp-button_next, .rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  appearance: none;
+  
   width: var(--rdp-caption-navigation-size);
   height: var(--rdp-caption-navigation-size);
   padding: 0.25em;
   border-radius: 2px;
 }
 
-.rdp-nav_button:hover,
-.rdp-nav_button:focus-visible {
+.rdp-button_next:hover, .rdp-button_previous:hover,
+.rdp-button_next:focus-visible, .rdp-button_previous:focus-visible {
   background-color: rgba(var(--color-background-80)) !important;
 }
 
@@ -192,9 +185,9 @@
 /* Dropdowns  */
 /* ---------- */
 
-.rdp-dropdown_year,
-.rdp-dropdown_month {
+.rdp-dropdowns {
   position: relative;
+  /* width: 100%; */
   display: inline-flex;
   align-items: center;
 }
@@ -216,119 +209,52 @@
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-}
-
-.rdp-dropdown[disabled] {
-  opacity: unset;
-  color: unset;
-}
-
-.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
-  background-color: var(--rdp-background-color);
-  border: var(--rdp-outline);
-  border-radius: 6px;
-}
-
-.rdp-dropdown_icon {
-  margin: 0 0 0 5px;
-}
-
-.rdp-head {
-  border: 0;
-}
-
-.rdp-head_row,
-.rdp-row {
-  height: 100%;
-}
-
-.rdp-head_cell {
-  vertical-align: middle;
-  font-size: 0.75em;
-  font-weight: 700;
-  text-align: center;
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-transform: uppercase;
-}
 
-.rdp-tbody {
-  border: 0;
 }
-
-.rdp-tfoot {
-  margin: 0.5em;
+.rdp-dropdown:hover {
+  cursor: pointer;
 }
 
-.rdp-cell {
-  width: var(--rdp-cell-size);
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-align: center;
-}
+.rdp-dropdown_root {
+  margin: 0;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
 
-.rdp-weeknumber {
-  font-size: 0.75em;
 }
 
-.rdp-weeknumber,
-.rdp-day {
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--rdp-cell-size);
-  max-width: var(--rdp-cell-size);
-  height: var(--rdp-cell-size);
-  margin: 0;
-  border: 2px solid transparent;
-  border-radius: 100%;
+.rdp-months_dropdown {
+  text-transform: capitalize;
 }
 
-.rdp-day_today:not(.rdp-day_outside) {
-  position: relative;
+.rdp-dropdown[data-disabled="true"] {
+  opacity: unset;
+  color: unset;
 }
 
-.rdp-day_today:not(.rdp-day_outside)::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 2px;
-  width: 0.5em;
-  height: 0.5em;
+.rdp-dropdown:focus-visible:not([data-disabled="true"]) + .rdp-caption_label {
   background-color: var(--rdp-background-color);
-  border-radius: 100%;
-  transform: translate(-50%, 0);
-}
-
-.rdp-day_selected,
-.rdp-day_selected:focus-visible,
-.rdp-day_selected:hover {
-  color: var(--rdp-selected-color);
-  opacity: 1;
-  background-color: var(--rdp-accent-color);
+  border: var(--rdp-outline);
+  border-radius: 6px;
 }
 
-.rdp-day_outside:not(.rdp-day_selected) {
-  opacity: 0.5;
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
 }
 
-.rdp-day_selected:focus-visible {
-  z-index: 1;
-}
+/* --------------- */
+/* Range selection */
+/* --------------- */
 
-td:has(.rdp-day_range_start),
-td:has(.rdp-day_range_middle),
-td:has(.rdp-day_range_end) {
+.rdp-range_start,
+.rdp-range_middle,
+.rdp-range_end {
   position: relative;
 }
 
-td:has(.rdp-day_range_start)::before,
-td:has(.rdp-day_range_middle)::before,
-td:has(.rdp-day_range_end)::before {
+.rdp-range_start::before,
+.rdp-range_middle::before,
+.rdp-range_end::before {
   content: "";
   position: absolute;
   background-color: var(--rdp-background-color);
@@ -336,33 +262,35 @@ td:has(.rdp-day_range_end)::before {
   height: 100%;
   width: 50%;
   transform: translate(0, -50%);
+  z-index: -1;
 }
 
-td:has(.rdp-day_range_start)::before {
+.rdp-range_start::before {
   left: 50%;
 }
 
-td:has(.rdp-day_range_middle)::before {
+.rdp-range_middle::before {
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
 }
 
-td:has(.rdp-day_range_end)::before {
+.rdp-range_end::before {
   right: 50%;
 }
 
-td:has(.rdp-day_range_start.rdp-day_range_end)::before {
+.rdp-range_start.rdp-range_end::before {
   display: none;
 }
 
-.rdp-day_range_middle {
+.rdp-range_middle .rdp-day_button{
   background-color: transparent;
   color: inherit;
 }
 
-.rdp-day_range_middle:hover,
-.rdp-day_range_middle:focus-visible {
+.rdp-range_middle .rdp-day_button:hover,
+.rdp-range_middle .rdp-day_button:focus-visible {
   background-color: var(--rdp-background-color) !important;
   color: inherit !important;
 }
+

From 7f142ebde65d47d81c00412bfd9bc5a0856eb150 Mon Sep 17 00:00:00 2001
From: vineetk13 <vineetkme.99@gmail.com>
Date: Tue, 14 Jan 2025 15:50:57 +0530
Subject: [PATCH 2/4] style fixes

---
 web/styles/react-day-picker.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/styles/react-day-picker.css b/web/styles/react-day-picker.css
index a0c67c877cd..5e4e42412c0 100644
--- a/web/styles/react-day-picker.css
+++ b/web/styles/react-day-picker.css
@@ -79,7 +79,7 @@
   z-index: 1;
 }
 
-.rdp-selected .rdp-day_button:hover:not([data-disabled="true"]) {
+.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
   background-color: var(--rdp-dark-background-color);
 }
 
@@ -288,9 +288,9 @@
   color: inherit;
 }
 
-.rdp-range_middle .rdp-day_button:hover,
-.rdp-range_middle .rdp-day_button:focus-visible {
-  background-color: var(--rdp-background-color) !important;
-  color: inherit !important;
+.rdp-day.rdp-range_middle .rdp-day_button:hover,
+.rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
+  background-color: var(--rdp-background-color);
+  color: inherit;
 }
 

From 099d8067eb1d18bec74b2882a62d6052b80411db Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 27 Jan 2025 17:57:32 +0530
Subject: [PATCH 3/4] style: css and autofocus improved

---
 .../core/filters/date-filter-modal.tsx        | 12 ++-
 web/core/components/dropdowns/date-range.tsx  |  8 +-
 web/core/components/dropdowns/date.tsx        |  8 +-
 web/styles/react-day-picker.css               | 89 +++++++++++--------
 4 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/web/core/components/core/filters/date-filter-modal.tsx b/web/core/components/core/filters/date-filter-modal.tsx
index 1ae7ea35100..a8363420523 100644
--- a/web/core/components/core/filters/date-filter-modal.tsx
+++ b/web/core/components/core/filters/date-filter-modal.tsx
@@ -31,6 +31,8 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
+const defaultClassNames = getDefaultClassNames();
+
 export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
   const { handleSubmit, watch, control } = useForm<TFormValues>({
     defaultValues,
@@ -49,8 +51,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const date1 = getDate(watch("date1"));
   const date2 = getDate(watch("date1"));
 
-  const defaultClassNames = getDefaultClassNames();
-
   const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
 
   return (
@@ -99,7 +99,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         const date2Value = getDate(watch("date2"));
                         return (
                           <DayPicker
-                            classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                            classNames={{
+                              root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`,
+                            }}
                             captionLayout="dropdown"
                             selected={dateValue}
                             defaultMonth={dateValue}
@@ -122,7 +124,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                           const date1Value = getDate(watch("date1"));
                           return (
                             <DayPicker
-                              classNames={{root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`}}
+                              classNames={{
+                                root: `${defaultClassNames.root} border border-custom-border-200 p-3 rounded-md`,
+                              }}
                               captionLayout="dropdown"
                               selected={dateValue}
                               defaultMonth={dateValue}
diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 868dd6cbcf0..37a6b6422ea 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -52,6 +52,8 @@ type Props = {
   renderPlaceholder?: boolean;
 };
 
+const defaultClassNames = getDefaultClassNames();
+
 export const DateRangeDropdown: React.FC<Props> = (props) => {
   const {
     applyButtonText = "Apply changes",
@@ -133,8 +135,6 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     setDateRange(value);
   }, [value]);
 
-  const defaultClassNames = getDefaultClassNames();
-
   const comboButton = (
     <button
       ref={setReferenceElement}
@@ -207,7 +207,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
           >
             <DayPicker
               captionLayout="dropdown"
-              classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
+              classNames={{ root: `${defaultClassNames.root} p-3 rounded-md` }}
               selected={dateRange}
               onSelect={(val) => {
                 // if both the dates are not required, immediately call onSelect
@@ -220,7 +220,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
               mode="range"
               disabled={disabledDays}
               showOutsideDays
-              initialFocus
+              autoFocus
               footer={
                 bothRequired && (
                   <div className="grid grid-cols-2 items-center gap-3.5 pt-6 relative">
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 8035825b0c0..243356a95bc 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -33,6 +33,8 @@ type Props = TDropdownProps & {
   renderByDefault?: boolean;
 };
 
+const defaultClassNames = getDefaultClassNames();
+
 export const DateDropdown: React.FC<Props> = (props) => {
   const {
     buttonClassName = "",
@@ -80,8 +82,6 @@ export const DateDropdown: React.FC<Props> = (props) => {
 
   const isDateSelected = value && value.toString().trim() !== "";
 
-  const defaultClassNames = getDefaultClassNames();
-
   const onOpen = () => {
     if (referenceElement) referenceElement.focus();
   };
@@ -177,14 +177,14 @@ export const DateDropdown: React.FC<Props> = (props) => {
             >
               <DayPicker
                 captionLayout="dropdown"
-                classNames={{root: `${defaultClassNames.root} p-3 rounded-md`}}
+                classNames={{ root: `${defaultClassNames.root} p-3 rounded-md` }}
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
                 onSelect={(date) => {
                   dropdownOnChange(date ?? null);
                 }}
                 showOutsideDays
-                initialFocus
+                autoFocus
                 disabled={disabledDays}
                 mode="single"
               />
diff --git a/web/styles/react-day-picker.css b/web/styles/react-day-picker.css
index 5e4e42412c0..7373b3f9cf4 100644
--- a/web/styles/react-day-picker.css
+++ b/web/styles/react-day-picker.css
@@ -3,7 +3,7 @@
 
   --rdp-cell-size: 40px;
   /* Size of the day cells. */
-  --rdp-caption-font-size: 1.15rem;
+  --rdp-caption-font-size: 1rem;
   /* Font size for the caption labels. */
   --rdp-caption-navigation-size: 1.25rem;
   /* Font size for the caption labels. */
@@ -70,7 +70,7 @@
 
 .rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
   background-color: var(--rdp-background-color);
-} 
+}
 
 .rdp-selected .rdp-day_button {
   background-color: var(--rdp-accent-color);
@@ -119,29 +119,12 @@
   height: var(--rdp-cell-size);
   padding: 0;
   text-transform: uppercase;
-
 }
 
 /* ---------- */
 /* Top Nav  */
 /* ---------- */
 
-.rdp-caption_label {
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  padding: 0 0.25em;
-  white-space: nowrap;
-  color: currentColor;
-  border: 0;
-  border: 2px solid transparent;
-  font-family: inherit;
-  font-size: var(--rdp-caption-font-size);
-  font-weight: 600;
-}
-
-
 .rdp-nav {
   box-sizing: border-box;
   position: absolute;
@@ -154,14 +137,14 @@
   align-items: center;
 }
 
-.rdp-button_next, .rdp-button_previous {
+.rdp-button_next,
+.rdp-button_previous {
   border: none;
   background: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
   font: inherit;
-  color: inherit;
   -moz-appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
@@ -169,15 +152,22 @@
   justify-content: center;
   position: relative;
   appearance: none;
-  
   width: var(--rdp-caption-navigation-size);
   height: var(--rdp-caption-navigation-size);
   padding: 0.25em;
   border-radius: 2px;
 }
 
-.rdp-button_next:hover, .rdp-button_previous:hover,
-.rdp-button_next:focus-visible, .rdp-button_previous:focus-visible {
+.rdp-chevron {
+  fill: rgba(var(--color-text-200));
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+.rdp-button_next:hover,
+.rdp-button_previous:hover,
+.rdp-button_next:focus-visible,
+.rdp-button_previous:focus-visible {
   background-color: rgba(var(--color-background-80)) !important;
 }
 
@@ -194,6 +184,8 @@
 
 .rdp-dropdown {
   appearance: none;
+  --webkit-appearance: none;
+  --moz-appearance: none;
   position: absolute;
   z-index: 2;
   top: 0;
@@ -202,17 +194,17 @@
   width: 100%;
   margin: 0;
   padding: 0;
-  cursor: inherit;
   opacity: 0;
   border: none;
-  background-color: transparent;
   font-family: inherit;
-  font-size: inherit;
+  font-size: 1rem;
   line-height: inherit;
-
-}
-.rdp-dropdown:hover {
   cursor: pointer;
+  background: transparent;
+
+  &:hover {
+    background-color: rgba(var(--color-background-80)) !important;
+  }
 }
 
 .rdp-dropdown_root {
@@ -220,7 +212,6 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-
 }
 
 .rdp-months_dropdown {
@@ -232,10 +223,35 @@
   color: unset;
 }
 
-.rdp-dropdown:focus-visible:not([data-disabled="true"]) + .rdp-caption_label {
-  background-color: var(--rdp-background-color);
-  border: var(--rdp-outline);
-  border-radius: 6px;
+.rdp-caption_label {
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: var(--rdp-caption-font-size);
+  font-weight: 600;
+  background: transparent;
+  border-radius: 4px;
+}
+
+.rdp-dropdown:not([data-disabled="true"]) {
+  &:focus-visible + .rdp-caption_label {
+    border: var(--rdp-outline);
+    border-radius: 6px;
+  }
+
+  &:hover {
+    & + .rdp-caption_label {
+      background-color: rgba(var(--color-background-80)) !important;
+    }
+  }
 }
 
 .rdp-dropdown_icon {
@@ -283,7 +299,7 @@
   display: none;
 }
 
-.rdp-range_middle .rdp-day_button{
+.rdp-range_middle .rdp-day_button {
   background-color: transparent;
   color: inherit;
 }
@@ -293,4 +309,3 @@
   background-color: var(--rdp-background-color);
   color: inherit;
 }
-

From 8603b9e99d99a3208140c881afa9e129766b833a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 27 Jan 2025 18:14:01 +0530
Subject: [PATCH 4/4] fix: fixed weeks for datepicker to ensure static height

---
 web/core/components/dropdowns/date-range.tsx | 1 +
 web/core/components/dropdowns/date.tsx       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 37a6b6422ea..926e995372b 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -221,6 +221,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
               disabled={disabledDays}
               showOutsideDays
               autoFocus
+              fixedWeeks
               footer={
                 bothRequired && (
                   <div className="grid grid-cols-2 items-center gap-3.5 pt-6 relative">
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 243356a95bc..e38f175b5fe 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -187,6 +187,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
                 autoFocus
                 disabled={disabledDays}
                 mode="single"
+                fixedWeeks
               />
             </div>
           </Combobox.Options>,