svg buttons (initial)

removed styled-components
gradient paths

src/components/Fills.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Fills = () => (
+  <svg>
+    <defs>
+      <linearGradient id="activeButtonGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
+        <stop offset="0%" stopColor="#55ddff" />
+        <stop offset="100%" stopColor="#7137c8" />
+      </linearGradient>
+    </defs>
+
+    <defs>
+      <linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
+        <stop offset="0%" stopColor="#ff9900" />
+        <stop offset="100%" stopColor="#ff3344" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

src/components/Icon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import sprite from '$sprites/icon.svg';
+
+export const Icon = ({ icon, size = 32 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" preserveAspectRatio="midXmidY meet">
+    <use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
+  </svg>
+);
+

src/components/panels/EditorPanel.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MODES } from '$constants/modes';
+import classnames from 'classnames';
+
+import { Icon } from '$components/Icon';
+
+export class EditorPanel extends React.PureComponent {
+  startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
+
+  startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS);
+
+  startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER);
+
+  startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
+
+  render() {
+    const { mode } = this.props;
+
+    return (
+      <div id="control-screen">
+        <button
+          className={classnames({ active: mode === MODES.ROUTER })}
+          onClick={this.startRouterMode}
+        >
+          <Icon icon="icon-router" />
+        </button>
+        <button
+          className={classnames({ active: mode === MODES.POLY })}
+          onClick={this.startPolyMode}
+        >
+          <Icon icon="icon-poly" />
+        </button>
+        <button
+          className={classnames({ active: mode === MODES.STICKERS })}
+          onClick={this.startStickerMode}
+        >
+          <Icon icon="icon-sticker" />
+        </button>
+
+        <button
+          className={classnames({ active: mode === MODES.SHOTTER })}
+          onClick={this.startShotterMode}
+        >
+          <Icon icon="icon-shooter" />
+        </button>
+      </div>
+    );
+  }
+};