From b4c2baa70d66e3cc8e189e5e46e5d7259e7d9fd0 Mon Sep 17 00:00:00 2001
From: Giampaolo Bellavite <io@gpbl.dev>
Date: Sun, 2 Jun 2024 06:49:55 -0500
Subject: [PATCH] feat: update range styles (#2180)

---
 src/contexts/selection.tsx |  2 +-
 src/style.css              | 27 ++++++++++++++-------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/contexts/selection.tsx b/src/contexts/selection.tsx
index aecdba473a..65f2164ec8 100644
--- a/src/contexts/selection.tsx
+++ b/src/contexts/selection.tsx
@@ -196,7 +196,7 @@ export function SelectionProvider(providerProps: PropsWithChildren) {
 
   function isStartOfRange(date: Date) {
     if (!isDateRange(value)) return false;
-    return Boolean(value.from && isSameDay(value.from, date));
+    return Boolean(value.from && isSameDay(value.from, date) && value.to);
   }
 
   function isEndOfRange(date: Date) {
diff --git a/src/style.css b/src/style.css
index 1125d83c61..c4b20523b6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -352,29 +352,30 @@
 }
 
 .rdp-range_start {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  background: var(--rdp-range-start-background);
 }
 
-.rdp-range_start.rdp-selected,
-.rdp-range_end.rdp-selected,
-.rdp-range_middle.rdp-selected {
-  border-color: transparent;
+.rdp-range_start .rdp-day_date {
   background-color: var(--rdp-range-background-color);
   color: var(--rdp-range-color);
 }
 
-.rdp-range_end {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
+.rdp-range_middle .rdp-day_date {
+  border-color: transparent;
+  border: unset;
+  border-radius: unset;
+  background-color: var(--rdp-range-middle-background-color);
+  color: var(--rdp-range-color);
+  font: var(--rdp-range-middle-font);
 }
 
-.rdp-range_end.rdp-range_start {
-  border-radius: var(--rdp-day-border-radius);
+.rdp-range_end {
+  background: var(--rdp-range-end-background);
 }
 
-.rdp-range_middle {
-  border-radius: 0;
+.rdp-range_end .rdp-day_date {
+  background-color: var(--rdp-range-background-color);
+  color: var(--rdp-range-color);
 }
 
 .rdp-focusable {