From 0e534f39b842e86660f9dfd699e56a548feeff3f Mon Sep 17 00:00:00 2001
From: Anna McPhee <anna.mcphee@automattic.com>
Date: Mon, 16 Sep 2024 16:07:31 +1000
Subject: [PATCH] styling header + footer

---
 client/components/date-range/style.scss | 51 +++++++++++++------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/client/components/date-range/style.scss b/client/components/date-range/style.scss
index 54ced1ff11277a..1a9947d81badfd 100644
--- a/client/components/date-range/style.scss
+++ b/client/components/date-range/style.scss
@@ -96,6 +96,12 @@ $date-range-mobile-layout-switch: $break-small;
 }
 
 .date-range__popover-header {
+	order: 1;
+	display: flex;
+	justify-content: left;
+}
+
+.date-range__popover-footer {
 	order: 4;
 	display: flex;
 	justify-content: flex-end;
@@ -150,6 +156,8 @@ $date-range-mobile-layout-switch: $break-small;
 .date-range__popover {
 	.DayPicker {
 		order: 3;
+		margin-top: 12px;
+		border-top: 1px solid var(--color-neutral-5);
 	}
 
 	.DayPicker-wrapper,
@@ -232,7 +240,6 @@ $date-range-mobile-layout-switch: $break-small;
 
 
 .date-range__picker {
-	--date-range-picker-highlight-color: rgba(var(--color-primary-light-rgb), 0.4);
 
 	.DayPicker-Day,
 	.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
@@ -248,40 +255,36 @@ $date-range-mobile-layout-switch: $break-small;
 			&:hover,
 			&:focus {
 				color: var(--color-text-inverted);
-				background-color: var(--date-range-picker-highlight-color);
+				background-color: var(--color-primary);
 			}
 		}
 	}
 
-	.DayPicker-Day--range .date-picker__day {
-		color: var(--color-text);
-		background-color: var(--date-range-picker-highlight-color);
-	}
-
-	.DayPicker-Day--start.DayPicker-Day--range-start,
-	.DayPicker-Day--end.DayPicker-Day--range-end {
-		& .date-picker__day {
+	.DayPicker-Day--range,
+	.DayPicker-Day--start,
+	.DayPicker-Day--end {
+		.date-picker__day {
 			color: var(--color-text-inverted);
 			background-color: var(--color-primary);
 		}
-		&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-			border-radius: 200px; /* stylelint-disable-line scales/radii */
-			&.DayPicker-Day--range {
-				background-color: var(--color-primary);
-				.date-picker__day {
-					&:hover,
-					&:focus {
-						background-color: var(--date-range-picker-highlight-color);
-					}
-				}
+	}
+
+	.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
+	.DayPicker-Day--start:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
+	.DayPicker-Day--end:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+		background-color: var(--color-primary);
+		.date-picker__day {
+			&:hover,
+			&:focus {
+				background-color: var(--color-primary-light);
 			}
 		}
 	}
 
-	.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-		background-color: var(--date-range-picker-highlight-color);
-		.date-picker__day {
-			background-color: transparent;
+	.DayPicker-Day--start,
+	.DayPicker-Day--end {
+		&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+			border-radius: 200px; /* stylelint-disable-line scales/radii */
 		}
 	}