Show 'checkmark' icon when saved in editor

frontend/components/Editor/Editor.js

@@ -89,11 +89,12 @@ type KeyData = {
       case 's':
         ev.preventDefault();
         ev.stopPropagation();
-        return this.props.onSave({ redirect: false });
+        this.props.onSave();
+        return state;
       case 'enter':
         ev.preventDefault();
         ev.stopPropagation();
-        this.props.onSave();
+        this.props.onSave({ redirect: false });
         return state;
       case 'escape':
         return this.props.onCancel();

frontend/components/Icon/CheckIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function CheckIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+      </svg>
+    </Icon>
+  );
+}

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;

frontend/components/Modal/Modal.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
-import { modalFadeIn } from 'styles/animations';
+import { fadeAndScaleIn } from 'styles/animations';
 
 import CloseIcon from 'components/Icon/CloseIcon';
 import Flex from 'components/Flex';
@@ -46,7 +46,7 @@ const Content = styled(Flex)`
 `;
 
 const StyledModal = styled(ReactModal)`
-  animation: ${modalFadeIn} 250ms ease;
+  animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
   top: 0;