diff --git a/src/ui/components/ModalOverlay.js b/src/ui/components/ModalOverlay.tsx
similarity index 84%
rename from src/ui/components/ModalOverlay.js
rename to src/ui/components/ModalOverlay.tsx
index cc223b837..a1747a201 100644
--- a/src/ui/components/ModalOverlay.js
+++ b/src/ui/components/ModalOverlay.tsx
@@ -5,8 +5,9 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import {Component} from 'react';
+import React from 'react';
 
 const Overlay = styled('div')({
   alignItems: 'center',
@@ -22,8 +23,8 @@ const Overlay = styled('div')({
 });
 
 export default class ModalOverlay extends Component<{
-  onClose: () => void,
-  children?: React$Node,
+  onClose: () => void;
+  children?: React.ReactNode;
 }> {
   ref: HTMLElement;
 
@@ -31,7 +32,7 @@ export default class ModalOverlay extends Component<{
     this.ref = ref;
   };
 
-  onClick = (e: SyntheticMouseEvent<>) => {
+  onClick = (e: React.MouseEvent) => {
     if (e.target === this.ref) {
       this.props.onClose();
     }
diff --git a/src/ui/index.js b/src/ui/index.js
index 09fdeab60..7098fb356 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -129,7 +129,7 @@ export {default as Text} from './components/Text.js';
 export {default as TextParagraph} from './components/TextParagraph.js';
 export {default as Link} from './components/Link.js';
 export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.js';
-export {default as ModalOverlay} from './components/ModalOverlay.js';
+export {default as ModalOverlay} from './components/ModalOverlay.tsx';
 export {default as Tooltip} from './components/Tooltip.js';
 export {default as TooltipProvider} from './components/TooltipProvider.js';
 export {default as ResizeSensor} from './components/ResizeSensor.js';