diff --git a/src/components/Tutorials/index.jsx b/src/components/Tutorials/index.jsx
index ec366e4f..b54f951d 100644
--- a/src/components/Tutorials/index.jsx
+++ b/src/components/Tutorials/index.jsx
@@ -22,6 +22,66 @@ import Spinner from "../../helpers/spinner";
import AddNewStepModal from "./subComps/AddNewStep";
import QuillEditor from "../Editor/QuillEditor";
import RichTextRenderer from "./subComps/RichTextRenderer";
+import { Collapse, Button } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(theme => ({
+ flexRow: {
+ display: "flex",
+ flexDirection: "row"
+ },
+ collapseContainer: {
+ minWidth: "100%",
+ "& > div > div": {
+ minWidth: "100%"
+ },
+ overflow: "hidden",
+ transition: theme.transitions.create(["width"])
+ },
+ widthTransition: {
+ overflow: "hidden",
+ transition: theme.transitions.create(["width"])
+ },
+ expandButton: {
+ display: "flex",
+ alignItems: "start",
+ paddingTop: "15px"
+ },
+ rotateChildren: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transition: theme.transitions.create("transform", {
+ duration: theme.transitions.duration.shortest
+ })
+ },
+ ExpandIcon: {
+ fontSize: 50
+ },
+ editorContainer: {
+ width: "100%",
+ padding: "0 10px 10px 10px",
+ overflow: "hidden",
+ background: "white"
+ }
+}));
+
+const ExpandMore = props => {
+ const { expand, children, ...other } = props;
+ const classes = useStyles({ expand });
+
+ return (
+
+ );
+};
const ViewTutorial = () => {
const firebase = useFirebase();
@@ -37,10 +97,12 @@ const ViewTutorial = () => {
const [currentStepContent, setCurrentStepContent] = useState(null);
const [stepsData, setStepData] = useState(null);
const [tutorialData, setTutorialData] = useState(null);
+ const [expand, setExpand] = useState(true);
const isDesktop = useMediaQuery({
query: "(min-device-width: 767px)"
});
const { owner, tutorial_id } = useParams();
+ const classes = useStyles();
useEffect(() => {
getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
@@ -147,23 +209,44 @@ const ViewTutorial = () => {
/>
-
+
+ {
+ setExpand(prev => !prev);
+ setStepPanelVisible(prev => !prev);
+ }}
+ aria-expanded={expand}
+ aria-label="show more"
+ >
+
+
+
- setStepPanelVisible(false)}
- hideButton={isDesktop}
- setCurrentStep={setCurrentStep}
- setStepData={setStepData}
- />
+
+ setStepPanelVisible(false)}
+ hideButton={isDesktop}
+ setCurrentStep={setCurrentStep}
+ setStepData={setStepData}
+ />
+
-
+
({
justifyContent: "space-between",
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
- alignItems: "center"
+ alignItems: "center",
+ gap: "30px"
}
},
rightButtonsGroup: {
@@ -22,7 +23,11 @@ const useStyles = makeStyles(theme => ({
borderWidth: "2px",
"&:hover": {
borderWidth: "2px"
- }
+ },
+ minWidth: "fit-content",
+ },
+ completeButton: {
+ minWidth: "fit-content"
}
}));
@@ -86,6 +91,7 @@ const ControlButtons = ({
)
);
}}
+ className={classes.completeButton}
>
{stepsData[currentStep].completed
? "Reset Step"
diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
index a4537c9a..7afb46cf 100644
--- a/src/components/Tutorials/subComps/TutorialTitle.jsx
+++ b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -35,7 +35,8 @@ const TutorialHeading = ({
data-testid="tutorialTitle"
variant="h5"
sx={{
- pt: 5
+ pt: 2,
+ pb: 2
}}
>
{tutorialData.title}