migrateMUI next: Restructure component definitions

src/components/Tutorial/Builder/Step.js

@@ -15,10 +15,10 @@ import BlocklyExample from "./BlocklyExample";
 import Requirements from "./Requirements";
 import Hardware from "./Hardware";
 
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import withStyles from '@mui/styles/withStyles';
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import {
   faPlus,
@@ -85,7 +85,7 @@ class Step extends Component {
                 className={this.props.classes.button}
                 style={index === 0 ? {} : { marginBottom: "5px" }}
                 onClick={() => this.props.addStep(index + 1)}
-              >
+                size="large">
                 <FontAwesomeIcon icon={faPlus} size="xs" />
               </IconButton>
             </Tooltip>
@@ -100,7 +100,7 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index - 1)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
                   </IconButton>
                 </Tooltip>
@@ -113,7 +113,7 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index + 1)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
                   </IconButton>
                 </Tooltip>
@@ -125,7 +125,7 @@ class Step extends Component {
                       this.props.classes.delete
                     )}
                     onClick={() => this.props.removeStep(index)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faTrash} size="xs" />
                   </IconButton>
                 </Tooltip>