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'
+    }}
+  />
+);