Update the it's-ok-to-play-with-saved-questions modal (#11105)

* update the it's-ok-to-play-with-saved-questions modal

* center align and add y padding

frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx

 import React, { Component } from "react";
 
 import Modal from "metabase/components/Modal";
+import ModalContent from "metabase/components/ModalContent";
 import { t } from "ttag";
 
 export default class SavedQuestionIntroModal extends Component {
   render() {
     return (
-      <Modal small isOpen={this.props.isShowingNewbModal}>
-        <div className="Modal-content Modal-content--small NewForm">
-          <div className="Modal-header">
-            <h2 className="pb2 text-dark">{t`It's okay to play around with saved questions`}</h2>
-
-            <div className="pb1 text-medium">{t`You won't make any permanent changes to a saved question unless you click the edit icon in the top-right.`}</div>
-          </div>
-
+      <Modal isOpen={this.props.isShowingNewbModal}>
+        <ModalContent
+          title={t`It's okay to play around with saved questions`}
+          className="Modal-content text-centered py2"
+        >
+          <div className="px2 pb2 text-paragraph">{t`You won't make any permanent changes to a saved question unless you click Save and choose to replace the original question.`}</div>
           <div className="Form-actions flex justify-center py1">
             <button
               data-metabase-event={"QueryBuilder;IntroModal"}
@@ -21,7 +20,7 @@ export default class SavedQuestionIntroModal extends Component {
               onClick={() => this.props.onClose()}
             >{t`Okay`}</button>
           </div>
-        </div>
+        </ModalContent>
       </Modal>
     );
   }