refactor(styles): separate styles for separate files. Each component have a style file.

app/components/PatchSVG.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const PatchSVG = ({ children, onMouseMove, onMouseUp }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    className="Patch"
+    className="PatchSVG"
     width="100%"
     height="100%"
     onMouseMove={onMouseMove}

app/components/PatchWrapper.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const PatchWrapper = ({ children }) => (
-  <div className="Patch-wrapper">
+  <div className="PatchWrapper">
     {children}
   </div>
 );

app/components/SnackBarError.jsx

@@ -89,7 +89,7 @@ class SnackBarError extends React.Component {
 
   render() {
     const error = this.props.error;
-    const cls = classNames('SnackBar-Error', {
+    const cls = classNames('SnackBarError', {
       hidden: this.state.hidden,
     });
     return (

app/components/SnackBarList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const SnackBarList = ({ children }) => (
-  <ul className="SnackBar-List">
+  <ul className="SnackBarList">
     {children}
   </ul>
 );

app/containers/Patch.jsx

@@ -118,7 +118,7 @@ class Patch extends React.Component {
   }
 
   onMouseMove(event) {
-    const svg = findParentByClassName(event.target, 'Patch');
+    const svg = findParentByClassName(event.target, 'PatchSVG');
     const bbox = svg.getBoundingClientRect();
 
     const mousePosition = {

app/styles/abstracts/variables.scss

@@ -21,3 +21,5 @@ $color-canvas-almost-ok: #ab0;
 
 $color-ctrl-background: #2d4c29;
 $color-ctrl-background-text: #fff;
+
+$snackbar-width: 200px;

app/styles/components/PatchSVG.scss

@@ -0,0 +1,8 @@
+.PatchSVG {
+  cursor: default;
+  user-select: none;
+
+  .layer-background {
+    fill: $color-canvas-background;
+  }
+}

app/styles/components/PatchWrapper.scss

@@ -1,4 +1,4 @@
-.Patch-wrapper {
+.PatchWrapper {
   position: absolute;
   height: 100%;
   left: 0;
@@ -8,13 +8,4 @@
   padding: 20px;
   overflow: hidden;
   box-shadow: inset 2px 0 10px rgba(0,0,30,.3);
-}
-
-.Patch {
-  cursor: default;
-  user-select: none;
-
-  .layer-background {
-    fill: $color-canvas-background;
-  }
-}
+}

app/styles/components/SnackBarError.scss

@@ -1,15 +1,4 @@
-$snackbar-width: 200px;
-
-
-.SnackBar-List {
-  position: fixed;
-  z-index: 10;
-  bottom: 0;
-  right: 0;
-  width: $snackbar-width;
-}
-
-.SnackBar-Error {
+.SnackBarError {
   position: relative;
   display: block;
   margin-top: 1px;

app/styles/components/SnackBarList.scss

@@ -0,0 +1,7 @@
+.SnackBarList {
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  right: 0;
+  width: $snackbar-width;
+}

app/styles/main.scss

@@ -14,12 +14,14 @@
   'base/base';
 
 @import
-  'components/Patch',
+  'components/PatchWrapper',
+  'components/PatchSVG',
   'components/Node',
   'components/NodeText',
   'components/Pin',
   'components/Link',
   'components/Toolbar',
   'components/Inspector',
-  'components/SnackBar',
+  'components/SnackBarList',
+  'components/SnackBarError',
   'components/CreateNodeWidget';