Use a BEM-compliant CSS naming convention

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);
 }
 

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>