cropper: separate crop panel

src/components/panels/RendererPanel.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+
+type Props = {
+
+};
+
+export const RendererPanel = ({ onCancel, onSubmit }): Props => (
+  <div
+    className="panel active center"
+    style={{ zIndex: 1000 }}
+  >
+    <div className="control-bar control-bar-padded">
+      <button>
+        <Icon icon="icon-logo-3" />
+      </button>
+    </div>
+
+    <div className="control-sep" />
+
+    <div className="control-bar">
+      <button
+        className="highlighted cancel"
+        onClick={onCancel}
+      >
+        <Icon icon="icon-cancel-1" />
+        <span>Отмена</span>
+      </button>
+
+      <button
+        className="success"
+        onClick={onSubmit}
+      >
+        <span>СКАЧАТЬ</span>
+        <Icon icon="icon-get-1" />
+      </button>
+    </div>
+  </div>
+);

src/components/panels/UserPanel.jsx

@@ -93,7 +93,7 @@ export class Component extends React.PureComponent<Props, void> {
             <button
               onClick={this.props.takeAShot}
             >
-              <Icon icon="icon-shot-3" />
+              <Icon icon="icon-shot-2" />
             </button>
           </div>
         </div>

src/components/renderer/Renderer.jsx

@@ -7,6 +7,7 @@ import Croppr from 'croppr';
 import 'croppr/dist/croppr.css';
 import { Icon } from '$components/panels/Icon';
 import { LOGOS } from '$constants/logos';
+import { RendererPanel } from '$components/panels/RendererPanel';
 
 type Props = {
   data: String,
@@ -45,7 +46,7 @@ class Component extends React.Component<Props, State> {
     this.logo.style.transform = `scale(${scale})`;
 
     this.logoImg = document.createElement('img');
-    this.logoImg.src = LOGOS[this.props.logo][1];
+    if (this.props.logo && LOGOS[this.props.logo][1]) this.logoImg.src = LOGOS[this.props.logo][1];
 
     this.logo.append(this.logoImg);
     regionEl.append(this.logo);
@@ -89,41 +90,10 @@ class Component extends React.Component<Props, State> {
           </div>
         </div>
 
-        <div
+        <RendererPanel
-          className="panel active"
+          onCancel={this.props.hideRenderer}
-          style={{
+          onSubmit={this.getImage}
-            zIndex: 1000,
+        />
-            left: '50%',
-            right: 'auto',
-            transform: 'translateX(-50%)',
-          }}
-        >
-          <div className="control-bar control-bar-padded">
-            <button>
-              <Icon icon="icon-logo-3" />
-            </button>
-          </div>
-
-          <div className="control-sep" />
-
-          <div className="control-bar">
-            <button
-              className="highlighted cancel"
-              onClick={this.props.hideRenderer}
-            >
-              <Icon icon="icon-cancel-1" />
-              <span>Отмена</span>
-            </button>
-
-            <button
-              className="success"
-              onClick={this.getImage}
-            >
-              <span>СКАЧАТЬ</span>
-              <Icon icon="icon-get-1" />
-            </button>
-          </div>
-        </div>
       </div>
     );
   }

src/redux/store.js

@@ -4,15 +4,12 @@ import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import createSagaMiddleware from 'redux-saga';
 
-// import createHistory from 'history/createBrowserHistory';
-// import { routerReducer, routerMiddleware } from 'react-router-redux';
-
 import { userReducer } from '$redux/user/reducer';
 import { userSaga } from '$redux/user/sagas';
 
 const userPersistConfig = {
   key: 'user',
-  whitelist: ['user'],
+  whitelist: ['user', 'logo'],
   storage,
 };
 
@@ -39,13 +36,9 @@ export const store = createStore(
 );
 
 export function configureStore() {
-  // run sagas
   sagaMiddleware.run(userSaga);
 
   const persistor = persistStore(store);
 
-  return {
+  return { store, persistor };
-    store,
-    persistor
-  };
 }

src/styles/panel.less

@@ -56,6 +56,12 @@
     right: 10px;
   }
 
+  &.center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
   button {
     border: none;
     background: transparent;