New: Custom Filtering for UI (#234)

frontend/src/Components/Page/Header/ArtistSearchInput.css

@@ -1,9 +1,6 @@
 .wrapper {
   display: flex;
-}
-
-.icon {
-  line-height: 24px !important;
+  align-items: center;
 }
 
 .input {

frontend/src/Components/Page/Header/ArtistSearchInput.js

@@ -155,7 +155,7 @@ class ArtistSearchInput extends Component {
     this.reset();
   }
 
-  onSuggestionSelected = (event, { suggestion, sectionIndex }) => {
+  onSuggestionSelected = (event, { suggestion }) => {
     if (suggestion.type === ADD_NEW_TYPE) {
       this.props.onGoToAddNewArtist(this.state.value);
     } else {
@@ -181,7 +181,7 @@ class ArtistSearchInput extends Component {
       });
     }
 
-    if (suggestions.length <= 3) {
+    if (value.length >= 3) {
       suggestionGroups.push({
         title: 'Add New Artist',
         suggestions: [
@@ -218,10 +218,7 @@ class ArtistSearchInput extends Component {
 
     return (
       <div className={styles.wrapper}>
-        <Icon
-          className={styles.icon}
-          name={icons.SEARCH}
-        />
+        <Icon name={icons.SEARCH} />
 
         <Autosuggest
           ref={this.setAutosuggestRef}

frontend/src/Components/Page/Header/PageHeaderActionsMenu.css

@@ -13,12 +13,6 @@
   margin-right: 8px;
 }
 
-.separator {
-  overflow: hidden;
-  height: 1px;
-  background-color: $themeDarkColor;
-}
-
 @media only screen and (max-width: $breakpointSmall) {
   .menuButton {
     margin-right: 5px;

frontend/src/Components/Page/Header/PageHeaderActionsMenu.js

@@ -6,6 +6,7 @@ import Menu from 'Components/Menu/Menu';
 import MenuButton from 'Components/Menu/MenuButton';
 import MenuContent from 'Components/Menu/MenuContent';
 import MenuItem from 'Components/Menu/MenuItem';
+import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
 import styles from './PageHeaderActionsMenu.css';
 
 function PageHeaderActionsMenu(props) {
@@ -34,7 +35,7 @@ function PageHeaderActionsMenu(props) {
             Keyboard Shortcuts
           </MenuItem>
 
-          <div className={styles.separator} />
+          <MenuItemSeparator />
 
           <MenuItem onPress={onRestartPress}>
             <Icon

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -336,7 +336,7 @@ class PageSidebar extends Component {
 
     if (isSidebarVisible && (touchStartX > 210 || touchStartX < 180)) {
       return;
-    } else if (!isSidebarVisible && touchStartX > 30) {
+    } else if (!isSidebarVisible && touchStartX > 40) {
       return;
     }
 
@@ -347,22 +347,29 @@ class PageSidebar extends Component {
   onTouchMove = (event) => {
     const touches = event.touches;
     const currentTouchX = touches[0].pageX;
-    const currentTouchY = touches[0].pageY;
+    // const currentTouchY = touches[0].pageY;
+    // const isSidebarVisible = this.props.isSidebarVisible;
 
     if (!this._touchStartX) {
       return;
     }
 
-    if (Math.abs(this._touchStartY - currentTouchY) > 20) {
-      this.setState({
-        transition: 'none',
-        transform: 0
-      });
+    // This is a bit funky when trying to close and you scroll
+    // vertical too much by mistake, commenting out for now.
+    // TODO: Evaluate if this should be nuked
 
-      return;
-    }
+    // if (Math.abs(this._touchStartY - currentTouchY) > 40) {
+    //   const transform = isSidebarVisible ? 0 : SIDEBAR_WIDTH * -1;
 
-    if (Math.abs(this._touchStartX - currentTouchX) < 20) {
+    //   this.setState({
+    //     transition: 'none',
+    //     transform
+    //   });
+
+    //   return;
+    // }
+
+    if (Math.abs(this._touchStartX - currentTouchX) < 40) {
       return;
     }
 

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -7,6 +7,10 @@
   &:hover {
     color: $toobarButtonHoverColor;
   }
+
+  &.isDisabled {
+    color: $disabledColor;
+  }
 }
 
 .isDisabled {