Workable document moving

frontend/components/Labeled/Labeled.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import Flex from 'components/Flex';
+import styled from 'styled-components';
+import { size } from 'styles/constants';
+
+type Props = {
+  label: React.Element<*> | string,
+  children: React.Element<*>,
+};
+
+const Labeled = ({ label, children, ...props }: Props) => (
+  <Flex column {...props}>
+    <Header>{label}</Header>
+    {children}
+  </Flex>
+);
+
+const Header = styled(Flex)`
+  margin-bottom: ${size.medium};  
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #9FA6AB;
+  letter-spacing: 0.04em;
+`;
+
+export default observer(Labeled);

frontend/components/Labeled/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Labeled from './Labeled';
+export default Labeled;

frontend/components/Modal/Modal.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
 import { color } from 'styles/constants';
@@ -75,4 +76,4 @@ const Close = styled.a`
   }
 `;
 
-export default Modal;
+export default observer(Modal);