diff --git a/src/js/App.js b/src/js/App.js index b0a4880d..bbc9dd08 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -100,12 +100,12 @@ class App extends React.Component{ var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) if (width <= 800){ - if (!global.slim_mode){ - global.slim_mode = true + if (!this.props.slim_mode){ + this.props.uiActions.setSlimMode(true) } } else { - if (global.slim_mode){ - global.slim_mode = false + if (this.props.slim_mode){ + this.props.uiActions.setSlimMode(false) } } } @@ -213,7 +213,7 @@ class App extends React.Component{ if (this.props.sidebar_open) className += ' sidebar-open' if (this.props.modal) className += ' modal-open' if (this.props.touch_dragging) className += ' touch-dragging' - if (global.slim_mode) className += ' slim-mode' + if (this.props.slim_mode) className += ' slim-mode' if (helpers.isTouchDevice()){ className += ' touch' } else { @@ -254,6 +254,7 @@ class App extends React.Component{ const mapStateToProps = (state, ownProps) => { return { touch_dragging: state.ui.touch_dragging, + slim_mode: state.ui.slim_mode, broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []), volume: (state.mopidy.volume ? state.mopidy.volume : false), notifications: (state.ui.notifications ? state.ui.notifications : []), diff --git a/src/scss/components/_filter-field.scss b/src/scss/components/_filter-field.scss index 59d6ea03..c711776a 100755 --- a/src/scss/components/_filter-field.scss +++ b/src/scss/components/_filter-field.scss @@ -48,6 +48,7 @@ .fa { top: 17px; left: 24px; + color: $white !important; } input { diff --git a/src/scss/views/_user.scss b/src/scss/views/_user.scss index e3aa59d5..7511fdd3 100755 --- a/src/scss/views/_user.scss +++ b/src/scss/views/_user.scss @@ -1,52 +1,52 @@ - -.user-view { - .intro { - @include clearfix(); - position: relative; - - .parallax { - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: auto; - } - - .liner { - position: relative; - z-index: 1; - padding: 35vh 40px 0; - - h1 { - padding-bottom: 15px; - font-size: 4rem; - } - - h2 { - padding-bottom: 25px; - } - } - } - - @include responsive( $bp_medium ){ - .intro { - - .thumbnail { - float: none; - margin: 0 auto 20px; - } - - .liner { - padding: 15vh 10px 0; - } - - h1 { - padding-top: 0; - font-size: 3rem; - line-height: 3rem; - } - } - } -} + +.user-view { + .intro { + @include clearfix(); + position: relative; + + .parallax { + position: absolute; + z-index: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: auto; + } + + .liner { + position: relative; + z-index: 1; + padding: 35vh 40px 0; + + h1 { + padding-bottom: 15px; + font-size: 4rem; + } + + h2 { + padding-bottom: 25px; + } + } + } + + @include responsive( $bp_medium ){ + .intro { + + .thumbnail { + float: none; + margin: 0 auto 20px; + } + + .liner { + padding: 15vh 10px 0; + } + + h1 { + padding-top: 0; + font-size: 3rem; + line-height: 3rem; + } + } + } +}