feat: Access team secondary colour via MUI theme (#2646)

* feat: Access team secondary colour via MUI theme * feat: Hasura migration to new structure * chore: Bump planx-core * chore: Pull in `Team` types from `planx-core` * chore: Update queries for new team_themes columns * feat: Update theme with new colours
theopensystemslab · Jan 12, 2024 · e840e7d · e840e7d
1 parent b7e2717
commit e840e7d
Show file tree

Hide file tree

Showing 26 changed files with 136 additions and 113 deletions.
diff --git a/api.planx.uk/package.json b/api.planx.uk/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#af52a96",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b8da594",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",

diff --git a/api.planx.uk/pnpm-lock.yaml b/api.planx.uk/pnpm-lock.yaml
diff --git a/e2e/tests/api-driven/package.json b/e2e/tests/api-driven/package.json
@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#af52a96",
-    "axios": "^1.6.5",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b8da594",
+    "axios": "^1.6.0",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",
     "graphql": "^16.8.1",

diff --git a/e2e/tests/api-driven/pnpm-lock.yaml b/e2e/tests/api-driven/pnpm-lock.yaml
diff --git a/e2e/tests/ui-driven/package.json b/e2e/tests/ui-driven/package.json
@@ -8,8 +8,8 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#af52a96",
-    "axios": "^1.6.5",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b8da594",
+    "axios": "^1.6.2",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
     "graphql": "^16.8.1",

diff --git a/e2e/tests/ui-driven/pnpm-lock.yaml b/e2e/tests/ui-driven/pnpm-lock.yaml
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -14,7 +14,7 @@
     "@mui/styles": "^5.15.2",
     "@mui/utils": "^5.15.2",
     "@opensystemslab/map": "^0.7.5",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#af52a96",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b8da594",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/components/Header.test.tsx b/editor.planx.uk/src/components/Header.test.tsx
@@ -1,10 +1,10 @@
+import { Team } from "@opensystemslab/planx-core/types";
 import { screen } from "@testing-library/react";
 import { vanillaStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { act } from "react-dom/test-utils";
 import * as ReactNavi from "react-navi";
 import { axe, setup } from "testUtils";
-import { Team } from "types";
 
 import flowWithoutSections from "../pages/FlowEditor/lib/__tests__/mocks/flowWithClones.json";
 import flowWithThreeSections from "../pages/FlowEditor/lib/__tests__/mocks/flowWithThreeSections.json";
@@ -18,8 +18,9 @@ const mockTeam1: Team = {
   slug: "opensystemslab",
   theme: {
     logo: "logo.jpg",
-    primary: "#0010A4",
-    secondary: null,
+    primaryColour: "#0010A4",
+    actionColour: "#0010A4",
+    linkColour: "#0010A4",
     favicon: null,
   },
 };

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -565,7 +565,7 @@ const Header: React.FC = () => {
       elevation={0}
       color="transparent"
       ref={headerRef}
-      style={{ backgroundColor: theme?.primary || "#2c2c2c" }}
+      style={{ backgroundColor: theme?.primaryColour || "#2c2c2c" }}
     >
       <Toolbar headerRef={headerRef}></Toolbar>
     </Root>

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
@@ -1,9 +1,11 @@
-import { GeoJSONObject } from "@turf/helpers";
+import {
+  NotifyPersonalisation,
+  Team,
+  TeamSettings,
+  TeamTheme,
+} from "@opensystemslab/planx-core/types";
 import gql from "graphql-tag";
 import { client } from "lib/graphql";
-import { NotifyPersonalisation, TeamSettings } from "types";
-import { TeamTheme } from "types";
-import { Team } from "types";
 import type { StateCreator } from "zustand";
 
 export interface TeamStore {
@@ -13,7 +15,7 @@ export interface TeamStore {
   teamSettings?: TeamSettings;
   teamSlug: string;
   notifyPersonalisation?: NotifyPersonalisation;
-  boundaryBBox?: GeoJSONObject;
+  boundaryBBox?: Team["boundaryBBox"];
 
   setTeam: (team: Team) => void;
   getTeam: () => Team;

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts
@@ -1,7 +1,6 @@
-import { User, UserTeams } from "@opensystemslab/planx-core/types";
+import { Team, User, UserTeams } from "@opensystemslab/planx-core/types";
 import axios from "axios";
 import { _client } from "client";
-import { Team } from "types";
 import type { StateCreator } from "zustand";
 
 export interface UserStore {

diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx
@@ -4,10 +4,10 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { Team } from "@opensystemslab/planx-core/types";
 import React from "react";
 import { Link } from "react-navi";
 
-import type { Team } from "../types";
 import { useStore } from "./FlowEditor/lib/store";
 
 interface Props {

diff --git a/editor.planx.uk/src/pages/layout/PublicLayout.tsx b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
@@ -88,8 +88,8 @@ const PublicFooter: React.FC = () => {
 };
 
 const PublicLayout: React.FC<PropsWithChildren> = ({ children }) => {
-  const teamPrimaryColor = useStore((state) => state.teamTheme?.primary);
-  const teamMUITheme = generateTeamTheme(teamPrimaryColor);
+  const teamTheme = useStore((state) => state.teamTheme);
+  const teamMUITheme = generateTeamTheme(teamTheme);
 
   return (
     <StyledEngineProvider injectFirst>

diff --git a/editor.planx.uk/src/routes/views/published.tsx b/editor.planx.uk/src/routes/views/published.tsx
@@ -72,8 +72,9 @@ const fetchDataForPublishedView = async (
             id
             team {
               theme {
-                primary: primary_colour
-                secondary: secondary_colour
+                primaryColour: primary_colour
+                actionColour: action_colour
+                linkColour: link_colour
                 logo
                 favicon
               }

diff --git a/editor.planx.uk/src/routes/views/standalone.tsx b/editor.planx.uk/src/routes/views/standalone.tsx
@@ -60,8 +60,9 @@ const fetchDataForStandaloneView = async (
             id
             team {
               theme {
-                primary: primary_colour
-                secondary: secondary_colour
+                primaryColour: primary_colour
+                actionColour: action_colour
+                linkColour: link_colour
                 logo
                 favicon
               }

diff --git a/editor.planx.uk/src/routes/views/unpublished.tsx b/editor.planx.uk/src/routes/views/unpublished.tsx
@@ -63,8 +63,9 @@ const fetchDataForUnpublishedView = async (
             id
             team {
               theme {
-                primary: primary_colour
-                secondary: secondary_colour
+                primaryColour: primary_colour
+                actionColour: action_colour
+                linkColour: link_colour
                 logo
                 favicon
               }

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -13,8 +13,11 @@ import createPalette, {
   PaletteOptions,
 } from "@mui/material/styles/createPalette";
 import { deepmerge } from "@mui/utils";
+import { TeamTheme } from "@opensystemslab/planx-core/types";
+import { getContrastTextColor } from "styleUtils";
 
 const DEFAULT_PRIMARY_COLOR = "#0010A4";
+const DEFAULT_TONAL_OFFSET = 0.2;
 
 // Type styles
 export const FONT_WEIGHT_SEMI_BOLD = "600";
@@ -38,6 +41,15 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
     primary: "#0B0C0C",
     secondary: "#505A5F",
   },
+  link: {
+    main: DEFAULT_PRIMARY_COLOR
+  },
+  prompt: {
+    main: DEFAULT_PRIMARY_COLOR,
+    contrastText: "#FFFFFF",
+    light: lighten(DEFAULT_PRIMARY_COLOR, DEFAULT_TONAL_OFFSET),
+    dark: darken(DEFAULT_PRIMARY_COLOR, DEFAULT_TONAL_OFFSET),
+  },
   action: {
     selected: "#F8F8F8",
     focus: "#FFDD00",
@@ -57,6 +69,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
     input: "#0B0C0C",
     light: "#E0E0E0",
   },
+  tonalOffset: DEFAULT_TONAL_OFFSET,
 };
 
 // GOVUK Focus style
@@ -85,8 +98,8 @@ export const borderedFocusStyle = {
   background: "transparent",
 };
 
-export const linkStyle = (primaryColor?: string) => ({
-  color: primaryColor || "inherit",
+export const linkStyle = (linkColour: string) => ({
+  color: linkColour || "inherit",
   textDecoration: "underline",
   textDecorationThickness: "1px",
   textUnderlineOffset: "0.1em",
@@ -100,10 +113,19 @@ export const linkStyle = (primaryColor?: string) => ({
   "&:focus-visible": focusStyle,
 });
 
-const getThemeOptions = (primaryColor: string): ThemeOptions => {
+const getThemeOptions = ({ primaryColour, linkColour, actionColour}: TeamTheme): ThemeOptions => {
   const teamPalette: Partial<PaletteOptions> = {
     primary: {
-      main: primaryColor,
+      main: primaryColour,
+    },
+    link: {
+      main: linkColour,
+    },
+    prompt: {
+      main: actionColour,
+      light: lighten(actionColour, DEFAULT_TONAL_OFFSET),
+      dark: darken(actionColour, DEFAULT_TONAL_OFFSET),
+      contrastText: getContrastTextColor(actionColour, "#FFF")!,
     },
   };
   const palette = createPalette(deepmerge(DEFAULT_PALETTE, teamPalette));
@@ -337,7 +359,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
       MuiLink: {
         styleOverrides: {
           root: {
-            ...linkStyle(palette.primary.main),
+            ...linkStyle(palette.link.main),
             "&:disabled": {
               color: palette.text.disabled,
               cursor: "default",
@@ -430,14 +452,20 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
 
 // Generate a MUI theme based on a team's primary color
 const generateTeamTheme = (
-  primaryColor: string = DEFAULT_PRIMARY_COLOR,
+  teamTheme: TeamTheme = {
+    primaryColour: DEFAULT_PRIMARY_COLOR,
+    actionColour: DEFAULT_PRIMARY_COLOR,
+    linkColour: DEFAULT_PRIMARY_COLOR,
+    logo: null,
+    favicon: null,
+  },
 ): MUITheme => {
-  const themeOptions = getThemeOptions(primaryColor);
+  const themeOptions = getThemeOptions(teamTheme);
   const theme = responsiveFontSizes(createTheme(themeOptions), { factor: 3 });
   return theme;
 };
 
 // A static MUI theme based on PlanX's default palette
-const defaultTheme = generateTeamTheme(DEFAULT_PRIMARY_COLOR);
+const defaultTheme = generateTeamTheme();
 
 export { defaultTheme, generateTeamTheme };
diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -25,10 +25,14 @@ declare module "@mui/material/styles" {
 declare module "@mui/material/styles/createPalette" {
   interface Palette {
     border: { main: string; input: string; light: string };
+    link: { main: string; };
+    prompt: { main: string; contrastText: string; light: string; dark: string; };
   }
 
   interface PaletteOptions {
     border?: { main: string; input: string; light: string };
+    link?: { main: string; };
+    prompt?: { main: string; contrastText: string; light: string; dark: string; };
   }
 }
 
@@ -37,4 +41,8 @@ declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     help: true;
   }
+
+  interface ButtonPropsColorOverrides {
+    prompt: true;
+  }
 }