From b30ad6f2586ac4a8049ae2ccbab65be612774cbb Mon Sep 17 00:00:00 2001
From: Chi Nguyen <chi.nguyen@digia.com>
Date: Tue, 27 Aug 2019 13:26:28 +0300
Subject: [PATCH 1/3] remove dynamic width on date-picker, move to
 component-base styling

---
 .../availability-view/_availability-view.scss |  1 +
 app/shared/date-picker/_date-picker.scss      | 38 ++++++++++---------
 .../_recurring-reservation-controls.scss      | 19 ++++++++++
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/app/shared/availability-view/_availability-view.scss b/app/shared/availability-view/_availability-view.scss
index c731cabd1..b8f304306 100644
--- a/app/shared/availability-view/_availability-view.scss
+++ b/app/shared/availability-view/_availability-view.scss
@@ -83,6 +83,7 @@
     input {
       background: none;
       color: white;
+      border: none;
       cursor: pointer;
       text-align: left;
       width: 110px;
diff --git a/app/shared/date-picker/_date-picker.scss b/app/shared/date-picker/_date-picker.scss
index c8b06542c..b98e636af 100644
--- a/app/shared/date-picker/_date-picker.scss
+++ b/app/shared/date-picker/_date-picker.scss
@@ -17,17 +17,21 @@
 
   input {
     width: 100%;
-    border: 1px solid $input-border;
-    padding: 5px;
+
+    &:focus {
+      outline: none
+    }
   }
-  
+
   .date-picker-overlay {
     background-color: white;
     position: absolute;
     z-index: 100;
     border: solid 2px $brand-primary;;
     padding: 10px;
-    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .DayPicker {
@@ -36,19 +40,19 @@
     max-width: 400px;
     margin: 0 auto;
     width: 100%;
-  
+
     &:focus {
       outline: none;
     }
   }
-  
+
   .DayPicker-NavBar {
     position: absolute;
     display: flex;
     width: 100%;
     justify-content: space-between;
   }
-  
+
   .DayPicker-Caption {
     height: auto;
     font-weight: 600;
@@ -57,7 +61,7 @@
     text-transform: capitalize;
     text-align: center;
   }
-  
+
   .DayPicker-NavButton--prev {
     @include icon-angle-left($black);
     width: $line-height-computed;
@@ -65,20 +69,20 @@
     position: static;
     margin-right: 0;
   }
-  
+
   .DayPicker-NavButton--next {
     @include icon-angle-right($black);
     width: $line-height-computed;
     height: $line-height-computed;
     position: static;
   }
-  
+
   .DayPicker-Month {
     margin: 0;
     border-collapse: separate;
     width: 100%;
   }
-  
+
   .DayPicker-Day {
     border: 2px solid $white;
     margin: 1px;
@@ -87,7 +91,7 @@
     background-color: $light-gray;
     border-radius: 0;
     font-size: 1.6rem;
-  
+
     &:focus {
       outline: none;
     }
@@ -111,16 +115,16 @@
       background-color: $dark-gray;
     }
   }
-  
+
   .DayPicker-Day--today {
     border: 2px solid $black;
   }
-  
+
   .DayPicker-WeekdaysRow {
     padding: 0.2rem;
     font-size: 1.4rem;
   }
-  
+
   .DayPicker-Weekdays {
     text-transform: uppercase;
     font-weight: normal;
@@ -130,11 +134,11 @@
       vertical-align: text-top;
     }
   }
-  
+
   .DayPicker-Weekday {
     color: $black;
   }
-  
+
   .DayPicker-WeekNumber {
     font-size: 14px;
   }
diff --git a/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss b/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss
index 3c9594abf..de3d98c73 100644
--- a/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss
+++ b/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss
@@ -6,4 +6,23 @@
     white-space: nowrap;
     overflow: hidden;
   }
+
+  .date-picker {
+    height: $input-height-base;
+    display: flex;
+    justify-items: center;
+    flex-direction: column;
+    border: none;
+
+    input {
+      border: 2px solid $black;
+      flex-grow: 1;
+      padding: 0 5px;
+    }
+  }
+
+  .date-picker-overlay {
+    border-top: none;
+    width: 100%;
+  }
 }

From 19d9e04c404b150ded4aeee197dd1aa12fa7095b Mon Sep 17 00:00:00 2001
From: Chi Nguyen <chi.nguyen@digia.com>
Date: Tue, 27 Aug 2019 14:48:57 +0300
Subject: [PATCH 2/3] revert disabled outline

---
 app/shared/date-picker/_date-picker.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app/shared/date-picker/_date-picker.scss b/app/shared/date-picker/_date-picker.scss
index b98e636af..e6ae1037b 100644
--- a/app/shared/date-picker/_date-picker.scss
+++ b/app/shared/date-picker/_date-picker.scss
@@ -17,10 +17,6 @@
 
   input {
     width: 100%;
-
-    &:focus {
-      outline: none
-    }
   }
 
   .date-picker-overlay {
@@ -40,10 +36,6 @@
     max-width: 400px;
     margin: 0 auto;
     width: 100%;
-
-    &:focus {
-      outline: none;
-    }
   }
 
   .DayPicker-NavBar {
@@ -92,9 +84,6 @@
     border-radius: 0;
     font-size: 1.6rem;
 
-    &:focus {
-      outline: none;
-    }
     &--available:not(.DayPicker-Day--disabled) {
       background-color: $light-gray;
       &.DayPicker-Day--selected {

From a7e5d34632eb6340a0ac9f5708c88b28d2884f14 Mon Sep 17 00:00:00 2001
From: Chi Nguyen <chi.nguyen@digia.com>
Date: Tue, 27 Aug 2019 14:44:03 +0300
Subject: [PATCH 3/3] Prepare release 0.4.2

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e055df654..a7d875bf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 0.4.2
+  **HOTFIX**
+  ```
+  - Fix various styling issue for date-picker [#991](https://github.com/City-of-Helsinki/varaamo/pull/991)
+  ```
+
 # 0.4.1
   **HOTFIX**
   ```
diff --git a/package.json b/package.json
index 18de816e6..5b2235ad2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "varaamo",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/City-of-Helsinki/varaamo"