Show 'checkmark' icon when saved in editor

frontend/components/Layout/components/SaveAction/SaveAction.js

@@ -1,14 +1,17 @@
 // @flow
 import React from 'react';
-import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import CheckIcon from 'components/Icon/CheckIcon';
+import { fadeAndScaleIn } from 'styles/animations';
 
 type Props = {
   onClick: Function,
+  showCheckmark: boolean,
   disabled?: boolean,
   isNew?: boolean,
 };
 
-@observer class SaveAction extends React.Component {
+class SaveAction extends React.Component {
   props: Props;
 
   onClick = (event: MouseEvent) => {
@@ -19,21 +22,38 @@ type Props = {
   };
 
   render() {
-    const { disabled, isNew } = this.props;
+    const { showCheckmark, disabled, isNew } = this.props;
 
     return (
-      <div>
-        <a
-          href
-          onClick={this.onClick}
-          style={{ opacity: disabled ? 0.5 : 1 }}
-          title="Save changes (Cmd+Enter)"
-        >
-          {isNew ? 'Publish' : 'Save'}
-        </a>
-      </div>
+      <Link
+        href
+        onClick={this.onClick}
+        style={{ opacity: disabled ? 0.5 : 1 }}
+        title="Save changes (Cmd+Enter)"
+      >
+        {showCheckmark && <SavedIcon />}
+        {isNew ? 'Publish' : 'Save'}
+      </Link>
     );
   }
 }
 
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+`;
+
+const SavedIcon = styled(CheckIcon)`
+  animation: ${fadeAndScaleIn} 250ms ease;
+  display: inline-block;
+  margin-right: 4px;
+  width: 18px;
+  height: 18px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
 export default SaveAction;