diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index a5777aeb1a..715fb86105 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -2,7 +2,6 @@ import LanguageIcon from "@mui/icons-material/Language"; import MenuOpenIcon from "@mui/icons-material/MenuOpen"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff"; -import RefreshIcon from "@mui/icons-material/Refresh"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; @@ -23,6 +22,7 @@ import { formatLastPublishMessage } from "pages/FlowEditor/utils"; import React, { useState } from "react"; import { useAsync } from "react-use"; import Permission from "ui/editor/Permission"; +import Reset from "ui/icons/Reset"; import Input from "ui/shared/Input"; import Questions from "../../../Preview/Questions"; @@ -64,6 +64,7 @@ const SidebarContainer = styled(Box)(() => ({ overflow: "auto", flex: 1, background: "#fff", + position: "relative", })); const Header = styled("header")(({ theme }) => ({ @@ -83,6 +84,15 @@ const Header = styled("header")(({ theme }) => ({ }, })); +const ResetToggle = styled(Button)(({ theme }) => ({ + position: "absolute", + top: 0, + right: theme.spacing(3), + padding: theme.spacing(1, 1, 1, 0), + textDecorationStyle: "solid", + color: theme.palette.text.primary, +})); + const TabList = styled(Box)(({ theme }) => ({ position: "relative", // Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides @@ -175,7 +185,6 @@ const Sidebar: React.FC<{ state.validateAndDiffFlow, state.isFlowPublished, ]); - const [key, setKey] = useState(false); const [lastPublishedTitle, setLastPublishedTitle] = useState( "This flow is not published yet", ); @@ -261,15 +270,6 @@ const Sidebar: React.FC<{ value={props.url.replace("/published", "/preview")} /> - - { - resetPreview(); - setKey((a) => !a); - }} - /> - - setDebugConsoleVisibility(!showDebugConsole)} @@ -442,7 +442,16 @@ const Sidebar: React.FC<{ {activeTab === "PreviewBrowser" && ( - + { + resetPreview(); + }} + > + + Restart + + )} {activeTab === "History" && ( diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx index ac1f400730..2f69cc4c60 100644 --- a/editor.planx.uk/src/pages/Preview/Questions.tsx +++ b/editor.planx.uk/src/pages/Preview/Questions.tsx @@ -1,6 +1,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import Box from "@mui/material/Box"; -import ButtonBase from "@mui/material/ButtonBase"; +import Button from "@mui/material/Button"; import Container from "@mui/material/Container"; import { styled } from "@mui/material/styles"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; @@ -23,23 +23,12 @@ const BackBar = styled(Box)(() => ({ zIndex: "1000", })); -export const BackButton = styled(ButtonBase)(({ theme, hidden }) => ({ +export const BackButton = styled(Button)(({ theme, hidden }) => ({ visibility: "visible", pointerEvents: "auto", - display: "flex", - cursor: "pointer", userSelect: "none", alignSelf: "start", - fontSize: "inherit", - background: "transparent", - border: "none", - columnGap: theme.spacing(1), padding: theme.spacing(1, 1, 1, 0), - minHeight: "48px", - textDecoration: "underline", - "&:hover": { - textDecorationThickness: "3px", - }, ...(hidden && { visibility: "hidden", pointerEvents: "none", @@ -180,6 +169,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {