diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index c2833cc031cd46c597842065ab6cf0a8757440e4..7ee88dad85188886bf0f5eb4b444e3b4a7c3c648 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -14,7 +14,7 @@
  * https://github.com/philipwalton/flexbugs/issues/157
  * Set margin to zero when using Flexbox in `WindowModal` component 
  */
-.Modal-backdrop > .Modal, .Modal-backdrop-dark > .Modal {
+.Modal-backdrop > .Modal, .Modal-backdrop--dark > .Modal {
   margin: 0;
 }
 
@@ -40,7 +40,7 @@
     background-color: rgba(255, 255, 255, 0.6);
 }
 
-.Modal-backdrop-dark {
+.Modal-backdrop--dark {
     background-color: rgba(75, 75, 75, 0.7);
 }
 
diff --git a/frontend/src/metabase/query_builder/components/QueryModeButton.jsx b/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
index e422e1f3318705cb52a8b03c1e66e848b61f3007..47f0890a29fe8f2927f0665df26a90e63c5f80c5 100644
--- a/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
@@ -59,7 +59,7 @@ export default class QueryModeButton extends Component {
                     </span>
                 </Tooltip>
 
-                <Modal medium backdropClassName="Modal-backdrop-dark" isOpen={this.state.isOpen} onClose={() => this.setState({isOpen: false})}>
+                <Modal medium backdropClassName="Modal-backdrop--dark" isOpen={this.state.isOpen} onClose={() => this.setState({isOpen: false})}>
                     <div className="p4">
                         <div className="mb3 flex flex-row flex-full align-center justify-between">
                             <h2>{capitalize(nativeQueryName)} for this question</h2>