Updated DateInput to be clearable

src/common/DateInput.js

@@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
 import './DateInput.scss';
+import { isNil } from 'ramda';
 
 export default class DateInput extends React.Component {
   constructor(props) {
@@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
   }
 
   render() {
+    const { isClearable, selected } = this.props;
+    const showCalendarIcon = !isClearable || isNil(selected);
+
     return (
       <div className="date-input-container">
         <DatePicker
@@ -20,11 +24,11 @@ export default class DateInput extends React.Component {
           readOnly
           ref={this.inputRef}
         />
-        <FontAwesomeIcon
+        {showCalendarIcon && <FontAwesomeIcon
           icon={calendarIcon}
           className="date-input-container__icon"
           onClick={() => this.inputRef.current.input.focus()}
-        />
+        />}
       </div>
     );
   }

src/common/DateInput.scss

@@ -1,4 +1,5 @@
 @import '../utils/mixins/vertical-align';
+@import '../utils/base';
 
 .date-input-container {
   position: relative;
@@ -11,6 +12,18 @@
 
 .date-input-container__icon {
   @include vertical-align();
-  right: 15px;
+  right: .75rem;
   cursor: pointer;
 }
+
+.react-datepicker__close-icon.react-datepicker__close-icon {
+  @include vertical-align();
+  right: 0;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon::after {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333;
+  font-size: 14px;
+}