Commit 48ea8f8c authored by Mattias Lundmark's avatar Mattias Lundmark
Browse files

Added an x to search input to clear current search

parent a183e1c5
...@@ -56,7 +56,7 @@ export const messages = defineMessages({ ...@@ -56,7 +56,7 @@ export const messages = defineMessages({
noItems: { noItems: {
id: 'History.noItems', id: 'History.noItems',
description: 'Message to show when user has no history items yet', 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!'
} }
}) })
......
...@@ -10,6 +10,7 @@ class SearchHeader extends React.Component { ...@@ -10,6 +10,7 @@ class SearchHeader extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.handleSearch = this.handleSearch.bind(this) this.handleSearch = this.handleSearch.bind(this)
this.clearSearch = this.clearSearch.bind(this)
this.handleLoginClick = this.handleLoginClick.bind(this) this.handleLoginClick = this.handleLoginClick.bind(this)
this.toggleMobileNav = this.toggleMobileNav.bind(this) this.toggleMobileNav = this.toggleMobileNav.bind(this)
} }
...@@ -38,6 +39,11 @@ class SearchHeader extends React.Component { ...@@ -38,6 +39,11 @@ class SearchHeader extends React.Component {
} }
} }
clearSearch (event) {
event.preventDefault()
this.searchFieldInput.value = ''
}
handleLoginClick (event) { handleLoginClick (event) {
event.preventDefault() event.preventDefault()
this.props.mobileNavigationActions.hideMobileNavigation() this.props.mobileNavigationActions.hideMobileNavigation()
...@@ -275,11 +281,19 @@ class SearchHeader extends React.Component { ...@@ -275,11 +281,19 @@ class SearchHeader extends React.Component {
<div className="search-field" > <div className="search-field" >
{this.renderSearchField()} {this.renderSearchField()}
</div > </div >
<div className="search-button" > <div className="search-buttons-wrapper" >
<button onClick={this.handleSearch} type="button" className="search-submit" <div className="clear-search-button" >
data-automation-id="search_button" > <button onClick={this.clearSearch} type="button" className="search-clear"
<img src="/images/search16.svg" /> data-automation-id="search_button" >
</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 >
</div > </div >
</form > </form >
......
...@@ -183,7 +183,7 @@ class PaymentResponse extends React.Component { ...@@ -183,7 +183,7 @@ class PaymentResponse extends React.Component {
transactionId={this.props.transactionId} transactionId={this.props.transactionId}
authorizationId={this.props.authorizationId} authorizationId={this.props.authorizationId}
sendPaymentReceiptSuccess={this.props.sendPaymentReceiptSuccess} sendPaymentReceiptSuccess={this.props.sendPaymentReceiptSuccess}
successfulExtends={this.props.successfulExtends}/> successfulExtends={this.props.successfulExtends} />
<Link to="/profile/loans" > <Link to="/profile/loans" >
<FormattedMessage {...messages.paymentReturnToMypage} /> <FormattedMessage {...messages.paymentReturnToMypage} />
</Link > </Link >
......
...@@ -43,8 +43,6 @@ class EmailReceiptForm extends React.Component { ...@@ -43,8 +43,6 @@ class EmailReceiptForm extends React.Component {
formName={formName} formName={formName}
getValidator={this.getValidator} /> getValidator={this.getValidator} />
{!this.props.sendPaymentReceiptSuccess && {!this.props.sendPaymentReceiptSuccess &&
<button className="blue-btn" type="submit" disabled={submitting} data-automation-id="emailReceiptForm_button"> <button className="blue-btn" type="submit" disabled={submitting} data-automation-id="emailReceiptForm_button">
<FormattedMessage {...messages.sendPaymentReceipt} /><br /> <FormattedMessage {...messages.sendPaymentReceipt} /><br />
......
...@@ -4055,6 +4055,13 @@ footer .social-icons { ...@@ -4055,6 +4055,13 @@ footer .social-icons {
height: 100%; height: 100%;
} }
.clear-search-button button {
margin: 0;
padding: 0;
width: 50%;
height: 50%;
}
.search-box input { .search-box input {
-webkit-appearance: none; -webkit-appearance: none;
background-position: 0.5em center; background-position: 0.5em center;
...@@ -4066,18 +4073,34 @@ footer .social-icons { ...@@ -4066,18 +4073,34 @@ footer .social-icons {
width: 100%; width: 100%;
} }
.search-buttons-wrapper {
display: flex;
justify-content: flex-end;
}
.search-button { .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; width: 32px;
height: 32px; height: 32px;
float: right; float: right;
flex-shrink: 0;
} }
.search-box button:hover, .search-box button:active, .search-box button:focus { .search-box button:hover, .search-box button:active, .search-box button:focus {
cursor: pointer; cursor: pointer;
} }
.search-field {
@include span(9);
}
@include breakpoint($small) { @include breakpoint($small) {
...@@ -4116,14 +4139,14 @@ footer .social-icons { ...@@ -4116,14 +4139,14 @@ footer .social-icons {
} }
} }
.search-field {
@include span(9);
}
@include breakpoint($small) { @include breakpoint($small) {
.search-button { .search-button {
margin: 1em; margin: 1em 1em 1em 0em;
}
.clear-search-button {
margin: 1.1em 0em 1em 1em;
} }
.search-box { .search-box {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment