feat: Wire up design settings (theme colour & logo) #2660

DafyddLlyr · 2024-01-12T15:15:54Z

What does this PR do?

Split up DesignSettings component into reusable components
Wire up theme and logo form. This PR is primarily concerned with updating values in DB and primaryColour in theme, but is implemented throughout the application consistently in feat: Apply theme colours across app #2658
SHOW_TEAM_SETTINGS feature flag still required

To test

I can update theme colour
I can update logo
Preview is "live" and works as expected
"Reset" button works as expected

github-actions · 2024-01-12T15:39:20Z

Removed vultr server and associated DNS entries

## What does this PR do? - Adds new `team.updateTheme()` method - Implemented in theopensystemslab/planx-new#2660

DafyddLlyr · 2024-01-16T16:42:48Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx

+  useEffect(() => {
+    setInitialValues({
+      primaryColour: team.theme?.primaryColour,
+      logo: team.theme?.logo,
+    })
+  }, [team])
+
+  const [initialValues, setInitialValues] = useState<FormValues>({
+    primaryColour: "",
+    logo: "",
+  })


This feels a bit awkward but was the best way I could get the form to handle async initial values from outside the component. Without this the form reverted to its initial state on reset (even after a successful "Save").

DafyddLlyr · 2024-01-16T16:44:57Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx

+  useEffect(() => {
+    const fetchTeam = async () => {
+      try {
+        const fetchedTeam = await useStore.getState().fetchCurrentTeam();


We need to get the team from the DB as the currently held team in the store does not include the theme. If we fetch the theme initially, it's them live throughout the Editor (e.g. the header changes colour when navigating from team to team).

This could be resolved and simplified, I'll either revist as another PR or open an issue.

DafyddLlyr · 2024-01-16T16:45:39Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx

+          <ButtonForm />
+          <TextLinkForm />
+          <FaviconForm />


ButtonForm, FaviconForm and TextLinkForm are currently still placeholders are will be wired up in follow-up PR sbranched from this one. The current PR is big enough as is!

DafyddLlyr · 2024-01-17T08:39:41Z

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx

+          <ButtonForm />
+          <TextLinkForm />
+          <FaviconForm />
+          <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>


If we're happy with this approach of using Snackbar within the Editor for notifications we might want to move this to a higher level and set up a service to call it in various child components as opposed to repeating it in multiple places.

Snackbar works really well in this scenario!

DafyddLlyr · 2024-01-17T09:26:38Z

Allow Editors up upload team logo via Editor

DafyddLlyr · 2024-01-17T09:27:11Z

Allow Editors to set theme color via Editor

Mike-Heneghan

Looks great and working as expected for me 👍

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch from ef44ac5 to 3234a3c Compare January 12, 2024 16:10

DafyddLlyr mentioned this pull request Jan 15, 2024

feat: Add team.updateTheme() theopensystemslab/planx-core#260

Merged

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch 2 times, most recently from 1cff2e6 to efa2225 Compare January 15, 2024 09:55

DafyddLlyr changed the base branch from main to dp/add-client-to-store January 15, 2024 09:59

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch from efa2225 to caada89 Compare January 15, 2024 10:01

DafyddLlyr force-pushed the dp/add-client-to-store branch from 690e931 to 8a01411 Compare January 15, 2024 10:20

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch from caada89 to 28b192c Compare January 15, 2024 10:21

DafyddLlyr force-pushed the dp/add-client-to-store branch from 8a01411 to 15b47a4 Compare January 15, 2024 10:29

DafyddLlyr added a commit to theopensystemslab/planx-core that referenced this pull request Jan 15, 2024

feat: Add team.updateTheme() (#260)

5ebe16b

## What does this PR do? - Adds new `team.updateTheme()` method - Implemented in theopensystemslab/planx-new#2660

DafyddLlyr mentioned this pull request Jan 15, 2024

fix: Move client to store to avoid circular dependencies #2661

Merged

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch from 28b192c to 958a633 Compare January 15, 2024 10:43

DafyddLlyr force-pushed the dp/add-client-to-store branch from 15b47a4 to bfa2fc4 Compare January 15, 2024 15:39

Base automatically changed from dp/add-client-to-store to main January 16, 2024 15:33

DafyddLlyr added 5 commits January 16, 2024 15:43

feat: Access team secondary colour via MUI theme

d7a8c00

feat: Refeactor into more generic components

6467b08

feat: Add ErrorWrapper

d73a286

chore: Bump planx-core

24e919d

feat: Basic theme and logo updating

b81cbb5

DafyddLlyr force-pushed the dp/wire-up-team-design-form branch from 958a633 to b81cbb5 Compare January 16, 2024 15:43

DafyddLlyr changed the title ~~feat(wip): Wire up design settings (theme colour & logo)~~ feat: Wire up design settings (theme colour & logo) Jan 16, 2024

DafyddLlyr commented Jan 16, 2024

View reviewed changes

DafyddLlyr added 2 commits January 16, 2024 16:46

fix: From -> Form

15925c4

feat: Add snackbar

148f9c0

DafyddLlyr marked this pull request as ready for review January 16, 2024 17:07

DafyddLlyr requested a review from a team January 16, 2024 17:07

DafyddLlyr mentioned this pull request Jan 17, 2024

feat: Wire up design settings (button colour) #2669

Merged

DafyddLlyr mentioned this pull request Jan 17, 2024

feat: Wire up design settings (text link colour) #2670

Merged

DafyddLlyr commented Jan 17, 2024

View reviewed changes

ianjon3s approved these changes Jan 17, 2024

View reviewed changes

Mike-Heneghan approved these changes Jan 17, 2024

View reviewed changes

DafyddLlyr merged commit 6fe38c4 into main Jan 17, 2024
12 checks passed

DafyddLlyr deleted the dp/wire-up-team-design-form branch January 17, 2024 16:34

DafyddLlyr restored the dp/wire-up-team-design-form branch January 17, 2024 16:34

DafyddLlyr deleted the dp/wire-up-team-design-form branch January 17, 2024 16:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Wire up design settings (theme colour & logo) #2660

feat: Wire up design settings (theme colour & logo) #2660

DafyddLlyr commented Jan 12, 2024 •

edited

Loading

github-actions bot commented Jan 12, 2024 •

edited

Loading

DafyddLlyr Jan 16, 2024

DafyddLlyr Jan 16, 2024

DafyddLlyr Jan 16, 2024

DafyddLlyr Jan 17, 2024

ianjon3s Jan 17, 2024

DafyddLlyr commented Jan 17, 2024

DafyddLlyr commented Jan 17, 2024

Mike-Heneghan left a comment

feat: Wire up design settings (theme colour & logo) #2660

feat: Wire up design settings (theme colour & logo) #2660

Conversation

DafyddLlyr commented Jan 12, 2024 • edited Loading

What does this PR do?

To test

github-actions bot commented Jan 12, 2024 • edited Loading

DafyddLlyr Jan 16, 2024

Choose a reason for hiding this comment

DafyddLlyr Jan 16, 2024

Choose a reason for hiding this comment

DafyddLlyr Jan 16, 2024

Choose a reason for hiding this comment

DafyddLlyr Jan 17, 2024

Choose a reason for hiding this comment

ianjon3s Jan 17, 2024

Choose a reason for hiding this comment

DafyddLlyr commented Jan 17, 2024

DafyddLlyr commented Jan 17, 2024

Mike-Heneghan left a comment

Choose a reason for hiding this comment

DafyddLlyr commented Jan 12, 2024 •

edited

Loading

github-actions bot commented Jan 12, 2024 •

edited

Loading