migrateMUI next: Restructure component definitions

src/components/Faq.js

@@ -4,15 +4,15 @@ import Breadcrumbs from "./Breadcrumbs";
 
 import { withRouter } from "react-router-dom";
 
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
-import Container from "@material-ui/core/Container";
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Container from "@mui/material/Container";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FaqQuestions } from "../data/faq";
@@ -47,16 +47,16 @@ class Faq extends Component {
             <h1>FAQ</h1>
             {FaqQuestions().map((object, i) => {
               return (
-                <ExpansionPanel
+                <Accordion
                   expanded={panel === `panel${i}`}
                   onChange={() => this.handleChange(`panel${i}`)}
                 >
-                  <ExpansionPanelSummary
+                  <AccordionSummary
                     expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
                   >
                     <Typography variant="h6">{object.question}</Typography>
-                  </ExpansionPanelSummary>
-                  <ExpansionPanelDetails>
+                  </AccordionSummary>
+                  <AccordionDetails>
                     <Typography>
                       <ReactMarkdown
                         className="news"
@@ -65,8 +65,8 @@ class Faq extends Component {
                         rehypePlugins={[rehypeRaw]}
                       ></ReactMarkdown>
                     </Typography>
-                  </ExpansionPanelDetails>
-                </ExpansionPanel>
+                  </AccordionDetails>
+                </Accordion>
               );
             })}
             {this.props.button ? (