fix UI bugs

packages/netlify-cms-core/src/components/App/Header.js

@@ -47,9 +47,7 @@ const AppHeaderContent = styled.div`
 `;
 
 const AppHeaderButton = styled.button`
-  border: 0;
+  ${buttons.button};
-  cursor: pointer;
-  background-color: transparent;
   color: #7b8290;
   font-size: 16px;
   font-weight: 500;
@@ -103,8 +101,6 @@ export default class Header extends React.Component {
     displayUrl: PropTypes.string,
   };
 
-  static activeClassName = `${uuid()}-active`;
-
   handleCreatePostClick = (collectionName) => {
     const { onCreateEntryClick } = this.props;
     if (onCreateEntryClick) {
@@ -132,7 +128,7 @@ export default class Header extends React.Component {
             <nav>
               <AppHeaderNavLink
                 to="/"
-                activeClassName={Header.activeClassName}
+                activeClassName="header-link-active"
                 isActive={(match, location) => location.pathname.startsWith('/collections/')}
               >
                 <Icon type="page"/>
@@ -140,7 +136,7 @@ export default class Header extends React.Component {
               </AppHeaderNavLink>
               {
                 hasWorkflow
-                  ? <AppHeaderNavLink to="/workflow" activeClassName={Header.activeClassName}>
+                  ? <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
                       <Icon type="workflow"/>
                       Workflow
                     </AppHeaderNavLink>

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -97,8 +97,6 @@ export default class Sidebar extends React.Component {
     collections: ImmutablePropTypes.orderedMap.isRequired,
   };
 
-  static sidebarLinkActiveClassName = `${uuid()}-sidebar-active`;
-
   state = { query: this.props.searchTerm || '' };
 
   renderLink = collection => {
@@ -107,7 +105,7 @@ export default class Sidebar extends React.Component {
       <SidebarNavLink
         key={collectionName}
         to={`/collections/${collectionName}`}
-        activeClassName={Sidebar.sidebarLinkActiveClassName}
+        activeClassName="sidebar-active"
       >
         <Icon type="write"/>
         {collection.get('label')}

packages/netlify-cms-widget-relation/src/RelationControl.js

@@ -1,55 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'react-emotion';
+import { injectGlobal, css } from 'react-emotion';
 import Autosuggest from 'react-autosuggest';
 import uuid from 'uuid/v4';
 import { List, Map } from 'immutable';
 import { debounce } from 'lodash';
 import { Loader, components } from 'netlify-cms-ui-default';
 
-/**
+injectGlobal`
- * Create a classname for use as a descendant selector. This is generally
+  .react-autosuggest__container {
- * discouraged in Emotion because composition will break the resulting
- * classnames, but we won't be using composition here.
- */
-const styles = {
-  suggestionsContainer: css`
-    display: none;
-  `,
-};
-
-/**
- * react-autosuggest theme spec:
- * https://github.com/moroshko/react-autosuggest#theme-optional
- */
-const theme = {
-  container: css`
     position: relative;
-  `,
+  }
-  containerOpen: css`
+
-    ${styles.suggestionsContainer} {
+  .react-autosuggest__suggestions-container {
-      ${components.dropdownList}
+    display: none;
-      position: absolute;
+  }
-      display: block;
+
-      top: 51px;
+  .react-autosuggest__container--open .react-autosuggest__suggestions-container {
-      width: 100%;
+    ${components.dropdownList}
-      z-index: 2;
+    position: absolute;
-    }
+    display: block;
-  `,
+    top: 51px;
-  suggestion: css`
+    width: 100%;
-    ${components.drodpownItem};
+    z-index: 2;
-    cursor: pointer;
+  }
-    padding: 10px 20px;
+
-  `,
+  .react-autosuggest__suggestion {
-  suggestionsList: css`
+    ${components.dropdownItem}
+  }
+
+  .react-autosuggest__suggestions-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
-  `,
+  }
-  suggestionHighlighted: css`
+
+  .react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 10px 20px;
+  }
+
+  .react-autosuggest__suggestion--focused {
     background-color: #ddd;
-  `,
+  }
-};
+`
 
 function escapeRegexCharacters(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -93,15 +87,12 @@ export default class RelationControl extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log(`receiving`);
-    console.log(nextProps.queryHits && nextProps.queryHits.get(this.controlID));
     if (this.didInitialSearch) return;
     if (nextProps.queryHits !== this.props.queryHits && nextProps.queryHits.get && nextProps.queryHits.get(this.controlID)) {
       this.didInitialSearch = true;
       const suggestion = nextProps.queryHits.get(this.controlID);
       if (suggestion && suggestion.length === 1) {
         const val = this.getSuggestionValue(suggestion[0]);
-        console.log(`accepting ${val}`);
         this.props.onChange(val, { [nextProps.field.get('collection')]: { [val]: suggestion[0].data } });
       }
     }
@@ -121,7 +112,6 @@ export default class RelationControl extends React.Component {
     const { field } = this.props;
     const collection = field.get('collection');
     const searchFields = field.get('searchFields').toJS();
-    console.log(`querying ${value}`);
     this.props.query(this.controlID, collection, searchFields, value);
   }, 500);
 
@@ -182,7 +172,6 @@ export default class RelationControl extends React.Component {
           renderSuggestion={this.renderSuggestion}
           inputProps={inputProps}
           focusInputOnSuggestionClick={false}
-          theme={theme}
         />
         <Loader active={isFetching === this.controlID} />
       </div>