fix various bugs

packages/netlify-cms-core/package.json

@@ -46,12 +46,12 @@
     "mdast-util-definitions": "^1.2.2",
     "mdast-util-to-string": "^1.0.4",
     "moment": "^2.11.2",
+    "netlify-cms-editor-component-image": "file:../netlify-cms-editor-component-image",
     "netlify-cms-lib-auth": "file:../netlify-cms-lib-auth",
     "netlify-cms-lib-util": "file:../netlify-cms-lib-util",
     "netlify-cms-ui-default": "file:../netlify-cms-ui-default",
-    "netlify-cms-editor-component-image": "file:../netlify-cms-editor-component-image",
     "prop-types": "^15.5.10",
-    "react": "15.x || 16.x",
+    "react": "^16.4.1",
     "react-aria-menubutton": "^5.1.0",
     "react-autosuggest": "^9.3.2",
     "react-datetime": "^2.11.0",
@@ -69,7 +69,7 @@
     "react-router-redux": "^5.0.0-alpha.8",
     "react-scroll-sync": "^0.4.0",
     "react-sortable-hoc": "^0.6.8",
-    "react-split-pane": "^0.1.81",
+    "react-split-pane": "^0.1.82",
     "react-textarea-autosize": "^5.2.0",
     "react-toggled": "^1.1.2",
     "react-topbar-progress-indicator": "^2.0.0",

packages/netlify-cms-core/src/backends/github/API.js

@@ -4,7 +4,8 @@ import { uniq, initial, last, get, find, hasIn, partial } from "lodash";
 import { filterPromises, resolvePromiseProperties } from "netlify-cms-lib-util/promise";
 import AssetProxy from "ValueObjects/AssetProxy";
 import { SIMPLE, EDITORIAL_WORKFLOW, status } from "Constants/publishModes";
-import { APIError, EditorialWorkflowError } from "netlify-cms-lib-util";
+import APIError from "netlify-cms-lib-util/APIError";
+import EditorialWorkflowError from "netlify-cms-lib-util/EditorialWorkflowError";
 
 const CMS_BRANCH_PREFIX = 'cms/';
 

packages/netlify-cms-core/src/components/Editor/EditorInterface.js

