diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx index 4120b2761f..b43ffd4bbf 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx @@ -27,8 +27,8 @@ export const ButtonForm: React.FC = ({ formikConfig }) => { the selected colour (being either black or white). - - See our guide for setting button colours + + See our guide for setting button colours (TODO) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx index c675ffce9b..5f99c52635 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx @@ -29,7 +29,7 @@ export const FaviconForm: React.FC = ({ formikConfig }) => { 32x32px and in .ico or .png format. - See our guide for favicons + See our guide for favicons (TODO) } diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx index c39a968855..dc8910d99f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx @@ -39,8 +39,8 @@ export const TextLinkForm: React.FC = ({ formikConfig }) => { white ("#ffffff"). - - See our guide for setting text link colours + + See our guide for setting text link colours (TODO) 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 5d2d80a8fa..460f4c0fb6 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 @@ -6,17 +6,17 @@ import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import ColorPicker from "ui/editor/ColorPicker"; +import ImgInput from "ui/editor/ImgInput"; import InputDescription from "ui/editor/InputDescription"; import InputRow from "ui/shared/InputRow"; import InputRowItem from "ui/shared/InputRowItem"; import InputRowLabel from "ui/shared/InputRowLabel"; -import PublicFileUploadButton from "ui/shared/PublicFileUploadButton"; import { DesignPreview, FormProps, SettingsForm } from "."; export const ThemeAndLogoForm: React.FC = ({ formikConfig }) => { const theme = useTheme(); - const teamName = useStore((state) => state.teamName); + const teamSlug = useStore((state) => state.teamSlug); const formik = useFormik({ ...formikConfig, @@ -34,6 +34,10 @@ export const ThemeAndLogoForm: React.FC = ({ formikConfig }) => { }, }); + const updateLogo = (newFile: string | undefined) => newFile + ? formik.setFieldValue("logo", newFile) + : formik.setFieldValue("logo", null); + return ( = ({ formikConfig }) => { Logo: - - formik.setFieldValue("logo", newUrl)} + + = ({ formikConfig }) => { council logo ) : ( - {teamName} + Planâś• / {teamSlug} )} diff --git a/editor.planx.uk/src/ui/editor/ImgInput.tsx b/editor.planx.uk/src/ui/editor/ImgInput.tsx index 702121f31c..13cdadc93b 100644 --- a/editor.planx.uk/src/ui/editor/ImgInput.tsx +++ b/editor.planx.uk/src/ui/editor/ImgInput.tsx @@ -30,10 +30,12 @@ export default function ImgInput({ img, onChange, acceptedFileTypes, + backgroundColor, }: { img?: string; onChange?: (newUrl?: string) => void; - acceptedFileTypes?: AcceptedFileTypes + acceptedFileTypes?: AcceptedFileTypes; + backgroundColor?: string; }): FCReturn { const [anchorEl, setAnchorEl] = useState(null); @@ -45,6 +47,11 @@ export default function ImgInput({ // useStore.getState().getTeam().slug undefined here, use window instead const teamSlug = window.location.pathname.split("/")[1]; + const handleRemove = () => { + onChange && onChange(undefined); + setAnchorEl(null); + } + return img ? ( { - onChange && onChange(undefined); - }} + onClick={handleRemove} disabled={!useStore.getState().canUserEditTeam(teamSlug)} > Remove - embedded img + embedded img ) : (