Added an x to search input to clear current search

redef/patron-client/src/frontend/components/HistoryItems.js

@@ -56,7 +56,7 @@ export const messages = defineMessages({
   noItems: {
     id: 'History.noItems',
     description: 'Message to show when user has no history items yet',
-    defaultMessage: "You don’t have any history yet. Check out and return something!"
+    defaultMessage: 'You don’t have any history yet. Check out and return something!'
   }
 })
 

redef/patron-client/src/frontend/components/SearchHeader.js

@@ -10,6 +10,7 @@ class SearchHeader extends React.Component {
   constructor (props) {
     super(props)
     this.handleSearch = this.handleSearch.bind(this)
+    this.clearSearch = this.clearSearch.bind(this)
     this.handleLoginClick = this.handleLoginClick.bind(this)
     this.toggleMobileNav = this.toggleMobileNav.bind(this)
   }
@@ -38,6 +39,11 @@ class SearchHeader extends React.Component {
     }
   }
 
+  clearSearch (event) {
+    event.preventDefault()
+    this.searchFieldInput.value = ''
+  }
+
   handleLoginClick (event) {
     event.preventDefault()
     this.props.mobileNavigationActions.hideMobileNavigation()
@@ -275,11 +281,19 @@ class SearchHeader extends React.Component {
                 <div className="search-field" >
                   {this.renderSearchField()}
                 </div >
-                <div className="search-button" >
-                  <button onClick={this.handleSearch} type="button" className="search-submit"
-                          data-automation-id="search_button" >
-                  <img src="/images/search16.svg" />
-                  </button >
+                <div className="search-buttons-wrapper" >
+                  <div className="clear-search-button" >
+                    <button onClick={this.clearSearch} type="button" className="search-clear"
+                            data-automation-id="search_button" >
+                    <img src="/images/x.svg" />
+                    </button >
+                  </div >
+                  <div className="search-button" >
+                    <button onClick={this.handleSearch} type="button" className="search-submit"
+                            data-automation-id="search_button" >
+                    <img src="/images/search16.svg" />
+                    </button >
+                  </div >
                 </div >
               </div >
             </form >

redef/patron-client/src/frontend/containers/PaymentResponse.js

@@ -183,7 +183,7 @@ class PaymentResponse extends React.Component {
               transactionId={this.props.transactionId}
               authorizationId={this.props.authorizationId}
               sendPaymentReceiptSuccess={this.props.sendPaymentReceiptSuccess}
-              successfulExtends={this.props.successfulExtends}/>
+              successfulExtends={this.props.successfulExtends} />
           <Link to="/profile/loans" >
             <FormattedMessage {...messages.paymentReturnToMypage} />
           </Link >

redef/patron-client/src/frontend/containers/forms/EmailReceiptForm.js

@@ -43,8 +43,6 @@ class EmailReceiptForm extends React.Component {
                             formName={formName}
                             getValidator={this.getValidator} />
 
-
-
           {!this.props.sendPaymentReceiptSuccess &&
             <button className="blue-btn" type="submit" disabled={submitting} data-automation-id="emailReceiptForm_button">
               <FormattedMessage {...messages.sendPaymentReceipt} /><br />

redef/patron-client/src/sass/main.scss

@@ -4055,6 +4055,13 @@ footer .social-icons {
   height: 100%;
 }
 
+.clear-search-button button {
+  margin: 0;
+  padding: 0;
+  width: 50%;
+  height: 50%;
+}
+
 .search-box input {
   -webkit-appearance: none;
   background-position: 0.5em center;
@@ -4066,18 +4073,34 @@ footer .social-icons {
   width: 100%;
 }
 
+.search-buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .search-button {
-  margin: 0.5em;
+  margin: 0.5em 0.5em 0.5em 0em;
+  width: 32px;
+  height: 32px;
+  float: right;
+  flex-shrink: 0;
+}
+
+.clear-search-button {
+  margin: 0.6em 0em 0.5em 0.5em;
   width: 32px;
   height: 32px;
   float: right;
+  flex-shrink: 0;
 }
 
 .search-box button:hover, .search-box button:active, .search-box button:focus {
   cursor: pointer;
 }
 
-
+.search-field {
+  @include span(9);
+}
 
 @include breakpoint($small) {
 
@@ -4116,14 +4139,14 @@ footer .social-icons {
   }
 }
 
-.search-field {
-  @include span(9);
-}
-
 @include breakpoint($small) {
 
   .search-button {
-    margin: 1em;
+    margin: 1em 1em 1em 0em;
+  }
+
+  .clear-search-button {
+    margin: 1.1em 0em 1em 1em;
   }
 
   .search-box {