logo selecting

src/components/logo/LogoDialog.jsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import { LOGOS } from '$constants/logos';
 import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
 
 export class LogoDialog extends React.Component {
+  changeLogo = logo => {
+    this.props.editor.changeLogo(logo);
+  };
+
   render() {
     return (
       <div className="helper logo-helper">
@@ -11,7 +16,11 @@ export class LogoDialog extends React.Component {
         </div>
         {
           Object.keys(LOGOS).map(logo => (
-            <div className="helper-menu-item" key={logo}>
+            <div
+              className={classnames('helper-menu-item', { active: (logo === this.props.logo) })}
+              onClick={() => this.changeLogo(logo)}
+              key={logo}
+            >
               {LOGOS[logo][0]}
             </div>
           ))

src/components/logo/LogoPreview.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+
+export const LogoPreview = ({ logo }) => (
+  <div
+    className="logo-preview"
+    style={{
+      backgroundImage: logo
+        ? `url(${LOGOS[logo][1]})`
+        : 'none'
+    }}
+  />
+);

src/components/panels/EditorDialog.jsx

@@ -7,7 +7,7 @@ import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
 
 export const EditorDialog = ({
-  mode, routerPoints, editor, activeSticker
+  mode, routerPoints, editor, activeSticker, logo
 }) => {
   const showDialog = (
     mode === MODES.ROUTER
@@ -22,7 +22,7 @@ export const EditorDialog = ({
         { 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} /> }
+        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -6,6 +6,7 @@ import { toHours } from '$utils/time';
 
 import { Icon } from '$components/panels/Icon';
 import { EditorDialog } from '$components/panels/EditorDialog';
+import { LogoPreview } from '$components/logo/LogoPreview';
 
 export class EditorPanel extends React.PureComponent {
   startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
@@ -22,7 +23,7 @@ export class EditorPanel extends React.PureComponent {
 
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker
+      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo,
     } = this.props;
 
     return (
@@ -33,8 +34,11 @@ export class EditorPanel extends React.PureComponent {
           routerPoints={routerPoints}
           activeSticker={activeSticker}
           editor={editor}
+          logo={logo}
         />
 
+        <LogoPreview logo={logo} />
+
         <div className="panel">
           <div className="control-bar">
             <button
@@ -56,7 +60,10 @@ export class EditorPanel extends React.PureComponent {
                     (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
                   }
                 </React.Fragment>
-              : <div onClick={() => editor.changeMode(MODES.ROUTER)}>Начать рисовать</div>
+              :
+                <div onClick={() => editor.changeMode(MODES.ROUTER)}>
+                  <div className="button danger">Начать рисовать</div>
+                </div>
             }
           </div>