intuit#156 - rather than using custom react-splitter-layout fork, upg…

…rade to v4.0.0 where a custom css file can be provided more simply

app/package.json

@@ -21,7 +21,7 @@
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.8",
-    "react-splitter-layout": "davemasselink/react-splitter-layout",
+    "react-splitter-layout": "^4.0.0",
     "react-test-renderer": "^16.6.3",
     "redux": "^4.0.1",
     "redux-mock-store": "^1.5.3",

app/src/components/graph/GraphContainer.js

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
 import { withStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SplitterLayout from 'react-splitter-layout';
-import 'react-splitter-layout/lib/index.css';
+import '../../shared/reactSplitterLayoutWithOverrides.css';
 
 import "./Graph.css";
 import Graph from './Graph';

app/src/components/results/Results.js

@@ -9,7 +9,7 @@ import SearchIcon from '@material-ui/icons/Search';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import SplitterLayout from 'react-splitter-layout';
-import 'react-splitter-layout/lib/index.css';
+import '../../shared/reactSplitterLayoutWithOverrides.css';
 
 import { ENTER_KEYCODE } from '../../config/appConfig';
 import ResultList from './ResultList';

app/src/shared/reactSplitterLayoutWithOverrides.css

@@ -0,0 +1,55 @@
+.splitter-layout {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.splitter-layout .layout-pane {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: auto;
+}
+
+.splitter-layout .layout-pane.layout-pane-primary {
+  flex: 1 1 auto;
+}
+
+.splitter-layout > .layout-splitter {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: #ccc;
+  background-image: url("grabIcon.png");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.splitter-layout .layout-splitter:hover {
+  background-color: #bbb;
+}
+
+.splitter-layout.layout-changing {
+  cursor: col-resize;
+}
+
+.splitter-layout.layout-changing > .layout-splitter {
+  background-color: #aaa;
+}
+
+.splitter-layout.splitter-layout-vertical {
+  flex-direction: column;
+}
+
+.splitter-layout.splitter-layout-vertical.layout-changing {
+  cursor: row-resize;
+}
+
+.splitter-layout.splitter-layout-vertical > .layout-splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}

app/yarn.lock

@@ -8896,9 +8896,10 @@ [email protected]:
   optionalDependencies:
     fsevents "1.2.4"
 
-react-splitter-layout@davemasselink/react-splitter-layout:
+react-splitter-layout@^4.0.0:
   version "4.0.0"
-  resolved "https://codeload.github.com/davemasselink/react-splitter-layout/tar.gz/c47302f517cd2a8103e0ef22c61c347b41953f12"
+  resolved "https://registry.yarnpkg.com/react-splitter-layout/-/react-splitter-layout-4.0.0.tgz#70b43ca6a78c056f5e5fbf29c67b597f040fbf2e"
+  integrity sha512-SLqOjBOxRuizWUa83w6q5/u9cDWa9/yj9Iko9V9JFN8x+cqIXiDlUFWSx+icz3IIgvsN/oRIw3za5/32RjIwrA==
 
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.6.3:
   version "16.8.5"