clearing changed on cleared all

src/containers/App.jsx

@@ -63,14 +63,14 @@ export class App extends React.Component {
 
     this.hideLoader();
 
-    this.setState({ changed: false });
+    this.clearChanged();
   };
 
   setTitle = title => this.setState({ title });
   setAddress = address => this.setState({ address });
 
   setDataOnLoad = data => {
-    this.setState({ changed: false });
+    this.clearChanged();
     this.editor.setData(data);
     this.hideLoader();
   };
@@ -114,6 +114,11 @@ export class App extends React.Component {
     this.setState({ changed: true });
   };
 
+  clearChanged = () => {
+    console.log('clearing');
+    this.setState({ changed: false });
+  };
+
   editor = new Editor({
     container: 'map',
     mode: this.state.mode,
@@ -127,6 +132,7 @@ export class App extends React.Component {
     setAddress: this.setAddress,
     getUser: this.getUser,
     triggerOnChange: this.triggerOnChange,
+    clearChanged: this.clearChanged,
   });
 
   authInit = () => {

src/modules/Editor.js

@@ -23,6 +23,7 @@ export class Editor {
     setAddress,
     getUser,
     triggerOnChange,
+    clearChanged,
   }) {
     this.logo = DEFAULT_LOGO;
     this.owner = null;
@@ -57,6 +58,9 @@ export class Editor {
       },
       [MODES.TRASH]: {
         toggle: this.clearAll,
+      },
+      [MODES.CONFIRM_CANCEL]: {
+        toggle: this.stopEditing,
       }
     };
 
@@ -66,6 +70,7 @@ export class Editor {
     };
 
     this.activeSticker = null;
+    this.clearChanged = clearChanged;
     this.setActiveSticker = setActiveSticker;
     this.setLogo = setLogo;
     this.setMode = setMode;
@@ -170,6 +175,8 @@ export class Editor {
 
     this.setSticker(null);
     this.changeMode(MODES.NONE);
+
+    this.clearChanged();
   };
 
   changeLogo = logo => {

src/styles/stickers.less

@@ -10,7 +10,6 @@
 
   &:before {
     content: ' ';
-    box-shadow: 0 0 10px 1px @red_secondary;
     background: @red_secondary;
     width: 48px;
     height: 48px;
@@ -19,8 +18,8 @@
     position: absolute;
     border-radius: 40px;
     opacity: 0;
+    transform: scale(0.5);
     transition: opacity 250ms, transform 500ms;
-    transform: scale(0);
   }
 
   &:hover, &:active {
@@ -30,7 +29,7 @@
     }
 
     &:before {
-      opacity: 1;
+      opacity: 0.3;
       transform: scale(1);
     }
   }