Update CSS for DatePickerRange vertical arrows. (#699)

* Update CSS for DatePickerRange vertical arrows.

* Use day size to calculate vertical height.

* Fix eslint error.

Author: Shammamah Hossain

src/components/css/[email protected]

@@ -1,3 +1,13 @@
 .DateInput_input {
     box-sizing: border-box;
-}
+}
+
+.DayPickerNavigation__verticalDefault {
+    text-align: center;
+    height: initial;
+    padding: 10px 0px;
+}
+
+.DayPickerNavigation_svg__vertical {
+    height: 20px;
+}

src/fragments/DatePickerRange.react.js

@@ -135,6 +135,10 @@ export default class DatePickerRange extends Component {
             ...style,
         };
 
+        // the height in px of the top part of the calendar (that holds
+        // the name of the month)
+        const baselineHeight = 145;
+
         return (
             <div
                 id={id}
@@ -184,6 +188,7 @@ export default class DatePickerRange extends Component {
                     withPortal={with_portal && verticalFlag}
                     startDateId={start_date_id || this.state.start_date_id}
                     endDateId={end_date_id || this.state.end_date_id}
+                    verticalHeight={baselineHeight + day_size * 6 + 'px'}
                 />
             </div>
         );

src/fragments/DatePickerSingle.react.js

@@ -71,6 +71,10 @@ export default class DatePickerSingle extends Component {
             ...style,
         };
 
+        // the height in px of the top part of the calendar (that holds
+        // the name of the month)
+        const baselineHeight = 145;
+
         return (
             <div
                 id={id}
@@ -106,6 +110,7 @@ export default class DatePickerSingle extends Component {
                     isRTL={is_RTL}
                     orientation={calendar_orientation}
                     daySize={day_size}
+                    verticalHeight={baselineHeight + day_size * 6 + 'px'}
                 />
             </div>
         );