Merge pull request #10777 from opf/fix/41814-style-changes-to-datepicker

[41814] Fix minor style issues in the new datepicker

frontend/src/app/shared/components/datepicker/datepicker.modal.html

@@ -26,7 +26,7 @@
 
     <div class="op-datepicker-modal--dates-container">
       <ng-container *ngIf="singleDate">
-        <div class="form--field">
+        <div class="form--field op-datepicker-modal--date-form">
           <label class="form--label"
                  [textContent]="text.date">
           </label>
@@ -52,7 +52,7 @@
       </ng-container>
 
       <ng-container *ngIf="!singleDate">
-        <div class="form--field"
+        <div class="form--field op-datepicker-modal--date-form"
              data-qa-selector="datepicker-start-date"
         >
           <label class="form--label"
@@ -80,7 +80,7 @@
             </a>
           </div>
         </div>
-        <div class="form--field"
+        <div class="form--field op-datepicker-modal--date-form"
              data-qa-selector="datepicker-end-date"
         >
           <label class="form--label"

frontend/src/app/shared/components/datepicker/datepicker.modal.sass

@@ -3,9 +3,9 @@
 .op-datepicker-modal
   z-index: 500
   width: auto
-  // prevent additional content like notifications to
-  // drastically increase the width.
-  max-width: 730px
+  // Basically the width of the two calendars next to each other + spacings
+  // will be overwritten on mobile
+  max-width: 600px
   min-height: 200px
   box-shadow: $spot-shadow-light-mid
   // Apply a bottom margin before the banners are loaded
@@ -27,3 +27,7 @@
 
   &--date-container
     display: inline-grid
+
+  &--action
+    &:last-of-type
+      margin-right: 0

frontend/src/app/shared/components/datepicker/datepicker_mobile.modal.sass

@@ -1,6 +1,10 @@
 @media screen and (max-width: 679px)
   .op-datepicker-modal
     height: initial
-    width: calc(100vw - 2rem)
+    max-width: 300px
     &--dates-container
-      grid-template-columns: 1fr max-content
+      grid-template-columns: 1fr 1fr
+
+    &--date-form
+      &:only-child
+        grid-column: 1 / 3

frontend/src/app/spot/styles/sass/components/text-field.sass

@@ -23,6 +23,7 @@
     border: 0
     padding: 0
     flex-grow: 1
+    width: 100%
     outline: 0
 
     &:not(:first-child)

frontend/src/global_styles/content/_datepicker.sass

@@ -31,9 +31,9 @@ $datepicker--border-radius: 5px
 .flatpickr-current-month
   display: flex !important
 
-.numInputWrapper
-  position: fixed !important
-  left: 65% !important
+.flatpickr-calendar .numInputWrapper
+  position: fixed
+  left: 65%
 
 .flatpickr-calendar.inline
   box-shadow: none !important
@@ -42,6 +42,14 @@ $datepicker--border-radius: 5px
   .flatpickr-months
     min-height: 45px
 
+    .flatpickr-current-month
+      @include spot-body-small(bold)
+      justify-content: center
+
+    .numInputWrapper
+      position: relative
+      left: 0
+
   .flatpickr-weekwrapper
     display: none
 
@@ -50,19 +58,40 @@ $datepicker--border-radius: 5px
 
   .flatpickr-weekdaycontainer,
   .flatpickr-days .dayContainer
-    padding: 0 1.25rem
+
+    &:first-of-type
+      padding: 0 1rem 0 0
+    &:last-of-type
+      padding: 0 0 0 1rem
+    &:only-of-type
+      padding: 0
+
+  .flatpickr-prev-month
+    padding-left: 0
+  .flatpickr-next-month
+    padding-right: 0
 
   .flatpickr-days
     .dayContainer
       box-shadow: none
+      min-width: 283px
+      max-width: 283px
+
+      @media screen and (max-width: 679px)
+        min-width: 267px
+        max-width: 267px
 
       .flatpickr-day
         color: $spot-color-basic-black
         height: 30px
         line-height: 28px
+        margin: 0
         border-radius: $datepicker--border-radius
         box-shadow: none !important
 
+        &:hover
+          border-radius: 0
+
         &.flatpickr-disabled,
         &.flatpickr-non-working-day
           background: $spot-color-basic-gray-6
@@ -71,6 +100,7 @@ $datepicker--border-radius: 5px
         &.today
           background: $spot-color-indication-current-date
           border-color: $spot-color-indication-current-date
+          border-radius: $datepicker--border-radius
 
         &.selected,
         &.startRange,