From b8ef91979ae801a3177456f41a4b2afe816ebc06 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:50:30 +0200
Subject: [PATCH] Date / date range (flatpickr) colors customization

---
 .../css/admin_v3/components/date-picker.scss  |  2 +-
 .../plugins/flatpickr-customization.scss      | 23 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/date-picker.scss b/app/webpacker/css/admin_v3/components/date-picker.scss
index a35b5a970eeb..e2fc0ef50441 100644
--- a/app/webpacker/css/admin_v3/components/date-picker.scss
+++ b/app/webpacker/css/admin_v3/components/date-picker.scss
@@ -7,7 +7,7 @@ input.datetimepicker {
 .container input[readonly].flatpickr-input,
 .container input[readonly].datepicker,
 .container input[readonly].datetimepicker {
-  background-color: $white;
+  background-color: $lighter-grey;
   cursor: pointer;
 }
 
diff --git a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
index 79bc735d4da0..92fa3f5f77ed 100644
--- a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
+++ b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
@@ -1,4 +1,4 @@
-$background-grey: #eceef1;
+$background-grey: $lighter-grey;
 $background-blue: $color-3;
 
 // scss-lint:disable SelectorFormat
@@ -33,6 +33,7 @@ $background-blue: $color-3;
 
     .flatpickr-weekday {
       background: $background-blue;
+      color: white;
     }
   }
 
@@ -66,3 +67,23 @@ $background-blue: $color-3;
   justify-content: space-between;
   flex-grow: 1;
 }
+
+// material-ui colors customization ("~flatpickr/dist/themes/material_blue")
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -10px 0 0 #e2e2e2;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-prev-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-prev-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-next-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-next-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg {
+  fill: white;
+}