Logo selecting dialog

src/components/logo/LogoDialog.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+import { Icon } from '$components/panels/Icon';
+
+export class LogoDialog extends React.Component {
+  render() {
+    return (
+      <div className="helper logo-helper">
+        <div className="helper-back">
+          <Icon icon="icon-logo" size={200} />
+        </div>
+        {
+          Object.keys(LOGOS).map(logo => (
+            <div className="helper-menu-item" key={logo}>
+              {LOGOS[logo][0]}
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+}

src/components/panels/EditorDialog.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { MODES } from '$constants/modes';
 
-import { RouterHelper } from '$components/router/RouterHelper';
-import { StickersHelper } from '$components/stickers/StickersHelper';
-import { TrashHelper } from '$components/trash/TrashHelper';
+import { RouterDialog } from '$components/router/RouterDialog';
+import { StickersDialog } from '$components/stickers/StickersDialog';
+import { TrashDialog } from '$components/trash/TrashDialog';
+import { LogoDialog } from '$components/logo/LogoDialog';
 
 export const EditorDialog = ({
   mode, routerPoints, editor, activeSticker
@@ -12,14 +13,16 @@ export const EditorDialog = ({
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
     || mode === MODES.TRASH
+    || mode === MODES.LOGO
   );
 
   return (
     showDialog &&
       <div id="control-dialog">
-        { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} editor={editor} /> }
-        { mode === MODES.STICKERS && <StickersHelper editor={editor} /> }
-        { mode === MODES.TRASH && <TrashHelper editor={editor} /> }
+        { mode === MODES.ROUTER && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
+        { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
+        { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
+        { mode === MODES.LOGO && <LogoDialog editor={editor} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -18,6 +18,8 @@ export class EditorPanel extends React.PureComponent {
 
   startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
 
+  startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
+
   render() {
     const {
       mode, routerPoints, editor, totalDistance, estimateTime, activeSticker
@@ -97,6 +99,13 @@ export class EditorPanel extends React.PureComponent {
               <Icon icon="icon-trash" />
             </button>
 
+            <button
+              className={classnames({ active: mode === MODES.LOGO })}
+              onClick={this.startLogoMode}
+            >
+              <Icon icon="icon-logo" />
+            </button>
+
             <button
               className="highlighted"
             >

src/components/router/RouterDialog.jsx

@@ -45,7 +45,7 @@ const draggablePoints = ({ cancelDrawing, submitDrawing }) => (
   </div>
 );
 
-export class RouterHelper extends React.Component {
+export class RouterDialog extends React.Component {
   cancelDrawing = () => {
     this.props.editor.router.cancelDrawing();
   };

src/components/stickers/StickersDialog.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { stickers } from '$constants/stickers';
 import sprite from '$sprites/stickers.svg';
 
-export class StickersHelper extends React.Component {
+export class StickersDialog extends React.Component {
   render() {
     return (
       <div className="helper stickers-helper">

src/components/trash/TrashDialog.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { MODES } from '$constants/modes';
 
-export class TrashHelper extends React.Component {
+export class TrashDialog extends React.Component {
   clearPoly = () => {
     this.props.editor.poly.clearAll();
     this.props.editor.changeMode(MODES.NONE);