feat: Use ImgInput for logo upload (#2685)

* feat: Use ImgInput for logo upload * chore: PR feedback
theopensystemslab · Jan 22, 2024 · 61b9781 · 61b9781
1 parent bbc20ab
commit 61b9781
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 16 deletions.
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
@@ -27,8 +27,8 @@ export const ButtonForm: React.FC<FormProps> = ({ formikConfig }) => {
             the selected colour (being either black or white).
           </InputDescription>
           <InputDescription>
-            <Link href="https://www.planx.uk">
-              See our guide for setting button colours
+            <Link href="#">
+              See our guide for setting button colours (TODO)
             </Link>
           </InputDescription>
         </>

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
@@ -29,7 +29,7 @@ export const FaviconForm: React.FC<FormProps> = ({ formikConfig }) => {
             32x32px and in .ico or .png format.
           </InputDescription>
           <InputDescription>
-            <Link href="https://www.planx.uk">See our guide for favicons</Link>
+            <Link href="#">See our guide for favicons (TODO)</Link>
           </InputDescription>
         </>
       }

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
@@ -39,8 +39,8 @@ export const TextLinkForm: React.FC<FormProps> = ({ formikConfig }) => {
             white ("#ffffff").
           </InputDescription>
           <InputDescription>
-            <Link href="https://www.planx.uk">
-              See our guide for setting text link colours
+            <Link href="#">
+              See our guide for setting text link colours (TODO)
             </Link>
           </InputDescription>
         </>

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
@@ -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<FormProps> = ({ formikConfig }) => {
   const theme = useTheme();
-  const teamName = useStore((state) => state.teamName);
+  const teamSlug = useStore((state) => state.teamSlug);
 
   const formik = useFormik<TeamTheme>({
     ...formikConfig,
@@ -34,6 +34,10 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({ formikConfig }) => {
     },
   });
 
+  const updateLogo = (newFile: string | undefined) => newFile
+    ? formik.setFieldValue("logo", newFile)
+    : formik.setFieldValue("logo", null);
+
   return (
     <SettingsForm
       formik={formik}
@@ -68,9 +72,15 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({ formikConfig }) => {
           </InputRow>
           <InputRow>
             <InputRowLabel>Logo:</InputRowLabel>
-            <InputRowItem width={50}>
-              <PublicFileUploadButton
-                onChange={(newUrl) => formik.setFieldValue("logo", newUrl)}
+            <InputRowItem width={formik.values.logo ? 90 : 50}> 
+              <ImgInput
+                backgroundColor={formik.values.primaryColour}
+                img={formik.values.logo || undefined}
+                onChange={updateLogo}
+                acceptedFileTypes={{
+                  "image/png": [".png"],
+                  "image/svg+xml": [".svg"],
+                }}
               />
             </InputRowItem>
             <Typography
@@ -90,7 +100,7 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({ formikConfig }) => {
             <img width="140" src={formik.values.logo} alt="council logo" />
           ) : (
             <Typography color={theme.palette.primary.contrastText}>
-              {teamName}
+              Plan✕ / {teamSlug}
             </Typography>
           )}
         </DesignPreview>

diff --git 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<HTMLButtonElement | null>(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 ? (
     <ImageUploadContainer>
       <StyledIconButton
@@ -71,15 +78,19 @@ export default function ImgInput({
           View
         </MenuItem>
         <MenuItem
-          onClick={() => {
-            onChange && onChange(undefined);
-          }}
+          onClick={handleRemove}
           disabled={!useStore.getState().canUserEditTeam(teamSlug)}
         >
           Remove
         </MenuItem>
       </Menu>
-      <img width={50} height={50} src={img} alt="embedded img" />
+      <img 
+        width={50} 
+        height={50} 
+        src={img} 
+        alt="embedded img" 
+        style={{ display: "block", backgroundColor: backgroundColor }}
+      />
     </ImageUploadContainer>
   ) : (
     <Tooltip title="Drop file here">