diff --git a/web/modals/account/log-in-first-modal.react.js b/web/modals/account/log-in-first-modal.react.js
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -23,7 +23,7 @@
   };
 
   return (
-    <Modal name="Log in" onClose={this.clearModal}>
+    <Modal name="Log in" clearModal={this.clearModal}>
       <div className={css['modal-body']}>
         <p>
           {`In order to ${props.inOrderTo}, you'll first need to `}
diff --git a/web/modals/account/log-in-modal.react.js b/web/modals/account/log-in-modal.react.js
--- a/web/modals/account/log-in-modal.react.js
+++ b/web/modals/account/log-in-modal.react.js
@@ -61,7 +61,7 @@
 
   render() {
     return (
-      <Modal name="Log in" onClose={this.props.clearModal}>
+      <Modal name="Log in" clearModal={this.props.clearModal}>
         <div className={css['modal-body']}>
           <form method="POST">
             <div>
diff --git a/web/modals/account/user-settings-modal.react.js b/web/modals/account/user-settings-modal.react.js
--- a/web/modals/account/user-settings-modal.react.js
+++ b/web/modals/account/user-settings-modal.react.js
@@ -205,7 +205,11 @@
     }
 
     return (
-      <Modal name="Edit account" onClose={this.props.clearModal} size="large">
+      <Modal
+        name="Edit account"
+        clearModal={this.props.clearModal}
+        size="large"
+      >
         <ul className={css['tab-panel']}>
           <Tab
             name="General"
diff --git a/web/modals/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -12,7 +12,7 @@
   invariant(modalContext, 'ModalContext not found');
 
   return (
-    <Modal name="Invalid upload" onClose={modalContext.clearModal}>
+    <Modal name="Invalid upload" clearModal={modalContext.clearModal}>
       <div className={css['modal-body']}>
         <p>We don&apos;t support that file type yet :(</p>
       </div>
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -117,7 +117,7 @@
   }
 
   return (
-    <Modal name="Sidebars" onClose={clearModal} fixedHeight={false}>
+    <Modal name="Sidebars" clearModal={clearModal} fixedHeight={false}>
       <div
         className={classNames(
           globalCSS['modal-body'],
diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -12,7 +12,7 @@
 
 export default function ConcurrentModificationModal(props: Props): React.Node {
   return (
-    <Modal name="Concurrent modification" onClose={props.onClose}>
+    <Modal name="Concurrent modification" clearModal={props.onClose}>
       <div className={css['modal-body']}>
         <p>
           It looks like somebody is attempting to modify that field at the same
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -167,7 +167,7 @@
     });
 
     return (
-      <Modal name="History" onClose={this.props.onClose}>
+      <Modal name="History" clearModal={this.props.onClose}>
         <div className={css.modalBody}>
           <div className={css.header}>
             {allHistoryButton}
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -10,7 +10,7 @@
 export type ModalSize = 'small' | 'large';
 type Props = {
   +name: string,
-  +onClose: () => void,
+  +clearModal: () => void,
   +children?: React.Node,
   +size?: ModalSize,
   +fixedHeight?: boolean,
@@ -28,7 +28,7 @@
   }
 
   render(): React.Node {
-    const { size, children, onClose, fixedHeight, name } = this.props;
+    const { size, children, clearModal, fixedHeight, name } = this.props;
 
     const overlayClasses = classNames(
       css['modal-overlay'],
@@ -53,7 +53,7 @@
         <div className={modalContainerClasses}>
           <div className={modalClasses}>
             <div className={css['modal-header']}>
-              <span className={css['modal-close']} onClick={onClose}>
+              <span className={css['modal-close']} onClick={clearModal}>
                 ×
               </span>
               <h2>{name}</h2>
@@ -73,7 +73,7 @@
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.props.onClose();
+      this.props.clearModal();
     }
   };
 
@@ -81,7 +81,7 @@
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.props.onClose();
+      this.props.clearModal();
     }
   };
 }
@@ -94,7 +94,7 @@
   return (
     <Modal
       name={name}
-      onClose={modalContext.clearModal}
+      clearModal={modalContext.clearModal}
       fixedHeight={fixedHeight}
       size={size}
     >
diff --git a/web/modals/threads/cant-leave-thread-modal.react.js b/web/modals/threads/cant-leave-thread-modal.react.js
--- a/web/modals/threads/cant-leave-thread-modal.react.js
+++ b/web/modals/threads/cant-leave-thread-modal.react.js
@@ -10,7 +10,7 @@
 };
 function CantLeaveThreadModal(props: Props): React.Node {
   return (
-    <Modal name="Cannot leave thread" onClose={props.onClose}>
+    <Modal name="Cannot leave thread" clearModal={props.onClose}>
       <div className={css['modal-body']}>
         <p>
           You are the only admin left of this thread. Please promote somebody
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -14,7 +14,7 @@
 };
 function ConfirmLeaveThreadModal(props: Props): React.Node {
   return (
-    <Modal name="Confirm leave thread" onClose={props.onClose}>
+    <Modal name="Confirm leave thread" clearModal={props.onClose}>
       <div className={css['modal-body']}>
         <p>
           {'Are you sure you want to leave "'}
diff --git a/web/modals/threads/new-thread-modal.react.js b/web/modals/threads/new-thread-modal.react.js
--- a/web/modals/threads/new-thread-modal.react.js
+++ b/web/modals/threads/new-thread-modal.react.js
@@ -130,7 +130,7 @@
       );
     }
     return (
-      <Modal name="New thread" onClose={this.props.onClose} size="large">
+      <Modal name="New thread" clearModal={this.props.onClose} size="large">
         <div className={css['modal-body']}>
           <form method="POST">
             <div>
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -380,7 +380,7 @@
     return (
       <Modal
         name="Thread settings"
-        onClose={this.props.clearModal}
+        clearModal={this.props.clearModal}
         size="large"
       >
         <ul className={css['tab-panel']}>{tabs}</ul>
@@ -574,7 +574,7 @@
 
     if (!threadInfo) {
       return (
-        <Modal onClose={modalContext.clearModal} name="Invalid thread">
+        <Modal clearModal={modalContext.clearModal} name="Invalid thread">
           <div className={css['modal-body']}>
             <p>You no longer have permission to view this thread</p>
           </div>