From ce1663b4942bed4128cc0676d8334d6c6be99826 Mon Sep 17 00:00:00 2001
From: Arlindo Pereira <arlindosaraivapereira@gmail.com>
Date: Thu, 28 Nov 2024 17:49:12 +0100
Subject: [PATCH] Overwriting react-datepicker styling with global selector

---
 .../DatePicker/DatePicker.module.scss         | 207 ++++++++++--------
 .../DatePicker/DatePicker.stories.tsx         |   2 +-
 .../forms/controls/DatePicker/DatePicker.tsx  |   1 -
 3 files changed, 114 insertions(+), 96 deletions(-)

diff --git a/src/components/forms/controls/DatePicker/DatePicker.module.scss b/src/components/forms/controls/DatePicker/DatePicker.module.scss
index 79bd6b0..233de5d 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.module.scss
+++ b/src/components/forms/controls/DatePicker/DatePicker.module.scss
@@ -23,118 +23,137 @@ $z-index--date-picker: 100;
 }
 
 // DATEPICKER override react-datepicker styles
-
-.react-datepicker-popper {
+// Note: Sass do not support using suffixes (i.e. &__suffix) when using global selector
+:global(.react-datepicker-popper) {
   z-index: $z-index--date-picker;
 }
-.react-datepicker {
-  color: red !important; // DEBUG
+
+:global(.react-datepicker) {
   width: 30rem;
   text-align: center;
   margin-top: 0.5rem;
   padding: 2.5rem;
-  //background-color: bkl.$light-color-3; // TODO
+  background-color: #edeff2; // TODO hardcoded color
   border-radius: 0.4rem !important;
   border-width: 0 !important;
   font-family: bk.$font-family-body;
   font-size: bk.$font-size-m;
   font-weight: bk.$font-weight-regular;
-  &__triangle,
-  &__triangle::before {
-    border: none !important;
-  }
-  &__header {
-    background: transparent;
-    border: 0;
-    //color: bkl.$brand-color-dark-2; // TODO color
-    font-family: bk.$font-family-display;
-    font-weight: bk.$font-weight-regular;
-  }
-  &__month-container {
-    display: inline-block;
-    width: 100%;
-    float: none;
-  }
-  &__current-month {
-    //color: bkl.$brand-color-dark-2; // TODO color
-    font-size: 2rem; // TODO font-size
-    margin-bottom: 1rem;
-    font-family: bk.$font-family-display;
-    font-weight: bk.$font-weight-regular;
-  }
-  &__navigation {
-    position: absolute;
-    top: 3.3rem;
-    width: 3rem;
-    border: none;
-    text-indent: -999em;
-    &-icon {
-      &:before, &:after {
-        display: flex;
-      }
-    }
-    &--previous {
-      background: url('../../../../assets/icons_old/arrow-left.svg') no-repeat center center; // TODO maybe new icon?
-      background-size: 1.8rem;
-      left: 2rem;
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-    &--next {
-      background: url('../../../../assets/icons_old/arrow-right.svg') no-repeat center center; // TODO maybe new icon?
-      background-size: 1.8rem;
-      right: 2rem;
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-  }
-  &__day-names {
-    border-bottom: 0.1rem solid #d0d0d0; // TODO hardcoded color
-  }
-  &__day-name,
-  &__day {
-    display: inline-block;
-    width: 3.5rem;
-    line-height: 3.5rem;
-    margin: 0;
-    color: #454545; // TODO hardcoded color
-    &--outside-month {
-      opacity: .7;
-    }
-    &--disabled {
-      opacity: .35;
-    }
-  }
-  &__day {
-    &--selected,
-    &--keyboard-selected {
-      // background: bkl.$accent-color; // TODO color
-      border-radius: 50%;
-    }
-    &:not(&--selected):hover {
-      // background: rgba(bkl.$accent-color, 0.5); // TODO color
-      border-radius: 50%;
-    }
-    &--in-range,
-    &--in-selecting-range {
-      background: transparent;
-      background-color: transparent;
-      border-radius: 0;
-    }
-  }
 }
-.react-datepicker-popper[data-placement^="bottom"] {
+
+:global(.react-datepicker__triangle),
+:global(.react-datepicker__triangle::before) {
+  border: none !important;
+}
+
+:global(.react-datepicker__header) {
+  background: transparent;
+  border: 0;
+  color: #081353; // TODO hardcoded color
+  font-family: bk.$font-family-display;
+  font-weight: bk.$font-weight-regular;
+}
+
+:global(.react-datepicker__month-container) {
+  display: inline-block;
+  width: 100%;
+  float: none;
+}
+
+:global(.react-datepicker__current-month) {
+  color: #081353; // TODO hardcoded color
+  font-size: 2rem; // TODO font-size
+  margin-bottom: 1rem;
+  font-family: bk.$font-family-display;
+  font-weight: bk.$font-weight-regular;
+}
+
+:global(.react-datepicker__navigation) {
+  position: absolute;
+  top: 3.3rem;
+  width: 3rem;
+  border: none;
+  text-indent: -999em;
+}
+
+:global(.react-datepicker__navigation-icon::before),
+:global(.react-datepicker__navigation-icon::after) {
+  display: flex;
+}
+
+:global(.react-datepicker__navigation--previous) {
+  background: url('../../../../assets/icons_old/arrow-left.svg') no-repeat center center; // TODO maybe new icon?
+  background-size: 1.8rem;
+  left: 2rem;
+}
+
+:global(.react-datepicker__navigation--previous:hover) {
+  opacity: 0.7;
+}
+
+:global(.react-datepicker__navigation--next) {
+  background: url('../../../../assets/icons_old/arrow-right.svg') no-repeat center center; // TODO maybe new icon?
+  background-size: 1.8rem;
+  right: 2rem;
+}
+
+:global(.react-datepicker__navigation--next:hover) {
+  opacity: 0.7;
+}
+
+:global(.react-datepicker__day-names) {
+  border-bottom: 0.1rem solid #d0d0d0; // TODO hardcoded color
+}
+
+:global(.react-datepicker__day-name),
+:global(.react-datepicker__day) {
+  display: inline-block;
+  width: 3.5rem;
+  line-height: 3.5rem;
+  margin: 0;
+  color: #454545; // TODO hardcoded color
+}
+
+// TODO check if both are actually needed
+:global(.react-datepicker__day-name--outside-month),
+:global(.react-datepicker__day--outside-month) {
+  opacity: .7;
+}
+
+// TODO check if both are actually needed
+:global(.react-datepicker__day-name--disabled),
+:global(.react-datepicker__day--disabled) {
+  opacity: .35;
+}
+
+:global(.react-datepicker__day--selected),
+:global(.react-datepicker__day--keyboard-selected) {
+  background: #007A8D; // TODO hardcoded color
+  border-radius: 50%;
+}
+
+:global(.react-datepicker__day:not(&--selected):hover) {
+  background: rgba(#007A8D, 0.5); // TODO hardcoded color
+  border-radius: 50%;
+}
+
+:global(.react-datepicker__day--in-range),
+:global(.react-datepicker__day--in-selecting-range) {
+  background: transparent;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+:global(.react-datepicker-popper[data-placement^="bottom"]) {
   margin-top: 0;
 }
 
-.react-datepicker-popper[data-placement^="top"] {
+:global(.react-datepicker-popper[data-placement^="top"]) {
   margin-bottom: 0;
 }
 
-.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
-.react-datepicker__month--selecting-range .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
+:global(.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range)),
+:global(.react-datepicker__month--selecting-range .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range)) {
   background: transparent;
   background-color: transparent;
   border-radius: 0;
diff --git a/src/components/forms/controls/DatePicker/DatePicker.stories.tsx b/src/components/forms/controls/DatePicker/DatePicker.stories.tsx
index 7a35fdb..e2cd62f 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.stories.tsx
+++ b/src/components/forms/controls/DatePicker/DatePicker.stories.tsx
@@ -32,7 +32,7 @@ export const DatePickerStory: Story = {
     const [startDate, setStartDate] = React.useState(new Date());
 
     return (
-      <div style={{height: '300px'}}>
+      <div style={{height: '500px'}}>
         <DatePicker {...args} selected={startDate} onChange={(date) => setStartDate(date)} />
       </div>
     );
diff --git a/src/components/forms/controls/DatePicker/DatePicker.tsx b/src/components/forms/controls/DatePicker/DatePicker.tsx
index 6429073..59cbc1b 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.tsx
+++ b/src/components/forms/controls/DatePicker/DatePicker.tsx
@@ -44,7 +44,6 @@ export const DatePicker = (props: DatePickerProps) => {
       <ReactDatePicker
         className={cx(
           cl['bk-date-picker__date'],
-          // cl['react-datepicker'],
         )}
         dateFormat="MM/dd/yyyy"
         maxDate={maxDate}