Commit b28cfcea authored by Genar Trias Ortiz's avatar Genar Trias Ortiz 🎉

some UI fixes

parent 8050ed88
Pipeline #56609809 passed with stages
in 6 minutes and 13 seconds
......@@ -4,14 +4,19 @@ import { Dispatch, connect } from 'react-redux'
import * as types from '../../constants/ActionTypes'
type Props = {
dispatch: Dispatch
dispatch: Dispatch,
searchToggled: boolean
}
const SearchButton = ({dispatch}: Props) => {
const SearchButton = ({dispatch, searchToggled}: Props) => {
const toggleSearch = () => {
dispatch({type: types.TOGGLE_SEARCH})
}
if (searchToggled) {
return null
}
return (
<button
className='search-button button'
......@@ -22,4 +27,8 @@ const SearchButton = ({dispatch}: Props) => {
)
}
export default connect()(SearchButton)
export default connect(
(state) => ({
searchToggled: state.search.searchToggled
})
)(SearchButton)
......@@ -17,15 +17,6 @@ class LazyImage extends React.Component {
this.handleError = this.handleError.bind(this)
}
// Update component only if the src has changed
shouldComponentUpdate(nextProps) {
if (nextProps.src !== this.props.src) {
return false
}
return true
}
componentWillReceiveProps(nextProps) {
if (nextProps.src !== this.props.src) {
this.destroyLoading()
......
......@@ -85,6 +85,7 @@ class Topbar extends React.Component<Props, State> {
onFocusOut = () => {
this.setState({focus: false})
this.props.dispatch( { type: types.TOGGLE_SEARCH })
}
renderSearch = (props) => {
......@@ -97,6 +98,7 @@ class Topbar extends React.Component<Props, State> {
className={`search-bar ui huge action icon input inverted ${this.props.loading ? 'loading': ''}`}
>
<input
autoFocus
ref={(input) => { this.searchInput = input }}
onChange={this.onSearchChange}
onFocus={this.onFocus}
......
......@@ -20,6 +20,8 @@ const dynamicTitle = (router, collection): string => {
switch (router.location.pathname) {
case '/settings':
return 'Settings'
case '/search-results':
return 'Search results'
case '/collection':
return 'Collection'
case '/artists':
......
......@@ -92,6 +92,7 @@ span.label {
input.form-control:focus ,
input.form-control {
font-family: $font-family;
background-color: #000 !important;
color: $primary-color-100;
}
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