diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx index eddf9188f9..8e1f2e8286 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx @@ -16,37 +16,48 @@ import { DesignPreview, SettingsForm } from "."; type FormValues = Pick; -export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => { +export const ThemeAndLogoForm: React.FC<{ + team: Team; + onSuccess: () => void; +}> = ({ team, onSuccess }) => { const theme = useTheme(); useEffect(() => { setInitialValues({ primaryColour: team.theme?.primaryColour, logo: team.theme?.logo, - }) - }, [team]) - + }); + }, [team]); + const [initialValues, setInitialValues] = useState({ primaryColour: "", logo: "", - }) + }); const formik = useFormik({ initialValues, onSubmit: async (values, { resetForm }) => { - await useStore.getState().updateTeamTheme(values); - // Reset "dirty" status to disable Save & Reset buttons - resetForm({ values }); + const isSuccess = await useStore.getState().updateTeamTheme(values); + if (isSuccess) { + onSuccess(); + // Reset "dirty" status to disable Save & Reset buttons + resetForm({ values }); + } }, validateOnBlur: false, validateOnChange: false, enableReinitialize: true, validate: ({ primaryColour }) => { - const isContrastThresholdMet = getContrastRatio("#FFF", primaryColour) > theme.palette.contrastThreshold; + const isContrastThresholdMet = + getContrastRatio("#FFF", primaryColour) > + theme.palette.contrastThreshold; if (!isContrastThresholdMet) { - return { primaryColour: "Theme colour does not meet accessibility contrast requirements (3:1)"} - }; + return { + primaryColour: + "Theme colour does not meet accessibility contrast requirements (3:1)", + }; + } }, }); @@ -75,7 +86,9 @@ export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => { formik.setFieldValue("primaryColour", color)} + onChange={(color) => + formik.setFieldValue("primaryColour", color) + } label="Theme colour" /> @@ -83,7 +96,9 @@ export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => { Logo: - formik.setFieldValue("logo", newUrl)}/> + formik.setFieldValue("logo", newUrl)} + /> = ({ team }) => { } preview={ - { formik.values.logo - ? council logo - : {team?.name} - } + {formik.values.logo ? ( + council logo + ) : ( + + {team?.name} + + )} } /> diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx index 74b06ff0f1..4bc13a3951 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx @@ -1,5 +1,7 @@ +import Alert from "@mui/material/Alert"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; +import Snackbar from "@mui/material/Snackbar"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { Team } from "@opensystemslab/planx-core/types"; @@ -14,7 +16,7 @@ import InputLegend from "ui/editor/InputLegend"; import ErrorWrapper from "ui/shared/ErrorWrapper"; import { ButtonForm } from "./ButtonForm"; -import { FaviconForm } from "./FaviconFrom"; +import { FaviconForm } from "./FaviconForm"; import { TextLinkForm } from "./TextLinkForm"; import { ThemeAndLogoForm } from "./ThemeAndLogoForm"; @@ -77,7 +79,10 @@ export const SettingsForm: React.FC = ({ {preview} )} - +