feat: Basic theme and logo updating

theopensystemslab · Jan 15, 2024 · 1cff2e6 · 1cff2e6
1 parent 1d16483
commit 1cff2e6
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 23 deletions.
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
@@ -1,25 +1,53 @@
 import Link from "@mui/material/Link";
+import { getContrastRatio, useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { Team, TeamTheme } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import React from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect, useState } from "react";
 import ColorPicker from "ui/editor/ColorPicker";
 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, EXAMPLE_COLOUR, SettingsForm } from ".";
+import { DesignPreview, SettingsForm } from ".";
 
-export const ThemeAndLogoForm: React.FC = () => {
-  const formik = useFormik<{
-    themeColor: string;
-  }>({
-    initialValues: {
-      themeColor: EXAMPLE_COLOUR,
+type FormValues = Pick<TeamTheme, "primaryColour" | "logo">;
+
+export const ThemeAndLogoForm: React.FC<{ team: Team }> = ({ team }) => {
+  const theme = useTheme();
+
+  useEffect(() => {
+    setInitialValues({
+      primaryColour: team.theme?.primaryColour,
+      logo: team.theme?.logo,
+    })
+  }, [team])
+
+  const [initialValues, setInitialValues] = useState<FormValues>({
+    primaryColour: "",
+    logo: "",
+  })
+
+  const formik = useFormik<FormValues>({
+    initialValues,
+    onSubmit: async (values, { resetForm }) => {
+      await useStore.getState().updateTeamTheme(values);
+      // 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;
+
+      if (!isContrastThresholdMet) {
+        return { primaryColour: "Theme colour does not meet accessibility contrast requirements (3:1)"}
+      };
     },
-    onSubmit: () => {},
-    validate: () => {},
   });
 
   return (
@@ -46,16 +74,16 @@ export const ThemeAndLogoForm: React.FC = () => {
           <InputRow>
             <InputRowItem>
               <ColorPicker
-                color={formik.values.themeColor}
-                onChange={(color) => formik.setFieldValue("themeColor", color)}
+                color={formik.values.primaryColour}
+                onChange={(color) => formik.setFieldValue("primaryColour", color)}
                 label="Theme colour"
               />
             </InputRowItem>
           </InputRow>
           <InputRow>
             <InputRowLabel>Logo:</InputRowLabel>
             <InputRowItem width={50}>
-              <PublicFileUploadButton />
+              <PublicFileUploadButton onChange={(newUrl) => formik.setFieldValue("logo", newUrl)}/>
             </InputRowItem>
             <Typography
               color="text.secondary"
@@ -69,12 +97,15 @@ export const ThemeAndLogoForm: React.FC = () => {
         </>
       }
       preview={
-        <DesignPreview bgcolor={EXAMPLE_COLOUR}>
-          <img
-            width="140"
-            src="https://raw.githubusercontent.com/theopensystemslab/planx-team-logos/main/barnet.svg"
-            alt="council logo"
-          />
+        <DesignPreview bgcolor={formik.values.primaryColour}>
+          { formik.values.logo 
+            ? <img
+              width="140"
+              src={formik.values.logo}
+              alt="council logo"
+            />
+            : <Typography color={theme.palette.primary.contrastText}>{team?.name}</Typography>
+          }
         </DesignPreview>
       }
     />

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
@@ -2,9 +2,11 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { Team } from "@opensystemslab/planx-core/types";
 import { FormikProps, getIn } from "formik";
 import { hasFeatureFlag } from "lib/featureFlags";
-import React from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect, useState } from "react";
 import EditorRow from "ui/editor/EditorRow";
 import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 import InputGroup from "ui/editor/InputGroup";
@@ -32,6 +34,26 @@ type SettingsFormProps = {
   preview?: React.ReactElement;
 };
 
+const useTeam = () => {
+  const [team, setTeam] = useState<Team>({} as Team);
+
+  useEffect(() => {
+    const fetchTeam = async () => {
+      try {
+        const fetchedTeam = await useStore.getState().fetchCurrentTeam();
+        if (!fetchedTeam) throw Error("Unable to find team");
+        setTeam(fetchedTeam);
+      } catch (error) {
+        console.error("Error fetching team:", error);
+      }
+    };
+
+    fetchTeam();
+  }, []);
+
+  return team;
+};
+
 export const SettingsForm: React.FC<SettingsFormProps> = ({
   formik,
   legend,
@@ -79,6 +101,7 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
 
 const DesignSettings: React.FC = () => {
   const isUsingFeatureFlag = hasFeatureFlag("SHOW_TEAM_SETTINGS");
+  const team = useTeam();
 
   return (
     <>
@@ -96,7 +119,7 @@ const DesignSettings: React.FC = () => {
         </EditorRow>
       ) : (
         <>
-          <ThemeAndLogoForm />
+          <ThemeAndLogoForm team={team} />
           <ButtonForm />
           <TextLinkForm />
           <FaviconForm />

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
@@ -112,7 +112,6 @@ export const teamStore: StateCreator<TeamStore & SharedStore, [], [], TeamStore>
   fetchCurrentTeam: async () => {
     const { teamSlug, _client } = get()
     const team = await _client.team.getBySlug(teamSlug);
-    console.log({team})
     return team;
   },
 

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -16,8 +16,8 @@ import { deepmerge } from "@mui/utils";
 import { TeamTheme } from "@opensystemslab/planx-core/types";
 import { getContrastTextColor } from "styleUtils";
 
-const DEFAULT_TONAL_OFFSET = 0.2;
 const DEFAULT_PRIMARY_COLOR = "#0010A4";
+const DEFAULT_TONAL_OFFSET = 0.2;
 
 // Type styles
 export const FONT_WEIGHT_SEMI_BOLD = "600";