misc tweaks

CHANGELOG.md

@@ -3,6 +3,7 @@
 # 1.2.0
 
 - Copy editor content / output to clipboard
+- Fix output pane scrolling
 
 # 1.1.0
 

package.json

@@ -32,7 +32,7 @@
     "react-copy-to-clipboard": "^5.0.0",
     "react-dom": "^15.3.1",
     "react-redux": "^4.4.5",
-    "react-split-pane": "^0.1.66",
+    "react-splitter-layout": "^0.2.1",
     "redux": "^3.6.0",
     "redux-persist": "4.8.3",
     "redux-thunk": "^2.1.0"

src/app/components/CopyButton/index.js

@@ -29,7 +29,7 @@ export default class CopyButton extends Component {
       this.setState({
         buttonText: this.defaultButtonText
       })
-    }, 2000)
+    }, 1000)
   }
 
   render () {

src/app/components/CopyButton/styles.css

@@ -1,7 +1,7 @@
 .CopyButton {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 17px;
+  right: 22px;
   border: 1px solid #FFA503;
   background: transparent;
   padding: 6px 12px;

src/app/components/Setting/Selector/index.js

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import './styles.css'
+
 export default function ({ label, initialValue, options, onChange }) {
   return (
     <div className='Settings__setting'>

src/app/components/Setting/Selector/styles.css

@@ -0,0 +1,3 @@
+.Setting__selector:focus {
+  outline: none;
+}

src/app/containers/App/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import SplitPane from 'react-split-pane'
+import SplitterLayout from 'react-splitter-layout'
 import Editor from '../Editor'
 import Status from '../../components/Status'
 import Output from '../../components/Output'
@@ -15,10 +15,10 @@ const App = ({ outputTheme, output, status }) => {
         <Settings />
       </div>
       <div className='App__EditorOutput'>
-        <SplitPane split='vertical' minSize={100} maxSize={-100} defaultSize='50%'>
+        <SplitterLayout percentage primaryMinSize={20} secondaryMinSize={20} secondaryInitialSize={50}>
           <Editor />
           <Output theme={outputTheme}>{output}</Output>
-        </SplitPane>
+        </SplitterLayout>
       </div>
       <div className='App__Status'>
         <Status status={status} />

src/app/containers/App/styles.css

@@ -10,8 +10,11 @@
   flex: 1;
 }
 
-.Resizer.vertical {
-  border-left: 3px solid #ddd;
-  border-right: 3px solid #ddd;
-  cursor: col-resize;
+.layout-splitter {
+  background-color: #ddd !important;
+  width: 5px !important;
+}
+
+.CodeMirror-hscrollbar {
+  left: 0 !important;
 }

yarn.lock

@@ -823,10 +823,6 @@ [email protected]:
   dependencies:
     hoek "2.x.x"
 
-bowser@^1.6.0:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.2.tgz#b94cc6925ba6b5e07c421a58e601ce4611264572"
-
 brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -1215,12 +1211,6 @@ [email protected]:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-in-js-utils@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
-  dependencies:
-    hyphenate-style-name "^1.0.2"
-
 css-loader@^0.25.0:
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.25.0.tgz#c3febc8ce28f4c83576b6b13707f47f90c390223"
@@ -2337,10 +2327,6 @@ [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-hyphenate-style-name@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
-
 iconv-lite@~0.4.13:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
@@ -2394,13 +2380,6 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inline-style-prefixer@^3.0.6:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.7.tgz#0ccc92e5902fe6e0d28d975c4258443f880615f8"
-  dependencies:
-    bowser "^1.6.0"
-    css-in-js-utils "^1.0.3"
-
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -3804,19 +3783,9 @@ react-redux@^4.4.5:
     loose-envify "^1.1.0"
     prop-types "^15.5.4"
 
-react-split-pane@^0.1.66:
-  version "0.1.66"
-  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.66.tgz#369085dd07ec1237bda123e73813dcc7dc6502c1"
-  dependencies:
-    inline-style-prefixer "^3.0.6"
-    prop-types "^15.5.10"
-    react-style-proptype "^3.0.0"
-
-react-style-proptype@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.0.0.tgz#89e0b646f266c656abb0f0dd8202dbd5036c31e6"
-  dependencies:
-    prop-types "^15.5.4"
+react-splitter-layout:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/react-splitter-layout/-/react-splitter-layout-0.2.1.tgz#77099ab5e80b0fad3e0e8dc31dd4a93aa26441fa"
 
 react@^15.3.1:
   version "15.6.1"