@@ -16,7 +16,7 @@ const PREVIEW_VISIBLE = 'cms.preview-visible';
 const SCROLL_SYNC_ENABLED = 'cms.scroll-sync-enabled';
 
 const styles = {
-  noPreviewContainer: css`
+  splitPane: css`
     ${components.card};
     border-radius: 0;
     height: 100%;
@@ -53,18 +53,21 @@ injectGlobal`
     }
   }
 
+`
+
+const StyledSplitPane = styled(SplitPane)`
+  ${styles.splitPane};
+
   /**
    * Quick fix for preview pane not fully displaying in Safari
    */
-  .SplitPane {
-    .Pane {
-      height: 100%;
-    }
+  .Pane {
+    height: 100%;
   }
 `
 
 const NoPreviewContainer = styled.div`
-  ${styles.noPreviewContainer};
+  ${styles.splitPane};
 `
 
 const EditorContainer = styled.div`
@@ -202,7 +205,7 @@ class EditorInterface extends Component {
     const editorWithPreview = (
       <ScrollSync enabled={this.state.scrollSyncEnabled}>
         <div>
-          <SplitPane
+          <StyledSplitPane
             maxSize={-100}
             defaultSize="50%"
             onDragStarted={this.handleSplitPaneDragStart}
@@ -218,7 +221,7 @@ class EditorInterface extends Component {
                 getAsset={getAsset}
               />
             </PreviewPaneContainer>
-          </SplitPane>
+          </StyledSplitPane>
         </div>
       </ScrollSync>
     );

packages/netlify-cms-core/src/components/Editor/EditorToggle.js

@@ -2,30 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
 import Icon from 'netlify-cms-ui-default/Icon';
-import { colors, colorsRaw, shadows } from 'netlify-cms-ui-default/styles';
+import { colors, colorsRaw, shadows, buttons } from 'netlify-cms-ui-default/styles';
 
 const EditorToggleButton = styled.button`
+  ${buttons.button};
   ${shadows.dropMiddle};
   background-color: ${colorsRaw.white};
-  color: ${props => colors[props.active ? `active` : `inactive`]};
+  color: ${props => colors[props.isActive ? `active` : `inactive`]};
   border-radius: 32px;
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 40px;
   height: 40px;
   padding: 0;
   margin-bottom: 12px;
-
-  ${Icon} {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 `
 
 const EditorToggle = ({ enabled, active, onClick, icon }) => !enabled ? null :
-  <EditorToggleButton onClick={onClick}>
+  <EditorToggleButton onClick={onClick} isActive={active}>
     <Icon type={icon} size="large"/>
   </EditorToggleButton>;
 

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -18,6 +18,7 @@ const styles = {
     height: 100%;
     display: flex;
     align-items: center;
+    border: 0 solid ${colors.textFieldBorder};
   `,
 }
 
@@ -38,6 +39,7 @@ const ToolbarContainer = styled.div`
 `
 
 const ToolbarSectionMain = styled.div`
+  ${styles.toolbarSection};
   flex: 10;
   display: flex;
   justify-content: space-between;
@@ -54,7 +56,6 @@ const ToolbarSubSectionLast = styled(ToolbarSubSectionFirst)`
 
 const ToolbarSectionBackLink = styled(Link)`
   ${styles.toolbarSection};
-  border: 0 solid ${colors.textFieldBorder};
   border-right-width: 1px;
   font-weight: normal;
   padding: 0 20px;
@@ -116,6 +117,7 @@ const BackStatusChanged = styled(BackStatus)`
 `
 
 const ToolbarButton = styled.button`
+  ${buttons.button};
   ${buttons.default};
   ${styles.buttonMargin};
   display: block;
@@ -151,6 +153,12 @@ const StatusButton = styled(StyledDropdownButton)`
   color: ${colorsRaw.teal};
 `
 
+const StatusDropdownItem = styled(DropdownItem)`
+  ${Icon} {
+    color: ${colors.infoText};
+  }
+`
+
 export default class EditorToolbar extends React.Component {
   static propTypes = {
     isPersisting: PropTypes.bool,
@@ -265,17 +273,17 @@ export default class EditorToolbar extends React.Component {
             <StatusButton>{isUpdatingStatus ? 'Updating...' : 'Set status'}</StatusButton>
           )}
         >
-          <DropdownItem
+          <StatusDropdownItem
             label="Draft"
             onClick={() => onChangeStatus('DRAFT')}
             icon={currentStatus === status.get('DRAFT') && 'check'}
           />
-          <DropdownItem
+          <StatusDropdownItem
             label="In review"
             onClick={() => onChangeStatus('PENDING_REVIEW')}
             icon={currentStatus === status.get('PENDING_REVIEW') && 'check'}
           />
-          <DropdownItem
+          <StatusDropdownItem
             label="Ready"
             onClick={() => onChangeStatus('PENDING_PUBLISH')}
             icon={currentStatus === status.get('PENDING_PUBLISH') && 'check'}

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js

@@ -15,6 +15,9 @@ const CloseButton = styled.button`
   border-radius: 50%;
   background-color: white;
   padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `
 
 const LibraryTitle = styled.h1`

packages/netlify-cms-core/src/reducers/medias.js

@@ -1,5 +1,5 @@
 import { Map } from 'immutable';
-import { resolvePath } from 'netlify-cms-lib-util';
+import { resolvePath } from 'netlify-cms-lib-util/path';
 import { ADD_ASSET, REMOVE_ASSET } from 'Actions/media';
 import AssetProxy from 'ValueObjects/AssetProxy';
 

packages/netlify-cms-core/src/valueObjects/AssetProxy.js

@@ -1,5 +1,5 @@
-import { resolvePath } from 'netlify-cms-lib-util';
-import { currentBackend } from "Backends/backend";
+import { resolvePath } from 'netlify-cms-lib-util/path';
+import { currentBackend } from 'Backends/backend';
 import { getIntegrationProvider } from 'Integrations';
 import { selectIntegration } from 'Reducers';
 

packages/netlify-cms-lib-util/src/index.js

@@ -1,20 +0,0 @@
-import localForage from './localForage';
-import { resolvePath, basename, fileExtensionWithSeparator, fileExtension } from './path';
-import { filterPromises, resolvePromiseProperties, then } from './promise';
-import unsentRequest from './unsentRequest';
-import APIError from './APIError';
-import EditorialWorkflowError from './EditorialWorkflowError';
-
-export {
-  localForage,
-  resolvePath,
-  basename,
-  fileExtensionWithSeparator,
-  fileExtension,
-  filterPromises,
-  resolvePromiseProperties,
-  then,
-  unsentRequest,
-  APIError,
-  EditorialWorkflowError,
-};

packages/netlify-cms-ui-default/package.json

@@ -16,7 +16,7 @@
     "emotion": "^9.1.3",
     "lodash": "^4.13.1",
     "prop-types": "^15.5.10",
-    "react": "15.x || 16.x",
+    "react": "^16.4.1",
     "react-aria-menubutton": "^5.1.0",
     "react-emotion": "^9.2.6",
     "react-toggled": "^1.1.2",

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -85,10 +85,11 @@ const Dropdown = ({
   dropdownWidth = 'auto',
   dropdownPosition = 'left',
   dropdownTopOverlap = '0',
+  className,
   children,
 }) => {
   return (
-    <StyledWrapper onSelection={handler => handler()}>
+    <StyledWrapper onSelection={handler => handler()} className={className}>
       {renderButton()}
       <Menu>
         <DropdownList width={dropdownWidth} top={dropdownTopOverlap} position={dropdownPosition}>
@@ -99,8 +100,8 @@ const Dropdown = ({
   );
 };
 
-const DropdownItem = ({ label, icon, iconDirection, onClick }) => (
-  <StyledMenuItem value={onClick}>
+const DropdownItem = ({ label, icon, iconDirection, onClick, className }) => (
+  <StyledMenuItem value={onClick} className={className}>
     <span>{label}</span>
     {
       icon

packages/netlify-cms-ui-default/src/Icon.js

@@ -7,7 +7,7 @@ const IconWrapper = styled.span`
   line-height: 0;
   width: ${props => props.size};
   height: ${props => props.size};
-  transform: ${props => `rotation(${props.rotation})`};
+  transform: ${props => `rotate(${props.rotation})`};
 
   & path:not(.no-fill),
   & circle:not(.no-fill),